功能强大的Bootstrap组件（结合js）

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="js/jquery-3.1.0.min.js"></script><script src="js/bootstrap.min.js"></script>

<!--data-target是我们的模态框的id，data-whatever="@ime"是我们传入模态框的标签和值--><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">  打开模态框</button>

<div class="modal " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">  <!--这是小模态框，将modal-sm换成modal-lg是大模态框-->  <div class="modal-dialog modal-sm">    <div class="modal-content">      <!--模态框头部-->      <div class="modal-header">        <!--右上角的关闭按钮-->        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true">×</span>        </button>        <!--标题-->        <div class="modal-title">Modal title</div>      </div>      <!--模态框内容-->      <div class="modal-body">        <!--模态框内容可以是文字或表格-->        <!--<p>hello</p>-->        <form>          <div class="form-group">            <label class="control-label">username</label>            <input class="form-control" type="text">          </div>          <div class="form-group">            <label class="control-label">password</label>            <input class="form-control" type="password">          </div>        </form>      </div>      <!--模态框脚部-->      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">          Close        </button>        <button type="button" class="btn btn-primary">          保存        </button>      </div>    </div>  </div></div>

//  绑定模态框展示的方法  $("#myModal").on("show.bs.modal",function(e){//    获得点击打开的按钮    var button=$(e.relatedTarget)//    根据标签获得按钮传入的参数    var recipient=button.data("whatever")//    获得模态框本身    var modal=$(this)//    更改将title的text    modal.find(".modal-title").text("Hello"+recipient);//    更改body里input的值    modal.find(".modal-body input").val(recipient)  })

<!--标签栏固定的显示内容的顶部-->    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">      <div class="container-fluid">        <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">          <ul class="nav navbar-nav">            <!--a标签中的连接是下面标题的id-->            <li><a href="#iwen">iwen</a> </li>            <li><a href="#ime">ime</a> </li>            <!--在标签页中嵌套下拉菜单-->            <li class="dropdown">              <a href="#" class="dropdown-toggle" data-toggle="dropdown">                下拉菜单                <span class="caret"></span>              </a>              <ul class="dropdown-menu" role="menu">                <li><a href="#one" tabindex="-1">one</a> </li>                <li><a href="#two" tabindex="-1">two</a> </li>                <li><a href="#three" tabindex="-1">three</a> </li>              </ul>            </li>          </ul>        </div>      </div>    </nav>

<h2 id="iwen">@iwen</h2><p>这是一个人 这是一个人</p><h2 id="ime">@ime</h2><p>这是一个人 这是一个人</p><h2 id="one">@one</h2><p>这是一个人 这是一个人</p><h2 id="two">@two</h2><p>这是一个人 这是一个人</p><h2 id="three">@three</h2><p>这是一个人 这是一个人</p>

// 绑定标签切换时的方法  $("#myScrollspy").on("activate.bs.scrollspy",function(e){    alert("hello");  })

<ul id="myTab" class="nav nav-tabs">    <!--a标签链接对应下面tab-pane的id-->    <li ><a href="#home" data-toggle="tab">Home</a> </li>    <li><a href="#profile" data-toggle="tab">Profile</a> </li>    <li class="dropdown">      <a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">        下拉菜单        <span class="caret"></span>      </a>      <ul class="dropdown-menu" role="menu">        <!--与普通下拉菜单不同，要加data-toggle="tab"-->        <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li>        <li><a href="#two" tabindex="-1" data-toggle="tab">two</a> </li>      </ul>    </li>  </ul>

 <div id="myTabContent" class="tab-content">    <div class="tab-pane fade" id="home">      <p>home</p>    <div class="tab-pane fade" id="profile">      <p>profile</p>    <div class="tab-pane fade" id="one">      <p>one</p>    <div class="tab-pane fade" id="two">      <p>two</p>

$('#myTabs a[href="#profile"]').tab('show') // 根据名字选择$('#myTabs a:first').tab('show') // 选择第一个标签页$('#myTabs a:last').tab('show') // 选择最后一个标签页$('#myTabs li:eq(2) a').tab('show') // 选择第三个标签页（因为0是第一个），如果是下拉菜单里的标签页，数字要加1

