美文网首页
BootStrap笔记

BootStrap笔记

作者: Arale_zh | 来源:发表于2019-01-30 17:17 被阅读0次

    本书源码：https://pan.baidu.com/share/init?surl=jIzG0Hg
    提取码：etjr

    第一章 初始BootStrap

    • Bootstrap3.X 优先支持移动设备，即移动优

    第二章 BootStrap开发环境

    • 下载，引入

    1. 调用BootStrap JS特效

    • Tab切换例子
    # 自动触发规则，在标签中添加如下属性
data-toggle='tab'

# JQ调用
$(" ").click(function(e){
    e.preventDefault();
    $(this).tab("show");
})

    1. 第一个响应式布局页面

    • 根据设置的属性，不同的屏幕尺寸对应不同的布局
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <!--TODO xs代表超小屏幕,自动； sm代表平板电脑,大于750px; md代表中等屏幕,大于970px; lg代表大屏幕，大于1170px-->
        <div class="col-xs-12 col-sm-3 col-md-5 col-lg-4">
            <h1>News</h1>
            <h1>Blog</h1>
            <h1>About</h1>
        </div>
        <div class="col-xs-12 col-sm-9 col-md-7 col-lg-8">
            <p>This is a first BootStrap page.Please tests this page in various screen size.</p>
        </div>
    </div>
</div>
</body>
</html>

    第三章 BootStrap脚手架

    栅格系统

    1. 固定栅格系统

    • 默认是定宽的，响应式布局要单独引入一个css文件
    <link href="bootstrap-responsive.min.css" rel="stylesheet">

    1. 列式布局

    • 建.row的容器，插入合适数量的.span** ,不超过12列
    <div class="bs-docs-grid">
    <div class="row show-grid">
        <div class="span1">1</div>
        <div class="span11">11</div>
    </div>
</div>

    1. 偏移列

    • 使用.offset**,将列右移
    <div class="row show-grid">
    <div class="span3 offset3">3 offset 3</div>
    <div class="span2 offset2">2 offset 2</div>
</div><!-- /row -->

    1. 嵌套列

    • 在已有的.span**下插入.row容器并加入.span列
    • 注意： 被嵌套的列出总和要等于父集列数,包括基本列与偏移列数 
    <div class="bs-docs-grid">
    <div class="row-fluid show-grid">
        <div class="span12">
            level 1
            <div class="row-fluid show-grid">
                <div class="span3">
                    level 2
                </div>
                <div class="span6 offset3">
                    level 2
                </div>
            </div>
        </div>
    </div>
</div>

    1. 流式栅格系统

    • 特点：每一列的宽度是百分比，而不是固定像素
    • 将固定栅格.row,替换为.row-fluid
    • 同样支持偏移列与嵌套列

    页面布局

    1. 固定布局

    <div class="mini-layout">
    <div class="mini-layout-body"></div>
</div>

    1. 流式布局

    <div class="mini-layout fluid">
    <div class="mini-layout-sidebar"></div>
    <div class="mini-layout-body"></div>
</div>

    响应式设计

    1. 启用响应式设计

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap-responsive.min.css" rel="stylesheet">

    1. 响应式BootStrap特点

    • 可修改栅格系统中的列宽
    • 可用堆叠元素，代替浮动
    • 调整标题文本的大小，以便适应各种设备

    第四章 BootStrap样式设计

    1. 排版

    • 标题
      • h1到h6
      • 在标题标签内写入small标签-标记副标题
      <h1>
  h1. Bootstrap heading 
  <small>Secondary text</small> # TODO 副标题
</h1>
    • 基本CSS样式-页面主体
      • 全局字体大小默认14px;行高20px
      • p标签被赋予了10px的下边距
      • .lead类可以让段落更突出，字体21px;行高30px,加粗
      <p>
    Bootstrap框架默认将全局的字体大小设置为14px，行高度设置为20px，并且这些属性会直接赋予<body>中的元素和所有段落元素。
</p>
<p>
    此外，段落元素还被设置了等于0.5倍行高（即10px）的底部外边距（margin）；同时，通过添加.lead类可以让段落突出显示。
</p>
<p class="lead">
    通过添加 <code>.lead</code> 让段落突出显示 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dolorem ducimus ea fuga quod soluta sunt temporibus veritatis, voluptate voluptatibus. Animi consequatur eum nobis, sint suscipit voluptas! Fuga, modi, recusandae.
