bootstrap笔记

Posted on Edited on In

介绍

twitter的Mark Otto和Jacob Thornton于2011年8月在GitHub上发布的开源前端框架.

常用的是引用其css定义.
在css上提供以下功能

  1. 圆角,间距等统一性
  2. 简便的网格系统,统一地定义大小
  3. 可以根据窗口大小自动设置元素大小

同时bootstrap也提供了js中使用的函数,
方便实现比如淡入淡出效果,按钮变色等动态效果.

环境安装

通常可以使用CDN

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   <head>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- <script src="js/bootstrap.min.js"></script> -->
   </body>
</html>
  • 需要写 DOCTYPE, 因为使用了html5的特性来获取窗口大小?
  • 需要 jQuery, js组件是基于jQuery的,获取dom元素的方法相同

也可以下载安装

下载来的bootstrap包含以下目录结构

bootstrap-4.3.1/dist
├── css
└── js

CSS

bootstrap的CSS特点如下:

  • 响应式(可以根据页面的大小自动调整外观)
  • 网格式(将页面分成12个格子)

使用上需要注意class之间的父子关系,
一个class能奏效,往往需要在其他有父class的块之下.

媒体查询

可以对不同的设备执行不同的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

/* 可以组合 */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

网格系统

bootstrap将每个主体分为12格.
可以定义一个元素占多少格,平移多少等等.

第一级为container
第二级为row
第三级为col,就是该列可以被分成12份.
不过col之下还可以再分出row, col来.

举例:

1
2
3
4
5
6
7
<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
  • 在 container class下的内容,可以获得网格的基础对齐和内边距效果
  • 同样在 row 下的也可以获得适当的间距?

用例表格

总类别 class 效果 备注
设置列大小 col-xs-1 极小的宽度为1的格子 和为12即可,可使用多个备选如 <div class="col-xs-6 col-sm-3"
col-sm-2 小的宽度为2的格子
col-md-3 中等的宽度为3的格子
col-lg-4 大的宽度为4的格子
设置偏移 col-md-offset-3 在单元格左侧空出3个中等的格 数值可以从1到11,因偏移(空白格子)导致的一行格数超过12后,靠后的格子会移动到下一行
不排斥的偏移 col-md-push-8 格子向右平移8格 仅平移格子,不会造成一行的格数超过12
col-md-pull-4 格子向左平移4格

  1. 嵌套

    col也可以作为row的容器
    进而将row嵌套进col
    嵌套后还可以分为12份

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-6">
          <p>a11</p>
        </div>
        <div class="col-md-6">
          <p>a12</p>
        </div>
      </div>
      <!-- 可以放下多个row -->
      <div class="row">
        <div class="col-md-6">
          <p>a21</p>
        </div>   
        <div class="col-md-6">
          <p>a22</p>
        </div>
      </div>
    </div>

传统排版及其他html元素

总类别 class 效果 备注
标题 page-header 表示页面标题,会在标题周围加入一些留白 用在div中
段落 lead 表示段落被强调,字更大更高
列表(对ul等列表元素使用 ) list-unstyled 表示无格式列表
list-inline 表示行内的列表(即都放在一行内表示,有点像表格)
dl-horizontal 表示水平的定义列表(一个定义和一个内容占一行,有点像表格) dl指定义列表
下拉菜单 dropdown 在div内放置button,ul,让ul可出现 div使用
dropup 同dropdown,但弹出方向是向上 内部的内容依然可使用dropdown-*
dropdown-toggle 点击时的动画效果 button使用
dropdown-menu 出现的菜单的外观,将menu隐藏的功能 ul使用
dropdown-menu-right 同dropdown-menu,但菜单会不在按纽下而是飘到右侧 ul使用
divider 分割线 li使用
dropdown-header 一个说明性的,不能点击的标题 li使用
代码块 pre-scrollable 带滚动条的代码块 在pre中使用
表格 table 普通表格,有横线,标题加粗 用于<table>
table-striped 比普通表格多奇偶行不同的底色
table-bordered 比普通表格多纵线
table-hover 鼠标所在行变深色
table-condensed 比普通表格看起来更小
table-responsive 可变动的表格,可以让表格在各种设备下保持相同的外观
表格的列 active 假装鼠标悬停于此的效果 用于 <tr>,<th>,<td>
表单 role="form" 获得默认form的定义,(label一行,input一行)
form-inline 一个单行的form,所有元素在一行,通常是文件上传
form-horizontal 横向的form,一组label和input在一行
form-group 使form组获得统一的间距 一个label,一个input合称一个form组
form-control 圆角浅色边框外观 form中input使用
form-control-static 用于修饰纯文本,不使用会有与其他元素不同的对齐,字号等
for="disabledTextInput" 输入框被禁用
id="disabledTextInput" 输入框被禁用 label使用
按钮 btn 灰色扁平的外观 input使用
btn-default 圆角矩形,平常白色,悬停灰色
btn-large, btn-sm, btn-xs 大中小的按钮
btn-link 按钮看起来像个链接,还会变色
btn-block 块级的按钮(占用一整行)
active 鼠标悬停或已经按下的外观
disabled 禁用后的外观
输入框 input-sm,input-md… 控制文字框的大小
help-block 只读的浅灰色的帮助文本
图片 img-rounded 圆角矩形图片
img-circle 圆形图片
img-thumbnail 缩略图图片(看起来像是加了一个灰白色的外边框)
img-responsive 响应式图片,自动决定大小

