一、表单
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.多选框 :class="checkbox"
我们再来看一下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”
<input type="text" class="input-lg" />
<input type="text"/>
<input type="text" class="input-sm" />
直接占满整行,顺便帮我们添加样式
6. 控制尺寸
<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-md"
2)大按钮:class="btn btn-lg"
3)小按钮:class="btn btn-sm"
4)超小按钮:class="btn btn-xs"
5)块级按钮:class="btn btn-block"
4.激活状态
设置按钮颜色为激活状态的颜色:<button class="btn btn-success active">button标签按钮</button>
5.禁用状态
设置按钮不可用:<button class="btn btn-success disabled">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.情境文本颜色(文字颜色:六种)
1)<p class="text-primary">少小幽燕客</p>
2)<p class="text-success">赌胜马蹄下</p>
3)<p class="text-info">由来轻七尺</p>
4)<p class="text-warning">杀人莫敢前</p>
5)<p class="text-danger">须如猬毛磔</p>
2.情境背景色(背景颜色:五种)
1)<p class="bg-info">黄云陇底白云飞</p>
2)<p class="bg-danger">未得报恩不得归</p>
3)<p class="bg-primary">辽东小妇年十五</p>
4)<p class="bg-warning">惯弹琵琶解歌舞</p>
5)<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>