bootstrap学习心得

Bootstrap栅格系统

1.简介
响应式设计
栅格实现原理：

    1）一行row必须在.container中
    2）使用行 在水平方向创建列组
    3）具体内容应放置在column内
    4）内置像.row和  .col-xs-4(占4列)

媒体查询： 主要用到min-width ，max-width，and语法，用于在不同分辨率下设置不同的css样式。

@media(max-width=767){
    // 在小于767像素宽度的屏幕里，这里的样式才生效
    .container {
        width:750px;
    }
}
@media(max-width=768)and@media(min-width=991){
    // 在大于768像素的宽度和小于991像素宽度的屏幕里，这里的样式生效
    .container {
        width:970px;
    }
}

2.基本用法
布局容器: container(和媒体查询一起使用) container-fluid(100%)
列组合: .col-md-* ，小分辨率会自动适配大分配率 .col-xs-* 会适配.col-md-*
列偏移: .col-md-offset-*
列嵌套
列排序 : .col-md-push-* .col-md-pull-*

3.禁止响应布局
删除viewport的meta
为container设为固定宽度
对导航移除折叠和展开行为

排版

1.排版基础：

响应式图片：img-responsive 其实就是为图片设置max-width=100%,height:auto,在图片上加上此样式，可以按比例缩放，但不超过父元素尺寸。
排版与链接：bootstrap设置了一些全局样式，body背景为白，margin:0;字体，大小，行间距都进行了设置，所有默认样式都在normalize.less和scaffolding.less

2 标题 : h1~h5，可以作为类进行使用

// 使用这样就不用设置margin了。
<p class="h1">呵呵</p> 

1. 页面主题

body全局样式
body {
font-family:”Helvetica Neue”,Helvetica,Arial,sans-serif;
font-size:14px;
line-height:1.42857143;
color:#333;
background-color:#fff
}
p全局样式
p {
margin: 0 0 10px ;
}
对齐方式
text-center,text-right,text-left

3.强调文本

small
strong
em
cite
4.缩略图:abbr,鼠标移上去出现提示语（title）
5.地址元素：address
6.引用：blockquote

列表于代码

列表

1. 无序列表
2. 有序列表
3. 去点列表 : .list-unstyled
4. 内联列表：.list-inline，用于菜单
5. dl列表
6. 水平列表 ：dl.dl-horizontal

代码

1.code 显示单行内联代码
2.kbd 显示用户输入代码
3.pre 多行代码块
4. var 变量
5. samp 程序结果

表格

1.基础样式：.table
2.带背条纹表格：.table-striped
3.带边框：.table-border
4.悬停：.table-hover
5.紧凑：.table-condensed
6.行样式：.active .success .info
7.响应式表格：.table-responsive

* 表单 ##

基础表单

1. form-group

form-group {
    margin-bottom:15px;
}

1. form-control（用于组件，设置宽度100%）

内联表单

.form-inline：控件在一行显示。在form标签上使用

横向表单

.form-horizontal:文字和控件在一行显示。在form标签上使用，且只能在设备大于768px才能横向展示。
.control-label: label右对齐。

表单控件

1.input
2.select
3.textarea
4.checkbox & radio

<div class="checkbox">
    <label>
        <input type="checkbox">记住密码
    <label>
</div>

5.静态控件

// 邮箱一般是取服务器的值 
<p class="form-control-static">email@qq.com</p>

辅助文本

help-block 一般用于控件下面用于提示的文本，占一行。

控件大小

input-lg,input-sm等等

添加额外的图标

.has-feedback,看文档复制代码即可，添加的就是字体图标

控件状态

1.焦点状态： autofocus
2.禁用状态： disabled
3.被禁用的fieldset：在fieldset上添加disabled
4.只读状态 : readonly
5.校验状态: .has-success，.has-warning,.has-info等等

按钮

1.样式： btn, btn-defalut,btn-primary等
2.大小：btn-lg，btn-sm ，btn-xs，btn-block (沾满整个容器)
3.多标签支持：支持a,div标签

<a href="#" class="btn btn-danger btn-lg">Button</a>

4.活跃状态：.active
5.禁用状态:disabled=”true”

图片与辅助样式

1，响应式图片 ： img-responsive
2，图片形状 ： img-rounded img-circle img-thumbnail
3, 文本样式 ：

柔和灰：text-muted
主要蓝：text-primary
成功绿：text-success
信息蓝：text-info
警告黄：text-warning
危险红：text-danger】

4， 文本背景样式 ：

柔和灰：bg-muted
主要蓝：bg-primary
成功绿：bg-success
信息蓝：bg-info
警告黄：bg-warning
危险红：bg-danger

5， 辅助图标

关闭图标：close
向上箭头：caret

6，内容浮动

pull-right
pull-left
clearfix

7，隐藏和显示

visible-sm 小屏幕显示
hide-md 大屏幕隐藏

字体图标（250个）

一般用于span标签中。