代码块备注
html的表达形式远比markdown等的丰富多彩
斜体表示变量用 <var>
黑背景表示按键用 <kbd>
等宽字体表示输出的结果用 <samp>

下拉菜单的实现还需要除了UI方面的配置,还需要其他属性的配合才能达到效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown">
    主题
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Java</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
    </li>
  </ul>
</div>

  1. 对齐

    总类别 class 效果 备注
    文本 text-left 左对齐的文本 代表文本的标签如 <p> 中使用
    text-right 右对齐的文本
    text-center 居中的文本
    导航栏 navbar-left 元素左对齐的导航栏
    navbar-right 元素右对齐的导航栏
    元素 pull-left 元素浮动到左边
    pull-right 元素浮动到右边
    center-block 元素占用整行(相当于display:block)并居中
    其他 clearfix 清除浮动

  2. 色彩

    除了html自带的粗体,斜体等,
    bootstrap用色彩表示强调的例子有不少.

    总类别 蓝色 绿色 浅蓝色 棕色 红色 others
    文本 text-primary text-success text-info text-warning text-danger text-muted(浅灰色表示减弱)
    背景(文本的背景色) bg-primary bg-success(淡绿) bg-info(淡蓝) bg-warning(淡黄) bg-danger(淡红)
    按钮 btn-primary btn-success btn-info btn-warning btn-danger
    表格的行(tr,th,td) success info warning danger active(比其他的行颜深以装作该行有鼠标悬停)
    表单中的小组(与form-group一同使用) has-success has-warning has-error
    面板 panel-primary panel-success panel-info panel-warning panel-danger

  3. 大小

    总类别 极小 小 中 大 超大 自适应
    元素 col-xs- col-sm col-md col-lg
    缩进 col-xs-offset col-sm-offset col-md-offset col-lg-offset
    浮动 col-xm-push,col-xm-pull 略
    文本
    按钮 btn-xs btn-sm btn btn-lg
    输入框 input-sm
    可见 visible-xs(仅超小屏幕可见) visbile-sm(仅小屏幕可见) visible-md visible-lg
    隐藏 hidden-xs(仅超小屏幕隐藏) hidden-sm(仅小屏幕可见) hidden-md hidden-lg

    关于 visible-xs 等其实还有 visible-xs-block, visible-xs-inline, visible-xs-inline-block, 并推荐使用这三个

  4. 可见性

    基本的类有 show, hidden
    除了不同屏幕大小看到不同内容外,
    还有针对软件不同,显示不同的.
    visible-print-block,
    visible-print-inline,
    visible-print-inline-block, 这个表示仅打印机可见,浏览器看不到.
    hidden-print 表示对打印机隐藏,浏览器才能看到.

  5. 其他

    class 效果
    center-block 将元素设置为整行显示并且居中
    sr-only 仅仅在屏幕阅读器(盲人等使用)上显示
    sr-only-focusable 当元素获得焦点时显示
    close 关闭图标的样子,多用于<button>

