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) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
*将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
*所有“列（column）必须放在” .row 内。
input标签placeholder属性
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div>
<div class="row">
<div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div>
<div class="row">
<div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。