Bootstrap_02_全局CSS之排版&代码&表格_bootstrap label 空格

一.Bootstrap 排版

1.页面主体

Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式。

段落突出：通过lead类可以让段落突出显示，我们来看演示代码:

<div class="container">
	<p>卓越人生</p>
	<p class="lead">从卓京开始</p>
	<p>走向人生巅峰</p>
</div>

2.标题

1）主标题：h1--h6

2）副标题：<h1><small>副标题</small></h1>（在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样。）

<h1>卓越人生，<small>从卓京开始</small></h1>（从卓京开始  为副标题）

3）样式：class=”h1”...class=”h6”（在Bootstrap中h1- h6可以作为class的样式来用，和直接写h1-h6的标题标签效果一样）

3.内联文本元素

1）标记：class=”mark”（标记：把指定的内容标记出来）

标记：I <span class="mark"> like </span> you 很久了

2）线条

1. 删除：<del>I like </del> 或者<s>I like</s>
2. 下划线：<ins>I like </ins> 或者<u>I like</u>

3）强调文本

1. 小字体<small>：标准字号的85%
2. 文本加粗：<strong>
3. 文本倾斜：<em>

4.对齐 

1）居左：class=”text-left”

2）居中：class=”text-center”

3）居右：class=”text-right”

5.改变大小写

1）大写：class=”text-uppercase”

2）小写：class=”text-lowercase”

3）首字母大写：class=”text-capitalize”

6.缩略语：

（当鼠标悬停在缩写和缩写词上就会显示完整内容）

1）基本缩略语：<abbr title=”完整内容”>

2）首字母缩略语：<abbr title=”完整内容” class=”initialism”>

注意：这两种的区别在于 首字母缩略语 的字体是 基本缩略语字体 的 90%大小

7.列表

1）有序列表：<ol><li> 同HTML

2）无序列表：<ul><li> 同HTML

3）无样式列表：<ul class=”list-unstyled”>

4）内联列表：<ul class=”list-inline”>（li显示在一行）

5）描述列表：<dl class=”dl-horizontal”>（ horizontal:水平）

二.代码

1.内联代码：通过<code>标签包裹内联样式的代码片段

2.用户输入：通过<kbd>标签标记用户通过键盘输入的内容

3.基本代码块：多行代码可以使用<pre>标签

pre标签内的内容所有的空格 都会原样显示，标签内的文本编辑格式，会按照原样显示

设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

三.表格

1.基本表格：<table class=”table”>

2.条纹状表格：<table class=”table table-striped”>

3.带边框表格：<table class=”table table-bordered”>

4.鼠标悬停：<table class=”table table-hover”>

5.紧缩表格：<table class=”table-condensed”>

6.响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”

响应式表格会根据页面缩小，给表格第一行上面添加边框

7. 状态类

1）class=”active”：鼠标悬停在行或者单元格上时设置的颜色（设置行为灰色）

2）class=”success”：表示成功或积极的动作（设置行为绿色）

3）Class=”info”：表示普通的提示信息或动作（设置行为蓝色）

4）Class=”warning”：表示警告或需要用户注意（设置行为黄色）

5）Class=”danger”：表示危险或潜在的带来负面影响的动作（设置行为红色）

---

但愿世间人无病，可惜架上药生尘