现代化的效果

  1. 图标

    bootstrap自带了一些字体的库,因此可以使用字体图标(看起来是图标,实际上是字).
    使用方法:

    1
    <span class="glyphicon glyphicon-search"></span>
    • 通常span放在button标签内,用于将字体图标显示在按钮上
    • 必须有glyphicon, 才能显示字体图标
    • glyphicon-* 等是图标名
    class 效果
    glyphicon-sort-by-attributes 排序(从小到大),箭头加横线
    glyphicon-sort-by-attributes-alt 倒序排序
    glyphicon-sort-by-order 排序(箭头加序号?)
    glyphicon-sort-by-order 倒序排序
    glyphicon-user 用户图标(上半身剪影)
    glyphicon glyphicon-zoom-in 放大镜(加号)
    glyphicon glyphicon-zoom-out 放大镜(减号)

    等等

  2. 按钮组

    在多个button的外部包裹一个div,使用如下class

    class 效果
    btn-group 中间没有缝隙的连续多个按钮
    btn-group-lg
    btn-group-sm
    btn-group-xs
    btn-group-justified 自适应大小的按钮组
    btn-group-vertical 纵向排列的按钮组
    btn-bar 防止button-group的容器,为button-group提供一定的间隙和其他外观风格

    • btn-group-justified 需要用<a>伪装<button>,
      或者将每个button包装在div中,不然会有问题

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Apple</a>
        <a href="#" class="btn btn-primary">Samsung</a>
        <a href="#" class="btn btn-primary">Sony</a>
      </div>
      <!-- 或 -->
      <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button type="button" class="btn btn-primary">Apple</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-primary">Samsung</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-primary">Sony</button>
        </div>
      </div>
      <!-- 以下导致整体长度缩小 -->
      <div class="btn-group btn-group-justified">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <button type="button" class="btn btn-primary">Sony</button>
      </div>

  3. 输入框组

    class 效果
    input-group 建立一个输入框的组div,里面放置span或input
    input-group-sm
    input-group-lg
    input-group-addon 一个下陷风的固定块,可以用作单位等
    input-group-btn 放在span元素中,span的内部再装一个<button>,尽量统一风格

    举例

    1
    2
    3
    4
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="twitterhandle">
    </div>
    • 这里需要form-control来保持输入框的圆角风格,和input-group-addon统一风格

  4. 导航元素

    导航元素与导航栏的区别在于导航栏一定会放在页面顶端等位置,
    而习惯上导航元素可以放在任何位置.
    class 效果
    nav 提供一个各个项目之间的分隔效果,分割线或换行等,还有字体,背景等
    nav-tabs 一个像浏览器标签页一样的导航元素
    nav-pills 通常白色没有分隔,被选中的标签变圆角矩形像胶囊,蓝色
    nav-stacked 堆叠的导航栏,每个项目都占据一行
    nav-justified 自适应地占据所有宽度
    • 不可以缺少nav
    • 常用ul模拟导航元素,li模拟导航元素的每一项
    • li使用disabled可以有禁用效果
    • 导航页的内容模型使用tab-content定义
    • 导航页的每一页使用tab-paned定义
    • 导航元素与页面的内容使用id关联

    导航元素本身

    1
    2
    3
    4
    5
    6
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
        <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
        <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
        <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
    </ul>

    导航到的页面内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>首页</h3>
        <p>第一页</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>菜单1</h3>
        <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>菜单 2</h3>
        <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>菜单 3</h3>
        <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
      </div>
    </div>

  5. 导航栏

    使用nav标签,navbar类,最好还使用一个role=“navigation”

    class 效果
    navbar 导航栏
    navbar-default 默认导航栏主题
    navbar-inverse 黑色的导航栏
    navbar-fixed-top 导航栏本身固定在顶部
    navbar-fixed-bottom 导航栏本身固定在底部
    navbar-static-top 导航栏随页面滚动并贴附在页面的顶部
    navbar-nav 使用导航元素作为导航栏的内容
    navbar-header 导航栏左侧稍微大一点的类似表头的东西
    navbar-brand 对<a>等使用,表示更大一些的字体
    navbar-collapse 折叠类,一般是导航栏项目的定义来源
    navbar-form 导航栏内的form
    navbar-text 导航栏里的test
    navbar-left 导航栏内的元素靠左
    navbar-right 导航栏内的元素靠右

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid"> 
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse"
                  data-target="#example-navbar-collapse">
            <span class="">切换导航</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" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">Java</a></li>
          </ul>
        </div>
      </div>
    </nav>

  6. 面包屑

    1
    2
    3
    4
    5
    <ul class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">2013</a></li>
      <li class="active">一月</li>
    </ul>
    • 用breadcrumb生成面包屑导航的主题
    • 用列表来表示层结构有点违和,但能保存顺序的话也ok

  7. 页码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="disabled"><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="#">&raquo;</a></li>
    </ul>
    • 使用pagination表示页码
    • active表示该页被选中
    • disabled表示该页不可被选中
    • laquo和raquo分别表示 << 和 >> 这两个特殊字符
    • 可以同时使用pagination-lg和pagination-sm定义不同的大小

    也可以使用仅仅有上一页和下一页的页码

    1
    2
    3
    4
    <ul class="pager">
      <li class="previous disabled"><a href="#">&larr; Older</a></li>
      <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
    • disabled表示按钮不可被选中
    • 两个class, previous和next会影响按钮的位置(基本是放在页面的两端)

  8. 标签(日志分类等常用的标签)

    class 效果
    label-default 灰底白字
    label-primary 蓝底
    label-success 绿底
    label-info 淡蓝底
    label-warning 黄底
    label-danger 红底

  9. 未读消息(徽章)

    1
    <a href="#">Mailbox <span class="badge">50</span></a>

    徽章的底色会根据周围环境的颜色变化而变化
    比如在蓝色的导航栏中则会反色显示

  10. 超大屏幕

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="container">
       <div class="jumbotron">
            <h1>欢迎登陆页面！</h1>
            <p>这是一个超大屏幕（Jumbotron）的实例。</p>
            <p><a class="btn btn-primary btn-lg" role="button">
            学习更多</a>
          </p>
       </div>
    </div>
    • jumbotron在container内时,会获得container的两边留白和圆角效果
    • 按钮在此时多是模拟出来的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="jumbotron">
        <div class="container">
            <h1>欢迎登陆页面！</h1>
            <p>这是一个超大屏幕（Jumbotron）的实例。</p>
            <p><a class="btn btn-primary btn-lg" role="button">
             学习更多</a>
            </p>
        </div>
    </div>
    • jumbotron在外部则可以获得全部的显示空间

  11. 缩略图

    div或a标签使用thumbnail类,内部再包含图片等,
    使用多个这样的div或a,
    一系列的图片会排列整齐,
    看起来像是在一个图库中看缩略图

  12. 警告

    外观上像是屏幕上弹出了占全部宽度的通知.实际上不是动画.

    class 效果
    alert 提供基础的圆角,大padding等
    alert-success 淡绿色,字体也会使用相应的但看得清的颜色
    alert-info 淡蓝色
    alert-warning 淡黄色
    alert-danger 淡红色
    alert-dismissable 表示可以关闭但却要自行定义按钮来关闭,好像没有什么用

    举例

    1
    2
    3
    4
    5
    6
    7
    <div class="alert alert-success">
      <button type="button" class="close" data-dismiss="alert"
          aria-hidden="true">
        &times;
      </button>
      成功！很好地完成了提交。
    </div>

  13. 进度条

    class 效果
    progress 普通进度条外观
    progress-striped 有条纹的进度条外观
    active 有动画
    progress-bar 进度条
    progress-bar-success 绿色
    progress-bar-info 淡蓝色
    progress-bar-warning 黄色
    progress-bar-danger 红色

    举例

    1
    2
    3
    4
    5
    6
    7
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-success" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 40%;">
            <span class="sr-only">40% 完成</span>
        </div>
    </div>
    • 真正控制外观的是width,aria等控制的值只有参考意义,
      比如now=20,max=40,min=0,则width取50%比较合理
    • 一个progress中可以放多个progress-bar,这些进度条将首尾相连叠加在一起,
      更适合表示磁盘占用(图片多少,视频多少)

  14. 多媒体混排

    class 效果
    media 多媒体类
    media-left 多媒体类的子类,通常用于包含一个图片,然后设置图片的位置,就像在word中设置图片的环绕
    media-right 图片靠右
    media-top 图片靠上
    media-middle 图片纵向居中
    media-bottom 图片靠下
    media-body 多媒体类的body,位置安排上会谦让media-left等
    media-object 多用于形容图片等,但感觉并没有什么作用
    media-heading 多用于形容文字,会比其他字大一点
    • media-body这个容器中还可以放置media类,即实现嵌套

  15. 列表组

    class 效果
    list-group ul使用,产生一个一个不小气的,适当利用了屏幕显示空间的列表.
    list-group-item li使用
    active 被选中的效果
    list-group-item-heading 还是字号大一些的文字,但能够使用不违和的间距,padding等
    list-group-item-text 还是文字
    • 如果为li内部添加徽章,徽章会自动靠右显示

  16. 面板

    class 效果
    panel 基础的面板
    panel-default 默认的面板主题
    panel-heading panel的子元素,深色以突出是标题
    panel-body panel的子元素,普通色
    panel-footer panel的子元素,深色以突出是脚注
    panel-title panel-heading等的子元素,字号会大一些

  17. 凹陷风字块

    class 效果
    well 凹陷风字块,适合用作博客入口处的站名墙
    well-sm 小
    well-lg 大

