表单
如果须要更多材料点击下方图片加好友支付⬇（注明来意）
表单次要性能是用来与用户做交换的一个网页控件，良好的表单设计可能让网页与用户更好的沟通。表单中常见的元素次要包含：文本输入框、下拉抉择框、单选按钮、复选按钮、文本域和按钮等。
表单控件
.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>