</p>
    • 强调
      • 加粗：strong标签
      • 倾斜：em标签
      • 对齐：
        • 左对齐：.text-left
        • 右对齐：.text-right
        • 中间对齐：.text-center
      • 颜色强调：
        • 灰色：.muted
        • 黄色警告：.text-warning
        • 红色错误：.text-error
        • 蓝色信息：.text-info
        • 绿色成功：.text-success
    <div class="container">
   <section id="global">
       <div class="page-header">
           <h3>基本CSS样式 - 强调样式</h3>
       </div>
   </section>
   <div class="bs-docs-example">
       <p><strong>用增加font-weight值的方式加粗强调一段文本</strong>.</p>
   </div>
   <div class="bs-docs-example">
       <p><em>还可以用斜体字强调一段文本</em>.</p>
   </div>
   <div class="bs-docs-example">
       <p>正常文本</p>
       <p><small>对于不需要强调的inline或block类型的文本使用small标签</small>.</p>
   </div>
   <div class="bs-docs-example">
       <p><strong>通过对齐方式也可以强调一段文本</strong>.</p>
       <p class="text-left">左对齐文字</p>
       <p class="text-center">中间对齐文字</p>
       <p class="text-right">右侧对齐文字</p>
   </div>
   <div class="bs-docs-example">
       <p><strong>通过工具类使用颜色来强调不同类别文本</strong>.</p>
       <p class="muted">This is muted text by '.muted' class.</p>
       <p class="text-warning">This is warning text by '.text-warning' class.</p>
       <p class="text-error">This is error text by '.text-error' class.</p>
       <p class="text-info">This is info text by '.text-info' class.</p>
       <p class="text-success">This is success text by '.text-success' class.</p>
   </div>
</div>
    • 缩略语
      • abbr标签包裹
      • 设置title属性，title=全称，悬浮显示全称
      <div class="bs-docs-example">
  <p>当把鼠标悬停在缩略语<abbr title="abbreviation">abbr</abbr>标签上需要看到完整文本内容就要使用title属性.</p>
</div>
    • 地址
      • address标签增强地址样式
      <address>
  <strong>Bootstrap, Inc.</strong><br>
  ABC Street 688号, 北京, 中国<br>
  <abbr title="Telphone Number">tel:</abbr>
  (12)3456-7890
</address>
    • 引用
      • blockquote标签实现了引用样式增强
      • 添加small标签来标注引用来源，来源名称写在cite标签中
      • .pull-right右对齐风格的引用，默认为左对齐
       <div class="bs-docs-example">
      <blockquote>
          <p>在标准的引用里,可以很简单的改变风格和内容.</p>
          <p>添加small标签来注明引用来源,来源名称可以放在cite标签里面.</p>
          <small class="pull-right">Cite in <cite title="Bootstrap Inc.">bootstrap.com</cite></small>
      </blockquote>
  </div>
  <div>
      <blockquote class="pull-right">
          <p>在标准的引用里,可以很简单的改变风格和内容.</p>
          <p>添加small标签来注明引用来源,来源名称可以放在cite标签里面.</p>
          <small>Cite in <cite title="Bootstrap Inc.">bootstrap.com</cite></small>
      </blockquote>
  </div>
    • 列表
      • 无序列表
        • ul-li,存在样式点
      • 有序列表
        • ol-li,存在顺序
      • 无样式列表
        • .unstyled类，实现无样式列表
      • 内联式列表
        • .inline实现内联式列表，也不存在样式
    • 描述---h5新增功能标签
      • 默认描述
        • dl-dt-dd，默认dt,dd不在同一行的样式
        • dt为加粗文本
        • dd为正常文本，且独占一行
        <dl>
    <dt>Bootstrap</dt>
    <dd>Bootstrap is a CSS framework.</dd>
    <dt>CSS</dt>
    <dd>CSS is Cascading Style Sheet.</dd>
    <dd>CSS 3 is the updated version.</dd>
    <dt>HTML 5</dt>
    <dd>HTML 5, CSS & Bootstrap is powerful web tools.</dd>
</dl>
      • 水平描述
        • 通过.dl-horizontal类实现水平描述
        • dt,dd在同一行，且每一个dd独占一行
        <dl class="dl-horizontal">
    <dt>Bootstrap</dt>
    <dd>Bootstrap is a CSS framework.</dd>
    <dt>CSS</dt>
    <dd>CSS is Cascading Style Sheet.</dd>
    <dd>CSS 3 is the updated version.</dd>
    <dt>HTML 5</dt>
    <dd>HTML 5, CSS & Bootstrap....</dd>
</dl>
    • 代码---h5新增功能标签
      • 内联样式代码
        • code,实现内联式代码，代码文本长度多长，样式多长,文本红色高亮
        <div class="bs-docs-example">
    inline code: <code>alert('this is inline code.')</code>.
</div>
      • 基本样式代码块
        • pre标签实现了基本样式代码块
        <div class="bs-docs-example">
    pre code: <pre>var i=1;<br>var j=2;<br>alert(i+j);</pre>
</div>
        • .prettyprint和.linenums实现了带行号的基本样式代码
        <div class="bs-docs-example">
    <pre class="prettyprint linenums" style="margin-bottom: 4px;">var i=1;<br>var j=2;<br>alert(i+j);</pre>
