Bootstrap学习&资料整理

最新推荐文章于 2024-07-20 15:49:14 发布

The_Oringinal_Leon

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/The_Oringinal_Leon/article/details/53009113

版权

Bootstrap更倾向于Web端的界面显示，就算用在手机上，那也是手机Web
而ionic则是用hybrid开发的手机原生App
二者使用场景不同，应该不适合同时使用

要求时间：2天
第一天
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。2011年开源

简介

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap 插件部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery插件来得到您自己的版本。

搭建Bootstrap环境

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

link bootstrap的css
script上JQuery库文件
script上Bootstrap库文件
一定要先JQuery，再Bootstrap，因为Bootstrap里会调用JQuery。

Bootstrap可视化布局 ##

–不知道怎么用

Less 教程

–不知道干什么用的让CSS可编程？
Bootstrap是用Less开发的，它可以自定义CSS，还是要学会的。

Bootstrap CSS 概览

Bootstrap使用了一些html5和css，需要使用html5文档类型（Doctype）
所以在需要在html标签前声明文档类型

<!DOCTYPE html>
<htm>
</html>

移动设备优先是 Bootstrap 3 的最显著的变化。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">
or
<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
响应式图像

<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
  display: inline-block; // 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
  height: auto; // 相关元素的高度取决于浏览器
  max-width: 100%; // 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
}

全局显示、排版和链接
排版没太懂
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

链接样式 没太懂
@link-color

避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

容器 Container

// Bootstrap 3 的 container class 用于包裹页面上的内容
<div class="container">
  ...
</div>
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto; // 浏览器决定
   margin-left: auto; // 浏览器决定
}

// 这部分没懂
请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

.container:before,
.container:after {
  display: table;
  content: " ";
}

这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。

.container:after {
  clear: both;
}

它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Bootstrap 浏览器/设备支持

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	不适用	NO	不适用
iOS	YES	不适用	不适用	NO	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	NO

移动端系统、桌面端系统
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

Bootstrap 网格系统 Grid System
流式网格系统
视口（viewport）

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Q：到底哪个是手机，col-xs? col-sm?

之所以可以动态响应屏幕尺寸，是因为媒体查询

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

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

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

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

// 这其实是一个完整的区间
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

响应式的列重置没懂

<div class="clearfix visible-xs"></div>

偏移列
col-md-offset-3

嵌套列
col里加row，row里面还有col

列排序
.col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

<div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> // shadow的参数还不太懂
</div>
<div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右边
</div>

Bootstrap 排版
排版什么意思呢，就是美化html文档。
副标题

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

强调
HTML 的默认强调标签（设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。

// Bootstrap的强调
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

缩写

// 鼠标停留 显示title内容
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

地址标准的联系方式部分格式

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

引用 Blockquote

<blockquote class="pull-right"> // 向右对齐的引用
  这是一个带有源标题的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small> // cite表示斜体
</blockquote>

列表

<h4>未定义样式列表</h4>
<ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
    <dt>Description 1</dt>
    <dd>Item 1</dd>
    <dt>Description 2</dt>
    <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
     <dt>Description 1</dt>
     <dd>Item 1</dd>
     <dt>Description 2</dt>
     <dd>Item 2</dd>
</dl>

更多排版类

<p class="lead">这是个文字突出的段落。</p>
<p class="small">这是个文字更小。</p>
<p class="text-left">左对齐文本</p>
<p class="text-right">右对齐文本</p>      
<p class="text-center">居中对齐文本</p>
<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>   <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>

<p class="text-lowercase">Lowercased text（小写文本）.</p>
<p class="text-uppercase">Uppercased text（大写文本）.</p>      
<p class="text-capitalize">Capitalized text（首字母大写文本）.</p>

<blockquote class="blockquote-reverse">设定引用右对齐</blockquote>

<ul class="list-inline">
.list-inline    将所有列表项放置同一行

.list-unstyled  ul去样式

<pre class="pre-scrollable">内容可滚动</pre>

<dl class="dl-horizontal"> // 下面dt dd 横着排列
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

Bootstrap 代码

<kbd>ctrl + p</kbd> // 组合键提示 
<p><samp>....</samp></p> // 命令行字符风格
<code>div</code> // 关键字表示

这部分就是说在Bootstrap里面，代码文本怎么修饰，不是编程什么的。

