关于Bootstrap学习总结

一、Bootstrap的介绍

1，Bootstrap是Twitter公司开发基于Html+css+js的前端框架

2，为实现Web应用程序快速开发提供的一套前端工具包

3，响应式布局

4，移动设备优先

5，Bootstrap全局样式用法

6，Viewport的意义

7，栅格化布局用法

8，字体与图标

9，实现响应式布局的开发

二、Bootstrap的特性

1，响应式设计

2，栅格布局

3，完整的类库

4，JQuery的插件

5，不同的使用场景

三、Bootstrap的基础文件有css font js 三种 在引用JQuery文件的时候需要1.9.1以上的版本

四，Bootstrap中的排版

标题 (h1~h6)       文本 (段落 P标签)          对齐                     大小写                                            表格

   h1: 36px;             默认:  14px;             .text-left         .text-lowercase(换小写)       .table-bordered(带边框表格)

   h2: 30px;             行高:  20px;             .text-center    .text-uppercase(换大写)      .table-striped(条纹状表格)

   h3: 24px;       底部外边框:  10px;        .text-right       .text-capitalize(首字母大写)  .table-hover(悬停变色)

   h4: 18px;                                                                                                                .table-condensed(紧凑风格)

   h5: 14px;                                                                                                                          

   h6: 12px;                                                                                                                         

表单

⑴，input框

.form-group 与 .form-control

<form class="form-inline //将form表单里面所有内容进行水平排列; ">  

  <div class="form-group // 组,组件; 增加块元素的下部留白或下部边界，从而使块元素的间距变大
has-success //success 绿; warning 咖; error 红; 因为下面label标签中有contro-label,则改变has-seccess时label也跟着改变">  
      <label for="" class="sr-only // 消失; control-label //可控制的label ; "></label>
      <input type="" class="form-control  // 换行+填充整行;  input-lg //input框变大 ; input-sm //input框变小;">  
  </div>
</form>

⑵，按钮

<button class="btn //带圆角; btn-default //按钮白色; btn-success //按钮绿色; btn-primary //按钮深蓝色;
 btn-info//按钮浅蓝色; btn-warning//按钮橘色; btn-danger//按钮红色; btn-default//按钮无色; btn-link/ /按钮蓝色链接;
btn-lg //按钮变大; btn-sm //按钮变小; active //默认选中; btn-block 100%平铺按钮;
"></button>

<a href="" class="">a标签也可适用如上</a> 

⑶，形状

圆角 .img-rounded  圆形 .img-circle  带有边框的圆角图形 .img-thumbnail

辅助类：文本颜色，背景颜色，状态设置，三角符号

五，关于Viewport

meta标签中的Viewport（实用标签）

1，width，height。

2，user-scalable (用户缩放)，initial-scale (初始窗口)

3，maximum-scale (最大缩放)，minimun-scale (最小缩放)

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

栅格化布局

.col-xs-*超小屏幕 手机 (<768px),

.col-sm-*小屏幕 平板 (≥768px),

.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

<div class="col-lg-3 // 整个屏1/4"></div>

<div class="col-md-4 // 中等屏1/3"></div>

<div class="col-sm-6 // 小屏幕一半"></div>

<div class="col-xs-12 // 超小屏占满"></div>

<div class="col-lg-offset-3 // 大屏偏移1/4"></div>

六，单位

1，-px 相对于显示屏幕分辨率的长度单位 

2，-em 相对于当前文本内的字体尺寸

3，-rem 与 em类似，相对于HTML根节点的字体单位

1，⑴ - px是相对于屏幕分辨率的单位

     ⑵ - px的大小无法跟随屏幕放大缩小

     ⑶ - 所有浏览器都支持px单位

2，⑴ - 1em = 16px（不同浏览器的em不一样，火狐 1em=18px ; 谷歌 1em=12px;不稳定则出现rem）

      ⑵ - em会继承父级元素的字体大小。（当父元素改变时候em会跟着调整，一般用于移动端）

      ⑶ - IE的部分浏览器并不支持em

3， ⑴ - rem与em类似

      ⑵ - rem会继承根元素的字体大小

      ⑶ - 1rem = 稳定的10px

七，Bootstrap的组件

1，字体 

<button class="btn"> 
    <span class="glyphicon glyphicon-star">五角星</span>
</button>  

2，下拉菜单

     ⑴ .dropdown 控制组件为下拉

     ⑵ .dropdown-menu-right 代替 .pull-right 右对齐

     ⑶ divider 分割线

