- 在bootstrap里面针对于各种的组件几乎都有提供样式,直接使用即可
标题样式
-
对于标题信息往往使用h1–h6标签表示,但是有些人不愿意使用这个标签,因为搜索引擎在检索的时候会根据h1-h6的内容来确定文章标题
-
所以如果现在既要使用h1-h6的标签效果,但是不希望使用原生标题标签,那么我们就可以使用bootstrap中的标题样式来实现同样的效果.
-
示例:使用标题样式
<div class="container">
<div class="row">
<div class="col-md-12 ">
<span class="h1">www.maoshu.com</span>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<span class="h2">www.maoshu.com</span>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<span class="h3">www.maoshu.com</span>
</div>
</div>
<div>
段落样式
-
在进行一些文章查看的时候,会发现标题很大,而后面的正文文字相对较小,所以可以使用".lead"样式实现
-
示例:定义段落
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="lead">我爱你中国</div>
<span>我爱你胜过爱自己,我在这片土地上奋斗,努力着,为了自己的理想,为了家人的生活</span>
</div>
</div>
<div>
文本样式
-
在bootstrap之中存在有许多的文本样式,这些文本样式有以下许多种
-
文本对齐
-
对于文本的对齐显示,bootstrap中提供一下几种样式
文本靠左 | .text-left |
文本靠右 | .text-right |
文本居中 | .text-center |
- 示例:定义文本显示
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="text-left">我爱你胜过爱自己</div>
<div class="text-right">我爱你胜过爱自己</div>
<div class="text-center">我爱你胜过爱自己</div>
</div>
</div>
<div>
- 如果在开发中分页组建可能放在右边
文本颜色
- 对于文本样式有如下几种样式
柔和灰 | text-muted |
重要蓝 | text-primary |
成功绿 | text-success |
信息蓝 | text-info |
禁告黄 | text-warniing |
危险红 | text-danger |
- 示例:文本颜色
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="text-primary">我爱你胜过爱自己</div>
<div class="textsuccess-">我爱你胜过爱自己</div>
<div class="text-info">我爱你胜过爱自己</div>
<div class="text-warning">我爱你胜过爱自己</div>
<div class="text-danger">我爱你胜过爱自己</div>
</div>
</div>
<div>
- 此时信息的重要心实际上就可以通过这些岩石进行区分.
文字背景颜色
- 文字除了自己的颜色之外,还有背景颜色
重要蓝 | bg-primary |
成功绿 | bg-success |
信息蓝 | bg-info |
禁告黄 | bg-warniing |
危险红 | bg-danger |
- 示例:设置文字背景
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="text-primary bg-primary">我爱你胜过爱自己</div>
<div class="text-success bg-success">我爱你胜过爱自己</div>
<div class="text-info bg-info">我爱你胜过爱自己</div>
<div class="text-warning bg-warning">我爱你胜过爱自己</div>
<div class="text-danger bg-danger">我爱你胜过爱自己</div>
</div>
</div>
<div>
- 返现颜色靠近的时候可以进行一些反色的设置
文本标签
- 文本标签不是背景,有如下的几种标签
灰色 | .label-default |
蓝色 | .label-primary |
绿色 | lable-success |
蓝色 | lable-info |
黄色 | lable-warning |
红色 | lable-danger |
- 示例文本标签
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="label-default">我爱你胜过爱自己</div>
<div class="label-primary">我爱你胜过爱自己</div>
<div class="label-success">我爱你胜过爱自己</div>
<div class="label-info">我爱你胜过爱自己</div>
<div class="label-warning">我爱你胜过爱自己</div>
<div class="label-danger">我爱你胜过爱自己</div>
</div>
</div>
<div>
-
这个时候发现比之前的背景要深
-
如果将div改为用span元素可能效果会更好
多行文本样式
- 如果要做一个文章的管理系统,那么一定要进行文章信息的显示,可是如果文章显示空间很大,会严重影响布局,所以在bootstrap中提供有如下样式
- 示例:多行文本显示
<div class="container">
<div class="row">
<div class="col-md-12 ">
<pre class="pre-scrollable">
有网友爆料称,在上海回北京的复兴号上,后面突然追上来个和谐号,齐头并进了两分钟。网友:歪,喂,交警队吗,有两辆高铁在飙车!还管不管了?
@警民直通车-上海 表示:管不了,也追不上。
</pre >
</div>
</div>
<div>
图像显示
-
在bootstrap里面考虑到用户可能出现头像问题,例如:如果要显示图片应该使用正常方式,如果要显示头像,要使用圆形,所以在bootstrap之中提供有如下几个样式
- img-rounded:以带弧度边角来显示图片
- img-thumbnail:以缩略图的方式显示图片
- img-circle:以圆形方式显示图片
-
示例:图片显示
<div class="container">
<div class="row">
<div class="col-md-12 ">
<img class="img-rounded" src="img/gd.jpg" style="width:auto;height:auto;max-height:200px;"/>
<img class="img-thumbnail" src="img/gd.jpg" style="width:auto;height:auto;max-height:200px;"/>
<img class="img-circle" src="img/gd.jpg" style="width:auto;height:auto;max-height:200px;"/>
</div>
</div>
<div>
- 显示效果
表格样式
- 最初在DIV还不盛行的时代,都是用表格来进行基础布局,但是后来这种结构混乱,现在表格都是使用表格显示数据了,bootstrap中提供了一堆表格的操作样式
- 在bootstrap里面最基础的表格样式是.table样式
- 示例:定义表格
<div class="container">
<div class="row">
<div class="col-md-12 ">
<table class="table">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
</table>
</div>
</div>
<div>
- 效果图
-
表格里面也可以进行条纹切换:那么可以使用table-striped的样式
-
示例:设置条纹表格
<div class="container">
<div class="row">
<div class="col-md-12 ">
<table class="table table-striped">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
</table>
</div>
</div>
<div>
-
在进行表格样式设置的时候,".table"是作为一个基础样式必须存在的.
-
也可以为表格设置边框:使用table-bordered样式完成
<table class="table table-striped table-bordered">
- 也可以实现表格的切换动画:使用table-hover样式完成
<table class="table table-hover table-striped table-bordered">
- 在表格里面也有一些提示信息样式
<div class="container">
<div class="row">
<div class="col-md-12 ">
<table class="table table-hover table-striped table-bordered">
<tr class="success">
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr class="warning">
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr class="info">
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr class="danger">
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
</table>
</div>
</div>
<div>
- 开发中表格以简介为主,不要使用过多的颜色