Bootstrap3学习v0.5.pdf

Bootstrap3 学习 读Bootstrap中文网 / 学习笔记 Email：saleopt@163.com BootStrap 3 saleopt@163.com Bootstrap下载 n 获取Bootstrap最快速的方式就是下载经过编译和压缩的CSS、 JavaScript文件，另外还包含字体文件。但是不包含文档和源码文件。 ¡  /twbs/bootstrap/releases/download/v3.0.3/ bootstrap-3.0.3-dist.zip n  Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到 以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了 压缩与未压缩两种版本。 BootStrap 3 saleopt@163.com 第一个案例 html head meta http-equiv=X-UA-Compatible content=IE=edge titleBootstrap 101 Template/title link rel=stylesheet href=css/bootstrap.min.css /head body h1Hello, world!/h1 p测试段落 strongthis is test/strong 完毕./p div class=row div class=col-md-4 占位4列/div div class=col-md-4 占位4列/div div class=col-md-4 占位4列/div /div p测试段落 strongthis is test/strong 完毕./p script src=js/jquery.min.js/script script src=js/bootstrap.min.js/script /body /html BootStrap 3 saleopt@163.com CSS BootStrap 3 saleopt@163.com CSS n  Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 n  Bootstrap是移动设备优先的。为了确保适当的绘制和触屏缩放，需要 在head之中添加viewport元数据标签。 BootStrap 3 saleopt@163.com CSS – 栅格系统 n  Bootstrap栅格系统的工作原理： ü  “行（row ）”必须包含在.container中，以便为其赋予排列（aligment ） 和内补（padding）。 ü  使用“行（row ）”在水平方向创建一组“列（column ）”。 ü  内容应放置于“列（column ）”内，只有“列（column ）”可以作为行 （row ）”的直接子元素。 ü  类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格 class可以用来快速创建栅格布局。 ü  通过设置padding从而创建“列（column ）”之间的间隔（gutter ）。然后 通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。 ü  栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽 的列可以使用三个.col-xs-4来创建。 n 栅格与全宽布局Grids and full-width layouts ü  对于需要占据整个浏览器视口（view