BootStrap学习

又开始学习BS了，学习还是不能学一段停一段的啊！要不停的烧水才能沸腾啊！

基础了解

• 全局CSS样式：设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统。禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
• 组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
• 纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。
• 栅格系统类似于表格。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。
• 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
• 除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。
• 在HTML5中可以放心使用 <b>和 <i>标签。<b>用于高亮单词或短语，不带有任何着重的意味；而 <i>标签主要用于发言、技术词汇等。
• 禁止响应式布局的步骤。
• 通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了max-width: 100%;、 height: auto;和display: block;属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
• 通过 <code>标签包裹内联样式的代码片段。多行代码可以使用<pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
• 一般小于768px的时候，都会堆叠显示。

  全局css样式

• 概念分类：栅格系统、排版、代码、表格、表单、按钮、图片、辅助类、响应式工具、使用less。
• Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
• variables.less文件中定义的两个Less变量决定了排版尺寸:font-size-base和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。
• 内联文本元素：<mark>、<del>、<ins>、<small> 代码元素：<code>、<kbd>、<pre>、<var> 、<samp>
• 多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
• 引用：在你的文档中引用其他来源的内容。将任何HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，我们建议用<p>标签。
• 按钮：为<a>、<button>或<input>元素添加按钮类（button class）即可使用Bootstrap提供的样式。
• 表格：基本样式(.table)、条纹状表格(.table-striped)、带边框的表格(.table-bordered)、鼠标悬停样式(.table-hover)、紧缩表格(table-condensed)、状态类(通过这些状态类可以为行或单元格设置颜色，如：.active、.success、.info)
• 响应式表格：将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
• 表单：单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea> 和 <select>元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
• 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
• 内联表单：为<form>元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。
• 可能需要手动设置宽度：在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
• 水平排列的表单：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
• 多选和单选框：默认外观（堆叠在一起），内联单选和多选框：通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
• 静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为<

  >元素添加 .form-control-static 类即可。

• 禁用状态：为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
• 只读状态：为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
• Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
• css3伪元素：.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0;}
• 我们总结的最佳实践是：强烈建议尽可能使用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
• 不带label文本的Checkbox 和 radio：如果需要 内没有文字，输入框（input）正是你说期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。
• 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为<p>元素添加 .form-control-static 类即可。
• 校验状态：Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control和 .help-block元素都将接受这些校验状态的样式。
• pointer-events: none;上面提到的类只是通过设置 pointer-events: none 来禁止<a>元素作为链接的原始功能，但是，这一CSS属性并没有被标准化，并且Opera 18及更低版本的浏览器并没有完全支持这一属性，同样，Internet Explorer 11也不支持。
• 控件尺寸：通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
• 按钮激活状态：当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于<button>元素，是通过 :active 状态实现的。
• 如果为<button>元素添加 disabled 属性，Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前我们还没有解决办法。
• 辅助类：情境文本颜色、情境背景色（primary、success、info、warning、danger）、关闭按钮（<span>&times;</span>）、三角符号（<span class="caret"></span>）、快速浮动（.pull-right、.pull-left）、让内容块居中（.center-block）、清除浮动（.clearfix）、显示或隐藏内容（.hidden、.show）、屏幕阅读器和键盘导航（.sr-only）。
• button标签的定义和用法：type属性规定按钮的类型(submit、button、reset)。提示：请始终为按钮规定type属性。Internet Explorer的默认类型是”button”，而其他浏览器中（包括 W3C 规范）的默认值是”submit”。
• input标签的type属性都有：button、reset、submit、file、image、hidden、password、checkbox、radio、text。
• 显示或隐藏内容：.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题。
• 响应式工具：为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
• Bootstrap的CSS文件是通过Less源码编译而来的。Less是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用Less源码而非编译而来的CSS文件的用户，Bootstrap框架中包含的大量变量、mixin将非常有价值。

组件

• 无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
• 图表字体：出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。图标类只能应用在不包含任何文本内容或子元素的元素上。
• 下拉菜单：用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
• 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。把一组<div class="btn-group">组合进一个<div class="btn-toolbar">中就可以做成更复杂的组件。想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
• 两端对齐排列的按钮组：让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。由于对两端对齐的按钮组使用了特定的HTML 和 CSS（即 display: table-cell），两个按钮之间的边框叠加在了一起。在普通的按钮组中，margin-left: -1px 用于将边框重叠，而没有删除任何一个按钮的边框。然而，margin 属性不支持 display: table-cell。因此，根据你对 Bootstrap 的定制，你可以删除或重新为按钮的边框设置颜色。Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框，无论是<a>或 <button> 元素。为了照顾 IE8，把每个按钮放入另一个 .btn-group 中即可。为了将<button>元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。
• 导航：Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。由于标签页需要控制内容区的展示，因此，你必须使用 标签页组件的 JavaScript 插件。对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
• 导航条：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。导航条内所包含元素溢出：由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：1、减少导航条内所有元素所占据的宽度。2、在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
  3、修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse内所包含的内容也将不可见。响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。
• 将导航条内放置品牌标志的地方替换为<img>元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。
• 输入框组:通过在文本输入框<input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素(可包括多个)。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。
• 分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。在输入框组中作为额外元素的分裂式按钮下拉菜单。(分裂式按钮也可延伸为与多个按钮的组合即.input-group-btn这个类里面允许有多个按钮存在 思维发散)
• 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：减少导航条内所有元素所占据的宽度。在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
  • 导航条修改视口的阈值，从而影响导航条的排列模式当浏览器视口（viewport）的宽度小于 @grid-float-breakpoint 值时，导航条内部的元素变为折叠排列，也就是变现为移动设备展现模式；当浏览器视口（viewport）的宽度大于 @grid-float-breakpoint 值时，导航条内部的元素变为水平排列，也就是变现为非移动设备展现模式。通过调整源码中的这个值，就可以控制导航条何时堆叠排列，何时水平排列。默认值是 768px （小屏幕 – 或者说是平板 –的最小值，或者说是平板）。
  • 表单:将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。.navbar-form 和 .form-inline 的大部分代码都一样，内部实现使用了 mixin。 某些表单组件，例如输入框组，可能需要设置一个固定宽度，从而在导航条内有合适的展现。
  • 按钮:对于不包含在
    中的元素，加上.navbar-btn后，可以让它在导航条里垂直居中。
  • 文本:把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用

    标签。

  • 组件排列:通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。
  • 固定在顶部:添加 .navbar-fixed-top 类可以让导航条固定在顶部,这个固定的导航条会遮住页面上的其它内容，除非你给 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。
  • 反色的导航条:通过添加 .navbar-inverse 类可以改变导航条的外观。
  • 相关类：navbar-default、navbar-inverse、navbar-header、navbar-nav、navbar-form、navbar-btn、navbar-text、navbar-link、navbar-static-top(没有圆角了)
• 路径导航:在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
• 翻页：用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。
• 徽章：给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。
• 页头：页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。（博客中会见到）
• 缩略图:添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。
• 警告框:警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。
• 进度条:通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。
• 媒体对象列表：用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
• 列表组：用 标签代替
• 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将
  标签替换为
  标签）。列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是
  而不能用
  了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！
• 具有响应式特性的嵌入内容：根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在
• 把 Well 用在元素上，能有嵌入（inset）的的简单效果。通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。( well-lg、well-sm)

JS插件

• jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。
• data属性API：你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选方式。话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：$(document).off(‘.data-api’)。另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：$(document).off(‘.alert.data-api’)。
• 编程方式的API：我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）。
• 事件：Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发。
• 模态框弹出时还会为 元素添加 .modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。