bootstrap

一.bootstrap全局样式

1.Bootstrap中的全局样式

提供了大量的全局样式，基本的THML元素均可以通过class设置样式并得到增强效果

对默认的排版样式进行了CSS样式定义，使得各种基本结构套用出来的HTML页面更加美观

2.Bootstrap中的排版-标题

标题（h1-h6/.h1-h.6）<h1>标题一<small>小标题</small></h1>  <span class="h1">标题一</span>

副标题（small）

3.Bootstrap中的排版-文本

段落(<p></p>)      对齐方式(.text-left,.text-center,text-right)

大小写(text-lowercase,text-uppercase,text-capitalize->首字母大写)  

文本标记

4.Bootstrap中的排版-表格

带边框表格 （.table-bordered）    带条纹状表格（.table-striped）

悬停变色（.table-hover）   紧凑风格  （.table-condensed）

5.Bootstrap中的表单

给表单添加类名，以实现表单的水平排列，个性化定制等。

form-group    form-control默认字体 placeholder   form-inline水平排列

btn-default   btn-success btn-primary  btn-info  btn-info  btn-warning  btn-danger btn-link btn-lg btn-sm active

btn-block  disabled="disabled"

6.Bootstrap中图片及辅助类

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

文本颜色    背景颜色   状态设置   三角符号

二.bootstrap渐进

1 .开发响应式页面（viewport）

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

maximum-scale=1,minimum-scale=1,user-scalable=no" >

2.栅格介绍

利用栅格系统适配不同的硬件

响应式网页

视野开阔多变，信息丰富

排版新颖随意，设计师发挥空间较大

适用于PC和手机端

//最大页面小于900px进行变化

@media screen and (max-width:900px){
          .test{
             width:100%;
             height:100px;
             background:blue;
          }
 }

3.单位

-px 相对于显示屏幕分别率的长度单位，无法根据屏幕放大缩小，所有

浏览器都支持PX单位

-em相对于当前文本内的字体尺寸，继承父级元素字体大小，IE不支持

-rem与em类似，相对于HTML根节点的字体单位，继承根元素的字体大小html{font-size:62.5%}

4.图标（Glyphicons图标库）

体积小便于加载

无需重复设计

方便使用

三.bootstrap组件

1.怪异属性

role   aria-label  tabIndex data-

2.字体图标(glyphicon)

 glyphicon-star

3.下拉菜单(dropdown)

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

divider分割线

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              这是按钮
             <span class="caret"></span>   //下拉标签       
        </button>
        <ul class="dropdown-menu">     //下拉菜单
            <li>
               <a href="http://www.imooc.com">慕课网</a>
            </li>
            <li>
               <a href="http://www.imooc.com">慕课网</a>
            </li>
            <li>
               <a href="http://www.imooc.com">慕课网</a>
            </li>
        </ul>
  </div>

4.控件组(input-group)。

input-group-addon可放置额外内容

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text"  class="form-control">
  </div>

5.导航（nav)

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

nav-tabs代表可切换的导航

nav-pills代表胶囊导航

nav-justified自适应导航栏大小

nav-stacked使导航垂直

<ul class="nav nav-tabs">
        <li class="active">
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
    </ul>
    <ul class="nav nav-pills nav-stacked">
        <li class="active">
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
    </ul>
    <ul class="nav nav-justified">
        <li class="active">
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
    </ul>

5.分页(pagination)

pagination在父元素中添加表示分页

pager放置在翻页区域

previous把链接向左对齐，next把链接向右对齐

<nav>
   <ul class="pager">
        <li class="previous">
           <a href="http://www.imooc.com">向左</a>
        </li>
        <li class="next">
           <a href="http://www.imooc.com">向右</a>
        </li>
    </ul>
    <ul class="pagination pagination-lg">
        <li class="active">
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
           <a href="http://www.imooc.com">慕课网</a>
        </li>
    </ul>
   </nav>

6.进度条（progress）

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

progress-bar-striped使得进度条颜色渐变

<div class="progress">
       <div class="progress-bar" style="width:60%">60%</div>
 </div>

7.列表（list-group）

badge代表状态数

<ul class="list-group">
       <li class="list-group-item active">
           这是一个列表
           <span class="badge">14</span>
       </li>
       <li class="list-group-item disabled">
           这是一个列表
           <span class="badge">14</span>
       </li>
       <li class="list-group-item list-group-item-info">
           这是一个列表
           <span class="badge">14</span>
       </li>
    </ul>

8.面板(panel)

panel-heading代表面板头部

panel-body代表面板内容

panel-footer代表面板的注脚

<div class="panel panel-danger">
         <div class="panel-heading">
              弹出层
         </div>
         <div class="panel-body">
              这是面板的具体内容
         </div>
         <div class="panel-footer">
              脚注
         </div>
   </div>

四.bootstrap插件

bootstrap插件依赖Bootstrap.js

bootstrap.js基于JQuery

通过data属性控制页面交互

$(document).off('data-api')解除属性绑定

样式效果和交互效果

data-toggle指以什么事件触发，常用的如modal,popover,tooltips等； data-target指事件的目标。

<!--按钮层 begin-->
    <button type="button" class="btn btn-primary btn-lg"  data-toggle="modal"   data-target="#myModal">
       弹窗
    </button>
    <!--按钮层 end-->

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
           <div class="modal-content">
              <div class="modal-header">
                 <button type="button"  class="close"  data-dismiss="modal">
                        <span>&times;</span>
                        <span class="sr-only">关闭弹窗</span>
                 </button>
                 <h4 class="modal-title" id="myModalLabel">标题</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" data-dismiss="modal">保存</button>
              </div>
          </div>
      </div>
    </div>