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页面上页头里增加如下代码标签

移动设备上的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;}

 

你可能感兴趣的:(css3)