Bootstrap基础的学习

       首先是对于Bootstrap的一个整体理解。我认为Bootrstrap其实就是一个css样式集合，它定义了很多制作网页时可能要用到的样式。当我们需要用到的时候就可以直接使用而不用再自己写，可以节省很多时间，非常方便。

接下来就具体一些：

一、  排版：

     1、 标题：Bootstrap中重新设置了margin-to和margin-bottom，使用方法并没有改变。并且还给出了副标题的新用法，即使用<small>标签。

     2、 段落：主要修改了字体相关属相以及行间距等，并且设置了margin值。

     3、突出样式处理：<strong>粗体、<em>斜体、<cite>引用或者给<p>加上.lead的类名。还有一套强调类名，通过颜色表示强调。

     4、 对齐风格：Bootstrap中对于文本对齐也有一套类名。

     5、表格：不同样式的表格有不同的的类名，使用时加上对应类名就可以。

二、  表单：

     1、 基础表单：对文本框的样式进行了一些改动。

     2、表单样式：新增了水平表单和内联表单，使用时只需要加上对应的类名，就可以方便不少。

     3、表单控件：需要添加类名“form-contral”以保证控件在不同风格表单中样式不会出错。并且需要定义一个容器<div>，使用类名“form-group”。并且它们在焦点状态下都有不同的样式。

       a) <input>输入框：使用时必须指定type类型。

       b) <select>下拉选择框：

       c) <text-area>文本域：

       d) 多选/单选按钮:

            1、不管是checkbox还是radio都使用label包起来。

            2、checkbox连同label标签放置在一个名“.checkbox”的容器内，如果需要水平排列，在lable标签上再加一个  “check-inlne”的类名。

            3、radio连同label标签放置在一个名为“.radio”的容器内，如果需要水平排列，在lable标签上再加一个“radio-inlne”的类名。

        e) 按钮：采用<button>实现。同时可以用“input-sm”使控件变小，“input-lg”则变大。还可以借助Bootstrap框架的网格系统控制宽度。重新定义一个容器div使用类名，例如“col-xs-4”。

        f) 禁用状态：在表单控件上加上“disabled”类名。

        g) 验证状态：在form-group容器上添加对应状态类名。还可以显示不同的icon，在对应的状态下添加类名“has-feedback”,此类名要与“has-error”等类名在一起。

        h) 图像：有四种不同风格。“img-responsive”,“img-rounded”,“img-circle”,“img-thumbnail”

        i) icon：在网页中添加一个内联元素，再给它添加“glyphicon”类名来实现，

三、  网格系统：

     1、 Bootstrap框架中的网格系统就是将容器平分成12份。

     2、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

     3、 在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。

     4、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素。

     5、 四种基本用法：

        1. 列组合：更改数字来合并列（原则：列总和数不能超12）。

        2. 列偏移：只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。要保证列与偏移列的总数不超过12。

        3. 列排序：列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”（往右边偏移）和“col-md-pull-*” (往左边偏移)。

        4. 列嵌套：可以在一列中添加一行或多行，然后在行容器中插入列，就在里面嵌套了一个新的网格。

四、  下拉菜单

     1、在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。

     2、特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

     3、使用方法：①使用一个名为“dropdown”的容器包裹了整个下拉菜单元素。②使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致。③下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”。

     4、下拉分隔线：可以加一个空的<li>，给它添加类名“divider”。

     5、菜单标题：<li role=”presentation” class=”dropdown-header”>菜单头部</li>。

     6、对齐方式：Bootstrap框架中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。同时一定要为.dropdown添加float:left css样式。

     7、菜单项状态：下拉菜单项的默认状态有悬浮状态(:hover)和焦点状态(:focus)。除此之外还有当前状态(.active)和禁用状态(.disabled)。在使用时添加上对应的类名即可（<li class=”active>或<li class=”disabled”>）

     8、按钮组：使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。可以使用<span>标签给按钮添加小图标。圆角效果：默认所有图标都有圆角效果，然后再取消除了一头一尾两个按钮之外的所有圆角效果。

     9、按钮工具栏：将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中。也可以调整按钮大小，添加对应类名即可。类似前面的按钮一节中的用法。

    10、按钮（嵌套分组）：将普通按钮与下拉菜单排列在一起实现类似导航菜单的效果。只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。

    11、按钮（垂直分组）：我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

    12、按钮（等分按钮）：自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名。特别声明：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

     13、按钮下拉菜单：在下拉菜单的基础上，加了一个按钮。只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

     14、按钮中的三角形：按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”。

     15、向上弹起的下拉菜单：在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加这个类名

     16、导航：Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。

     17标签型导航：标签形导航是通过“nav-tabs”样式来实现。设置选中选项，添加“active”类名即可。设置禁用选项卡添加“disabled”类名即可。

     18、胶囊型导航：当前项高亮显示，并带有圆角效果。将“nav-tabs”换成“nav-pills”。

     19、 垂直堆叠的导航：在上一个的基础上，添加类名“nav-stacked”即可。

     20、自适应导航：指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

     21、  二级导航：在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul。只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以实现分隔线。

     22、  面包屑式导航：使用方式就很简单，为<ol>加入breadcrumb类。