插件

以modal插件来举例,一个插件的往往由多个部分组成

  1. html上定义使用该插件的语句,通常为data-xxx
  2. html上定义该插件使用的数据源头,通常为data-target
  3. 在javascript中,使用jQuery风格寻址找到对象,然后对该对象使用函数xxx
  4. javascript中的该xxx函数通常可以使用一些方法,比如’toggle’
  5. javascript中的该xxx函数通常还可以使用一些选项,比如’keyboard=false’
    1. 选项一般也会有html的版本,比如写成data-keyboard=“false”
  6. javascript中,被选中的对象可以使用on(‘event-name’, functin)来监听一些事件,
    比如窗口即将关闭,窗口已经关闭等.
    1. 定义动作的代码可以是管道风格的

这些插件的存在减少了需要自行写javascript实现效果的代码,
方便了使用.

Transition插件(实现过渡效果)

与modal,tab,alert插件合作时使用fade提供淡入淡出效果
与轮播插件合作时使用slide提供滑动特效

Modal插件(实现一个模态框)

  1. 实现方法

    1. html

      html中使用的方法:

      1. 定义data-toggle为modal
      2. 定义data-target,可以用id定位
      1
      2
      3
      <button data-toggle="modal" data-target="#modal-id" ... >...</button>
      ....
      <div id="modal-id" class="modal"...>...</div>
      • 模态框外观的定义中必须要有 class="modal" 才能被识别
      • 这里的按钮就相当于modal的触发器

      再次举例

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <h2>创建模态框（Modal）</h2>
      <!-- 按钮触发模态框 -->
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
      <!-- 模态框（Modal） -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                  </div>
                  <div class="modal-body">在这里添加一些文本</div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                      <button type="button" class="btn btn-primary">提交更改</button>
                  </div>
              </div><!-- /.modal-content -->
          </div><!-- /.modal -->
      </div>
      • 虽然modal是一个class, 但搭配了data-toggle=“modal”, data-dismiss="modal"等,构成了一个完整的modal插件
      • fade表示渐变的效果
      • aria-labelledby 表示?
      • aria-hidden表示默认隐藏该模态框

    2. javascript

      javascript中使用的方法

      1
      $('#modal-id').modal(<options>)
      • 这样的代码可以放在一些事件后,使用该事件作为modal的触发器
      • 注意这里的jQuery寻址方式

  2. 选项

    modal插件提供定制的选项

    1. 可以使用data开头的html属性定义

      1
      <div ... data-keyboard="true">

    2. 可以在javascript中作为modal函数的参数提供

      1
      $("#myModal").modal({ keyboard: false })

    这些参数有:

    参数名 作用 默认值
    backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框 true
    keyboard 可以使用键盘上的按键操作模态框,比如ESC表示关闭模态框 true
    show 初始化时即显示模态框 true
    remote 指定一个模态框内容的来源 null,但貌似指定时不是使用data-remote="xxx.html"而是使用href=“xxx.html”

  3. 方法

    javascript中的modal函数本身有一些不具名的参数,
    分别是

    值 含义
    ‘toggle’ 切换显示与不显示
    ‘show’ 打开模态框
    ‘hide’ 隐藏模态框

    使用举例

    1
    $('#identifier').modal('toggle')

  4. 事件

    modal插件提供了一些定义事件监听的方法
    比如使用

    1
    2
    3
    $('#identifier').on('show.bs.modal', function () {
      // 执行一些动作...
    })

    可以在窗口打开的时候执行定义好的函数

    事件 含义
    show.bs.modal 执行show方法时调用
    shown.bs.modal show方法执行完后调用
    hide.bs.modal 执行hide方法时调用
    hidden.bs.modal hide方法执行完后调用

  1. 基本的实现

    1. html

      需要两个条件

      1. 一个使用data-toggle=“dropdown"的元素,同时指定该元素data-target=”#“或href=”#"
      2. 与该元素在统一级别的一个列表,用于放置下拉菜单的内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            点击出现下拉框
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">jmeter</a></li>
            <li><a href="#">EJB</a></li>
            <li><a href="#">Jasper Report</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个分离的链接</a></li>
          </ul>
        </li>
      </ul>

    2. javascript

      1
      $('.dropdown-toggle').dropdown()
      • 此处不知为什么寻址找的是链接下拉框的元素而不是下拉框本身

  2. 方法

    仅一个:‘toggle’

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a id="action-1" href="#">meter</a></li>
        <li><a href="#">EJB</a></li>
        <li><a href="#">Jasper Report</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
        <li class="divider"></li>
        <li><a href="#">另一个分离的链接</a></li>
      </ul>
    </li>
    ...
    <script>
      $(function(){
      // 该函数在加载时即调用,下拉框默认不显示,如果使用toggle则变为显示
      $(".dropdown-toggle").dropdown('toggle');
      }); 
    </script>
    • 此处没有使用.dropdown-menu,可能是这个插件的设定吧

