源码解读Bootstrap排版 [b]粗体[/b] 可以使用<b>和<strong>标签让文本直接加粗。 例如： <p>我在学习<strong>Bootstrap</strong></p> 源码 [b]斜体[/b] 使用标签<em>或<i>来实现。 例如： <p>我在学<i>Bootstrap</i>。</p> [b]强调相关的类[/b] 强调类都是通过颜色来表示强调 .text-muted：提示，使用浅灰色（#777） .text-primary：主要，使用蓝色（#428bca） .text-success：成功，使用浅绿色(#3c763d) .text-info：通知信息，使用浅蓝色（#31708f） .text-warning：警告，使用黄色（#8a6d3b） .text-danger：危险，使用褐色（#a94442） 例如： <div class="text-primary">.text-primary效果</div> 源码 [b]文本对齐风格[/b] .text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐 例如： <p class="text-left">我居左</p> 源码： 目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。 [b]列表[/b] Bootstrap对于列表，只是在margin上做了一些调整 源码： [b]去点列表[/b] 给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。 例如： 源码： [b]内联列表[/b] 通过添加类名“.list-inline”来实现内联列表，其实就是把垂直列表换成水平列表，而且去掉项目符号，保持水平显示。可以用来做水平导航。 源码： [b]定义列表[/b] Bootstrap只是调整了行间距，外边距和字体加粗效果 源码： [b]水平定义列表[/b] 水平定义列表就像内联列表一样，添加类名“.dl-horizontal”给定义列表实现水平显示效果。 源码： 此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。当缩小浏览器屏幕时，水平定义列表将回复到原始的状态。 [b]代码[/b] 主要提供了三种代码风格： [b]<code></code>[/b]显示单行内联代码，一般是针对于单个单词或单个句子的代码 [b]<pre></pre>[/b]来显示多行块代码，一般是针对于多行代码（也就是成块的代码） [b]<kbd></kbd>[/b]来显示用户输入代码，一般是表示用户要通过键盘输入的内容 在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。 源码： [b]表格[/b] Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。 .table：基础表格 .table-striped：斑马线表格 .table-bordered：带边框的表格 .table-hover：鼠标悬停高亮的表格 .table-condensed：紧凑型表格 .table-responsive：响应式表格 例如要使用斑马线表格并且鼠标悬停高亮： <table class="table table-striped table-bordered table-hover"> 响应式表格的用法和其他几个不同。 Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下： [b]表格行的类[/b] [b]tr[/b]有五种不同的类名，可以显示行的不同的颜色 .active 表示当前活动的信息 .success 表示成功或者正确的行为 .info 表示中立的信息或行为 .warning 表示警告，需要特别注意 .danger 表示危险或者可能是错误的行为 例如： <tr class="active"> 本文系列教程整理到：[url=http://www.1sucai.cn/Special/907.htm]Bootstrap基础教程[/url] 专题中，欢迎点击学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。