Bootstrap自学笔记.pdf

Bootstrap 3.3.5 版本 1.Bootstrap 基本模板： 1.HTML5 文档类型定有： !DOCTYPE html 2.编码设置： meta charset=”utf-8 ” 3.移动设备优先设置： meta name=”viewport ” content=”width=device-width,initial-scale=1.0 ” 4.引入 CSS 和 JS 文件： 引入下载好的 Bootstrap css和 js 文件。 2.CSS 全局样式： 1.布局容器类样式： Container:固定宽度并且具有响应式； Container-fluid: 自由宽度（ 100%）； 辅助类标签： 显示和隐藏 .show .hidden .sr-only 块标签对其： .pull-left: 左对齐 .Pull-right: 右对齐 .center-block：居中对齐 清除浮动： 为父元素添加 .clearfix 可以清除浮动。 2.栅格系统： 1）. 简介 栅格系统用于通过一系列的行（ row）与列（ column ）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row ）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（ aligment ） 和内补（ padding ）。 通过“行（ row ）”在水平方向创建一组“列（ column ）”。 你的内容应当放置于“列（ column ）”内，并且，只有“列（ column ）”可以作为行（ row ）”的直接子元素。 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。 Bootstrap 源码中定义的 mixin 也可以用来创建语义化的 布局。 通过为“列（ column ）”设置 padding 属性，从而创建列与列之间的间隔（ gutter）。通过为 .row 元素设置负值 margin 从而抵消 掉为 .container 元素设置的 padding ，也就间接为“行（ row ）”所包含的“列（ column ）”抵消掉了 padding 。 负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 如果一“行（ row ）”中包含了的“列（ column ）”大于 12，多余的“列（ column ）”所在的元素将被作为一个整体另起一行排列。 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅 格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此， 在元素上应用任何 .col-lg-* 不 存在， 也影响大屏幕设备。 2).媒体查询： /* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记 得 Bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min