bootstrap-组件、插件

一. bootstrap-组件-响应式导航条

1. 特征

• 在PC和平板中默认要显示所有的内容
• 在手机中导航条默认只显示logo，以及一个“菜单折叠展开按钮”，只有点击按钮后才显示所有的菜单项

2. bootstrap中导航条的基本结构

   1. 基础类（class）— <code>.navbar</code>

   2. 按位置区分

      顶部导航条 —— .navbar-fixed-top
      和底部导航条 —— .navbar-fixed-bottom

   2）按颜色区分

     浅色底深色的字 ——  .navbar-default
     深色底浅色的字 ——  .navbar-inverse
   

   3）按定位方式分

     静态定位 - 默认值
     固态定位 - nav-fixed-top/bottom
   

3. html结构

       <div class="navbar 颜色 定位">
         <div class="container">                 
            <!-- 导航条的头部-商标加按钮-->
             <div class="navbar-header">
               <a class="navbar-brand"></a>
               <button class="navbar-toggle"></button>
             </div>
   
            <!-- 导航条的折叠菜单-->
             <div class="navbar-collapse">                  
                <ul class="nav navbar-nav">
                        <li><a href=" "></a><li>
                    </ul>
                    <!--搜索框-->
                <form class="navbar-form">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                          <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                <button class="navbar-btn">按钮</button>
                <span class="navbar-text">文本</span>
                <a class="nav-link navbar-text">链接</a>
             </div>
         </div>
      </div>
   

二、 插件

1. bootstrap基于JQ提供了十几个插件函数(类似于JQueryUI插件)，每个插件对应一个js文件，可以单独使用，也可以整体引用(bootstrap.js);
2. 调用上诉十几个插件可以用两种格式

   1) 传统的JS方式调用 

       $().dropdown()  $().tab();

   2) 使用data-*扩展属性方式调用

       <a data-toggle="dropdown">

三、插件—标签页

 <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#p1">十元套餐</a></li>

    <li><a data-toggle="tab" href="#p2">二十元套餐</a></li>

    <li><a data-toggle="tab" href="#p3">三十元套餐</a></li>

  </ul>

  <div class="tab-content">

    <div id="p1" class="tab-pane active fade in">十元套餐详情 </div>

    <div id="p2" class="tab-pane fade ">二十元套餐详情 </div>

    <div id="p3" class="tab-pane fade ">三十元套餐详情 </div>

  </div>

四.、插件—bootstrap提供的弹出框

1. 工具提示框(tooltip)

    data-toggle="tooltip"
   

2. 弹出框(popover)

    data-toggle="popover"
   

3. 警告框(alert)

    <div class="alert alert-四种颜色 alert-dismissible>
       <span class="close" data-dismiss="alert">×</span>
       xxxx
    </div>
   

4. 模态对话框(modal)
   <a class="btn btn-success" data-toggle="modal" href="#modal1">登录</a>
   <button class="btn btn-info" type="button" data-toggle="modal" data-target="#modal1">注册</button>
   
   <div id="modal1" class="modal">
   
   <div class="modal-dialog">
   
   <div class="modal-content">
   <div class="modal-header">
   头部
   <span class="close" data-dismiss="modal">&times</span>
   </div>
   <div class="modal-body">主体</div>
   <div class="modal-footer">尾部</div>
   </div>
   </div>
   </div>

五、 插件-折叠效果(collapse)

1. 触发一个折叠效果

     1）<a href="#折叠元素id" data-toggle="collapse">
   
     2) <button data-toggle="collapse" data-target="#折叠元素id">      
   

2. 折叠元素

    <div id="折叠元素id" class="collapse in">
   
    </div> 
   

3. 折叠组件的两个扩展用途

    1) 响应式导航条在手机屏幕中的效果
    2) according(手风琴)
   

4. 手风琴html结构-依托于面板和折叠组件

    <div class="panel-group" id="test">
   
      <div class="panel panel-danger">
        
        <div  class="panel-heading">
            <h3 class="panel-title">
              <a href="#item1" data-toggle="#item1" data-parent="#test">红楼梦简介</a>
            </h3>
        </div>
   
        <div id="item1" class="collapse">
   
          <div  class="panel-body">
           
           </div>
   
        </div>
   
        <div  class="panel-footer">
           尾部
        </div>
   
      </div>
   
    </div>