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 设置为 14px，line-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:#">first.last@example.com</a>

</address>

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

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

  1. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  2. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  3. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  5. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  6. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  7. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. bootstrap全局css样式

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

  10. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. Spring-boot 配置Aop获取controller里的request中的参数以及其返回值

    首先在你的Maven的pom文件里加入aop的依赖: <dependency> <groupId>org.springframework.boot</groupId> ...

  2. Timer计时不准确的解决方案 每次都重新调整，修正误差

    http://stackoverflow.com/questions/29722838/system-timers-timer-steadily-increasing-the-interval 需要在 ...

  3. 解决MySQL服务启动时报1067错误

    工具/原料 MySQL_5.6.24_win32 方法/步骤 当我们安装完Mysql时,如果在服务当中(可以在“运行”-->"service.msc"打开并查看)无法看到My ...

  4. zabbix通过jmx监控tomcat

    Zabbix版本: Zabbix 3.0.2 一.服务端配置 1.安装jdk(版本1.7.0_79) 安装与配置比较简单,过程省略.执行java -version命令,出现类似界面表示成功.   2. ...

  5. GIS大讲堂内所有讲座的索引（更新至2008年6月26日）(转)

    转自:http://www.cnblogs.com/xiexiaokui/archive/2008/11/20/1337934.html GIS大讲堂内所有讲座的索引(更新至2008年6月26日)   ...

  6. （转载）C++中, 构造函数和析构函数能不能被显示调用?

    (转载)http://blog.csdn.net/zhangxinrun/article/details/6056321 代码: view plaincopy to clipboardprint?#i ...

  7. Devexpress GridView部分常用操作总结 z

    一:Clone返回新的 DataTable Clone返回新的 DataTable,与当前的 DataTable 具有相同的架构:Copy:返回新的 DataTable,它具有与该 DataTable ...

  8. Exists与In效率分析

    A: In:是把外表和内表做Hash 连接,而exists 是对外表作loop 循环,每次loop循环再对内表进行查询. 当查询两个表的大小相当时,用In 和 exists差别不大. 如果两个表中一个 ...

  9. Windows下，通过程序设置全屏抗锯齿（多重采样）的方法

    这里说的全屏抗锯齿,不是基于着色器的FXAA之类的方式,而是兼容性更好的,基于固定管线的多重采样方式. 先来说一下开发环境,我用的是VC2013+GLEW1.11. 要通过程序设置多重采样,首先需要进 ...

  10. 存储过程实例总结(开发中的错误与总结,调试,数据库函数DATEDIFF计算当前日期是否在本周内)

    USE [POND] GO /****** Object: StoredProcedure [dbo].[OrderChargeList] Script Date: 04/16/2014 13:32: ...