</div>
        • .pre-scrollable实现了带滚动条的多行代码块，最大高度350px
        <div class="bs-docs-example">
    <pre class="pre-scrollable">
    var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br></pre>
</div>

    1. 表格

    • 默认表格
      • .table实现，表格样式以虚线分割每一行
    • 斑马条纹表格
      • 在默认表格基础上加.table-striped类
    • 圆角边框表格
      • 在默认表格基础上加.table-bordered类
    • 悬停样式表格
      • 在默认表格基础上加.table-hover类，可以搭配圆角边框样式使用
    • 带有行属性的表格
      • 在tr标签添加情景类即可，情景类包括.error、.warning、.success、.info
      <table class="table table-bordered">
      <thead>
      <tr>
          <th>No.</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
      </tr>
      </thead>
      <tbody>
      <tr class="error">
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>20</td>
      </tr>
      <tr class="warning">
          <td>2</td>
          <td>李四</td>
          <td>女</td>
          <td>18</td>
      </tr>
      <tr class="success">
          <td>3</td>
          <td>王五</td>
          <td>男</td>
          <td>22</td>
      </tr>
      <tr class="info">
          <td>4</td>
          <td>姓名</td>
          <td>性别</td>
          <td>年龄</td>
      </tr>
      </tbody>
  </table>

    1. 按钮--- 任何a、button标签添加.btn系列类均可呈现多种风格的按钮

    • 默认样式按钮
      • 默认 - .btn
      • 主要 - .btn .btn-primary
      • 信息 - .btn .btn-info
      • 成功 - .btn .btn-success
      • 警告 - .btn .btn-warning
      • 危险 - .btn .btn-danger
      • 反向 - .btn .btn-inverse
      • 链接 - .btn .btn-link
      <table class="table table-bordered table-striped">
          <thead>
          <tr>
              <th>按钮外观</th>
              <th>样式（class）</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td><button type="button" class="btn">默认</button></td>
              <td><code>btn</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-primary">主要</button></td>
              <td><code>btn btn-primary</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-info">信息</button></td>
              <td><code>btn btn-info</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-success">成功</button></td>
              <td><code>btn btn-success</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-warning">警告</button></td>
              <td><code>btn btn-warning</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-danger">危险</button></td>
              <td><code>btn btn-danger</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-inverse">反向</button></td>
              <td><code>btn btn-inverse</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-link">链接</button></td>
              <td><code>btn btn-link</code></td>
          </tr>
          </tbody>
      </table>
    • 按钮大小设置
      • 超小 - .btn-mini
      • 小 - .btn-small
      • 大 - .btn-large
              <table class="table table-bordered table-striped">
          <thead>
          <tr>
              <th>按钮外观</th>
              <th>样式（class）</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td><button class="btn btn-mini" type="button">Mini button</button></td>
              <td><code>btn btn-mini</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-small">Small button</button></td>
              <td><code>btn btn-small</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-primary">Default button</button></td>
              <td><code>btn btn-primary</code></td>
          </tr>
          <tr>
              <td><button type="button" class="btn btn-large">Large button</button></td>
              <td><code>btn btn-large</code></td>
          </tr>
          </tbody>
      </table>
    • 特殊样式按钮
      • 块级 - .btn-block,独占一行
      • 禁用 - disable,不能点

    1. 图片

    • 图片样式
      • 圆角方块 - .img-rounded
      • 圆形 - .img-circle
      • 带边框的方形 - .img-polaroid
      <div class="bs-docs-example bs-docs-example-images">
      <img data-src="../assets/js/holder/holder.js/90x90" class="img-rounded">
      <img data-src="../assets/js/holder/holder.js/90x90" class="img-circle">
      <img data-src="../assets/js/holder/holder.js/90x90" class="img-polaroid">
  </div>

    第五章 组件设计

    1. 下拉菜单

    • 标签：
      • ul-li列表标签，需包裹在.dropdown类中或者开启相对定位的元素中，并给ul标签添加.dropdown-menu类
      • .divider类为一条分割线,.dropmenu下的类，不然没效果
      <div class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
        <li><a tabindex="-1" href="#">下拉菜单A</a></li>
        <li><a tabindex="-1" href="#">下拉菜单B</a></li>
        <li><a tabindex="-1" href="#">下拉菜单C</a></li>
        <li class="divider"></li> 
        <li><a tabindex="-1" href="#">下拉菜单分割线D</a></li>
        <li><a tabindex="-1" href="#">下拉菜单分割线E</a></li>
  </ul>
