目录
一、思维导图
二、表单【代码有注解】
三、按钮【代码有注解】
四、图片【代码有注解】
图片形状有三种：
圆角矩形：
圆形/椭圆：
这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。
缩略图：
五、辅助类【代码有注解】
一、思维导图
二、表单【代码有注解】
代码语言：javascript复制之前我们写在文本框前面写用户名 一直都是直接写字，在实际开发中一般用文本标签包起来例如 <label> <span> 标签，我们可以看到效果文本框的宽度占满了整行，下拉框的宽度也占满了整行
<!-- 1.1.基本表单 -->
<form>
<label>用户名:</label>
<input type="text" class="form-control" />
</form>
<form action="" method="">
<div class="form-group">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" class="form-control" />
</div>
<div class="form-group">
<label>密码:</label>
<input type="text" class="form-control" />
</div>
</form>
<!-- 1.2.内联表单：class=”form-inline” -->
<form class="form-inline" action="" method="">
<label>用户名:</label>
<input type="text" />
<select>
<option value="">北京</option>
</select>
</form>
<!-- 表单组合 -->
<div class="form-group">
<label>工资:</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" />
</div>
</div>
<!-- 1.4.水平排列表单，设计到栅格 -->
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">用户名:</label>
<input class="col-md-10" type="text" class="form-control" />
</div>
<div class="form-group">
<label class=”col-md-2 control-label”>密码:</label>
<input class=”col-md-2 control-label” type="text" class="form-control" />
</div>
</form>
</div>
<div class="form-group">
<label class="col-md-2 control-label">用户名:</label>
<input class="col-md-10" type="text" class="form-control" />
</div>
<hr />
<!-- 1.5.多选框 -->
<div class="checkbox">
<label>
<input type="checkbox" />吃饭
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />睡觉
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />打豆豆
</label>
</div>
<hr />
<label class="checkbox checkbox-inline">
<input type="checkbox" />吃饭
</label>
<label class="checkbox checkbox-inline">
<input type="checkbox" />睡觉
</label>
<label class="checkbox checkbox-inline">
<input type="checkbox" />打豆豆
</label>
<!-- 禁选： -->
<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>
<!-- 1.6.下拉列表 -->
<select class="form-control">
<option>湖南省</option>
<option>湖北省</option>
<option>山东省</option>
<option>山西省</option>
</select>
<hr />
<!-- 1.7.控制尺寸(高度) -->
<input type="text" class="input-lg" />
<input type="text" />
<input type="text" class="input-sm" />
<hr />
<!-- 1.8.控制尺寸(宽度) -->
<input type="text" class="col-lg-10" />
<hr />三、按钮【代码有注解】
代码语言：javascript复制可以用作按钮使用的标签元素有很多，a标签、button标签本身就是按钮，input标签的button,submit这些都可以用class=”btn”来添加按钮样式
<!-- 2.按钮 -->
<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按钮" />
<hr>
<!-- 2.2.预定义样式 -->
<button class="btn btn-default">button标签按钮</button>
<button class="btn btn-primary">button标签按钮</button>
<button class="btn btn-success">button标签按钮</button>
<button class="btn btn-info">button标签按钮</button>
<button class="btn btn-warning">button标签按钮</button>
<button class="btn btn-danger">button标签按钮</button>
<button class="btn btn-link">button标签按钮</button>
<hr />
<!-- 2.3.尺寸 -->
<button class="btn btn-success">button标签按钮</button>默认大小
<button class="btn btn-success btn-lg">button标签按钮</button>大按钮
<button class="btn btn-success btn-sm">button标签按钮</button>小按钮
<button class="btn btn-success btn-xs">button标签按钮</button>超小按钮
<button class="btn btn-success btn-block">button标签按钮</button>块级按钮
<hr />
<!-- 激活状态 -->
<button class="btn btn-success active">button标签按钮</button>
<hr />
<!-- 2.5.禁用状态 -->
<button class="btn btn-success disabled">button标签按钮</button>
<hr />
四、图片【代码有注解】
图片形状有三种：
- 圆角矩形：<img class=”img-rounded”>
<img src="img/a.jpg" class="img-rounded" >- 圆形/椭圆：<img class=”img-circle”>这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。
<img src="img/a.jpg" class="img-circle" >- 缩略图：<img class=”img-thumbnail”>
<img src="img/a.jpg" class="img-thumbnail" >代码语言：javascript复制可是现在还有点瑕疵，我们缩小网页的时候图片好像不会跟着自动缩小，会被只显示一部分。这个时候就需要设置一下 让图片根据网页缩小而自动缩小。我们叫做响应式图片
<!-- 3.1.图片形状、响应式图片 -->
<img src="img/a.gif" class="img-rounded">
<hr />
<img src="img/a.gif" class="img-circle">
<hr />
<img src="img/a.gif" class="img-thumbnail">
<hr />
<img src="img/a.gif" class="img-rounded img-responsive">
<img src="img/a.gif" class="img-circle img-responsive">
<img src="img/a.gif" class="img-thumbnail img-responsive">
五、辅助类【代码有注解】
代码语言：javascript复制<!-- 4.辅助类 4.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>
<hr />
<!-- 4.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>
<hr />
<!-- 4.3.关闭按钮class=”close” -->
<span class="close">×</span>
<hr >
<!-- 4.4.三角符号class=”caret” -->
<span class="caret"></span>
<hr />
<!-- 4.5.快速浮动class=”pull-right”,class=”pull-left” -->
<div style="width: 200px; height: 200px; background-color: yellow;" class="pull-right">
<hr />
<!-- 5.1.可见：class=”visible-xs-*” *指的是block或者inline -->
<button class="btn-danger visible-sm">手机用户，点击有惊喜</button>
<p class="bg-danger visible-lg-block">点击有惊喜</p>
<p class="bg-danger visible-lg-inline">点击有惊喜</p>
<hr />
<!-- 5.2.隐藏：class=”hidden-xs” -->
<button class="btn-danger hidden-lg">手机用户，点击有惊喜</button>
