bootstrap

一、CSS样式
1、在移动设备浏览器上（手机）：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、布局容器：
.row：一行，包含了12列
.col-xs-4
.col-md-4:用的最多，可以显示三个（4*3），可以在PC、手机、IPad上正常查看
.col-lg-4
3、排版
.page-header：标题
.lead：段落
<mark></mark>：标记
<del></del>:被删除文本
<u></u>：下划线
<small></small>:小号文本
<b></b> <strong></strong> <em></em>:着重文本
<i></i>：斜体
对齐：.text-left：左对齐
    .text-center：居中
    .text-right：右对齐
    .text-justify:两端对齐
    .text-nowrap:文字不换行
改变大小写：.text-lowercase:都是小写
    .text-uppercase:都是大写
    .text-capitalize：每一个单词的首字母都是大写
列表：ul、li无序列表，ol、li有序列表
    .list-unstyled:无样式列表
    .list-inline:内联列表，将所有的元素都放置于同一行
描述：dl、dt、dd：一般都是选择题之类的样式
    .dl-horizontal:短语及其描述排在一行
    .text-overflow：自动截断
<code>:类似于标记
<kbd>：键盘的感觉，黑色背景
<pre>：圆角、有背景，按格式输出
4、表格：
table：
table-striped:高亮
table-boedered：表格加边框线
table-hover:鼠标悬停每一行的时候颜色加深
表格的背景颜色：.active灰色  .success  .info  .warning  .danger
响应式表格：如果表格列数比较多，屏幕分辨率小的时候可以在表格上增加一个滚动条
<div class="table-responsive">
    <table class='table'>
    </table>
</div>
5、按钮：button、a、input的button、input的submit、input的reset都可以做成按钮
按钮的颜色：
.btn 
.btn-default 灰色
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
按钮的大小：
.btn-lg
默认
.btn-sm
.btn-xs
.btn-block块元素，占整个一行
disabled 禁用按钮，不能点击
6、图片
响应式图片：
.img_rounded
.img_circle
.img-thumbnail
根据分辨率的大小，图片自动变换：.img-responsive
7、辅助类
文字颜色：.text-muted 灰色
.text-primary .text-success .text-info  .text-warning .text-dangerd
背景色：.bg-primary  .bg-success .bg-info  .bg-warning .bg-danger
关闭按钮：&times; 样式是：.close
三角符号(更多)：.caret
快速浮动：.pull-left .pull-right
让内容块居中：.center-block
清除浮动：clearfix
显示：show  隐藏：hide
8、表单
.form-group
label for=""
.form-control
placeholder="username" 输入框默认文字信息
.checkbox
.radio
file 文件类型
.input-group 输入框
.input-group-addon  输入框组
.input-group-lg .input-group-sm 输入框尺寸
.input-group-btn 输入框嵌入按钮
.form-inline 表单横着放，内联表单
.form-horizontal 水平排列的表单
.control-label
.col-md-offset-2 左边空两个
.checkbox-inline 内联多选框
.radio-inline 内联单选框
.multiple 按住Ctrl键可以多选
.form-control-static  静态控件
.focus 焦点状态
disabled  禁用状态
readonly  只读状态，
<fieldset disabled></fieldset>  全部禁用状态
legend 小断线，提示说明信息
.has-success .has-warning .has-error 校验状态，表单框的颜色
.has-feedback  .form-control-feedback 添加额外的图标,glythicons图标
.input-lg  .input-small 控件尺寸

二、组件
glythicons图标 .+图标下的英文
下拉框：.dropdown  下拉框  .dropup 上拉框
  .dropdown-menu  下拉菜单
  .dropdown-menu-right  下拉菜单居右
  .dropdown-header 下拉菜单标题
  .divider 下拉菜单分隔线
  .disabled 禁用
data-toggle='dropdown'
按钮组：.btn-group
.btn-toolbar 复杂的按钮组
尺寸：.btn-group-lg  .btn-group-sm .btn-group-xs
嵌套：.btn-default 
.dropdown-toggle
垂直排列:.btn-group-vertical
两排对齐排列的按钮组：.btn-group .btn-group-justfied
导航：标签页.nav .nav-tabs 
      胶囊式标签页 .nav  .nav-pills
      胶囊式堆叠标签页 .nav-stacked
      两端对齐的标签页：.nav-justified
      禁用的连接.disabled