</div>
    • 对齐方式
      • .pull-right使下拉菜单右对齐，.pull-left为默认的左对齐
        <div class="dropdown clearfix">
      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
          <li><a tabindex="-1" href="#">右对齐下拉菜单A</a></li>
          <li><a tabindex="-1" href="#">右对齐下拉菜单B</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#">右对齐下拉菜单分割线C</a></li>
      </ul>
  </div>
    • 禁用
      • 在li标签添加.disable类
        <div class="dropdown clearfix">
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
          <li><a tabindex="-1" href="#">下拉菜单A</a></li>
          <li class="disabled"><a tabindex="-1" href="#">下拉菜单B</a></li>
          <li><a tabindex="-1" href="#">下拉菜单C</a></li>
          <li class="divider"></li>
          <li class="disabled"><a tabindex="-1" href="#">下拉菜单分割线D</a></li>
          <li><a tabindex="-1" href="#">下拉菜单分割线E</a></li>
      </ul>
  </div>
    • 子下拉菜单
      • 在li标签内嵌套一层实现子下拉菜单ul-li,并给li标签添加.dropdown-submenu类
        • 默认右弹出
        <div class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
        <li><a tabindex="-1" href="#">下拉菜单A</a></li>
        <li><a tabindex="-1" href="#">下拉菜单B</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">弹出子下拉菜单</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">子下拉菜单A</a></li>
                <li><a tabindex="-1" href="#">子下拉菜单B</a></li>
                <li><a tabindex="-1" href="#">子下拉菜单C</a></li>
            </ul>
        </li>
    </ul>
</div>
        • 向右上弹出---将.dropdown类换成.dropup类
        <div class="dropup clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
        <li><a tabindex="-1" href="#">下拉菜单A</a></li>
        <li><a tabindex="-1" href="#">下拉菜单B</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">向上弹出子下拉菜单</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">子下拉菜单A</a></li>
                <li><a tabindex="-1" href="#">子下拉菜单B</a></li>
                <li><a tabindex="-1" href="#">子下拉菜单C</a></li>
            </ul>
        </li>
    </ul>
</div>
        • 向左弹出---子菜单栏的父标签li添加.pull-left类
        <div class="dropdown clearfix">
    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
        <li><a tabindex="-1" href="#">下拉菜单A</a></li>
        <li><a tabindex="-1" href="#">下拉菜单B</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu pull-left">
            <a tabindex="-1" href="#">向左弹出子下拉菜单</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">子下拉菜单A</a></li>
                <li><a tabindex="-1" href="#">子下拉菜单B</a></li>
                <li><a tabindex="-1" href="#">子下拉菜单C</a></li>
            </ul>
        </li>
    </ul>
