准备工作：使用Bootstap第一步：要导入bootstrap.css 和 bootstrap.js以外，必须在<head></head>标签内必须添加：（不然显示窗口可能就不正常！）

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap框架的三大核心：全局CSS样式，动态组件（静态组件，JavaScript插件）

第一部分：全局CSS样式总结：

注：下图是bootstap-v3版本的尺寸图，V4版本的尺寸大小为，768px，992px，1200px

 栅格布局总结：

1、栅格系统写在.row(<div class="row">)内，一行（row）= 12col(列)；

2、bootstrap把手机电脑平板屏幕大小尺寸分为四个档：

xs（0-768px）最大值为：xs屏幕下每一row下，col-xs-12（列）

sm（768-992px）最大值为：sm屏幕下每一row下，col-sm-12（列）

md（992-1200px）最大值为：md屏幕下每一row下，col-md-12（列）

lg（1200px->>）最大值为：lg屏幕下每一row下，col-lg-12（列）

 

bootstrap栅格布局系统中，兼容原理是 向小尺寸兼容！

【比如：col-lg-6 col-xs-6】 那么sm和md没有设置的尺寸自动向前一个小尺寸自动兼容，相当于md和sm都是=xs的6列！

栅格布局列偏移：.col-(xs/sm/md/lg)-offset-* 【如：col-lg-offset-2】;

bootstrap3支持html5 bootstrapv3_bootstrap

栅格布局隐藏和显示（比如手机隐藏，电脑显示都可以设置）：

bootstrap3支持html5 bootstrapv3_bootstrap_02

其他标准：

bootstrap框架系统尺寸标准为四个档：xs、sm、md、lg；

bootstrap框架系统颜色标准分五个档：

通过这些状态类可以为行或单元格设置颜色。

Class

描述

.active

鼠标悬停在行或单元格上时所设置的颜色

.success

标识成功或积极的动作

.info

标识普通的提示信息或动作

.warning

标识警告或需要用户注意

.danger

标识危险或潜在的带来负面影响的动作

 

第二部分：bootstrap框架动态组件（静态组件+JavaScript插件调用）

两种调用方法：

A，不需要写一行js代码，完全用bootstrap框架的 data属性，内置调用js代码实现调用（官方推荐使用！！）

B，也可以自己添加静态组件，然后用jquery和bootstrap框架内置的一些js方法调用实现！

js代码就太熟悉了，这里不总结，主要总结data属性的用法和注意事项！

bootstrap框架通过data属性实现动态效果的三个核心属性：data-toggle 和 data-target (按钮) / href (<a> 标签)

开始js代码调用的属性：data-toggle="modal"

指定跳出的模块代码的属性：data-target="#myModal"

特别注意：如果点击的不是按钮，而是<a>标签，那么没有data-target属性，而是设置href="#myModal"

//Button按钮为：data-toggle="modal" data-target="#myModal"
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

//a标签为：data-toggle="modal" href="#myModal"
<a class="btn btn-primary btn-lg" data-toggle="modal" href="#myModal">
          Launch demo modal
</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

注意事项：弹出框使用一定要初始化！

bootstrap3支持html5 bootstrapv3_bootstrap3支持html5_03