Bootstrap 表格
悬停效果表格

<table class="table table-hover">

乏善可陈

Bootstrap 表单
表单布局有三种
- 垂直表单（默认）：组件纵向排列
- 内联表单：组件横向排列
- 水平表单：内容横向，组件纵向，这个比较好看。

水平表单

// 居然没看到row 估计form-group里面有
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>

支持的表单控件
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
1.输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

文本框（Textarea）

复选框（Checkbox）和单选框（Radio）

选择框（Select）

<select multiple class="form-control">

静态控件
当您需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>

标签后的备注

表单控件状态 重点
验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
这里写图片描述

表单控件大小
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

<input class="form-control input-lg" type="text" placeholder=".input-lg"> // 表单框高度设置

<div class="row">
    <div class="col-lg-2"> // 表单框宽度设置
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>

表单帮助文本
Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。

<form role="form">
  <span>帮助文本实例</span>
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">一个较长的帮助文本块，超过一行，
  需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

就是表单输入项帮助文本，说明此输入项怎么填写。

Bootstrap 按钮

<p>
  <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
  <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
  <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>

其他元素也可以当button用。

Bootstrap 图片
这里写图片描述

 <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"> // .img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

Bootstrap 辅助类
Bootstrap有自己的色系，在很多场合会用到，下面就是设置字体样式。
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger

背景也有这套色系
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

class=”center-block” 内容居中
class=”sr-only” 只是代码可见

Bootstrap 响应式实用工具
屏幕适配相关

<span class="hidden-lg/xs/sm/md">大型</span>
<span class="visible-lg/xs/sm/md">✔ 在大型设备上可见</span>

Bootstrap 布局组件

1.Bootstrap 字体图标(Glyphicons)
这就是一套Bootstrap的icon

<button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-sort-by-attributes">Btn</span>
</button>

如何设置一个button的字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

相当狠的在线工具：
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
选择好随即出html代码

2.Bootstrap 下拉菜单（Dropdowns）

<div class="dropdown/dropup">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> // 触发button
        主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" > // 下拉菜单列表
        <li class="dropdown-header">下拉菜单标题</li>
        <li class="disabled"> // 可设置禁用某项
            <a href="#">Java</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul>
</div>

3.Bootstrap 按钮组

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

按钮组可以和下拉菜单组合使用

4.输入框组
就是一对组合输入控件

<div class="input-group">
    <span class="input-group-addon"> // 加输入头
        <input type="checkbox"></span>
    <input type="text" class="form-control">
</div><!-- /input-group -->

<div class="input-group">  // 这两个class起作用
   <span class="input-group-btn"> // 加输入Btn
     <button class="btn btn-default" type="button">Go!
     </button>
   </span>
   <input type="text" class="form-control">
</div><!-- /input-group -->

// 带下拉菜单的输入框组
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default 
        dropdown-toggle" data-toggle="dropdown">下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">功能</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">分离的链接</a>
            </li>
        </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control">
</div><!-- /input-group -->

5.Bootstrap 导航元素 重点
典型范例就是一个带有特殊class的无序列表

<ul class="nav nav-tabs/nav-pills"> // 两种风格
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Java <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Swing</a></li>
      <li><a href="#">jMeter</a></li>
      <li><a href="#">EJB</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
    </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>

6.导航加内容绑定
要想实现绑定切换，先搭好架子，再将下面tab页设置tab-pane 属性
fade是淡出效果，让切换不会太生硬。第一个标签页必须添加 .in 类，以便淡入显示初始内容，觉得在标签里，类的顺序就是加载顺序，每个pane加上fade，第一个加上in首显。

<div class="container">
  <h2>动态标签</h2>
  <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
  <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>
  </ul> // 上面的href对应下面的id
  <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 显示的内容。</p>
    </div>
  </div>
</div>

7.Bootstrap 导航栏 Bootstrap的一个突出特点
导航条的概念

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid"> // container-fluid100%宽度，占据全部视口（viewport）的容器
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                </ul>
            </li>
        </ul>
    </div>
  </div>
</nav>

.navbar-text 导航栏中的文本
.navbar-left 或 .navbar-right 向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件。

导航条的位置

<nav class="navbar navbar-default navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-bottom">
<nav class="navbar navbar-default navbar-static-top">
<nav class="navbar navbar-inverse"> // 反色

