源码解读Bootstrap排版

粗体

可以使用<b>和<strong>标签让文本直接加粗。
例如：

<p>我在学习<strong>Bootstrap</strong></p>

源码

b,
strong {
 font-weight: bold;
}

斜体

使用标签<em>或<i>来实现。
例如：

<p>我在学<i>Bootstrap</i>。</p>

强调相关的类

强调类都是通过颜色来表示强调
.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>

源码

.text-muted {
 color: #777;
}
.text-primary {
 color: #428bca;
}
a.text-primary:hover {
 color: #3071a9;
}
.text-success {
 color: #3c763d;
}
a.text-success:hover {
 color: #2b542c;
}
.text-info {
 color: #31708f;
}
a.text-info:hover {
 color: #245269;
}
.text-warning {
 color: #8a6d3b;
}
a.text-warning:hover {
 color: #66512c;
}
.text-danger {
 color: #a94442;
}
a.text-danger:hover {
 color: #843534;
}

文本对齐风格

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
例如：

<p class="text-left">我居左</p>

源码：

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

列表

Bootstrap对于列表，只是在margin上做了一些调整
源码：

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

去点列表

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
例如：

<ol class="list-unstyled">
 <li>不带项目编号</li>
 <li>不带项目编号</li>
</ol>

源码：

.list-unstyled {
padding-left: 0;
list-style: none;
}

内联列表

通过添加类名“.list-inline”来实现内联列表，其实就是把垂直列表换成水平列表，而且去掉项目符号，保持水平显示。可以用来做水平导航。
源码：

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

定义列表

Bootstrap只是调整了行间距，外边距和字体加粗效果
源码：

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

水平定义列表

水平定义列表就像内联列表一样，添加类名“.dl-horizontal”给定义列表实现水平显示效果。
源码：

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
 }
.dl-horizontal dd {
margin-left: 180px;
 }
}

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。当缩小浏览器屏幕时，水平定义列表将回复到原始的状态。

代码

主要提供了三种代码风格：
<code></code>显示单行内联代码，一般是针对于单个单词或单个句子的代码
<pre></pre>来显示多行块代码，一般是针对于多行代码（也就是成块的代码）
<kbd></kbd>来显示用户输入代码，一般是表示用户要通过键盘输入的内容
在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
源码：

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

表格

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时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
 …
</table>
</div>

表格行的类

tr有五种不同的类名，可以显示行的不同的颜色
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
.danger 表示危险或者可能是错误的行为
例如：

<tr class="active">

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # 排版  # 第一次接触神奇的Bootstrap基础排版  # 第五篇Bootstrap 排版  # 需灵活掌握的Bootstrap预定义排版类 你精通吗?  # Bootstrap3.0建站教程(一)之bootstrap表单元素排版  # Bootstrap3学习笔记(二)之排版  # 第二章之Bootstrap 页面排版样式  # Bootstrap入门书籍之（一）排版  # 全面解析Bootstrap排版使用方法（文字样式）  # 全面解析Bootstrap排版使用方法（标题）  # Bootstrap每天必学之基础排版  # 鼠标  # 滚动条  # 不带  # 来实现  # 就可以  # 都是  # 加粗  # 几个  # 就会  # 行间  # 我在  # 就像  # 也就  # 可以用  # 会在  # 三种  # 各有  # 可以使用  # 来做  # 表现为 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  js实现点击每个li节点，都弹出其文本值及修改  Laravel如何优化应用性能？（缓存和优化命令）  大连网站制作公司哪家好一点,大连买房网站哪个好？  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  微信h5制作网站有哪些,免费微信H5页面制作工具？  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  大学网站设计制作软件有哪些,如何将网站制作成自己app？  Laravel集合Collection怎么用_Laravel集合常用函数详解  WEB开发之注册页面验证码倒计时代码的实现  ,南京靠谱的征婚网站？  Laravel如何自定义错误页面（404, 500）？（代码示例）  Laravel如何使用.env文件管理环境变量？（最佳实践）  Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  佛山网站制作系统,佛山企业变更地址网上办理步骤？  Laravel中的withCount方法怎么高效统计关联模型数量  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  济南网站建设制作公司,室内设计网站一般都有哪些功能？  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Python文件异常处理策略_健壮性说明【指导】  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Firefox Developer Edition开发者版本入口  如何基于云服务器快速搭建个人网站？  php485函数参数是什么意思_php485各参数详细说明【介绍】  Python并发异常传播_错误处理解析【教程】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  香港服务器选型指南：免备案配置与高效建站方案解析  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  如何在新浪SAE免费搭建个人博客？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  浅谈redis在项目中的应用  千库网官网入口推荐 千库网设计创意平台入口  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  原生JS实现图片轮播切换效果  Laravel如何创建自定义Facades？（详细步骤）  深入理解Android中的xmlns:tools属性  敲碗10年！Mac系列传将迎来「触控与联网」双革新  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  如何用PHP快速搭建CMS系统？  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？  Angular 表单中正确绑定输入值以确保提交与验证正常工作  黑客如何通过漏洞一步步攻陷网站服务器？  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  手机软键盘弹出时影响布局的解决方法  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup