Bootstrap通过重写HTML默认样式，实现对页面版式的优化，以适应当前网页信息呈现的流行趋势。
在Bootstrap中，HTML定义的所有标题标签都是可用的，从h1到h6。Bootstrap标题样式进行了显著的优化：
重设上下边界为固定值，默认是一个行高距离，优化后统一为上为20像素，下为10像素，且不分标题级别，全部统一样式固定所有标题行高为1.1，避免行高因标题字体大小而变化，同时也避免不同级别标题行高不一致，影响版式风格固定不同级别标题字体大小，一级为36px、二级为30px、三级24px、四级为18px、五级为14px、六级为12pxBootstrap提供了h1到h6的class，方便为任何标签文本赋予标题样式，例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题样式</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div class="h1">一级标题样式</div> <div class="h2">二级标题样式</div> <div class="h3">三级标题样式</div> <div class="h4">四级标题样式</div> <div class="h5">五级标题样式</div> <div class="h6">六级标题样式</div> </body> </html>Bootstrap提供了一套small标题样式，只要在标题文本外包裹一层small标签即可。small标题风格取消了字体粗体样式，设置字体颜色为浅灰色，行高为1。修改一级、二级、三级标题的small风格大小为65%，四级、五级、六级标题的small风格大小为75%：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>small风格标题样式</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h1><small>一级标题</small></h1> <h2><small>二级标题</small></h2> <h3><small>三级标题</small></h3> <h4><small>四级标题</small></h4> <h5><small>五级标题</small></h5> <h6><small>六级标题</small></h6> </body> </html>Bootstrap定义页面字体默认风格：font-size为14px，line-height为1.428，color为#333333，background-color为#ffffff。在默认情况下，p标签上下外边距保持一个行高的高度，而在Bootstrap中定义p标签为1/2行高（10px）的底部外边距（margin）属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本样式</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h1>山居秋暝</h1> <h2><small>王维</small></h2> <p>空山新雨后，天气晚来秋。</p> <p>明月松间照，清泉石上流。</p> <p>竹喧归浣女，莲动下渔舟。</p> <p>随意春芳歇，王孙自可留。</p> </body> </html>添加lead类样式可以定义段落突出显示，被突出的段落文本字体被放大，字据和行高也被显著放大：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本样式放大</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h1>山居秋暝</h1> <h2><small>王维</small></h2> <p class="lead">空山新雨后，天气晚来秋。</p> <p>明月松间照，清泉石上流。</p> <p>竹喧归浣女，莲动下渔舟。</p> <p>随意春芳歇，王孙自可留。</p> </body> </html>HTML定义了3个表示强调的标签：
em：显示为斜体样式，侧重于语义b：显示为粗体样式，侧重于表现视觉strong：显示为粗体样式，侧重于语义Bootstrap3.0定义了一套强调类，这些表示强调的工具类通过颜色进行区分：
text-muted：提示，浅灰色text-primary：主要，蓝色text-success：成功，浅绿色text-info：通知信息，浅蓝色text-warning：警告，浅黄色text-danger：危险，浅红色这类样式也可以应用于链接，当鼠标指针经过链接的时候，其颜色会变深。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>强调类</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <p class="text-muted">提示：浅灰色</p> <p class="text-primary">主要：蓝色</p> <p class="text-success">成功：绿色</p> <p class="text-info">提示信息：浅蓝色</p> <p class="text-warning">警告：浅黄色</p> <p class="text-danger">危险：浅红色</p> </body> </html>对于不需要强调的文本，使用small标签包裹，其文本将被设置父容器大小的85%，也可以为行内元素定义.small类，以代替small标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>强调类</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <p class="text-muted small">提示：浅灰色</p> <p class="text-primary small">主要：蓝色</p> <p class="text-success small">成功：绿色</p> <p class="text-info small">提示信息：浅蓝色</p> <p class="text-warning small">警告：浅黄色</p> <p class="text-danger small">危险：浅红色</p> </body> </html>使用CSS的font-weight属性可以定义字体粗细，代码如下：
strong { font-weight : blod; }使用strong标签定义一行强调文本，以加粗样式显示，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加粗文本</title> </head> <body> <p><strong>加粗强调文本</strong></p> </body> </html>使用CSS的font-style属性可以定义字体倾斜效果：
em { font-style : italic; }斜体与粗体一样，都可以用来强调一段文本，em标签负责定义斜体强调效果，与strong标签对应使用，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>斜体文本</title> </head> <body> <p><em>斜体强调文本</em></p> </body> </html>HTML5支持使用b和i标签定义强调文本，b标签会加粗显示，而i标签会斜体显示。b标签多用于高亮词语，而不会赋予重要含义，i多用于表示发言、技术术语等。
CSS使用text-align属性定义文本的水平对齐方式，为了方便使用，Bootstrap定义了3个对齐类样式：
text-left {text-align : left;}，文本左对齐text-right {text-align : right;}，文本右对齐text-center {text-align : center;}，文本居中对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本对齐</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <p class="text-left">文本左对齐</p> <p class="text-right">文本右对齐</p> <p class="text-center">文本居中对齐</p> </body> </html>缩略语就是当鼠标悬停在缩写和缩写词上时就会显示完整内容。Bootstrap实现了对abbr标签的增强样式：带有较浅的虚线框，鼠标指针移至上面时会变成带有"问好"的指针。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩略语</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <p><abbr title="Cascading Style Sheets">CSS</abbr>是英语层叠样式表的缩写</p> </body> </html>Bootstrap为abbr标签添加了一个.initalism类，缩略词被缩小，同时全部大写显示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>initialism类</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <p><abbr title="Cascading Style Sheets" class="initialism">CSS</abbr>是英语层叠样式表的缩写</p> </body> </html>address标签可定义一个地址（如电子邮件地址），一般使用它来定义地址、签名或者文档的作者身份。不论创建的文档是简短扼要还是冗长完整，都应确保每个文档附加一个地址，这样做不仅为读者提供了反馈的渠道，还可以增加文档的可信度。 Bootstrap3.0优化address标签样式，让联系信息以最近日常使用的格式呈现：以块状显示，设置底部外边距为20像素，清理默认的字体样式，设置行高为1.4左右，CSS的样式代码如下：
address { margin-bottom : 20px; font-style : normal; line-height: 1.428571429; }如下面的案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地址</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <address><a href="mailto:me@163.com">我的邮箱</a><br> 网页设计工作室<br> 北京 688 号</address> </body> </html>blockquote标签定义摘自另一个源的引用，在blockquote标签之间的所有文本都会从常规文本中分离出来，左右两边进行缩进，而且有时会使用斜体。
如果标识提示、注释等简短的引用，建议使用q标签进行设计。如果直接引用，建议使用p标签。
Bootstrap3.0优化了blockquote标签样式，重新定义了padding和margin属性值，清除了左右缩进样式，设计底部外边距为20像素，通过在左侧添加灰色粗边框线，设计一种引用效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用风格</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h1>引用风格</h1> <blockquote cite="http://www.w3cschool.com.cn"> <p>全球最大的中文 Web 技术教程。在 w3school 中，可以找到所需要的所有的网站建设教程。从基础的HTML到XHTML， 乃至进阶的XML、SQL、数据库、多媒体和WAP。</p> </blockquote> </body> </html>也可以命名来源，通过添加small标签来注明引用来源，来源名可以放在cite标签中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>命令来源</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h1>引用风格</h1> <blockquote> <p>全球最大的中文 Web 技术教程。在 w3school 中，可以找到所需要的所有的网站建设教程。从基础的HTML到XHTML， 乃至进阶的XML、SQL、数据库、多媒体和WAP。</p> <small>来源于： <cite title="http://www.w3school.com.cn"> <a href="http://www.w3school.com.cn" target="_blank">w3school</a> </cite ></small> </blockquote> </body> </html>还可以使用pull-right类，展示另一种样式风格：让引用展现出向右侧移动、对齐的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>命令来源</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h1>引用风格</h1> <blockquote class="pull-right"> <p>全球最大的中文 Web 技术教程。在 w3school 中，可以找到所需要的所有的网站建设教程。从基础的HTML到XHTML， 乃至进阶的XML、SQL、数据库、多媒体和WAP。</p> <small>来源于： <cite title="http://www.w3school.com.cn"> <a href="http://www.w3school.com.cn" target="_blank">w3school</a> </cite ></small> </blockquote> </body> </html>code标签用于表示计算机源代码或者其他机器可以阅读的文本内容，默认等宽显示。Bootstrap3.0优化了code标签默认样式效果，定义行内代码呈现：灰色背景，灰色边框和红色字体效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内代码</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <p>PHP中变量名前面都要加上"$"号，如<code>$i = 1;</code></p> </body> </html>如果只是希望用等宽字体的效果，建议使用tt标签。如果想要在严格限制为等宽字体格式的文本中显示编程代码，建议使用pre标签。
pre标签可以定义格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符，文本呈现为等宽字体效果。
可能导致段落断开的标签（如标题、p和address标签）决不能包含在pre所定义的块中。pre标签允许包含文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分割线。当把其他标签（如a标签）放到pre块中时，就像放在HTML文档的其他部分中一样即可。
Bootstrap3.0优化了pre标签的默认样式效果，定义代码块呈现：灰色背景、灰色圆角边框和深色字体效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>代码块</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <pre> <!document html > <html> <head></head> <body> </body> </html> </pre> </body> </html>使用pre标识多行代码时，为了能够正确展示，务必将代码中的任何尖括号进行转义。在pre标签里，tab键会被算进去，所以要保持代码尽可能地靠左侧。
使用pre-scrollable样式类，可以把该区域设置成最大高度为350px，并带有一个Y轴滚动条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>代码块-滚动条</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <pre class="pre-scrollable"> <!document html > <html> <head></head> <body> </body> </html> </pre> </body> </html>代码参考：代码