8.Bootstrap 面包屑导航 Breadcrumbs
表现导航路径

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ol>

9.Bootstrap 分页

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

<ul class="pagination pagination-lg"> // 分页的大小
<ul class="pagination pagination-sm">

10.翻页

<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

11.Bootstrap 标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

12.Bootstrap 徽章 Badges
只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可

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

13.Bootstrap 超大屏幕（Jumbotron）
就是加了个背板

<div class="jumbotron">
    <h1>欢迎登陆页面！</h1>
</div>

14.Bootstrap页面标题 Page Header

<div class="page-header">
    <h1>页面标题实例
        <small>子标题</small>
    </h1>
</div>

* 15.Bootstrap 缩略图 *
在照片周围，套上a标签并设thumbnail类。

<a href="#" class="thumbnail">
    <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的占位符缩略图">
</a>

自定义缩略图组件，可作双排缩略界面参考。

<div class="thumbnail">
    <img src="/wp-content/uploads/2014/06/kittens.jpg"
         alt="通用的占位符缩略图">
    <div class="caption">
        <h3>缩略图标签</h3>
        <p>一些示例文本。一些示例文本。</p>
        <p>
            <a href="#" class="btn btn-primary" role="button">
                按钮
            </a>
        </p>
    </div>
</div>

16.Bootstrap 警告（Alerts）

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>

可取消的警告（Dismissal Alerts）

// 请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素。
// 否则取消不了
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交。
</div>

警告（Alerts）中的链接

<div class="alert alert-success">
    <a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>

17.Bootstrap 进度条

<div class="progress progress-striped active"> 
// progress-striped条纹效果 active动画效果
<div class="progress-bar progress-bar-success/info/warning/danger" role="progressbar" aria-valuenow="60"
     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% 完成</span>
</div>
</div>

// 也可以堆叠
// 就是说，一个progress可以套用多个progress-bar。
<div class="progress">
    <div class="progress-bar progress-bar-success" 
    style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-info" 
    style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
    <div class="progress-bar progress-bar-warning" 
    style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>

18.Bootstrap 多媒体对象（Media Object）
.media 就是一个图片文字混排组件

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒体标题</h4>
        这是一些示例文本。这是一些示例文本。
    </div>
</div>

.media-list 图文混排列表

<ul class="media-list">
    <li class="media">
    // media内容同上

19.Bootstrap 列表组
不知道干什么用

ul li 组合
<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">
    <span class="badge">新</span>24*7 支持</li> // 加badge
    <li class="list-group-item">每年更新成本</li>
</ul>

也可以这么写
<a href="#" class="list-group-item">24*7 支持</a>

自定义 div a 组合
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">
            入门网站包
        </h4>
        // 添加任意的 HTML 内容
        <p class="list-group-item-text">
            您将通过网页进行免费域名注册。
        </p>
    </a>
</div>

20.Bootstrap面板（Panels）

<div class="panel panel-default/primary/success/info/warning/danger">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
    <div class="panel-footer">面板脚注</div>
</div>

21.Bootstrap Well
内容凹陷显示或插图效果的容器 div
只要叫上well，就well了。

<div class="well">您好，我在 Well 中！</div>
<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

Bootstrap 插件

1.Bootstrap 插件概览
Bootstrap 自带 12 种 jQuery 插件
站点引用Bootstrap插件的方式有两种：
- 单独引用：就是单叫某一个.js文件。
- 编译（同时）引用：bootstrap.js/bootstrap.min.js 就是全都加上

所有的插件依赖于JQuery，所以必须在插件文件之前引用JQuery。
☆data属性： –>引插件之法！ 和H5里的data-*没关系。

$(document).off('.data-api')
$(document).off('.alert.data-api')

编程方式的API
所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。

$(".btn.danger").button("toggle").addClass("fat")
$('[rel=popover]').data('popover').  // 这句不懂

Constructor属性，感觉相当于classOf

避免命名空间冲突
调用插件的 .noConflict 方法恢复其原始值

// 返回$.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
$.fn.bootstrapBtn = bootstrapButton

事件
动词不定式：事件开始时被触发

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
  if (!data) return e.preventDefault() // ?哪来的data？
})

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

2.Bootstrap过渡效果
就提一概念
Transition.js插件

3.Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体
modal.js插件

