BootStrap笔记

2019-01-30  本文已影响0人  Arale_zh

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

第一章 初始BootStrap

第二章 BootStrap开发环境

  1. 调用BootStrap JS特效

# 自动触发规则，在标签中添加如下属性
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. 固定栅格系统

<link href="bootstrap-responsive.min.css" rel="stylesheet">

  1. 列式布局

<div class="bs-docs-grid">
    <div class="row show-grid">
        <div class="span1">1</div>
        <div class="span11">11</div>
    </div>
</div>

  1. 偏移列

<div class="row show-grid">
    <div class="span3 offset3">3 offset 3</div>
    <div class="span2 offset2">2 offset 2</div>
</div><!-- /row -->

  1. 嵌套列

<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. 流式栅格系统

页面布局

  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. 排版

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

  1. 表格

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

  1. 图片

第五章 组件设计

  1. 下拉菜单

  1. 按钮组

  1. 按钮式下拉菜单

  1. 导航

  1. 导航条

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

  1. 分页

  1. 标签与徽章

<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. 进度条

  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>

第六章 插件设计

  1. 模态对话框

  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. 提示框

第七章 响应式多媒体

第八章 扁平化风格页面

  1. 概念

  1. 页眉设计

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

  1. 左侧导航，网页主体

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

第十章 按钮风格

第十一章 响应式表格设计

  1. 基本表格

          <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. 数组表格
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”：[[],[]]}

第十二章 响应式图标设计

第十三章 JQuery UI Bootstrap工具

  1. 按钮控件

  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. 标签页

  1. 覆盖与重叠

  2. 高亮与错误提示

  3. 日期选择器

  4. 滑块

  5. 自动补全

  6. 下拉菜单

  7. 提示信息

  8. 小图标

  9. 微调按钮

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

第十五章 实战

  1. 引入框架

  1. 确定页面布局

上一篇 下一篇

猜你喜欢

热点阅读