Scrollspy插件(滚动监听)

博客网站中,
经常需要监听目前滚动到的位置,
然后高亮相应的目录.

实际上就是对导航元素一次添加active类

  1. 基本的实现

    1. html

      被监听的对象使用data-spy="scroll"和data-target指定实现效果的目标

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <body data-spy="scroll" data-target=".navbar-example">
      ...
      <div class="navbar-example">
          <ul class="nav nav-tabs">
            ...
          </ul>
      </div>
      ...
      </body>

    2. javascript

      1
      $('body').scrollspy({ target: '.navbar-example' })

  2. 选项

    offset
    当计算滚动位置时,距离顶部的偏移像素
    默认值10

  3. 方法

    .scrollspy(‘refresh’)
    滚动到合适位置?

    1
    2
    3
    $('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy('refresh')
    })
    • 此处重置了所有滚动的元素?

  4. 事件

    activate.bs.scrollspy
    每当一个新项目被滚动监听激活时,触发该事件

Tab插件(标签页)

用于点击导航元素后显示对应的标签页

  1. 实现

    1. html

      在每个导航项上使用data-toggle="tab"或data-toggle=“pill”
      然后使用href定义点击后显示的页面名称

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <ul id="myTab" class="nav nav-tabs">
        <li><a href="#ios" data-toggle="tab">iOS</a></li>
      </ul>
      ...
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade" id="ios">
          <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
        </div>
      </div>
      • 通常被链接到的是tab-pane类,该类放在tab-content类中
      • 注意这里的淡入淡出效果放在了每一条内容后,而不是tab-content的对象

    2. javascript

      在javascript中使用时,为了方便,通常将使用的对象定为整个导航的元素,而不是单个

      1
      2
      3
      4
      $('#myTab a').click(function (e) {
          e.preventDefault()
        $(this).tab('show')
      })

      如果真的有需要,可以为单独一个目标设置动作

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // 通过名称选取标签页
      $('#myTab a[href="#profile"]').tab('show')

      // 选取第一个标签页
      $('#myTab a:first').tab('show')

      // 选取最后一个标签页
      $('#myTab a:last').tab('show')

      // 选取第三个标签页（从 0 开始索引）
      $('#myTab li:eq(2) a').tab('show')

  2. 方法

    就一个’show’

  3. 事件

    事件名 作用
    show.bs.tab 新标签页显示前触发
    shown.bs.tab 新标签页显示后触发

    同时为了方便使用,
    事件对象本身有一些属性

    事件对象属性 说明
    event.target 激活的标签页
    event.relatedTarget 前一个激活的标签页

