一.表单
1.基本表单
1）
class=”form-control”
：可以给
<input>
、
<textarea>
、
<select>
元素设置
宽度
为
100%
2）
class=”form-group”
：可以为
<div>
设置该属性。如果<div>中
包含
<label>
和
<input>
表示为一组。层次会更清晰
2.内联表单：
class=
”
form-inline
”
What
？什么是内联表单呢？就是让我们的
所有
表单元素都在
一行
3.
表单组合
class=”input-group”
、
class=”input-group-addon”
表单组合就是把几个元素
组合
在一起
4.
多选框
我们再来看一下
Bootstrap
中咋写:
<div class=”checkbox”>
<label>
<input type=”checkbox”/>吃饭
</label>
</div>
<div class=”checkbox”>
<label>
<input type=”checkbox”/>睡觉
</label>
</div>
现在每一个选项都加了
div
,选项
竖着排列
。如果我们现在想让多选框
横着排列
，来看看该咋写：
<label class=”checkbox checkbox-inline”>
<input type=”checkbox” />吃饭
</label>
<label class=”checkbox checkbox-inline”>
<input type=”checkbox” />睡觉
</label>
我们只需把div去掉，在label中直接写:
class=”checkbox checkbox-inline”
这样就在一行了
禁选：
<label class=”checkbox checkbox-inline disabled”>
<input type=”checkbox” disabled=”disabled”/>吃饭
</label>
如果是单选按钮：
<div class=”radio”>
<label>
<input type=”radio”/>男
</label>
<label>
<input type=”radio”/>女
</label>
</div>
只需要把
checkbox
改成
radio
就OK
5.
下拉列表
直接用
class=”form-control”
<select class=”form-control”>
<option>湖南省</option>
<option>湖北省</option>
</select>
直接占满
整行
，顺便帮我们添加样式
7.
控制尺寸
<input type=”text” class=”input-lg” />
<input type=”text”/>
<input type=”text” class=”input-sm” />
控制高度有两种，
lg
最高，
sm
最低
二.按钮
1.
可用作按钮使用的标签和元素
<a class=”btn btn-warning”>
超链接按钮
</a><br>
<button class=”btn btn-success” type=”button”>
button标签按钮
</button><br>
<input class=”btn btn-info” type=”button” value=
“input标签的button按钮
“/><br>
<input class=”btn btn-danger” type=”submit” value=
“input标签的submit按钮
“/>
input标签
的button,submit这些都可以用
class=”btn”
来添加按钮样式
2.
预定义样式
1）
class=”btn btn-primary”
2）
class=”btn btn-success”
3）
class=”btn btn-info”
4）
class=”btn btn-warning”
5）
class=”btn btn-danger”
6）
class=”btn btn-link”
前面
六种
基本就是给按钮设置
不同的背景色
，第七种是把按钮的样式修改为
超链接
3.
尺寸
1）
默认大小：
class=”btn btn-success”
2）
大按钮：
class=”btn btn-success btn-lg”
3）
小按钮：
class=”btn btn-success btn-sm”
4）
超小按钮：
class=”btn btn-success btn-xs”
5）
块级按钮：
class=”btn btn-success btn-block”
4.
激活状态
设置按钮颜色为
激活状态
的颜色：
<button class
=”btn btn-success active”
>button标签按钮</button>
5.
禁用状态
设置按钮
不可用
：
<button class=”
btn btn-success active
“>button标签按钮</button>
三.图片
1.
图片形状、响应式图片
1）圆角矩形：
<img src=”img/a.jpg” class=”img-
rounded
” >
2）圆形/椭圆：
<img src=”img/a.jpg” class=”img-
circle
” >
（
这个会根据图片来决定是
宽
还是
高
）
3）缩略图：
<img src=”img/a.jpg” class=”img-
thumbnail
” >
4）响应式图片：
img-responsive
（
让图片根据
网页缩小而自动缩小
）
四.辅助类
1.情境文本颜色(文字颜色：
六种
)
<p class=”
text-muted
“>男儿事长征</p>
<p class=”
text-primary
“>少小幽燕客</p>
<p class=”
text-success
“>赌胜马蹄下</p>
<p class=”
text-info
“>由来轻七尺</p>
<p class=”
text-warning
“>杀人莫敢前</p>
<p class=”
text-danger
“>须如猬毛磔</p>
2.情境背景色(背景颜色：
五种
)
<p class=”
bg-info
“>黄云陇底白云飞</p>
<p class=”
bg-danger
“>未得报恩不得归</p>
<p class=”
bg-primary
“>辽东小妇年十五</p>
<p class=”
bg-warning
“>惯弹琵琶解歌舞</p>
<p class=”
bg-success”
>今为羌笛出塞声</p>
3.
关闭按钮：
class=”close”
<span
class=”close”
>×</span>
（
×表示X）
4.
三角符号：
class=”caret”
<span
class=”caret”
></span>
5.
快速浮动：
class=”pull-right”,class=”pull-left”
<div style=”width: 200px; height: 200px; background-color: yellow;”
class=”pull-right”
>
</div>
（类似CSS样式中
float
的左浮动 右浮动）
五.响应式工具
1.
可见：
class=”visible-xs-
（*
”
*指的是
block
或者
inline
）
1）
visible-sm
：表示只有在
页面变小
才会显示这个按钮
2）
block
：表示显示
整行
背景
3）
inline
:表示只在
文本宽度
显示背景色
2.
隐藏：
class=”hidden-xs”
hidden-lg
：表示在大屏幕就隐藏
<button class=”
btn-danger hidden-lg
“>手机用户，点击有惊喜</button>
我希望有个如你一般的人，如山间清爽的风，如古城温暖的光，从清晨到傍晚，从山野到书房。一切都没有关系，只要最后是你，就好。