Bootstrap--全局CSS样式之排版

Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式。

(1)标题

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

代码如下:

Code

   <div class="container">
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>

    </div>

结果如下:

其实就是html元素标签的h1-h6.不过,在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

Code

<div class="container">
        <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
        <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
        <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
        <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
        <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
        <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
    </div>

(2)页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

实例

Code

  <div class="container">
        <p>
            Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

            Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
        </p>
    </div>

(3)中心内容

通过添加 .lead 类可以让段落突出显示。

Code

  <div class="container">
        <div class="lead">
            Welcome to our world
        </div>
        <p>
            Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
             Nullam id dolor id nibh ultricies vehicula.
        </p>
    </div>

(4 )内联文本元素

通过添加 <mark>标签可以为元素添加背景颜色并高亮文本。

实例:

Code

    <div class="container">
        <div class="lead">
            Welcome to our <mark>world</mark>
        </div>

    </div>

在上面的结果中,world背景颜色变成了#fcf8e3,图片上看不清,大家可以在自己的浏览器中查看下,而且world也被高亮了。

(5)被删除的文本

我们要显示某些被删除的文本,可以使用<del>标签。

实例:

Code

 <div class="container">
        <div class="lead">
            Welcome to our <mark>world</mark>
            <p>hello everybody <del>this is delete</del></p>
        </div>

    </div>
   

(6)无用文本

对于没有用的文本我们可以使用<s>标签。

实例:

Code

 <div class="container">
        <div class="lead">
            Welcome to our <mark>world</mark>
            <p>hello everybody <del>this is delete</del></p>

            <s>This line of text is meant to be treated as no longer accurate.</s>
        </div>

    </div>

对于这个<s>标签的结果我没有看出来和上面那个<del>标签的结果有什么不同,也许只是表达方式不同吧,有知道有什么不同的大神,请告知。下面的插入文本和带下划线的文本也是。

(7)插入文本

额外插入的文本使用 <ins> 标签。

实例:

Code

<div class="container">
        <ins>Welcome to our world</ins>
    </div>
   

(8)带下划线的文本

为文本添加下划线,使用 <u> 标签。

Code

<div class="container">
      <ins>Welcome to our world</ins>
        <br />
         <u>Welcome to our world</u>
    </div>

(9)对齐

通过文本对齐类text-*,可以简单方便的将文字重新对齐。

实例:

Code

 <div class="container">
        <p class="text-left">Left aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-right">Right aligned text.</p>
        <p class="text-justify">Justified text.</p>
        <p class="text-nowrap">No wrap text.</p>
    </div>

(10)改变大小写

通过下面几个类改变文本的大小写。

Code

  <div class="container">
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>
    </div>

(11)地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

Code

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

对于其他的排版内容,大家可以查看官方文档。谢谢

时间: 2024-10-02 18:12:21

Bootstrap--全局CSS样式之排版的相关文章

Bootstrap全局CSS样式之排版

Bootstrap能完全友好的支持html5的文本元素,这里不再赘述,具体可参考我另一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. .small--当前元素字体大小的 85%,常用作副标题时,也可用<small>来代替: .lead--让段落突出显示; .text-left..text-center..text-right--将文字于左.居中.于右对齐: .text-lowercase..text-uppercase..text

bootstrap全局CSS样式学习

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置.在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可. 同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css. bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中.共有两个有此作用的class .container 类用于固定宽度并支持响应

2.Bootstrap 全局CSS样式和字体图标

一.全局CSS样式 1.html5文档类型,标准,参照下面的进行设置 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.移动设备优先 bootstrap是移动设备优先的! 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签. <meta name="viewport" content="width=device-width

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

Bootstrap全局CSS样式之按钮和图片

.btn-default--按钮的默认样式: .btn-primary--按钮的首选样式: .btn-success--按钮的成功样式: .btn-info--按钮的一般信息样式:' .btn-warning--按钮的警告样式: .btn-danger--按钮的危险样式: .btn-link--按钮的链接样式: .btn-lg--大按钮样式: .btn-sm--小按钮样式: .btn-xs--超小按钮样式: .btn-block--将按钮设置为充满父元素: .active--设置按钮为激活状态:

Bootstrap全局CSS样式之栅格系统

.col-xs-*--栅格列,适用于手机(<768px); .col-sm-*--栅格列,适用于平板(≥768px); .col-md-*--栅格列,适用于桌面显示器 (≥992px): .col-lg-*--栅格列,适用于大桌面显示器(≥1200px): .col-md-offset-*--向右偏移列: .col-md-push-*..col-md-pull-*--改变列的排序: <!DOCTYPE html> <html lang="en"> <

Bootstrap全局CSS样式之表格

.table--基础表格样式: .table-striped--给<tbody>之内的每一行增加斑马条纹样式: .table-bordered--为表格增加边框: .table-hover--为<tbody>之内的每一行作悬停效果: .table-condensed--让表格更加紧凑,单元格中的内补(padding)均会减半. .active--鼠标悬停在行或单元格上时所设置的颜色: .success--标识成功或积极的动作: .info--标识普通的提示信息或动作: .warni

Bootstrap全局CSS样式之表单

.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%: .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时: .sr-only--将label标签隐藏: .help-block--用于设置提示文本: .form-horizontal--可以将label标签和控件组水平并排布局: .radio-inline..checkbox-inline-

bootstrap全局css样式

以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ .hidden-xs { display: none!important; } } @media (max-width: 991px) and (min-width: 768px){ .hidden-sm { display: none!important; } } @media (min-widt

Bootstrap——全局CSS样式

1.栅格系统 containter:用于固定宽度并支持响应式布局的容器 container-fluid:用于100%宽度,占据全部视口(viewport)的容器 row:行,必须在container或container-fluid之内 col-md/xs-*:设置块的列宽 col-md/xs-offset-*:列偏移 col-md-push/pull:推/拉 2.排版 <h1><h6>:尺寸 <small>:副标题 <p></p>:段落 lead