</div>

    1. 按钮组

    • 基本按钮组
      • 把一组.btn按钮放在.btn-group类的容器中
        <div class="btn-group" style="margin: 9px 0 5px;">
      <button class="btn">Left</button>
      <button class="btn">Middle</button>
      <button class="btn">Right</button>
  </div>
    • 工具栏按钮组
      • 通过.btn-toolbar类容器，将每个按钮组组合成工具栏
        <div class="btn-toolbar" role="toolbar" style="margin: 0;">
      <div class="btn-group">
          <button type="button" class="btn btn-default">TB1-1</button>
          <button type="button" class="btn btn-default">TB1-2</button>
          <button type="button" class="btn btn-default">TB1-3</button>
      </div>
      <div class="btn-group">
          <button type="button" class="btn btn-default">TB2-1</button>
          <button type="button" class="btn btn-default">TB2-2</button>
      </div>
      <div class="btn-group">
          <button type="button" class="btn btn-default">TB3-1</button>
      </div>
  </div>
    • 垂直按钮组
      • 通过.btn-group-certical类实现的
        <div class="btn-group btn-group-vertical" style="margin: 4px;">
      <button type="button" class="btn btn-default">button top</button>
      <button type="button" class="btn btn-default">button middle</button>
      <button type="button" class="btn btn-default">button bottom</button>
  </div>

    1. 按钮式下拉菜单

    • 通过组合按钮组与菜单
      1. .btn-toolbar添加工具栏--多个按钮组.btn-group时候使用
      2. .btn-group添加按钮组
      3. .btn .dropdown-toggle(下拉效果)添加按钮
      4. .caret下拉箭头,放在span\b标签中
      5. .dropdown-menu添加下拉菜单
      <div class="btn-toolbar" style="margin: 0;">
      <div class="btn-group">
          <button class="btn dropdown-toggle" data-toggle="dropdown">按钮式下拉菜单 <span class="caret"></span></button>
          <ul class="dropdown-menu">
              <li><a href="#">Button Menu A</a></li>
              <li><a href="#">Button Menu B</a></li>
              <li class="divider"></li>
              <li><a href="#">Button Menu C</a></li>
          </ul>
      </div><!-- /btn-group -->
      <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
          <ul class="dropdown-menu">
              <li><a href="#">Button Menu A</a></li>
              <li><a href="#">Button Menu B</a></li>
              <li class="divider"></li>
              <li><a href="#">Button Menu C</a></li>
          </ul>
      </div><!-- /btn-group -->
  </div>

    1. 导航

    • 默认标签导航
      • ul-li标签添加.nav .nav-tabs类
        <ul class="nav nav-tabs">
      <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>
    • pills标签导航
      • ul-li标签添加.nav .nav-pills类
        <ul class="nav nav-pills">
      <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>
    • 堆叠式标签导航
      • ul-li标签添加.nav .nav-tabs .nav-stacked类
        <ul class="nav nav-tabs nav-stacked">
      <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>
    • 下拉式导航
      • li增加ul .dropdown-menu
      <ul class="nav nav-tabs">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">财经</a></li>
      <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">体育
              <b class="caret"></b>
          </a>
          <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>
      </li>
      <li><a href="#">论坛</a></li>
  </ul>
    • 列表式导航
      • ul-li添加.nav-list类，同时li增加.nav-header来标注分类标题
        <ul class="nav nav-list">
      <li class="nav-header">新闻</li>
      <li class="active"><a href="#">财经</a></li>
      <li><a href="#">军事</a></li>
      <li><a href="#">娱乐</a></li>
      <li class="nav-header">体育</li>
      <li><a href="#">足球</a></li>
      <li><a href="#">篮球</a></li>
      <li class="divider"></li>
      <li><a href="#">排球</a></li>
  </ul>
    • 标签页式导航
      • .tabbale类存放导航+导航页的容器
      • .nav-tabs类添加导航标签
      • .tab-content添加导航页容器
      • .tab-pane添加某一个导航的标签页
      • 注意： .tab-pane中的id与li-a标签中的href相对应 
        <div class="tabbable" style="margin-bottom: 8px;">
      <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">新闻</a></li>
          <li><a href="#tab2" data-toggle="tab">财经</a></li>
          <li><a href="#tab3" data-toggle="tab">体育</a></li>
          <li><a href="#tab4" data-toggle="tab">娱乐</a></li>
          <li><a href="#tab5" data-toggle="tab">论坛</a></li>
      </ul>
      <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
          <div class="tab-pane active" id="tab1">
              <p>新闻标签页.</p>
          </div>
          <div class="tab-pane" id="tab2">
              <p>财经标签页.</p>
          </div>
          <div class="tab-pane" id="tab3">
              <p>体育标签页.</p>
          </div>
          <div class="tab-pane" id="tab4">
              <p>娱乐标签页.</p>
          </div>
          <div class="tab-pane" id="tab5">
              <p>论坛标签页.</p>
          </div>
      </div>
  </div> <!-- /tabbable -->

    1. 导航条

    • 默认样式导航条
      • .navbar定义导航条，.brand定义导航条标题，ul-li.nav再定义一个导航菜单
        <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">导航条</a>
            <ul class="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>
    </div>
    • 导航条表单
      • 导航条中加入form标签元素内容，构成导航条表单
    • 响应式导航条
      • .navbar类导航条容器-a.btn-navbar触发按钮-.nav-collapse .collapse类导航菜单容器
        <div class="navbar">
      <div class="navbar-inner">
          <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">响应式导航条</a>
              <div class="nav-collapse collapse navbar-responsive-collapse">
                  <ul class="nav">
                      <li class="active"><a href="#">首页</a></li>
                      <li><a href="#">导航条</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉导航条<b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">导航条</a></li>
                              <li><a href="#">导航条</a></li>
                              <li class="divider"></li>
                              <li class="nav-header">导航条</li>
                              <li><a href="#">导航条</a></li>
                          </ul>
                      </li>
                  </ul>
                  <form class="navbar-search pull-left" action="">
                      <input type="text" class="search-query span2" placeholder="Search">
                  </form>
              </div><!-- /.nav-collapse -->
          </div>
      </div><!-- /navbar-inner -->
  </div><!-- /navbar -->

    1. 分页

    • 标准分页
      • .pagination类-ul-li实现标准分页
        <div class="pagination">
      <ul>
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">&raquo;</a></li>
      </ul>
  </div>
    • 翻页分页
      • .pager类实现翻页分页
        <ul class="pager">
      <li><a href="#">前一页</a></li>
      <li><a href="#">后一页</a></li>
  </ul>

    1. 标签与徽章

    • .label实现标签，存在各种样式，成功、警告等
    • .badge实现徽章，存在各种样式
    <span>标签:</span>
