一:排版
1.1 页面主体 : lead:让段落突出显示。
<div class="container">
<p>卓越人生</p>
<p class="lead">从卓京开始</p>
<p>走向人生巅峰</p>
</div>
1.2.标题
标题 h1--h6和html中的效果一样副标题:在<h1><small>副标题</small></h1> 在Bootstrap中,标题可以有副标题,副标题比正标题的字体小一点,样式有点不太一样。
1.3 内联文本元素
1.3.1 标记:class=”mark”
标记,把指定的内容标记出来。示例如下:
标记:I <span class="mark"> donnot like </span> you 很久了
被span标签包起来的文本 you 的样式被添加背景色。
1.3.2 线条:
1.2 删除:<del>I like </del> 或者<s>I like</s>
1.3 下划线:<ins>I like </ins> 或者<u>I like</u>
1.3.3 强调文本
- 小字体<small>:标准字号的85%
- 文本加粗:<strong>
- 文本倾斜:<em>
1.4 对齐
居左:class=”text-left”
示例代码:<p class="text-left">卓越人生,从卓京开始</p>
居中:class=”text-center”
示例代码:<p class="text-center">卓越人生,从卓京开始</p>
注意:span标签无效
1.5改变大小写:
大写:class=”text-uppercase”
示例代码:<span class="text-uppercase">i like you</span>小写:class=”text-lowercase”
示例代码:<span class="text-lowercase">I like you</span>
首字母大写:class=”text-capitalize”
示例代码:<span class="text-capitalize">i like you</span>
1.6缩略语
缩略语:当鼠标悬停在缩写和缩写词上就会显示完整内容
基本缩略语:<abbr title=”完整内容”>
示例代码:<abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>
首字母缩略语:<abbr title=”完整内容” class=”initialism”>
示例代码:title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语
注意:这两种的区别在于首字母缩略语的字体是 基本缩略语字体的90%大小
1.7 引用:类似名言名句的格式
默认样式的引用:<blockquote> <footer>
示例:<blockquote>阳光总在风雨后<footer>丹</footer></blockquote>
默认样式为左对齐
右对齐样式引用:<blockquote class=”blockquote-reverse”>
示例代码:<blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote>
靠右对齐
1.8列表
- 有序列表:<ol><li> 同HTML
- 无序列表:<ul><li> 同HTML
- 无样式列表:<ul class=”list-unstyled”>,去掉li前面的点
示例代码:
<ul class="list-unstyled">
<li>花间一壶酒</li>
<li>独酌无相亲</li>
<li>举杯邀明月,对影成三人</li>
</ul>
- 内联列表:<ul class=”list-inline”>,li显示在一行
示例代码:
<ul class="list-inline">
<li>月既不解饮</li>
<li>影徒随我身</li>
<li>暂伴月将影,行乐须及春</li>
</ul>
- 描述列表:<dl class=”dl-horizontal”>。 horizontal:水平
示例代码:
<dl class="dl-horizontal">
<dt>首页</dt>
<dd>这是首页的信息</dd>
<dt>卓京品牌</dt>
<dd>卓越人生,从卓京开始</dd>
</dl>
二:代码
- 内联代码:通过<code>标签包裹内联样式的代码片段
示例代码:
花间一壶酒,独酌无相亲。<code>举杯邀明月,</code>对影成三人。
code标签包裹的内容加样式
- 用户输入:通过<kbd>标签标记用户通过键盘输入的内容
示例代码:
复制快捷键:<kbd>Ctrl+C</kbd>
给kbd标签包裹起来的内容加样式
- 基本代码块:多行代码可以使用<pre>标签
示例代码:
<pre>
花间一壶酒,独酌无相亲
举杯邀明月,
对影成三人
</pre>
pre标签内的内容所有的空格 都会原样显示,标签内的文本编辑格式,会按照原样显示
设置pre区域显示垂直滚动条:<pre class=”pre-scrollable”>
代码示例:
<pre class="pre-scrollable">
花间一壶酒,独酌无相亲
举杯邀明月,
对影成三人
</pre>
示例图片效果
三:表格
- 基本表格:<table class=”table”>
条纹状表格:<table class=”table table-striped”>
- 带边框表格:<table class=”table table-bordered”>
- 鼠标悬停:<table class=”table table-hover”>
- 紧缩表格:<table class=”table-condensed”>
- 状态类
- class=”active”:鼠标悬停在行或者单元格上时设置的颜色
案例: <tr class="active">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
设置行为灰色
- class=”success”:表示成功或积极的动作
案例 <tr class="success">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
设置行为绿色
- Class=”info”:表示普通的提示信息或动作
设置行为蓝色
<tr class="info">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
- Class=”warning”:表示警告或需要用户注意
<tr class="warning">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
设置行为黄色
Class=”danger”:表示危险或潜在的带来负面影响的动作
<tr class="danger">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
设置行为红色
- 响应式表格:<table class=”table”>,给包括<table>的元素添加class=”table-responsive”
<tr class="table table-responsive">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
响应式上一篇说过,是Bootstrap的最大特点。响应式表格会根据页面缩小,给表格第一行上面添加边框。