导航条：.navbar
        .navbar-default 
        .navbar-inverse 反色
        .navbar-header 头部
        .navbar-brank 
        .navbar-toggle collapsed data-toggle='collapse' 尾部
        .icon-bar 横线
        .navbar-form  .form-inline
        .navbar-left
        .navbar-right
        .navbar-btn
        .navbar-text
        .navbar-link
        .navbar-fixed-top  固定在顶部
        .navbar-fixed-bottom 固定在底部
        .navbar-static-top 静止在顶部
        .breadcrumb  路径导航，面包屑
分页：.pagenation
      &lauqo; 两个左边的箭头； &rauqo 两个右边的箭头
      .disabled 禁止状态  .active激活状态
      .pager 上下页
      .previous .next 两端对齐链接，上一页下一页
      .pagenation-lg  .pagenation-sm 尺寸
      .label 标签
      标签颜色：.label-default .label-primary .label-success .label-info .label-danger
      .badge 徽章
      .jumbotron 巨幕
      .page-header 页头
      .thumbnail 缩略图
      .alert 警告框 注：四个颜色没有primary
      data-dismiss='alert' .close &times; 可关闭的警告框
      .alert-link 警告框中的链接
      .progress .progress-bar 进度条（只有四种颜色）
      width：60%； 进度条里边进度数
      .progress-bar-striped 进度条的条纹
      .active  进度条条纹动画
      进度条堆叠：一个.progress的div里放多个.progress-bar进度条
媒体对象：.media 
    .media-left(.media-right)  .media-object 
    左边的居中 .media-left  .media-middle|top|bottom
    .media-body  .media-heading
列表组：.list-group 
        .list-group-item  列表组项
        .active 激活  .disabled 禁止
面板：.panel .panel-primary(颜色)
      .panel-heading .panel-title .panel-body  .panel-footer
<iframe></iframe>  具有相应式特性的嵌入内容,还可以视频嵌入
<embed></embed>  可以用来做视频嵌入
scrolling  增加或者去掉滚动条yes/no
自适应内嵌框架：.embed-responsive .embed-responsive-16by9
                .embed-responsive-item
.well 默认效果，灰色背景
尺寸  .well-lg  .well-sm

三、JavaScript插件
模态框即弹框：.modal 
            data-toggle='modal'
            data-target='#mymodal' 目标
            .modal fade
            .modal-dialog 对话框
            .modal-content 内容
            .modal-header 
            .modal-body
            .modal-footer
    $('#mymodal').modal('show') 手动打开模态框
    $('#mymodal').modal('hide') 手动关闭模态框
    $('#mymodal').on(shown.bs.modal) 打开以后需要的操作
    $('#mymodal').on(hidden.bs.modal) 关闭以后需要的操作
            尺寸 .modal-lg .modal-sm
滚动监听：在滚动的过程中监听每一高度
body{position：relative}
body标签上：data-cpy='scoll' data-target='#mynav' data-offset='150'快到前150px
nav标签上： id='mynav'
监听在导航栏的每一上：<a href="#fat">
面板每一开始时 id='fat'
自定义滚动监听
标签页：data-toggle='tab'  .tab-content .tab-pane
        .tab-pane fade/in 动画
提示：.tooltip  demo
    data-toggle='tooltip' 提示工具
      data-placement='left' 提示的位置
      title="" 提示的内容
弹出框： .popover-demo
        data-toggle="popover" 弹出框
        data-placement='left' 弹出的位置
        data-content=''  弹出的内容
        title="" 弹出内容的标题
可消失的弹出框： .bs-example-padded-bottom  data-trigger="focus"
折叠效果：使用面板组 .panel-group .panel-title  .panel-body
    data-toggle="collapse"  data-parent='#accordion' 父类  
        .panel-collapse  .collapse （/in 折叠展开的情况）
javaScript:  是阻止刷新当前页面的意思
幻灯片插件：.carousel .slide
    data-ride="carousel" 控制旋转动
    .carousel .inner 里边放的动图
    .item 
    .carousel-indicators 指示灯
    data-slide-to='0'
    .left .carousel-control 左(.right右)控制滑动
    data-slide='prev' 向左滑动
    data-slise='next' 向右滑动
    .carousel-caption 图片的注释说明
    ！important 提高样式的优先级
固定在侧边栏：data-spy='affix'