用js控制模态弹出层

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

弹出窗动画：fade

弹出窗初始时是否显示：datashow=false(不显示)

按Esc是否取消：data-keyboard=false(不能)

点击背景是否取消：data-backdrop=static(不能)

出发模态弹出窗的郎中方法

1.模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。

        1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

        2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

2.触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

模态弹出框

“modal-header”  “modal-body”  “modal-footer”

<div class="modal show">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">模态弹出窗标题</h4>

            </div>

            <div class="modal-body">

                <p>模态弹出窗主体内容</p>

            </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 -->

徽章与标签基本一致

<a href="#">Inbox <span class="badge">42</span></a>

在button和胶囊型导航中也可以使用(在li中)

页面内标签的实现

<h3>Example heading <span class="label label-default">New</span></h3>

颜色与button颜色的使用一致

翻页分页

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

将两个li一个居左一个居右

<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>
   <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

带页码的分页 pagination 

可以控制大小

<ul class="pagination pagination-lg">

  <li><a href="#">&laquo;第一页</a></li>

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

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

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

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

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

  <li class="disabled"><a href="#">最后一页&raquo;</a></li>

</ul> 

反色导航条

将navbar-default变为navbar-inverse

<div class="navbar navbar-inverse" role="navigation">

导航条固定

.navbar-fixed-top:

.navbar-fixed-bottom:

导航条中嵌入表单

navbar-form

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

  　<div class="navbar-header">

  　    <a href="##" class="navbar-brand">慕课网</a>

  　</div>

    <ul class="nav navbar-nav">

       <li class="active"><a href="##">网站首页</a></li>

       <li class="dropdown">

          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

          <ul class="dropdown-menu">

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

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

        <li class="disabled"><a href="##">PHP</a></li>

          </ul>

      </li>

      <li><a href="##">名师介绍</a></li>

      <li><a href="##">成功案例</a></li>

      <li><a href="##">关于我们</a></li>

</ul>

     <form action="##" class="navbar-form navbar-left" rol="search">

        <div class="form-group">

       <input type="text" class="form-control" placeholder="请输入关键词" />

        </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

</div>

导航条

在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

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

     <ul class="nav navbar-nav">

<li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

</ul>

</div>

面包屑式导航 class=breadcrumb

<ol class="breadcrumb">

  <li><a href="#">首页</a></li>

  <li><a href="#">我的书</a></li>

  <li class="active">《图解CSS3》</li>

</ol> 

在导航栏中嵌入二级目录

<ul class="nav nav-pills">

  <li class="active"><a href="##">首页</a></li>

  <li class="dropdown">

      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>

      <ul class="dropdown-menu">

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

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

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

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

      </ul>

  </li>

 <li><a href="##">关于我们</a></li>

</ul>

垂直导航栏(加nav-stacked)

<ul class="nav nav-pills nav-stacked">

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

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

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

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

  <li class="disabled"><a href="##">Responsive</a></li>

 </ul>

胶囊型导航（有框）

加nav 和nav-pills

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>