1.标题
bootstrap对h1~h6的标题效果进行覆盖,显示出来的效果会变淡。
同时提供了对应的类名,为非标题元素设置样式.h1~ . h6同样可以达到标题的效果
如:
<div class=".h1">666div>
副标题small标签或. small类名
2.段落
通过. lead类名来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。
:小号字
:加粗:斜体
3.强调
.text-muted:提示,使用浅蓝色(#999)
.text-primary:主要,便用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
给标签添加对应的类名,文本显示相应的颜色
4.对齐效果
在原生css中,我们用text-align设置对齐方式。
为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐。
5.列表
5.1去点列表
通过给列表(ul\ol)添加类名,如class="list-unstyled",就可以将列表前面的点或序号去掉。
5.2内联列表
通过给列表(ul\ol)添加类名,如class="list-inline",就可以将垂直显示转换成水平显示,即水平排列每一个li标签,而且会去掉项目符号,大多用于制作水平导航栏。
5.3定义列表
通过给列表(dl)添加类名,如class="list-horizontal",制作水平样式列表,当li标签中的长度超过160px时,会显示为...。
6.代码效果
在网页中我们想要将文本中的代码部分凸显出来,一般设置为高亮,如我们的博客中添加的代码片段就是这种效果,bootstrap为我们提供了这样的标签、
6.1单行代码
适用于一行代码的情况,
<code>this is codecode>
在浏览器运行的效果:
我们写成这样:
- <code>
- this is code
- this is code
- code>
也是默认显示到一行上
6.2多行代码
在编辑器用
,里面的空格换行浏览器会自动保存演示:
- <pre>
- this is code1
- this is code2
- this is code3
- pre>
效果:
6.3快捷键效果
包裹的文本会展示出特殊的效果
代码:
<span>按<kbd>ctrlkbd>+<kbd>skbd>保存span>
效果:
7.表格
7.1表格样式
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格:
基础样式
1 .table:基础表格
附加样式
1 .table-striped:斑马线表格
2 .table-bordered:带边框的表格
3 .table-hover:鼠标悬停高亮的表格
4. table-condensed:紧凑型表格,单元格没内距或者内距较其他表格的内距小
7.2tr、td、th样式
提供了五种不同的类名,每种类名控制了行的不同背景颜色
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作
我们分别应用一下:给每个td加上不同的类名
- <table class="table table-bordered" style="width: 400px; height: 50px;">
- <tr >
- <td class="success">111td>
- <td class="info">222td>
- <td class="danger">333td>
- tr>
- <tr >
- <td class="active">444td>
- <td class="warning">555td>
- <td>666td>
- tr>
- table>
效果:
注意:我们想要使用.active .success .info .warning .danger这五个样式,就必须在table标签加上.table类型,告知为基础表格,这些效果才能够生效