data属性很重要，在Bootstrap里通过data属性调用JQuery插件。
想起来了，前面出现的：data-toggle，下拉菜单。

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">  开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal"> // 与target相对
  <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>
    </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

step1:触发模态，data-toggle=”modal”, data-target=”#modalId”
step2:模态组件，class=”modal fade” id=”modalId”；然后是modal->modal-dialog->modal-content->modal-header~modal-body~modal-footer的从属关系。
step3:data-dismiss=”modal”，关闭模态窗口。

也可以使用JavaScript调用模态框

$('#identifier').modal(options)

class=”close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。通常会将关闭按钮右对齐
data-dismiss=”modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
data-toggle=”modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

4.Bootstrap下拉菜单（Dropdown）插件
data属性调用：

<div class="dropdown">
  <a id="dLabel" data-toggle="dropdown" data-target="#" 
  href="/page.html">
    下拉菜单（Dropdown） <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript调用：$('.dropdown-toggle').dropdown()

<script>   // 默认显示
$(function() {
    $(".dropdown-toggle").dropdown('toggle');
});
</script>

5.Bootstrap滚动监听（Scrollspy）插件
scrollspy.js插件
data属性调用

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> // 只是一个普通导航条
    <div class="container-fluid"> 
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" 
            data-toggle="collapse" // 切换的是折叠
            data-target=".bs-js-navbar-scrollspy">
                        // 目标是折叠
                菜单
            </button>
            <a class="navbar-brand" href="#">标题</a>
        </div>
        // 折叠
        <div class="collapse navbar-collapse 
        bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                    // 这里写href，会在页面里找id为ios的组件
                    // 从而实现定位
                <li><a href="#ios">iOS</a></li>
                <li><a href="#svn">SVN</a></li>
            </ul>
        </div>
    </div> 
</nav>
// 其实下面与上面没什么关系，下面一设data-spy="scroll"，就是该div具备了，相应上面
// href的能力，后经证实下面的data-target="#navbar-example"可以删掉。
<div 
data-spy="scroll" 
data-target="#navbar-example" data-offset="0" 
style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>bulabula
    </p>
    <h4 id="svn">SVN</h4>
    <p>bulabula
    </p>
</div>

JavaScript调用

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

事件:实时监听滚到哪了，即看到哪了，这个应该有用。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
    var currentItem = $(".nav li.active > a").text();
    $("#activeitem").html("目前您正在查看 - " + currentItem);
})

6.Bootstrap 标签页（Tab）插件
tab.js插件
data属性调用
如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            W3Cschool Home
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>HTML元素</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>HTML元素</p>
    </div>
</div>

要点：
标签li a href=”#testId” data-toggle=”tab”;
标签页div class=”tab-content”，子div class=”tab-pane” id=”testId”

JavaScript调用 - 这部分不太懂

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

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

事件监听

// 显示的时候
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

// 显示完的时候
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

// 实例
<script>
$(function(){
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // 获取已激活的标签页的名称
        var activeTab = $(e.target).text(); 
        // 获取前一个激活的标签页的名称
        var previousTab = $(e.relatedTarget).text(); 
        $(".active-tab span").html(activeTab);
        $(".previous-tab span").html(previousTab);
    });
});
</script>

7.Bootstrap 提示工具（Tooltip）插件
tooltip.js插件
data属性调用

<a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的提示">默认的 Tooltip</a>
<a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left/top/right/bottom" title="左侧的 Tooltip">左侧的 Tooltip</a>

<button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left/top/right/bottom" title="左侧的 Tooltip">左侧的 Tooltip</button>

方法

$().tooltip(options)
$('#element').tooltip('toggle')
$('#element').tooltip('show')
$('#element').tooltip('hide')
$('#element').tooltip('destroy')

事件

$('#myTooltip').on('show.bs.tooltip', function () {
  // 执行一些动作...
})
$('#myTooltip').on('shown.bs.tooltip', function () {
  // 执行一些动作...
})
$('#myTooltip').on('hide.bs.tooltip', function () {
  // 执行一些动作...
})
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // 执行一些动作...
})

8.Bootstrap弹出框（Popover）插件
popover.js插件
data属性调用

<button type="button" class="btn btn-primary" 
title="Popover title" 
data-container="body" 
data-toggle="popover" 
data-placement="top" 
data-content="Popover 中的一些内容">
    顶部的 Popover