<span class="label">默认样式</span>
<span class="label label-success">成功</span>
<span class="label label-warning">警告</span>
<span class="label label-important">重要</span>
<span class="label label-info">信息</span>
<span class="label label-inverse">反色</span>
<br><br><br>
<span>徽章:</span>
<span class="badge">1</span>
<span class="badge badge-success">2</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>

    1. 进度条

    • 基本样式进度条
      • .progress定义进度条组件容器，.bar定义进度条，width设置值
        <div class="progress">
      <div class="bar" style="width: 80%;"></div>
  </div>
    • 斜条纹样式进度条
      • .progress .progress-striped实现斜条纹样式
      • 加上.active可实现动画效果
        <div class="progress progress-striped active">
      <div class="bar" style="width: 50%;"></div>
  </div>
    • 堆叠样式
      • 多个.bar类设置多个进度条
        <div class="progress">
      <div class="bar bar-success" style="width: 50%"></div>
      <div class="bar bar-warning" style="width: 25%"></div>
      <div class="bar bar-danger" style="width: 15%"></div>
  </div>

    1. Glyphicons字体图标

    <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span> <span class="sr-only">左对齐</span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span> <span class="sr-only">中间对齐</span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span> <span class="sr-only">右对齐</span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span> <span class="sr-only">两端对齐</span></button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar">
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
    <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
    <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button>
</div>

    第六章 插件设计

    • 插件就是通过js脚本为组件添加一些动态效果

    1. 模态对话框

    • 使用说明
      • 放置位置：放在html代码最高层级内，即body的直接子元素，避免其他组件影响模态框的显示和使用。
      • 重叠使用：不建议重叠使用，即在同一个模态框中使用多个对话框，如果要使用需要修改模态框的id以及id对应显示的data-target。
    • 动态模态对话框
      1. 定义一个button按钮，data-target属性值对应模态框容器id
      2. 定义模态框容器，id必须，.modal .fade类
      3. 容器中定义一个容器对话框.modal-dialog
      4. 对话框中定义一个内容层.nodal-content
      5. 内容层下定义对话框头部.modal-header,内容主体.modal-body,对话框底部.modal-footer

    1. ScrollSpy事件监听

        <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
                    <span class="sr-only">Toggle Nav</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 bs-example-js-navbar-scrollspy">
                <ul class="nav navbar-nav">
                    <li><a href="#header">@顶部</a></li>
                    <li><a href="#mid">@主体</a></li>
                    <li class="dropdown">
                        <a href="#" id="navbarDrop" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop">
                            <li><a href="#setting" tabindex="-1">设置</a></li>
                            <li><a href="#bbs" tabindex="-1">讨论</a></li>
                            <li class="divider"></li>
                            <li><a href="#about" tabindex="-1">关于</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
        <h4 id="header">@顶部</h4>
        <p>滚动监听 - 顶部</p>
        <p>滚动监听 - 顶部</p>
        <p>滚动监听 - 顶部</p>
        <p>滚动监听 - 顶部</p>
        <p>滚动监听 - 顶部</p>
        <h4 id="mid">@主体</h4>
        <p>滚动监听 - 主体</p>
        <p>滚动监听 - 主体</p>
        <p>滚动监听 - 主体</p>
        <h4 id="setting">设置</h4>
        <p>滚动监听 - 设置</p>
        <p>滚动监听 - 设置</p>
        <p>滚动监听 - 设置</p>
        <h4 id="bbs">讨论</h4>
        <p>滚动监听 - 讨论</p>
        <p>滚动监听 - 讨论</p>
        <p>滚动监听 - 讨论</p>
        <h4 id="about">关于</h4>
        <p>滚动监听 - 关于</p>
        <p>滚动监听 - 关于</p>
        <p>滚动监听 - 关于</p>
    </div>

    1. Tab切换

        <ul id="navTab" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">主页</a></li>
        <li role="presentation"><a href="#news" role="tab" id="news-tab" data-toggle="tab" aria-controls="news">新闻</a></li>
        <li role="presentation" class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">下拉菜单<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@设置</a></li>
                <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@定制</a></li>
                <li class="divider"></li>
                <li><a href="#dropdown3" tabindex="-1" role="tab" id="dropdown3-tab" data-toggle="tab" aria-controls="dropdown3">@关于</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
            <p>主页标签页</p>
            <p>主页标签页</p>
            <p>主页标签页</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="news" aria-labelledBy="profile-tab">
            <p>新闻标签页</p>
            <p>新闻标签页</p>
            <p>新闻标签页</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
            <p>设置标签页</p>
            <p>设置标签页</p>
            <p>设置标签页</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
            <p>定制标签页</p>
            <p>定制标签页</p>
            <p>定制标签页</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="dropdown3" aria-labelledBy="dropdown3-tab">
            <p>关于</p>
            <p>关于</p>
            <p>关于</p>
        </div>
    </div>

    1. 提示框

    • 工具提示框
      • 通过data-toggle="tooltip"为按钮、标签添加工具提示框
      • data-placement="left/right/top/bottom"设置弹出形式
      • 通过title属性添加提示内容
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧工具提示框">左侧工具提示框</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上侧工具提示框">上侧工具提示框</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧工具提示框">右侧工具提示框</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="下侧工具提示框">下侧工具提示框</button>

    第七章 响应式多媒体

    • css3新特性 多媒体自适应
      • @media - - 对不同媒体设备选用不同效果
        @media screen and (max-width:62.75em){
    选择器{设置样式} 
  }

    第八章 扁平化风格页面

    1. 概念

    • 采用简单的纯色块，更简单的设计风格
    • 页面架构：页眉导航条，左侧导航条，网页主体，页脚

    1. 页眉设计

    <header>
    <div 容器>
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
        <div>logo部分</div>
        <nav>导航条部分</nav>
    </duv>