<span class="glyphicon glyphicon-plus">

下拉菜单

<div class="dropdown" data-toggle="dropdown">
        <button type="button" class="btn btn-danger">
            <span class="glyphicon glyphicon-user"></span>用户<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">文件</a></li>
            <li><a href="#">文件</a></li>
            <li><a href="#">文件</a></li>
            <li><a href="#">文件</a></li>
        </ul>
    </div>

按钮组

.btn-group

按钮组下拉菜单

输入框组

.input-group
.input-group-addon

导航

1.选项卡导航

<ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li class="disabled"><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>

2.胶囊式导航

<ul class="nav nav-pills">
       <li class="active"><a href="#">首页</a></li>
       <li><a href="#">首页</a></li>
       <li><a href="#">首页</a></li>
       <li><a href="#">首页</a></li>
</ul>

导航条

        <h1>基础导航</h1>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>

        </nav>

        <h1>导航 中加表单</h1>
            <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>

            <form class="navbar-form navbar-right" style="margin-right: 20px;">
                <div class="form-group">
                    <input type="text"  class="form-control"/>
                </div>
                <button type="button" class="btn btn-danger">搜索</button>
            </form>
        </nav>
        <h1>导航 中加文本、链接、按钮</h1>
                <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            <p class="navbar-text">文本</p>
            <a href="#" class="navbar-link">链接</a>
            <button type="button" class="btn btn-default navbar-btn">按钮</button>

        </nav>

            <h1>顶部固定（一般要设置padding-top）</h1>
            <nav class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            <p class="navbar-text">文本</p>
            <a href="#" class="navbar-link">链接</a>
            <button type="button" class="btn btn-default navbar-btn">按钮</button>

        </nav>

        <h1>合屏方角导航</h1>
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>

        </nav>

响应式导航

        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 
                data-toggle="collapse"
                 data-target=".navbar-responsive-collapse">
                  <span class="sr-only">Toggle navigtion</span>
                  <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li class="disabled"><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
              </ul>
          </div>

        </nav>

标签label

 <h1>我们学习<span class="label label-default">bootstrap</span></h1>
    <h1>我们学习<span class="label label-danger">bootstrap</span></h1>
    <h1>我们学习<span class="label label-info">bootstrap</span></h1>
    <h1>我们学习<span class="label label-warning">bootstrap</span></h1>

徽章 badge

<a href="">收到消息 <span class="badge">5</span></a>
    <button class="btn btn-default">大家好 <span class="badge">89</span></button>

大屏轮播 jumbotron

 <div class="jumbotron">

        <h1>主要标题</h1>
        <p>这里是想写的文本。。。</p>
        <a href="#" class="btn btn-danger btn-lg">阅读</a>
    </div>

页面标题

 <div class="page-header">哈哈哈哈</div>

缩略图

 <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img src="images/a.png" alt="">
            </a>
        </div>
        <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img src="images/a.png" alt="">
            </a>
        </div>
        <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img src="images/a.png" alt="">
            </a>
         </div>
        <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img src="images/a.png" alt="">
            </a>
         </div>

警告框

         <div class="alert alert-warning">
             <button type="button" class="close" data-dismiss="alert">&times;</button>
            <p>这里是提示信息</p>
        </div>

进度条

    <div class="progress ">
        <div class="progress-bar progress-bar-info" style="width: 45%"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-info" style="width: 45%"></div>
    </div>
    // 带动画效果
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-info active" style="width: 45%"></div>
    </div>

媒体对象（图文混排）

<div class="container">
    <div class="media">
        <!--左对齐-->
        <div class="media-left">
             <!--表示是一个媒体对象-->
            <a href="#"><img class="media-object" src="images/a.png" alt=""></a>
        </div>
        <div class="media-body">
            <h2 class="media-heading">这里是标题</h2>
            <p>这里写内容，这里写内容，这里写内容，这里写内容，这里写内容，这里写内容，这里写内容，这里写内容，这里写内容，</p>
        </div>
    </div>

接下来讨论bootstrap中JS效果 ！important

JS选项卡

<!--选项卡-->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#pan1" data-toggle="tab">搜索</a></li>
        <li><a href="#pan2" data-toggle="tab">常规</a></li>
        <li><a href="#pan3" data-toggle="tab">查看</a></li>
    </ul>
    <!--面板-->
    <div class="tab-content">
        <div class="tab-pane active" id="pan1">
            搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板
        </div>
        <div class="tab-pane" id="pan2">
            常规面板 常规面板 常规面板 常规面板 常规面板 常规面板 常规面板 常规面板
        </div>
        <div class="tab-pane" id="pan3">
            查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板
        </div>
    </div>