</button>

JavaScript调用
弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。
全局概念激活

$(function () { $("[data-toggle='popover']").popover(); });

**选项：**data-trigger、data-delay、data-placement

方法

$().popover(options)
$('#element').popover('toggle')
$('#element').popover('show')
$('#element').popover('hide')
$('#element').popover('destroy')

事件

$('#mypopover').on('show.bs.popover', function () {
  // 执行一些动作...
})
$('#mypopover').on('shown.bs.popover', function () {
  // 执行一些动作...
})
$('#mypopover').on('hide.bs.popover', function () {
  // 执行一些动作...
})
$('#mypopover').on('hidden.bs.popover', function () {
  // 执行一些动作...
})

9.Bootstrap警告框（Alert）插件
data属性调用

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong>警告！</strong>您的网络连接有问题。
</div>

JavaScript调用

$(".alert").alert()

方法

$('#identifier').alert();  // 让所有的警告框都带有关闭功能
$('#identifier').alert('close'); // 关闭所有警告框

// 点击任意关闭，关闭所有警告框。
<script>
$(function(){
    $(".close").click(function(){
        $("#myAlert").alert('close');
    });
});
</script>

事件

$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
$('#myalert').bind('closed.bs.alert', function () {
    // 执行一些动作...
})

10.Bootstrap按钮（Button）插件

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
    type="button"> 加载状态
</button>
<script>
    $(function() {
        $(".btn").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
            // $(this).dequeue(); 
            });
        });
    });  
</script>

// 方法
$().button('toggle')
$().button('loading')
$().button('reset')
$().button(string)

// 点完Btn，1秒后，按钮显示Loading finished
<button type="button" class="btn btn-primary" id="myButton4" 
    data-complete-text="Loading finished">请点击我
</button>
$(function() { 
    $("#myButton4").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
        });        
    });
});

11.Bootstrap折叠（Collapse）插件
抽屉效果吧，不太会用。
data属性调用

// 创建可折叠的分组或折叠面板（accordion）
<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">文本
        </div>
    </div>
  </div>
</div>

// 简单的可折叠组件
<button type="button" class="btn btn-primary" 
data-toggle="collapse" 
data-target="#demo">
    简单的可折叠组件
</button>
<div id="demo" class="collapse in">文本
</div>

通过 JavaScript 激活 collapse 方法

$('.collapse').collapse()

选项： data-parent data-toggle

方法

$('#identifier').collapse({
    toggle: false
})
$('#identifier').collapse('toggle')
$('#identifier').collapse('show')
$('#identifier').collapse('hide')

事件

$('#identifier').on('show.bs.collapse', function () {
    // 执行一些动作...
})
$('#identifier').on('shown.bs.collapse', function () {
    // 执行一些动作...
})
$('#identifier').on('hide.bs.collapse', function () {
    // 执行一些动作...
})
$('#identifier').on('hidden.bs.collapse', function () {
    // 执行一些动作...
})

12.Bootstrap轮播（Carousel）插件
.item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。

通过 data 属性：
属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=”2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。

<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>
        <div class="item">
          <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div>

通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

$('.carousel').carousel()

选项： data-interval、data-pause、data-wrap轮播是否连续循环

方法

$('#identifier').carousel({
    interval: 2000
})
$('#identifier').carousel('cycle')从左到右循环轮播项目
$('#identifier').carousel('pause')
$('#identifier').carousel(number)
$('#identifier').carousel('prev')
$('#identifier').carousel('next')

事件

$('#identifier').on('slide.bs.carousel', function () {
    // 执行一些动作...
})
$('#identifier').on('slid.bs.carousel', function () {
    // 执行一些动作...
})

13.Bootstrap附加导航（Affix）插件
这个不太懂，再议。
如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy=”affix” 即可

Bootstrap UI 编辑器

15 款最好的 Bootstrap 编辑器或者是在线编辑工具
1. Bootstrap Magic
2. BootSwatchr
3. Bootstrap Live Editor
4. Fancy Boot
5. Style Bootstrap
6. Lavish
7. Bootstrap ThemeRoller
8. LayoutIt！
9. Pingendo
10. Kickstrap
11. Bootply
12. X-Editable
13. Jetstrap
14. DivShot
15. PaintStrap