学习笔记-bootstrap(1)

Bootstrap包的内容:

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
• Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，需要使用 HTML5 文档类型（Doctype）。

bootstrap网格系统:可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。(使用bootstrap时采取移动设备优先的策略,优先设计更小的屏幕)

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

111111111111444486612

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

 超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的最大容器宽度None (auto)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px
（一个列的每边分别 15px）30px
（一个列的每边分别 15px）30px
（一个列的每边分别 15px）30px
（一个列的每边分别 15px）可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container">   <div class="row">      <div class="col-*-*"></div>      <div class="col-*-*"></div>         </div>   <div class="row">...</div></div><div class="container">....