五、  导航条基础：

     1、首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”。 然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

     2、导航条标题：通过“navbar-header”和“navbar-brand”来实现。同样的，在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条，

     3、带表单的导航条：在navbar容器中放置一个带有navbar-form类名的表单，“navbar-left”让表单左浮动，“navbar-right”样式，让元素在导航条靠右对齐。

     4、导航条中的按钮，文本，链接：按钮navbar-btn，文本navbar-text，普通链接navbar-link。但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

     5、 固定导航条：.navbar-fixed-top：导航条固定在浏览器窗口顶部。navbar-fixed-bottom：导航条固定在浏览器窗口底部。从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

         body {

                      padding-top: 70px;/*有顶部固定导航条时设置*/

                      padding-bottom: 70px;/*有底部固定导航条时设置*/

                  }

    其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面

      6、响应式导航条：

           1）、保证在窄屏时需要折叠的内容必须包裹在一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

          2）、保证在窄屏时要显示的图标样式（固定写法）。3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名由需要折叠的div来决定。

      7、 反色导航条：将navbar-deafult类名换成navbar-inverse。

      8、分页导航：在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。当前状态页码会高亮显示，而且不能点击。而最后一页是禁用状态，也不能点击。

      9、翻页导航：在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。

      10、 标签：添加一个标签用来告诉用户一些额外的信息。在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。使用span这样的行内标签。也可以通过lable-default等类名修改背景颜色和文本颜色

      11、  徽章：类似标签。使用行内标签添加“badge”样式来实现。另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而已。

六、  其他

       1、缩略图：并通过“thumbnail”样式配合bootstrap的网格系统来实现。在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等

       2、警示框：

           1)、默认警示框：通过alert实现警示框效果。有“alert-success”,“alert-info”,“alert-warning”,“alert-danger”四个效果。

           2)、可关闭的警示框：需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。在button标签中加入class="close"类，实现警示框关闭按钮的样式。要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

          3)、警示框的链接：给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。

      3、进度条：

          1)、 基本样式：提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。

          2)、彩色进度条：progress-bar-info progress-bar-success progress-bar-warning progress-bar-danger。在基础的进度条上添加对应的类名。

          3)、条纹进度条：在进度条的容器“progress”基础上增加类名“progress-striped"

          4)、动态条纹进度条：在进度条“progressprogress-striped”两个类的基础上再加入“active”类名。特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

          5)、层叠进度条：层叠的进度条之和不能大于100%。

          6)、带lable的进度条：只需要在进度条中添加你需要的值。

      4、 媒体对象：媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：容器“media”,对象“media-object”,主体：“media-body”,标题“media-heading”。除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

       1）、嵌套媒体对象：只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”.

       2）、媒体对象列表：在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，

      5、列表组：

           1）、基础列表组：list-group,list-group-item

           2）、带徽章的列表组：只需要在“list-group-item”中添加徽章组件“badge”

           3）、带链接的列表组：将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。再加上一个链接就可以了。

          4）、自定义列表组：Bootstrap框加在链接列表组的基础上新增了两个样式：

                   list-group-item-heading：用来定义列表项头部样式 。

                   list-group-item-text：用来定义列表项主要内容。

          5）、列表项的状态设置：在列表组中只需要在对应的列表项中添加类名active，disabled。

          6）、多彩列表组：可以使用这几个类名定义不同背景色的列表项：list-group-item-success，list-group-item-info，list-group-item-warning，list-group-item-danger

      6、面板：

          1）、基本面板：就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块，在“panel”的基础上增加一个控制颜色的主题“panel-default”。

          2）、带有头和尾的面板：面板头部：panel-heading，面板尾部：panel-footer。

          3）、彩色面板：panel-primary：重点蓝   panel-success：成功绿     panel-info:信息蓝   panel-warning：警告黄   panel-danger：危险红。使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名。

          4）、面板中嵌套表格：都会在panel-body放置需要的内容，可能是图片、表格或者列表等。

          5）、面板中嵌套列表组：类似上一个。

七、  Javascript插件：

       1、导入：因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。可以一次导入也可以单独导入。总共十二个单独的js文件。

       2、Transition.js：模态弹出框：modal.js

分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中。弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮。弹出框主体，一般使用“modal-body”表示，弹出框的主要内容弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮。

      触发方法：

方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle必须设置为modal和data-target。

方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性。

为弹出框增加过渡效果：可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。