<div class="dropdown //控制组件为下拉">
    divider 分割线<button class="btn //按钮样式 dropdown-toggle //下拉切换按钮;" data-toggle="dropdown" //绑定事件>
        <span class="caret //这是下拉小箭头"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="" title="">列表一</a></li>
        <li><a href="" title="">列表二</a></li>
        <li><a href="" title="">列表三</a></li>
    </ul>
</div>

3，控件组

<div class="input-group //表示控件组;">
    <span class="input-group-addon //可放置额外内容及图标;">xx</span>
    <input type="text" class="form-control">
</div>

4，导航

     ⑴，以一个带有class.nav的无序列表开始。

     ⑵，.nav-tabs 代表可切换的导航。  下面有下划线  可做类似于选项卡

     ⑶，.nav-pills 代表胶囊导航。    下面没有下划线   有圆角 

     ⑷，.nav-justified 使导航垂直。    

<ul class="nav nav-tabs // 可切换导航;">
<ul class="nav nav-pills // 胶囊导航;">
<ul class="nav nav-pills nav-stacked // 使导航垂直;">
    <li><a href="" title="">xx</a></li>
    <li><a href="" title="">xx</a></li>
</ul>

5，分页

     ⑴，.pagination在父元素中添加 表示分页。

     ⑵，.pager放置 在 翻页 区域。

     ⑶，.previous把链接向左对齐， .next把链接向右对齐。

<nav>
    <ul class="pager //设置翻页;">
        <li class="previous //靠左对齐;"><a href="" title="">上页</a></li>
        <li class="next //靠右对齐;"><a href="" title="">下页</a></li>
    </ul>
    <ul class="pagination //表示分页; pagination-lg //表示将分页变大;">
        <li class="active //默认选中;"><a href="" title="">1</a></li>
        <li><a href="" title="">2</a></li>
    </ul>
</nav>

6，进度条

     ⑴，.porgress表示进度条。

     ⑵，通过状态类改变进度条的颜色。

     ⑶，.progress-bar-striped使得进度条颜色渐变。

<div class="progress //表示进度条">
    <div class=" progress-bar //表示类型 progress-bar-info //进度条蓝色;
                 progress-bar-striped //进度条花纹色;" style="width:50%">
    </div>
</div>

7，列表

     ⑴，.list-group 代表 列表组。

     ⑵，.badge 代表 状态数。

<ul class="list-group //列表组 包含所有列表;">
   <li class="list-group-item //列表项目; active //默认选中; disabled //不被选中; list-group-item-info //列表颜色;">
        <span class="badge //消息信息展示; "></span>
    <li>
</ul>

8，面板

     ⑴，.panel 代表 面板。

     ⑵，.panel-body 代表 面板内容。

     ⑶，.panel-footer 代表 面板的注脚。

<div class="panel // 代表面板; panel-success//面板绿颜色; ">
    <div class="panel-heading // 面板头部; "></div>
    <div class="panel-body // 面板内容; "></div>
    <div class="panel-footer // 面板注脚; "></div>
</div>

八，Bootstrap的插件

1，引用

     ⑴，Bootstrap插件依赖Bootstrap.js。

     ⑵，Bootstrap.js 基于 JQuery。

2，data属性

     ⑴，通过data属性控制页面交互。

     ⑵，$(document).off('.data-api')解除绑定。

九，示例

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹出来</button>
解:为Button按钮添加样式 并 放大 且换成 深蓝色按钮     data-toggle添加切换事件   data-target做页面弹出
     <div class="modal fade" id="myModal">
解:使用modal插件 fade为弹窗时的淡入淡出样式 并将弹的窗口命名id为myModal
        <div class="modal-dialog">
解:modal-dislog为modal插件弹出后 距离页面的顶部 使 modal-content 具有更好的弹出效果
            <div class="modal-content">
解:modal弹窗内容开始
                <div class="modal-header">
解:    modal弹窗头部
                    <button type="button" class="close btn" data-dismiss="modal">
解:        为弹窗口做关闭按钮
                        <span>×</span>
解:            ×相当于"x"

                        <span class="sr-only">关闭弹窗</span>
解:            使用sr-only 将关闭弹窗隐藏

                    </button>
解:        关闭按钮结束

                    <h4 class="modal-title" id="myModalLabel">标题</h4>
解:               使用modal-title 为弹窗的头部内容
              </div>
解:     modal弹窗头部结束
              <div class="modal-body">咦咦咦</div>
              <div class="modal-footer">
解:     modal弹窗尾部内容
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
解:     data-dismiss="modal" data绑定dismiss事件 点击"关闭"后 将modal弹窗关闭
                    <button type="button" class="btn btn-primary">保存</button>
              </div>
        </div>
    </div>
</div>