Bootstrap02

一、排版

1. 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>

效果看的出，从卓景开始 几个字 变大了。这个就是段落突出显示

1. 1. 标题

2. 标题h1--h6和html中的效果一样
3. 副标题：在<h1><small>副标题</small></h1>

在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样。

<h1>卓越人生，<small>从卓景开始</small></h1>

从卓景开始  为副标题

1. 样式：class=”h1”...class=”h6”

在Bootstrap中h1- h6可以作为class的样式。来用

<p class="h1">卓越人生，从卓景开始</p>

<p class="h2">卓越人生，从卓景开始</p>

<p class="h3">卓越人生，从卓景开始</p>

<p class="h4">卓越人生，从卓景开始</p>

<p class="h5">卓越人生，从卓景开始</p>

<p class="h6">卓越人生，从卓景开始</p>

效果和直接写h1-h6的标题标签 效果一样

1. 1. 内联文本元素

      1. 标记：class=”mark”

标记，把指定的内容标记出来。示例如下:

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

被span标签包起来的文本 you 的样式被添加背景色

1. 1. 1. 线条
2. 删除：<del>I like </del> 或者<s>I like</s>
3. 下划线：<ins>I like </ins> 或者<u>I like</u>
   1. 1. 强调文本

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

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

示例代码:

<p class="text-left">卓越人生，从卓京开始</p>

1. 居中：class=”text-center”

示例代码:

<p class="text-center">卓越人生，从卓京开始</p>

1. 居右：class=”text-right”

示例代码：

<p class="text-right">卓越人生，从卓京开始</p>

注意：span标签无效

1. 1. 改变大小写
2. 大写：class=”text-uppercase”

示例代码：

<span class="text-uppercase">i like you</span>

1. 小写：class=”text-lowercase”

示例代码：

<span class="text-lowercase">I like you</span>

1. 首字母大写：class=”text-capitalize”

示例代码：

<span class="text-capitalize">i like you</span>

1. 1. 缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容
2. 基本缩略语：<abbr title=”完整内容”>

示例代码：

<abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>

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

示例代码：

title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语

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

1. 1. 地址：<address>

示例代码：

<address>家庭地址：长沙</address>

  <address>公司地址：梅溪湖></address>

会自动调整间距

1. 1. 引用：类似名言名句的格式
2. 默认样式的引用：<blockquote>   <footer>

示例：

<blockquote>阳光总在风雨后<footer>丹</footer></blockquote>

默认样式为左对齐

1. 右对齐样式引用：<blockquote class=”blockquote-reverse”>

示例代码：

<blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote>

靠右对齐

1. 1. 列表
2. 有序列表：<ol><li> 同HTML
3. 无序列表：<ul><li> 同HTML
4. 无样式列表：<ul class=”list-unstyled”>,去掉li前面的点

示例代码：

<ul class="list-unstyled">

<li>花间一壶酒</li>

<li>独酌无相亲</li>

<li>举杯邀明月，对影成三人</li>

</ul>

1. 内联列表：<ul class=”list-inline”>，li显示在一行

示例代码：

<ul class="list-inline">

<li>月既不解饮</li>

<li>影徒随我身</li>

<li>暂伴月将影，行乐须及春</li>

</ul>

1. 描述列表：<dl class=”dl-horizontal”>。 horizontal:水平

示例代码：

<dl class="dl-horizontal">

<dt>首页</dt>

<dd>这是首页的信息</dd>

<dt>卓京品牌</dt>

<dd>卓越人生，从卓京开始</dd>

</dl>

二、代码

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

示例代码：

花间一壶酒，独酌无相亲。<code>举杯邀明月，</code>对影成三人。

code标签包裹的内容加样式

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

示例代码：

复制快捷键：

<kbd>Ctrl+C</kbd>

给kbd标签包裹起来的内容加样式

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

示例代码：

<pre>

花间一壶酒，独酌无相亲

举杯邀明月，

对影成三人

</pre>

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

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

代码示例：

<pre class="pre-scrollable">

花间一壶酒，独酌无相亲

举杯邀明月，

对影成三人

</pre>

三、表格

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

咱们先来看一下我们平常写的table表格

<table>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>


.......
</tbody>

</table>

现在我们的表格是没有任何样式，没有边框没有对齐方式的。

<table class=”table”>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>
.......

</tbody>

</table>

现在再看效果，自动铺满，对齐，标题加粗，添加分割线。。

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

<table class=”table table-striped”>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>
</tr>

.......

</tbody>

</table>

隔行就有背景色

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

<table class=”table table-bordered”>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>
</tr>

.......

</tbody>

</table>

顾名思义 这个就是有边框的表格

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

<table class=”table table-hover”>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>
.......

</tbody>

</table>

鼠标移动到行就会显示效果

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

<table class=”table table-condensed”>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

.......
</tbody>

</table>

顾名思义 紧缩表格，就是表格相对来说缩紧一些，仔细看行的上下两条线是不是缩紧了

1. 1. 状态类
      1. class=”active”:鼠标悬停在行或者单元格上时设置的颜色

<tr class="active">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

设置行为灰色

1. 1. 1. class=”success”:表示成功或积极的动作

<tr class="success">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

设置行为绿色

1. 1. 1. Class=”info”:表示普通的提示信息或动作

设置行为蓝色

<tr class="info">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

1. 1. 1. Class=”warning”:表示警告或需要用户注意

<tr class="warning">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

设置行为黄色

1. 1. 1. Class=”danger”:表示危险或潜在的带来负面影响的动作

<tr class="danger">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

设置行为红色

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

<tr class="table table-responsive">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

响应式是Bootstrap的最大特点。响应式表格会根据页面缩小，给表格第一行上面添加边框