BootStrap笔记

本书源码：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
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342

推荐阅读更多精彩内容

  • bootstrap笔记
    CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 1,383评论 0赞 1
  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 4,931评论 0赞 66
  • Bootstrap3入门学习(上)
    教程整理自慕课网(原文部分错误在这篇文章得到修改，本文版本Bootstrap3.3.7)。 框架简介 Bootst...
    小小奶狗阅读 2,440评论 0赞 5
  • Bootstrap学习文档（三）
    注意下面的组件，很多是需要用到 js 的，所以要引入 Bootstrap 的 js 文件和jquery 文件在示例...
    Wizey阅读 1,224评论 0赞 6
  • Jump Start Bootstrap 中文版 第4章
    第4章 Bootstrap装饰插件 JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片...
    海上名月阅读 1,607评论 5赞 6