胶囊选项卡

 <ul class="nav nav-pills">
        <li class="active"><a href="#pan4" data-toggle="pill">搜索</a></li>
        <li><a href="#pan5" data-toggle="pill">常规</a></li>
        <li><a href="#pan6" data-toggle="pill">查看</a></li>
    </ul>
    <!--面板-->
    <div class="tab-content">
        <div class="tab-pane active fade in" id="pan4">
            搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板
        </div>
        <div class="tab-pane" id="pan5">
            常规面板 常规面板 常规面板 常规面板 常规面板 常规面板 常规面板 常规面板
        </div>
        <div class="tab-pane" id="pan6">
            查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板
        </div>
    </div>

tooltip

    <button data-toggle="tooltip" data-placement="left" type="button" class="btn btn-danger" title="向左显示">向左</button>
    <script>
        $('[data-toggle="tooltip"]').tooltip();
    </script>

弹出框（需点击）

    <button data-toggle="popover" data-content="这里是内容呀" data-placement="right" type="button" class="btn btn-danger" title="向左显示">向右</button>
    <script>
        $('[data-toggle="popover"]').popover();
    </script>

collapse

1.基本折叠

<button data-toggle="collapse" data-target="#shows" type="button" class="btn btn-default">折叠</button>
    <div id="shows" class="collapse in">
        <div class="well">显示的内容</div>
    </div>

2 。panel-group版

<div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#channel_demo">栏目管理</a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="channel_demo">
                <ul class="panel-body">
                    <li>增加栏目</li>
                    <li>增加栏目</li>
                    <li>增加栏目</li>
                    <li>增加栏目</li>
                </ul>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#channel_demo2">栏目管理2</a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="channel_demo2">
                <ul class="panel-body">
                    <li>增加栏目2</li>
                    <li>增加栏目2</li>
                    <li>增加栏目2</li>
                    <li>增加栏目2</li>
                </ul>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#channel_demo3">栏目管理3</a>
                </h4>
            </div>
            <div class="panel-collapse collapse in" id="channel_demo3">
                <ul class="panel-body">
                    <li>增加栏目3</li>
                    <li>增加栏目3</li>
                    <li>增加栏目3</li>
                    <li>增加栏目3</li>
                </ul>
            </div>
        </div>
    </div>

3。使用data-parent 注意区别

 <div class="panel-group" id="panelcontainer">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#test1" data-parent="#panelcontainer">栏目管理</a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="test1">
                <ul class="panel-body">
                    <li>增加栏目</li>
                    <li>增加栏目</li>
                    <li>增加栏目</li>
                    <li>增加栏目</li>
                </ul>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#test2" data-parent="#panelcontainer">栏目管理2</a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="test2">
                <ul class="panel-body">
                    <li>增加栏目2</li>
                    <li>增加栏目2</li>
                    <li>增加栏目2</li>
                    <li>增加栏目2</li>
                </ul>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#test3" data-parent="#panelcontainer">栏目管理3</a>
                </h4>
            </div>
            <div class="panel-collapse collapse in" id="test3">
                <ul class="panel-body">
                    <li>增加栏目3</li>
                    <li>增加栏目3</li>
                    <li>增加栏目3</li>
                    <li>增加栏目3</li>
                </ul>
            </div>
        </div>
    </div>

4 ， lsit-group版

<div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" data-toggle="collapse" data-target="#test">栏目管理</a>
                </h4>
            </div>
            <div class="panel-collapse collapse in" id="test">
                   <ul class="list-group">
                       <li class="list-group-item">
                           <span class="glyphicon glyphicon-user"></span>
                           增加栏目
                       </li>
                       <li class="list-group-item">
                           <span class="glyphicon glyphicon-user"></span>
                           增加栏目
                       </li>
                       <li class="list-group-item">
                           <span class="glyphicon glyphicon-user"></span>
                           增加栏目
                       </li>
                       <li class="list-group-item">
                           <span class="glyphicon glyphicon-user"></span>
                           增加栏目
                       </li>
                   </ul>
                <div class="panel-footer">页脚</div>
            </div>
        </div>
    </div>

焦点轮播

<div class="row">
        <div class="col-md-3">
            <div data-ride="carousel" id="carousel_container" class="carousel slide">
                <!--图片容器 -->
                <div class="carousel-inner">
                    <div class="item">
                        <img src="images/pic01.jpg"/>
                        <div class="carousel-caption">
                            <h4>标题</h4>
                            <p>这里是内容。。。。。</p>
                        </div>
                    </div>
                    <div class="item active"><img src="images/pic02.jpg"/></div>
                    <div class="item"><img src="images/pic03.jpg"/></div>
                </div>

                <!--小圆圈容器 -->
                <ol class="carousel-indicators">
                    <li data-slide-to="0" data-target="#carousel_container"></li>
                    <li data-slide-to="1" data-target="#carousel_container"></li>
                    <li data-slide-to="2" data-target="#carousel_container"></li>
                </ol>
                <!--左右按钮容器 -->
                <a href="#carousel_container" data-slide="prev" class="left carousel-control">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a href="#carousel_container" data-slide="next" class="right carousel-control">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
        <div class="col-md-9"></div>
    </div>