</header>

    1. 左侧导航，网页主体

    • .row下占用几列
    <div class="row">
    <div class="占几列">
    导航内容
    </div>
    <div class='占几列'>
    网页主体
    </div>
</div>

    1. 页脚

    <footer>
    <p>页脚内容</p>
</footer>

    第九章 图片幻灯页面

    1. 幻灯片

        <!-- 幻灯片容器 -->
    <div id="id-carousel" class="carousel slide" data-ride="carousel">

      <!-- 小圆点 -->
      <ol class="carousel-indicators">
        <li data-target="#id-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#id-carousel" data-slide-to="1"></li>
        <li data-target="#id-carousel" data-slide-to="2"></li>
      </ol>
      <!-- 图片容器 -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/thumb/thumb-01.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h2>Carousel Examples</h2>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/thumb/thumb-02.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h2>Carousel Examples</h2>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/thumb/thumb-03.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h2>Carousel Examples</h2>
            </div>
          </div>
        </div>
      </div>
      <!-- 左右箭头 -->
      <a class="left carousel-control" href="#id-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#id-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- carousel end -->

    1. 图片特辑---图片配以文字描述

        # 容器
    <div id="id-featurette" class="row featurette">
       # 图片 featurette-image img-responsive
      <div class="col-sm-5">
        <img class="featurette-image img-responsive" src="img/sider/200x200.jpg" alt="Generic placeholder image">
      </div>
      # 文字标题 featurette-heading
      <div class="col-sm-7">
        <h2 class="featurette-heading">Featurette Title. <span class="text-muted"> - by king.</span></h2>
        <p class="lead">This is contents.</p>
      </div>
    </div>

    第十章 按钮风格

    • 可利用js css自定义按钮风格与样式

    第十一章 响应式表格设计

    • 借助datatables插件实现对表格的排序，搜索、分页等功能

    1. 基本表格

    • html的table表格，加上调用插件的方法实现
              <table id="id-bootstrap-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
          <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
          </thead>
          <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
          </tfoot>
          <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
          </tr>
          <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
          </tr>
          <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
          </tr>
          <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
          </tr>
          <tr>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
          </tr>
          <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
          </tr>
          <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
          </tr>
          <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
          </tr>
          <tr>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
          </tr>
          <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
          </tr>
          <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
          </tr>
          <tr>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
          </tr>
          <tr>
            <td>Paul Byrd</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
          </tr>
          <tr>
            <td>Gloria Little</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$237,500</td>
          </tr>
          <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
          </tr>
          <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
          </tr>
          <tr>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
          </tr>
          <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
          </tr>
          <tr>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
          </tr>
          <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
          </tr>
          <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
          </tr>
          <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$92,575</td>
          </tr>
          <tr>
            <td>Jennifer Chang</td>
            <td>Regional Director</td>
            <td>Singapore</td>
            <td>28</td>
            <td>2010/11/14</td>
            <td>$357,650</td>
          </tr>
          <tr>
            <td>Brenden Wagner</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>28</td>
            <td>2011/06/07</td>
            <td>$206,850</td>
          </tr>
          <tr>
            <td>Fiona Green</td>
            <td>Chief Operating Officer (COO)</td>
            <td>San Francisco</td>
            <td>48</td>
            <td>2010/03/11</td>
            <td>$850,000</td>
          </tr>
          <tr>
            <td>Shou Itou</td>
            <td>Regional Marketing</td>
            <td>Tokyo</td>
            <td>20</td>
            <td>2011/08/14</td>
            <td>$163,000</td>
          </tr>
          <tr>
            <td>Michelle House</td>
            <td>Integration Specialist</td>
            <td>Sidney</td>
            <td>37</td>
            <td>2011/06/02</td>
            <td>$95,400</td>
          </tr>
          <tr>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>2009/10/22</td>
            <td>$114,500</td>
          </tr>
          <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$145,000</td>
          </tr>
          <tr>
            <td>Gavin Cortez</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
          </tr>
          <tr>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$324,050</td>
          </tr>
          <tr>
            <td>Unity Butler</td>
            <td>Marketing Designer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/12/09</td>
            <td>$85,675</td>
          </tr>
          <tr>
            <td>Howard Hatfield</td>
            <td>Office Manager</td>
            <td>San Francisco</td>
            <td>51</td>
            <td>2008/12/16</td>
            <td>$164,500</td>
          </tr>
          <tr>
            <td>Hope Fuentes</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
          </tr>
          <tr>
            <td>Vivian Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
          </tr>
          <tr>
            <td>Timothy Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
          </tr>
          <tr>
            <td>Jackson Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
          </tr>
          <tr>
            <td>Olivia Liang</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
          </tr>
          <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
          </tr>
          <tr>
            <td>Sakura Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
          </tr>
          <tr>
            <td>Thor Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
          </tr>
          <tr>
            <td>Finn Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
          </tr>
          <tr>
            <td>Serge Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
          </tr>
          <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
          </tr>
          <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
          </tr>
          <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
          </tr>
          <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
          </tr>
          <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
          </tr>
          <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
          </tr>
          <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
          </tr>
          <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
          </tr>
          <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
          </tr>
          <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
          </tr>
          </tbody>
        </table>