Tooltip插件(提示信息)

为页面的种种元素提供鼠标悬停后弹出的提示

  1. 实现

    1. html

      效果上需要data-toggle=“tooltip”, href=“#”
      内容上非常简单,title="xxx"即可定义(事实上应该使用data-title)

      1
      <a href="#" data-toggle="tooltip" title="提示内容">需要提示的对象</a>

    2. javascript

      1
      $('#identifier').tooltip(options);

  2. 方法

    方法 描述
    ‘toggle’
    ‘show’
    ‘hide’
    ‘destroy’ 由于调用tooltip(‘destroy’)后再调用tooltip(‘show’)还能显示提示内容,效果和hide一样

  3. 选项

    选项 描述 默认值
    animation 显示渐变效果 true
    placement 提示文字出现在主题元素的位置,可选top,bottom,left,right,auto,可以使用多个选项比如"auto left",此时优先left 默认为top
    title 定义提示文字的内容 默认空
    trigger 定义触发方式,可选click,hover,focus,manual,可多选 默认’hover focus’
    delay 定义延迟的时间,单位毫秒 默认0
    html
    text
    selector
    container

  4. 事件

    事件 描述
    show.bs.tooltip 略
    shown.bs.tooltip
    hide.bs.tooltip
    hidden.bs.tooltip

