共计 4444 个字符，预计需要花费 12 分钟才能阅读完成。
表单
如果须要更多材料点击下方图片加好友支付⬇（注明来意）
表单次要性能是用来与用户做交换的一个网页控件，良好的表单设计可能让网页与用户更好的沟通。表单中常见的元素次要包含：文本输入框、下拉抉择框、单选按钮、复选按钮、文本域和按钮等。
表单控件
.form-control .input-lg（较大）.input-sm（较小）
输入框 text
.form-control
<div class="col-sm-3">
<input type="text" name=""id="" class="form-control" />
<input type="text" name=""id="" class="form-control input-lg" />
<input type="text" name=""id="" class="form-control input-sm" />
</div>下拉抉择框 select
多行抉择设置：multiple=”multiple”
<div class="col-sm-3">
<select class="form-control">
<option> 北京 </option>
<option> 上海 </option>
<option> 深圳 </option>
</select>
<select class="form-control" multiple="multiple">
<option> 北京 </option>
<option> 上海 </option>
<option> 深圳 </option>
</select>
</div>文本域 textarea
<div class="col-sm-3">
<textarea class="form-control" rows="3"></textarea>
</div>复选框 checkbox
垂直显示：.checkbox
程度显示：.checkbox-inline
<!-- 垂直显示 -->
<div>
<div class="checkbox">
<label><input type="checkbox" > 游戏 </label>
</div>
<div class="checkbox">
<label><input type="checkbox" > 学习 </label>
</div>
</div>
<!-- 程度显示 -->
<div>
<label class="checkbox-inline">
<input type="checkbox" > 游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" > 学习
</label>
</div>单选框 radio
垂直显示：.radio
程度显示：.radio-inline
<!-- 垂直显示 -->
<div>
<div class="radio">
<label><input type="radio" > 男 </label>
</div>
<div class="radio">
<label><input type="radio" > 女 </label>
</div>
</div>
<!-- 程度显示 -->
<div>
<label class="radio-inline">
<input type="radio" > 男
</label>
<label class="radio-inline">
<input type="radio" > 女
</label>
</div>按钮
1）应用 button 实现
根底款式：btn
<button class="btn"> 按钮 </button> 附加款式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
<button class="btn btn-danger"> 按钮 </button>
<button class="btn btn-primary"> 按钮 </button>
<button class="btn btn-info"> 按钮 </button>
<button class="btn btn-success"> 按钮 </button>
<button class="btn btn-default"> 按钮 </button>
<button class="btn btn-warning"> 按钮 </button>
<button class="btn btn-link"> 按钮 </button>2）多标签反对：应用 a div 等制作按钮
<a href="##" class="btn btn-info">a 标签按钮 </a>
<span class="btn btn-success">span 标签按钮 </span>
<div class="btn btn-warning">div 标签按钮 </div>3）按钮大小
应用 .btn-lg、.btn-sm 或 .btn-xs 就能够取得不同尺寸的按钮
<button class="btn btn-primary btn-xs"> 超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm"> 小型按钮.btn-sm</button>
<button class="btn btn-primary"> 失常按钮 </button>
<button class="btn btn-primary btn-lg"> 大型按钮.btn-lg</button> 4）按钮禁用
办法 1：在标签中增加 disabled 属性
<button class="btn btn-danger" disabled="disabled"> 禁用按钮 </button> 办法 2：在元素标签中增加类名 ”disabled”
<button class="btn btn-danger disabled"> 禁用按钮 </button> 在 class 属性中增加 disabled 只是款式上禁用了，并不是真正的禁用了此按钮！
表单布局
根本的表单构造是 Bootstrap 自带的，个别的表单控件主动接管一些全局款式。上面列出了创立根本表单的步骤：
- 向父 <form> 元素增加 role=”form”。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必须的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 增加 class =”form-control”。
程度表单
同一行显示 form-horizontal
配合 Bootstrap 框架的网格零碎
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="control-label col-sm-2"> 邮箱 </label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输出邮箱"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-sm-2"> 明码 </label>
<div class="col-sm-10">
<input type="pwd" class="form-control" placeholder="请输出明码" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" /> 记住明码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default"> 提交 </button>
</div>
</div>
</form>内联表单
将表单的控件都在一行内显示 form-inline
留神 label 不会显示，存在的意义：如果没有为输出控件设置 label 标签，屏幕阅读器将无奈正确辨认。
<form class="form-inline">
<div class="form-group">
<label for="email" > 邮箱 </label>
<input type="email" class="form-control" placeholder="请输出邮箱"/>
</div>
<div class="form-group">
<label for="pwd" > 明码 </label>
<input type="pwd" class="form-control" placeholder="请输出明码" />
</div>
<div class="form-group checkbox">
<label><input type="checkbox" /> 记住明码 </label>
</div>
<div class="form-group">
<button class="btn btn-default"> 提交 </button>
</div>
</form>缩略图
缩略图在电商类的网站很常见，最罕用的中央就是产品列表页面。缩略图的实现是配合网格零碎一起应用。同时还能够让缩略图配合题目、形容内容，按钮等。
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/IMG_0131.JPG" alt="...">
<h3> 高圆圆 </h3>
<p> 出生于北京市，中国边疆影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜爱 </button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
</div>
</div>面板
默认的 .panel 组件所做的只是设置根本的边框（border）和内补（padding）来蕴含内容。
.panel-default：默认款式
.panel-heading：面板头
.panel-body：面板主体内容
<div class="panel panel-success">
<div class="panel-heading">
......
</div>
<div class="panel-body">
......
</div>
</div>
