1.标题

HTML中的所有标题标签，从<h1> 到 <h6> 均可用。另外，还提供了.h1 到.h6 class，为的是给inline属性的文本赋予标题的样式。

在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。

2.页面主体

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

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

对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。

你还可以为行内元素赋予.small以代替任何<small>标签。

通过增加font-weight 来着重强调一段文本。

用斜体强调一段文本：<em>rendered as italicized text</em>

还可以使用HTML5中定义的<b> 和 <i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示，<i>大部分用于发言、技术短语等情况。

3.对齐class。

通过文本对齐class，可以简单方便的将文本对齐。‘text-left’‘text-center’‘text-right’

4.强调class

text-primary,text-warning,等class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。

5.缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

基本的缩略语：如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

为缩略语添加.initialism可以将其font-size设置的更小些

6.地址：

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

<address>

  <strong>长安大街.</strong><br>

  第三大胡同<br>

  门牌号 CA 94107<br>

  <abbr title="Phone">P:</abbr> 010-667788</address>

<address>

  <strong>Full Name</strong><br>

  <a href="mailto:#">first.last@example.com</a></address>

　　

7.引用：

将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用，建议用<p>标签。

对于标准样式的<blockquote>，可以通过几个简单的变体就能改变风格和内容：

添加<small>标签或.small class 来注明引用来源。来源名称可以放在<cite>标签里面。

 <blockquote>

   <p>锄禾日当午，汗滴禾下土</p>

   <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>

 使用.pull-right可以让引用展现出向右侧移动、对齐的效果

 <blockquote class=‘pull-right’>

   <p>锄禾日当午，汗滴禾下土</p>

   <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>

8.列表：无序列表，有序列表，

无样式列表：添加 .list-unstyled; 移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

内联列表：通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

dl-dt-dd:

水平排列的描述：.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起，随着导航条逐渐展开而排列在一样。 其中有个自动截断：通过text-overflow，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

有关bootstrap之排版的更多相关文章

  1. bootstrap之排版类

    bootstrap之排版类

  2. Bootstrap 一. 排版样式（内联文本元素，对齐，大小写，缩略语，地址文本，引用文本，列表排版 ，代码 ）

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  3. Bootstrap文本排版基础--Bootsrap

    1.排版前的基础 (1)移动设备优先 <meta name="viewport" content="width=device-width, initial-scal ...

  4. bootstrap之排版样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Bootstrap(2) 排版样式

    1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 1 ...

  6. Bootstrap学习-排版

    1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...

  7. bootstrap css排版

    smart-form 单行元素: 一般用div包含,class="row" 列元素:用section包含,class="col col-x"(section带有 ...

  8. Bootstrap学习-排版-表单

    1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...

  9. Bootstrap关于排版

    1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式 2.使用了<small>标签来制 ...

随机推荐

  1. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  2. 20161022 NOIP模拟赛 解题报告

     好元素 [问题描述] 小A一直认为,如果在一个由N个整数组成的数列{An}中,存在以下情况: Am+An+Ap = Ai (1 <= m, n, p < i <= N ,  m,n ...

  3. bzoj1024搜索

    进度1/10mark(感觉完不成了) 事实上我刚看到题目一下子慌了,,,我在想怎么二分一块的长宽,然后验证 然而极其难写 于是想有没有暴力,举一些例子模拟一下 然后发现切割是有很明显的限制的:每次切割 ...

  4. SPOJ FASTFLOW网络流水题

    Dinic=bfs+dfs  = = 用bfs算出到原点的最短路径(每条残存都算1) 然后每次都跑两端只差1的路径跑dfs,并且一直跑到不能跑 一个优化:如果一个点流出的量已经到流入量了就可以返回上一 ...

  5. 谷歌浏览器如何查看或获取Cookie字符串

    注:此博客仅供非web开发人员查看,以下内容都基于谷歌浏览器. 在网页空白处点击鼠标右键,在弹出菜单中选择[审查元素],可以看到网页下方出现审查元素相关界面. 在审查元素相关界面,点击[Network ...

  6. 使用VisualVM分析性能

    性能分析神器VisualVM VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量 ...

  7. 算法_bitmap算法

    概述 所谓bitmap就是用一个bit位来标记某个元素对应的value,而key即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间     算法思想 32位机器上,一个整形,比 ...

  8. MSSQL数据库表加锁

    所指定的表级锁定提示有如下几种: 1． HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2． NOLOCK:不添加共享锁和排它锁,当这个选项生效后,可 ...

  9. ie浏览器下，get请求缓存问题

    1 使用get请求数据 1)Java代码 $.getJSON("sortShow!sortShow?time="+new Date().getTime(),function(){} ...

  10. https://oj.leetcode.com/problems/majority-element/

    Given an array of size n, find the majority element. The majority element is the element that appear ...