Popover插件(实体的提示框)

需要点击才出现/消失

  1. 实现

    1. html

      和tooltip类似,
      需要data-toggle=“popover”

      1
      2
      3
      4
      5
      <button type="button" class="btn btn-default" data-title="Popover title"
              data-container="body" data-toggle="popover" data-placement="left"
              data-content="左侧的 Popover 中的一些内容">
        左侧的 Popover
      </button>

    2. javascript

      1
      $('#identifier').popover(options)

  2. 其他

    除了可以使用data-content定义提示语句的内容(data-title定义的是标题),
    其他和tooltip一样

Alert插件(页面内的警告框)

使用了比js的alert更好看的,页面内的警告框

  1. 实现

    1. html

      与其他插件的使用方法稍微有不同,
      是需要添加在关闭按钮上(通常该按钮还是使用<a>模拟的),
      使用的是data-dismiss=“alert”,
      这样不用再为关闭按钮定义动作.

      一个警告通常组成如下:

      • div
        • 警告内容
        • 关闭按钮(由于css做了配置,只要是close类,即可显示在右侧)
      1
      2
      3
      4
      5
      6
      <div class="alert alert-warning">
          <a href="#" class="close" data-dismiss="alert">
              &times;
          </a>
          <strong>警告！</strong>您的网络连接有问题。
      </div>

    2. javascript

      1
      $(".alert").alert()
      • 注意这里添加的是可取消功能,而不是弹出alert功能
      • 操作的主体是外面的div

  2. 方法

    方法 效果
    默认 提供可取消功能
    ‘close’ 在代码中 隐藏alert

  3. 事件

    close.bs.alert
    closed.bs.alert

Button插件(按钮点击变文字,变色等效果)

button插件的作用是当按钮被点击后,
使用文字和色彩效果表示一定的状态

  1. 启用插件?

    data-toggle=“button” 在点击后变为被按下的效果
    data-toggle=“buttons” 按钮组使用,无需对每个按钮使用data-toggle=“button”,效果依然是显示按下的效果
    data-loading-text=“Loading…” 在执行了button插件的loading方法后,按钮上的内容变为"Loading"

    1
    $('.btn').button(string)
    • string一般是方法的一种,如果不是则恢复按钮的状态到初始状态

  2. 方法

    方法 描述 备注
    ‘toggle’ 切换按下状态 $().button(‘toggle’)
    ‘loading’ 进入loading状态,使之前设置的data-loading-text等显示出来
    ‘reset’ 返回初始状态(没有被点击的状态)

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <h4>演示 .button('toggle') 方法</h4>
    <div id="myButtons1" class="bs-example">
        <button type="button" class="btn btn-primary">原始</button>
    </div>
    <h4>演示 .button('loading') 方法</h4>
    <div id="myButtons2" class="bs-example">
      <button type="button" class="btn btn-primary" 
          data-loading-text="Loading...">原始
      </button>
    </div>
    <h4>演示 .button('reset') 方法</h4>
    <div id="myButtons3" class="bs-example">
      <button type="button" class="btn btn-primary" 
          data-loading-text="Loading...">原始
      </button>
    </div>
    <h4>演示 .button(string) 方法</h4>
    <button type="button" class="btn btn-primary" id="myButton4" 
        data-complete-text="Loading finished">请点击我
    </button>
    <script type="text/javascript">
      $(function () {
        $("#myButtons1 .btn").click(function(){
          $(this).button('toggle');
        });
      });
      $(function() { 
        $("#myButtons2 .btn").click(function(){
          $(this).button('loading').delay(1000).queue(function() {
          });        
        });
      });   
      $(function() { 
        $("#myButtons3 .btn").click(function(){
          $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
          });        
        });
      });  
      $(function() { 
        $("#myButton4").click(function(){
          $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
          });        
        });
      }); 
    </script>
    • 可以从此处看到管道风的代码

