bootstrap栅格系统布局原理

简介

栅格系统用于通过一系列的行（row）与列（col）组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理：

• 行（row）必须放在.container（固定宽度）或.container-fluid（100%宽度）内，以便为其赋予合适的排列（aligment）和内补（padding）;
• 通过“行（row）”在水平方向创建一组“列（col）”;
• 你的内容应当放置在“列（col）”内，并且，只有“列（col）”可以作为行的直接子元素。
• 类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格系统布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 通过为“列（col）”设置padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行（row）”所包含的“列（col）”抵消掉了padding
• 负值的margin就是下面的示例为什么是 向外突出的原因。在栅格列中内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4。
• 如果一“行（row）”中包含了的“列（col）”大于12，多余的“列（col）”所在的元素被作为一个整体另外一行排列。

移动端需要的html页面上页头里增加如下代码标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动设备上的viewport是设备屏幕上用来显示网页的那部分区域

1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的

2.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）

媒体查询

*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
.clearfix{}
.clearfix::after{
  content: '.';
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
}

/*超小设备（手机：小于768px）*/
@media(max-width:768px){
  .col-xs-1{ width: 8.33333333%;}
  .col-xs-2{ width: 16.66666667%;}
  .col-xs-3{ width: 25%;}
  .col-xs-4{ width: 33.33333333%;}
  .col-xs-5{ width: 41.66666667%;}
  .col-xs-6{ width: 50%;}
  .col-xs-7{ width: 58.33333333%;}
  .col-xs-8{ width: 66.66666667%;}
  .col-xs-9{ width: 75%;}
  .col-xs-10{ width: 83.33333333%;}
  .col-xs-11{ width: 91.66666667%;}
  .col-xs-12{ width: 100%;}
}

/*小型设备 （平板电脑：768px起）0*/
@media(min-width:768px){
  .col-sm-1{ width: 8.33333333%;}
  ...
}

/*中型设备（台式电脑：992px起）*/
@media(min-width:992px){
  .col-md-1{ width: 8.33333333%;}
  ...
}

/*大型设备（台式电脑：1200px起）*/
@media(min-width:1200px){
  .col-lg-1{ width: 8.33333333%;}
  ...   
}
/* 被定义的元素内边距和边框不再会增加它的宽度，不加入的话排版会有问题 */
.container *,.container{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row{
  margin-right: -10px;
  margin-left: -10px;
}

.row>div>p{
  background: #ccc;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-13,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12
{ float: left; padding: 1px 10px;}