bootstrap 列表 表格 表单 复选 单选 多选 输入框组

一、列表 ul li

二、表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html)

1. 基本表格 <table class="table">

2. 响应式表格 <div class="table respoinsive"><talbe >
   单独设立标题样式 标头样式

 三、表单

第一种：常规样式（垂直）
 <form role="form">

<!-- form-group 设置一组，所有的文本框input=text，textarea，select 设置form-countrol-->
  <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name"  placeholder="请输入名称">
   </div>

   <div class="form-group">
      <label for="inputfile">文件输入</label>
      <input type="file" id="inputfile"> //文本框只需要设置input的类型type=“file” 
      <p class="help-block">这里是块级帮助文本的实例。</p> //帮助说明的样式，文字颜色浅灰色
   </div>
</form>

备注：一行整合在一起：  <span class="input-group-addon">$</span>

第二种：内联表单（左对齐） <form class="form-horizontal" role="form">

第三种：Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、
search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
文本框： <textarea class="form-control" rows="3"></textarea>

选择框： 复选checkbox 单选radio
<label for="name">默认的复选框和单选按钮的实例</label> <div class="checkbox"> <label><input type="checkbox" value="">选项 1</label> </div> <div class