Collapse插件(可折叠的大纲)

  1. 实现

    1. html

      折叠后显示的部分使用data-toggle=“collapse”,
      使用href或data-target指定展开后显示的部分

      举例1

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <button type="button" class="btn btn-primary" data-toggle="collapse" 
          data-target="#demo">
        简单的可折叠组件
      </button>

      <div id="demo" class="collapse in">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>

      举例2
      这里为了使用统一的外观,将多个panel放入了panel-group
      为了区别标题和内容,使用了panel-heading和panel-collapse加以区别
      使用data-parent是为了让其中的元素在打开一个时折叠其他所有的

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" 
                 href="#collapseOne">
                点击我进行展开，再次点击我进行折叠。第 1 部分
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
              Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
              cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
              vice lomo.
            </div>
          </div>
        </div>
      </div>

    2. javascript

      1
      $('.collapse').collapse()

  2. 方法

    ‘toggle’,‘show’,‘hide’

  3. 选项

    parent,指定排斥的范围

  4. 事件

    事件 描述
    show.bs.collapse 展开前的事件
    shown.bs.collapse 展开后的事件
    hide.bs.collapse 折叠前的事件
    hidden.bs.collapse 折叠后的事件

Carousel插件(轮播效果)

手机商爱用的产品展示效果,像PPT横向滚动
目前除了联想,其他手机厂商已经使用了更高级的效果

  1. 实现

    1. html

      实现时不需要再使用data-属性,只需要定义class即可

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
            <div class="carousel-caption">标题 1</div>
          </div>
          <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
            <div class="carousel-caption">标题 2</div>
          </div>
          <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
            <div class="carousel-caption">标题 3</div>
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
      </div>
      • carousel定义轮播插件
      • slide定义切换时的动画效果
      • carousel-inner内部存放每一页的内容
      • carousel-caption定义了图片的标题,会显示在指示器附近,并会随图片一起滚动
      • carousel-indicators是底部的小圆点,可以使用鼠标点击跳转
        • data-slide-to后的序号是carousel-inner中项目的index,自动关联
      • carousel-control是左右的箭头

    2. javascript

      尽管不需要使用data-属性启用,但却可以使用js代码来启用.

      1
      $('.carousel').carousel()

  2. 方法

    方法 描述
    ‘cycle’ 循环轮播项目(方向是从左到右)
    ‘pause’ 停止
    number 跳到某一页
    ‘prev’ 跳到上一页
    ‘next’ 跳到下一页

  3. 选项

    选项 描述 默认值
    interval 一个页面展示的时间,单位毫秒,设为false则不主动切换 5000
    pause 定义暂停循环的触发事件 ‘hover’
    wrap 是否支持首尾相连的循环,从最后一个切换到第一个 true

  4. 事件

    事件 描述
    slide.bs.carousel 开始滑动前的事件
    slid.bs.carousel 滑动完毕时的事件

Affix插件(导航插件)

更像是博客网站的目录,
随着阅读进度,
显示当前的章节名

  1. 实现

    1. html

      导航元素中使用data-spy='affix’启用插件,并用data-offset-top="125"设置参数
      每个元素使用href指定监视的目标,
      当该目标到达参数设置的地方时,自动切换导航元素的active的位置

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
        <li class="active"><a href="#section-1">第一部分</a></li>
        <li><a href="#section-2">第二部分</a></li>
        <li><a href="#section-3">第三部分</a></li>
        <li><a href="#section-4">第四部分</a></li>
        <li><a href="#section-5">第五部分</a></li>
      </ul>
      ...
      <div class="col-xs-9">
        <h2 id="section-1">第一部分</h2>
        <p>假装很长</p>
        <hr>
        <h2 id="section-2">第二部分</h2>
        <p>假装很长</p>
        <hr>
        <h2 id="section-3">第三部分</h2>
        <p>假装很长</p>
        <hr>
        <h2 id="section-4">第四部分</h2>
        <p>假装很长</p>
        <hr>
        <h2 id="section-5">第五部分</h2>
        <p>假装很长</p>
      </div>
      </div>

    2. javascript

      1
      2
      3
      4
      5
      6
      7
      8
      $('#myAffix').affix({
          offset: {
            top: 100, bottom: function () {
               return (this.bottom = 
                  $('.bs-footer').outerHeight(true))
               }
            }
      })

  2. 选项

    offset,设置偏移量,怎么用暂时不清楚