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="checkbox">

   <label><input type="checkbox" value="">选项 2</label>

</div>
<!-- radio name名称相同，id不同 label的作用是为了让选项和文字作为一个block-->
<div class="radio">
   <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1 </label>
</div>
<div class="radio">
   <label><input type="radio" name="optionsRadios" id="optionsRadios2"  value="option2"> 选项 2 - 选择它将会取消选择选项 1 </label>
</div>

内联的选择框 ：
<div>
   <label class="checkbox-inline">      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1   </label>
   <label class="checkbox-inline">      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2   </label>
</div>

第四种：选择框 
单选： <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select>

多选： <select multiple  class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select>

第五种：纯文本控件（不需要修改，例如id，注册的用户名） <p class="form-control-static">

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <p class="form-control-static">email@example.com</p>

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword"

         placeholder="请输入密码">

    </div>

  </div>

</form> 

三种图片效果 圆角 圆形 照片加边框

<img src=""   class="img-rounded">

<img src=""   class="img-circle">

<img src=""   class="img-thumbnail">

  <div class="btn-group">

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>

        <ul class="dropdown-menu" role="menu">

          <li><a href="#">一个链接</a></li>

          <li><a href="#">另一个链接 link</a></li>

          <li><a href="#">其他功能</a></li>

        </ul>

      </div>

 <button type="button" class="close" aria-hidden="true">  ×  </button>

<ul class="nav nav-tabs">
  <li class="active">首页</li>
  <li>分类1</li>
  <li>分类2</li>
  <li>分类3</li>
</ul>

响应式的导航栏，可用于手机端的分类展开，或者导航展开

<nav class="navbar navbar-default" role="navigation">

   <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse"

         data-target="#example-navbar-collapse">

         <span class="sr-only">切换导航</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">头部文字</a>

   </div>

   <div class="collapse navbar-collapse" id="example-navbar-collapse">

      <ul class="nav navbar-nav">

         <li class="active"><a href="#">iOS</a></li>

         <li><a href="#">SVN</a></li>

         <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown">

               Java <b class="caret"></b>

            </a>

            <ul class="dropdown-menu">

               <li><a href="#">jmeter</a></li>

               <li><a href="#">EJB</a></li>

               <li><a href="#">Jasper Report</a></li>

               <li class="divider"></li>

               <li><a href="#">分离的链接</a></li>

               <li class="divider"></li>

               <li><a href="#">另一个分离的链接</a></li>

            </ul>

         </li>

      </ul>

   </div>

</nav>