# js部分
$('#id-bootstrap-table').DataTable();
    1. 数组表格
    • 定义一个table，没有行 列等
    • Javascript数组，在调用插件实现
    var dataSet = [
        [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
        [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
        [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
        [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
        [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
        [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
        [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
        [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
        [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
        [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
        [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
        [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
        [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
        [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
        [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
        [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
        [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
        [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
        [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
        [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
        [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
        [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
        [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
        [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
        [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
        [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
        [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
        [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
        [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
        [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
        [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
        [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
        [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
        [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
        [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
        [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
      ];
      $('#id-array-table').DataTable( {
        data: dataSet, // 数据
        // 表头字段
        columns: [
          { title: "Name" },
          { title: "Position" },
          { title: "Office" },
          { title: "Extn." },
          { title: "Start date" },
          { title: "Salary" }
        ]
      });

    1. ajax表格

    • 支持异步加载数据
      格式{“data”：[[],[]]}

    第十二章 响应式图标设计

    • 本章主要介绍，如何使用Echarts插件实现图标设计
    • 创建DOM，引入图表(注意2.X和3.X的引入不同)，渲染图表。

    第十三章 JQuery UI Bootstrap工具

    • JQuery UI Bootstrap是整合了 JQuery UI 和 Bootstrap的前端工具。

    1. 按钮控件

    • 基本样式按钮
      • 基本：button标签
      • primary：.ui-button-primary
      • success：.ui-button-success
      • error：.ui-button-error
      • 注意： bootstrap样式与jQuery UI 样式不兼容
      • 调用方法
      $("要激活的选择器").button()
    • Set样式按钮--工具条按钮
      • 带样式的单选框和多选框
      • 调用方法
        $("要激活的选择器").buttonset()
    • set+基本样式按钮
      • 特点：button嵌套set button
        $("要激活的选择器").button()
  $("要激活的选择器").buttonset()

    1. 折叠面板

    $("要激活的选择器").accordion({
    header:"h3"   // 折叠面板标题信息
})

    1. 对话框

    // 对按钮添加点击事件并打开对话框
$('要激活的选择器').click(function () {
    $('要激活的选择器').dialog('open');
    return false;
});

// 对话框的一些样式设定
$('要激活的选择器').dialog({
    autoOpen: false, // 不自动打开
    width: 600,  // 设置宽度
    // 定义两个按钮
    buttons: {
        "Ok": function () {
            $(this).dialog("close"); // 添加事件
        },
        "Cancel": function () {
            $(this).dialog("close"); // 添加事件
        }
    }
});

$("要激活的选择器").dialog({
    autoOpen: false,
    modal: true, // 定义对话框为模态对话框
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
    }
});

    1. 标签页

    • 基本标签页 
      $("要注册的选择器").tabs()

    1. 覆盖与重叠

    2. 高亮与错误提示

    3. 日期选择器

    4. 滑块

    5. 自动补全

    6. 下拉菜单

    7. 提示信息

    8. 小图标

    9. 微调按钮

    第十四章 Jquery Mobile 框架与 Bootstrap 主题风格

    • 主题颜色
      • data-theme="a"-->浅蓝色-默认
      • data-theme="b"-->深蓝色 主要
      • data-theme="c"-->红色 错误
      • data-theme="d"-->绿色 成功
      • data-theme="e"-->蓝色 info
      • data-theme="f"-->橘黄色 警告
    • 外观
      • data-role="button"-->按钮
      • data-role="listview"-->ul的列表样式
      • data-role="list-divider"-->li的列表样式
    • 图标
      data-icon = ""

    第十五章 实战

    1. 引入框架

    • JQuery + Bootstrap.css/js
    • Bootstrap

    1. 确定页面布局

    • 页眉 + 主体 + 页脚
    • 布局采用栅格系统 col-xs/sm/md/lg

    相关文章

      网友评论

          本文标题：BootStrap笔记

          本文链接：https://www.haomeiwen.com/subject/bhpcsqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|BootStrap笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！