<p>    <!--若title内容为空则显示data-original-title的内容，placement为显示的位置，可设为top|bottom|left|right-->    <!--参数可以以data-****的方式设置-->    欢迎来到<a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" title="title"        data-placement="bottom" data-original-title="www.jk.com">jack's page</a>  </p>

<!--data-trigger="foucus"点击空白可消失，不加的话点击按钮消失，设为hover的话鼠标移动的按钮显示，移开消失-->  <!--这个弹出框标题为title，内容为content-->  <button  type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">    弹出框  </button>

 <!--可以设置按钮在loading时的文字-->  <button type="button" data-loading-text="Loding for 3s" class="btn btn-primary js-loading-btn">    Loading Status  </button>

//  绑定按钮的点击事件  $(".js-loading-btn").on("click", function (e) {//    点击后设为loading状态，显示loading的文字    var btn = $(this).button("loading");//    3s后恢复    setTimeout(function (e) {      btn.button("reset")    }, 3000)  })

<!--href为显示内容的id-->  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">点击查看</a>  <div class="collapse" id="collapseExample">    <div class="well">      Hello    </div>  </div>

<div class="panel-group" id="accordion" role="tablist">    <div class="panel panel-default">      <div class="panel-heading" role="tab" id="headingOne">        <!--显示的标题-->        <h4 class="panel-title">          <!--data-parent要是panel-group的id-->          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>        </h4>      </div>      <!--加了in表示打开，不加表示隐藏-->      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">        <div class="panel-body">          Hello<br>          Hello<br>          Hello<br>        </div>      </div>    </div>    <div class="panel panel-default">      <div class="panel-heading" role="tab" id="headingTwo">        <h4 class="panel-title">          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>        </h4>      </div>      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">        <div class="panel-body">          Hello<br>          Hello<br>          Hello<br>        </div>      </div>    </div>    <div class="panel panel-default">      <div class="panel-heading" role="tab" id="headingThree">        <h4 class="panel-title">          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>        </h4>      </div>      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">        <div class="panel-body">          Hello<br>          Hello<br>          Hello<br>        </div>      </div>    </div>  </div>

<div id="carousel-example-generic" class="carousel slide">    <!--这是下面那三个白色圆indicator-->    <ol class="carousel-indicators">      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>      <li data-target="#carousel-example-generic" data-slide-to="1"></li>      <li data-target="#carousel-example-generic" data-slide-to="2"></li>    </ol>    <!--轮换页的内容-->    <div class="carousel-inner">      <div class="item active">        <img src="images/4.jpg">        <!--添加文字-->        <div class="carousel-caption">          <h3>U3D</h3>          <p>新版本升级</p>        </div>      </div>      <div class="item ">        <img src="images/2.jpg">        <div class="carousel-caption">          <h3>U3D</h3>          <p>新品上线</p>        </div>      </div>      <div class="item ">        <img src="images/3.jpg">        <div class="carousel-caption">          <h3>Apple</h3>          <p>Apple手表</p>        </div>      </div>    </div>    <!--轮换页左边和右边的箭头-->    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">      <span class="glyphicon glyphicon-chevron-left"></span>    </a>    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">      <span class="glyphicon glyphicon-chevron-right"></span>    </a>  </div>

  //设置间隔为2s且自动轮播  $(".carousel").carousel({    interval:2000  })

<!--要设置宽度，在手机屏幕上隐藏-->  <div class="col-md-3 col-sm-4 hidden-xs">    <ul class="list-group affixed-element-top js-affixed-element-top">      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>      <a href="#" class="list-group-item">hello</a>    </ul>  </div>

  <style>    .affixed-element-top.affix{      /*如果想在底部的话可以改为bottom:10px;*/      top:10px;    }    .affixed-element-top.affix-bottom{      position: relative;    }  </style>

 $(".js-affixed-element-top").affix({    offset:{    }  })