bootstrap中的全局样式
一、排版--标题（h1-h6） 副标题（small）
- h1:36px
- h2:30px
- h3:24px
- h4:18px
- h5:14px
- h6:12px
<span></span> //内联标签实现样式
bootstrap支持普通内联元素定义class=（.h1-h6）来实现相同的功能（使用内联元素直接来引用标题的样式）
eg：<span class="h1">XX</span>
注意：在任何标题中添加一个内联子标题，只需要简单的在元素两旁添加<small>标签即可
显示的效果如下：
- h1 ~ h3 下small 元素的大小只占父元素的65%，那么通过计算，h1 ~ h3 下的small 为23.4px、19.5px、15.6px；
- h4 ~ h6 下small 元素的大小只占父元素的75% ,分别为：13.5px、10.5px、9px。
- 在h1 ~ h6 下的small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400
二、排版---文本
1）段落
p标签
- 默认：14px；
- 行高：20px
- 底部外边距：10px
2）对齐方式
- .text-left
- .text-center
- .text-right
3）文本标记
-
class="lead"强调文本 得到更大更粗、行高更高的文本
- eg：<p class="lead">xxx</p>
-
添加标记，<mark>元素或.mark 类(设置Mark标签是有黄色底边的)
- eg：<p>bootstrap<mark>框架</mark></p>
-
各种加线条的文本
- <del>XXXX</del> //删除的文本
- <s>XXX</s> //无用的文本
- <ins>XXX</ins> //插入的文本
- <u>XXX</u> //效果同上，下划线文本
- 效果如下：
-
强调样式
- <small> 设置文本为父文本大小的80%（标准字号的85%）
- <strong> 设置文本为更粗的文本（加粗700）
- <em> 设置文本为斜体
- 显示效果如下：
-
-
对齐样式 设置文本对齐
- <p class="text-left">位置居左</p>
- <p class="text-center">位置居中</p>
- <p class="text-right">位置居右</p>
- <p class="text-justify">两端对齐，支持度不佳</p>
- <p class="text-nowrap">不换行</p>
- 显示效果如下：
-
大小写样式---设置英文文本大小写
- <p class="text-lowercase">Bootstrap小写</p>
- <p class="text-uppercase">bootstrap大写</p>
- <p class="text-capitalize">bootstrap首字母大写</p>
- 显示效果如下:
-
缩略语样式
- <abbr class="initialism" title="world wide web">www</abbr>
- 显示效果如下：
-
地址文本样式
- 使用<address>标签，设置地址，去掉了倾斜，设置了行高，底部20px
- <address>默认为display：block，需要使用标签来为封闭的地址文本添加换行
- <address>
<strong>Twitter,Inc</strong><br>
795 Folsom Ave,Suite 600<br>
San Francisco,CA 94170<br>
<abbr title></abbr>
</address>
- 显示效果如下：
-
引用文本样式
- 可以在任意的HTML文件旁使用默认的<blockquote>
- 使用class.pull-right 向右对齐引用，使用class.blockquote-reverse 反向引用
- 默认的样式引用，增加了左边线，设定了字体大小和内外边距
<blockquote>框架</blockquote>
- 反向引用
<blockquote class="blockquote-reverse">框架</blockquote>
- 列表排版
三、排版--表格
- 带边框表格: .table-bordered
table-bordered:边框样式
显示结果如下：
- 条纹状表格: .table-striped
table-striped:显示斑马线样式
显示效果如下：
- 悬停变色: .table-hover
table-hover:鼠标所到点击之处会出现高亮或是变暗的效果
显示效果如下：
- 紧凑风格: .table-condensed
class="danger":会使该行红色显示 ，当鼠标放到改行时，颜色也会发生加深改变
效果现实如下：
<tr class="warning">：是指警告用户所做的一个动作
<tr class="success">：是指标志成功的动作
<tr class="active">：active是指鼠标全停在行或单元格上的显示的效果
<tr class="info">
<tr class="danger">：是指危险
显示效果如下：
四、排版---表单（1）
bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列、个性化定制等。
palceholder：在输入文本框中显示的提示性的内容
<input type="text" class="form-control" placeholder="这是一个输入框"/>
加上form-control样式之后，之前的输入框由长方形变为圆角矩形，样式更美观，鼠标点击会亮
<form class="form-inline">
效果是使表单中的各个div都横向排列
效果显示如下：
input-lg：使输入框变大
input-sm：使输入框变小
<label class="sr-only">这是一个输入框：</label>
给lable添加样式"sr-only"则标签的原有的字将不会显示
给lable添加样式“control-label”代表可控制的标签
给div添加样式 “has-success”代表的是一个状态
显示的效果如下：第一个label的边框显示的已经改变了颜色
给div添加“has-worning”样式，显示的效果如下：边框改变原有的颜色变成黄色
给div添加“has-error”样式，显示效果如下：像报错信息，边框显示红色
五、排版---表单（2）
按钮
1.想要按钮改变原有的颜色，可以进行如下操作
- <button class="btn btn-default">这是一个按钮</button>----默认状态
- <button class="btn btn-success">这是一个按钮</button>----成功状态
- <button class="btn btn-warning">这是一个按钮</button>----警告状态
- <button class="btn btn-info">这是一个按钮</button>----信息状态
- <button class="btn btn-danger">这是一个按钮</button>----报错状态
- <button class="btn btn-primary">这是一个按钮</button>----初级的，基本的，首要的
- 显示效果如下:
2.改变按钮的状态，使按钮呈现一种链接的效果
<button class="btn btn-link">这是一个按钮</button>
效果显示如下：
3.改变按钮的大小
- <button class="btn btn-default btn-lg">这是一个按钮</button>---按钮变大
- <button class="btn btn-success btn-sm">这是一个按钮</button>---按钮变小
显示效果如下:
4.设置按钮默认的一个按下去的状态，在样式中设置active即可
<button class="btn btn-warning active">这是一个按钮</button>
显示效果如下：
5.设置按钮全屏展示
<button class="btn btn-info btn-block">这是一个按钮</button>
显示效果如下：
6.设置按钮禁用状态，在样式中加入disabled
<button class="btn btn-danger disabled">这是一个按钮</button>
显示效果如下：
7.a标签可以设置为按钮的效果
<a class="btn btn-success" href="">这是a标签显示的按钮效果</a>---只是把按钮引用的样式添加到a标签内部即可
效果显示如下：
六、bootstrap中图片及辅助类
1）bootstrap中的图片--形状
- 圆角 .img-rounded
- 圆形 .img-circle
- 带有边框的圆角图形 .img-thumbnail
2）bootstrap中的辅助类
- 文本颜色
- 背景颜色
- 设置状态
- 三角符号