bootstrap常用组件用法

bootstrap常用tips


1 常见的表单中，标示和元素同一行的效果：
    <h3>水平排列表单</h3>
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮 箱：</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密 码：</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
            </div>
          </div>

  而分上下两行的效果
     <form role="form">
          <div class="form-group">
            <label for="exampleInputEmail1">邮箱地址</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密 码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
          </div>

2 常见按钮
    <h2>按钮</h2>
        <p>
          <button type="button" class="btn btn-default">默认</button>
          <button type="button" class="btn btn-primary">主要</button>
          <button type="button" class="btn btn-success">成功</button>
          <button type="button" class="btn btn-info">信息</button>
          <button type="button" class="btn btn-warning">警告</button>
          <button type="button" class="btn btn-danger">危险</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
          <button type="button" class="btn btn-default btn-lg">大号按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary">默认尺寸</button>
          <button type="button" class="btn btn-default">默认尺寸</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
          <button type="button" class="btn btn-default btn-sm">小号按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-xs">更小的按钮</button>
          <button type="button" class="btn btn-default btn-xs">更小的按钮</button>
        </p>

3）     <button type="button" class="btn btn-default" disabled="disabled">默认</button>
   其中增加disabled="disabled",标示为按钮不可点击状态

  4）表格
     <table class="table  table-bordered  table-striped table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>姓</th>
          <th>名</th>
          <th>昵称</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>李</td>
          <td>四</td>
          <td>拉里</td>
        </tr>
        <tr>
          <td>2</td>
          <td>王</td>
          <td>五</td>
          <td>博德</td>
        </tr>
        <tr>
          <td>3</td>
          <td>赵</td>
          <td>四</td>
          <td>詹姆斯</td>
        </tr>
      </tbody>
    </table>

5 响应式工具
   比如让某个工具栏，在小窗口和超小窗口下不显示


   <div class="toolbar hidden-xs hidden-sm">
   ..  其中针对xs,sm,md,lg等不同尺寸，都可以使用hidden或  visiable属性，分别为显示和不显示用
     
   6 下拉菜单
      <div class="container">
      <h2>下拉菜单</h2><hr>
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          下拉菜单
          <span class="caret"></span>  <!-- 下拉按钮的向下箭头-->
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">选项一</a></li>
          <li><a href="#">选项二</a></li>
          <li><a href="#">选项三</a></li>
          <li class="divider"></li>
          <li><a href="#">选项四</a></li>
        </ul>
      </div>
      7  按钮组
         <div class="btn-group">
        <button type="button" class="btn btn-default">左转弯</button>
        <button type="button" class="btn btn-default">直行</button>
        <button type="button" class="btn btn-default">右转弯</button>
      </div>
      8 input控件组
           <h2>输入框组</h2><hr>
      <div>
        <div class="input-group col-xs-4">
          <input type="text" class="form-control" placeholder="search">
          <span class="input-group-addon">搜索</span>
        </div>

        <div class="input-group col-xs-4">
          <input type="text" class="form-control" placeholder="search">
          <span class="input-group-btn">
            <input type="submit" value="搜索" class="btn btn-default">
          </span>
        </div>
        <br>
      </div>


      9 导航
        1) 胶囊导航
     <h3>胶囊导航</h3>
      <ul class="nav nav-pills">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
        <li><a href="#">详情</a></li>
      </ul>
      <br>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
        <li><a href="#">详情</a></li>
      </ul>
     nav-stacked 为纵向的

  2）面包导航
      <h3>面包屑导航</h3>
      <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">资料库</a></li>
        <li class="active">数据</li>
      </ol>
         
  3） 头部导航
          <nav class="navbar navbar-default">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </nav>
      10 列表组
          <h2>列表组</h2><hr>
      <div class="list-group">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">快船战胜雷霆</h4>
          <p class="list-group-item-text">雷霆和快船的第二轮第一场比赛在俄克拉荷马打响，客场作战快船凭借保罗第一节5记三分早早建立两位数领先奠定胜局......</p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">马刺击败小牛</h4>
          <p class="list-group-item-text">马刺抢七大战笑到最后，4:3击败小牛晋级下一轮，帕克32分，马刺老将吉诺比利发挥出色，砍下20分5助攻6抢断的全能数据......</p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">奇才102 ：96步行者</h4>
          <p class="list-group-item-text">今天步行者和奇才这组对决展开了首场比赛的较量，奇才全队表现出色，在阿里扎、比尔猛烈的三分火力下，一直领先保持到比赛结束......</p>
        </a>
      </div>
  
     列表组后可以有徽章功能
        <ul class="list-group">
        <li class="list-group-item">
          <span class="badge">52</span>
          中国队金牌
        </li>
        <li class="list-group-item">
          <span class="badge">48</span>
          美国队金牌
        </li>
        <li class="list-group-item">
          <span class="badge">41</span>
          俄罗斯队金牌
        </li>
      </ul>


11   模态对话框
   
       <h2>模态对话框插件</h2><hr>
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal" id="myModal" >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title" id="myModalLabel">对话框标题</h4>
            </div>
            <div class="modal-body">
              模态对话框示例
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary">保存</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

12 标签页切换
      <h2>标签页切换插件</h2><hr>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
        <li><a href="#profile" data-toggle="tab">概述</a></li>
        <li><a href="#messages" data-toggle="tab">信息</a></li>
        <li><a href="#settings" data-toggle="tab">设置</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="home">
          <h3>欢迎来到Bootstrap 3的jQuery插件测试</h3>
        </div>
        <div class="tab-pane" id="profile">
          <p>这里用于提供Bootstrap 3的jQuery插件的测试用例，并提供讲解</p>
        </div>
        <div class="tab-pane" id="messages">信息</div>
        <div class="tab-pane" id="settings">设置</div>
      </div>


      13 tooltips提示框
             <script>
      $('.btn').tooltip();
      </script>
          <h2>Tooltip插件</h2><hr>
      <!-- Tooltip, 必须显式的调用 $('.btn').tooltip(); -->
      <a href="#" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>

      <h2>点击弹出框插件</h2><hr>
      <!-- Tooltip, 必须显式的调用 $('.btn').tooltip(); -->
      <a href="javascript:void(0);" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="采用了点击事件触发，相比Tooltip可以显示更多、更正式的内容，并且可以配置更多样式。"
      data-original-title="弹出框的应用">点击了解更多....</a>

      14 按钮的 loading 状态
              <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary"> 提交 </button>
                $('#loading-example-btn').click(function () {
        var btn = $(this)
        btn.button('loading')
      });

      15 <h2>折叠插件</h2><hr>
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Collapsible Group Item #1
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Collapsible Group Item #2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                Collapsible Group Item #3
              </a>
            </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>