Bootstrap学习之二：栅格化布局

 

@(Bootstrap)

导言

前面咱们讲了如何安装使用bootstrap框架，下面咱们将会学习bootstrap的各类框架结构，布局。在这篇文章中将讲述如何使用栅格化布局

[TOC]

1.什么是栅格化布局

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增长，系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫作布局。它就是经过一系列的行（row）与列（column）的组合建立页面布局，而后你的内容就能够放入到你建立好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工做原理：
网格系统的实现原理很是简单，仅仅是经过定义容器大小，平分12份(也有平分红24份或32份，但12份是最多见的)，再调整内外边距，最后结合媒体查询，就制做出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分红12份。

2.开始栅格化布局

a建立一个容器

咱们要先建立一个容器来存放咱们的内容，这个容器的名字加containner,咱们来看一下bootstrap文档中的源码，这个样式在bootstrap.css文件中,下面是bootstrap中的源码

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

margin-left和magin-right都设置为auto，文档会居中显示并适配各类设备

b.建立合适的栅格系统

咱们看下bootstrap官网给的解释

Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

row表明行，bootstrap将划分为12等分，用col-md-num表示，其中num是本身定义的最大为12，而且要保证本身设置的col总和不能超过12
下面咱们给个实例，部分源码

<h1>Hello,World!</h1>
<div class="container">
    <div class="row">
        <div class="col-md-1">王</div>
        <div class="col-md-1">文</div>
        <div class="col-md-1">杜</div>
        <div class="col-md-1">是</div>
        <div class="col-md-1">个</div>
        <div class="col-md-1">大</div>
        <div class="col-md-1">傻</div>
        <div class="col-md-1">逼</div>
        <div class="col-md-1">吗</div>
        <div class="col-md-1">？</div>
        <div class="col-md-1">是</div>
        <div class="col-md-1">的</div>
    </div>
</div>
<div class="container"> 
    <div class="row">
        <div class="col-md-4">I</div>
        <div class="col-md-4">LOVE</div>
        <div class="col-md-4">YOU</div>
    </div>
</div>

下面为网页效果

c.进行列的嵌套

例如咱们已经建立一个num为8的列，咱们能够在列里继续嵌套列为6的列，这样就为原来的3/8，官方解释以下

d.单元格的其余类

　　　.c0l-xs-　　不管屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
　　　.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
　　　.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
　　　.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器

e.列偏移

五、列偏移
有的时候，咱们不但愿相邻的两个列紧靠在一块儿，但又不想使用margin或者其余的技术手段来。这个时候就可使用列偏移（offset）功能来实现。使用列偏移也很是简单，只须要在列元素上添加类名“col-md-offset-*”(其中星号表明要偏移的列组合数)，那么具备这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。

以上就是栅格化布局的内容

参考文档：bootstrap官方文档关于栅格化布局的参考
脚本之家：Bootstrap天天必学之栅格系统（布局）
Jerry_Tao的博客园