@(Bootstrap)

导言

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

目录

  • 导言
  • 1.什么是栅格化布局
  • 2.开始栅格化布局
  • a创建一个容器
  • b.创建合适的栅格系统
  • c.进行列的嵌套
  • d.单元格的其他类
  • e.列偏移

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.

android 栅格系统_栅格系统

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>

下面为网页效果

android 栅格系统_bootstrap_02

c.进行列的嵌套

例如我们已经创建一个num为8的列,我们可以在列里继续嵌套列为6的列,这样就为原来的3/8,官方解释如下

android 栅格系统_栅格系统_03

d.单元格的其他类

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

e.列偏移

5、列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

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