bootstrap学习笔记

1.使用：
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    宽度=设备宽，初始化缩放为1，即不缩放
    <meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式
        移除body的margin声明
        设置body的背景色为白色
        为排版设置了基本的字体、字号和行高
        设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

2.控件
    使用了<small>标签来制作副标题
    <h1>孤儿院无私奉献30年
    <small>一曲人性的赞歌</small></h1>

    <p>我是一个段落，你猜我在Bootstrap是以什么样的风格显示。</p>
    <p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>
    <b>“强调”</b>一词将会加粗显示
    <strong>“强调”</strong>
    斜体<i>Bootstrap</i>

3.简化类：
    .text-muted：提示，使用浅灰色（#999）
    .text-primary：主要，使用蓝色（#428bca）
    .text-success：成功，使用浅绿色(#3c763d)
    .text-info：通知信息，使用浅蓝色（#31708f）
    .text-warning：警告，使用黄色（#8a6d3b）
    .text-danger：危险，使用褐色（#a94442）

    为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
     .text-left：左对齐
     .text-center：居中对齐
     .text-right：右对齐
     .text-justify：两端对齐


4.列表
    无序列表
        <ul>
            <li>…</li>
        </ul>
    有序列表
        <ol>
            <li>…</li>
        </ol>
    定义列表
        <dl>
            <dt>…</dt>
            <dd>…</dd>
        </dl>

    例：
        <ol>
            <li>有序项目列表一</li>
            <li>有序项目列表二</li>
                <ol class="list-unstyled">
                    <li>有序二级项目列表一</li>
                    <li>有序二级项目列表二</li>
                        <ul>
                            <li>无序三级项目列表一</li>
                            <li>无序三级项目列表二</li>
                                <ul class="list-unstyled">
                                    <li>无序四级项目列表一</li>
                                    <li>无序四级项目列表二</li>
                                </ul>
                            <li>无序三级项目列表三</li>
                        </ul>
                    <li>有序二级项目列表三</li>
                </ol>
            <li>有序项目列表三</li>
        </ol>

    总结：
        有序带编号：ol>li
        有序无编号：ol.list-unstyled>li
        无序带编号：ul>li
        无序无编号：ul.list-unstyled>li

    内嵌样式：即平铺
        <ul class="list-inline">

    列表--定义列表
        <dl>
            <dt>W3cplus</dt>
            <dd>一个致力于推广国内前端行业的技术博客</dd>
            <dt>慕课网</dt>
            <dd>一个真心在做教育的网站</dd>
        </dl>

    列表--水平定义列表
        <dl class="dl-horizontal">

        1、使用<code></code>来显示单行内联代码
        2、使用<pre></pre>来显示多行块代码
        3、使用<kbd></kbd>来显示用户输入代码
        不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。

    Y轴出现滚动条
        只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条


5.表格：
    表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格
        .table：基础表格
        .table-striped：斑马线表格
        .table-bordered：带边框的表格
        .table-hover：鼠标悬停高亮的表格
        .table-condensed：紧凑型表格
        .table-responsive：响应式表格

    表格--表格行的类
        <tr class="active">
            <td>…</td>
        </tr>

    类名 描述
        .active 表示当前活动的信息
        .success 表示成功或者正确的行为
        .info 表示中立的信息或行为
        .warning 表示警告，需要特别注意

    基础表格
        <table class="table">
    带边框的表格
        <table  class="table table-bordered">
          …
        </table>


6.表单：
    使用了类名“form-control”，将会实现一些设计上的定制效果。
        1、宽度变成了100%
        2、设置了一个浅灰色（#ccc）的边框
        3、具有4px的圆角
        4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
        5、设置了placeholder的颜色为#999
    当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

    自动随着浏览页面大小而垂直、水平
        1、在<form>元素是使用类名“form-horizontal”。
        2、配合Bootstrap框架的网格系统。

    内联表单
        在<form>元素中添加类名“form-inline"
        如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中

    表单控件
        (输入框input)
            为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”
        (下拉选择框select)
            多行选择设置multiple属性的值为multiple
        (文本域textarea)
            <textarea class="form-control" rows="3">
        (复选框checkbox和单选择按钮radio)
            主要借助“.checkbox”和“.radio”样式
            1、不管是checkbox还是radio都使用label包起来了
            2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
            3、radio连同label标签放置在一个名为“.radio”的容器内
            在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
        (复选框和单选按钮水平排列)
            1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
            2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
        (按钮)
            input[type=“submit”]
            input[type=“button”]
            input[type=“reset”]
            <button>

    表单控件大小
        用来控制表单控件的高度。这两个类名是：
            1、input-sm:让控件比正常大小更小
            2、input-lg:让控件比正常大小更大


    表单控件状态
        (焦点状态)
            要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”
        (禁用状态)
            只需要在需要禁用的表单控件上加上“disabled”即可
        (验证状态)
            1、.has-warning:警告状态（黄色）
            2、.has-error：错误状态（红色）
            3、.has-success：成功状态（绿色）
            使用的时候只需要在form-group容器上对应添加状态类名

    表单提示信息
        使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。


7.按钮
    <button class="btn btn-default" type="button">默认按钮.btn-default</button>
    <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
    <button class="btn btn-success" type="button">成功按钮.btn-success</button>
    <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
    <button class="btn btn-link" type="button">链接按钮.btn-link</button>
    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
    <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

块状按钮
    只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的
    <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button> 

按钮状态——禁用状态
    要禁用按钮有两种实现方式：
        方法1：在标签中添加disabled属性
        方法2：在元素标签中添加类名“disabled”



8.图像
    1、img-responsive：响应式图片，主要针对于响应式设计
    2、img-rounded：圆角图片
    3、img-circle：圆形图片
    4、img-thumbnail：缩略图片

图标（一）
    <span class="glyphicon glyphicon-cloud"></span>

    通过设置内间距（padding）从而创建列与列之间的间距，然后通过为第一列和最后一列设置负的外间距（margin）来抵消内间距（padding）的影响

列偏移
    需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度

列排序
    列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
        <div class="col-md-4  col-md-push-8">.col-md-4</div>
        <div class="col-md-8 col-md-pull-4">.col-md-8</div>

列的嵌套
    可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。


9.下拉菜单
    （基本用法）
        因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果
            1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
                <div class="dropdown"></div>
            2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
                data-toggle="dropdown"
            3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
                <ul class="dropdown-menu">
                
    （原理分析）
        通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除

    （下拉分隔线）
        添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能

    （菜单标题）
        <li role="presentation" class="dropdown-header">第一部分菜单头部</li>

    （对齐方式）
        如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名