Bootstrap_栅格系统
来源:互联网 发布:python sha256加密 编辑:程序博客网 时间:2024/04/30 07:13
一、栅格系统原理
1. 栅格系统(布局)
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。
我们在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:
- 行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 使用行(row)在水平方向创建一组列(column)。 你的内容应当放置于列(column)内,而且,只有列(column)可以作为行(row)的直接子元素。
- 类似Predefined grid classes like .row and .col-xs-4 4. 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
- 通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
2. 编码实现
先来个简单的例子:
- <span style="font-size:18px;"><!DOCTYPE html>
- <head>
- <title>
- Bootstrap
- </title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media
- queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file://
- -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
- </script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">
- </script>
- <![endif]-->
- </head>
- <body>
- <h1>
- Hello, world!
- </h1>
- <h2 class="page-header">
- 区域一
- </h2>
- <p>
- Bootstrap has a few easy ways to quickly get started, each one appealing
- to a different skill level and use case. Read through to see what suits
- your particular needs.
- </p>
- <h2 class="page-header">
- 区域二
- </h2>
- <p>
- If you work with Bootstrap's uncompiled source code, you need to compile
- the LESS files to produce usable CSS files. For compiling LESS files into
- CSS, we only officially support Recess, which is Twitter's CSS hinter based
- on less.js.
- </p>
- <h2 class="page-header">
- 区域三
- </h2>
- <p>
- Within the download you'll find the following directories and files, logically
- grouping common resources and providing both compiled and minified variations.
- </p>
- <script src="js/jquery-2.0.3.js">
- </script>
- <script src="js/bootstrap.min.js">
- </script>
- </body>
- </span>
当然效果也很简单,把截图放上,可以进行对比。
优化一:可以发现上图的页面效果占满全屏,我们可以通过Bootstrap 样式类对上面的内容进行居中。
<div class="container">.........之前上面添加在body标签下的代码</div>
可以发现container这个类设置了宽度,并且可以让内容显示在页面的中间。
优化二:将三个区域显示在同一排,并且平均分成三栏。
首先为三个区域添加一个容器,可以使用div,并且为div添加一个类 <div class="row">
.
然后我们为每个小的区域也添加一个容器div,并且为div添加一个类<div class="col-xs-4">
简单代码实现如下
- <pre><code><div <span class="class"><span class="keyword">class</span>="<span class="title">container</span>">
- <<span class="title">h1</span>>
- <span class="title">Hello</span>, <span class="title">world</span>!
- </<span class="title">h1</span>>
- <<span class="title">div</span> <span class="title">class</span>="<span class="title">row</span>">
- <<span class="title">div</span> <span class="title">class</span>="<span class="title">col</span>-<span class="title">xs</span>-4">
- <<span class="title">h2</span> <span class="title">class</span>="<span class="title">page</span>-<span class="title">header</span>">
- 区域一
- </<span class="title">h2</span>>
- <<span class="title">p</span>>
- <span class="title">Bootstrap</span> <span class="title">has</span> <span class="title">a</span> <span class="title">few</span> <span class="title">easy</span> <span class="title">ways</span> <span class="title">to</span> <span class="title">quickly</span> <span class="title">get</span> <span class="title">started</span>, <span class="title">each</span> <span class="title">one</span> <span class="title">appealing</span>
- <span class="title">to</span> <span class="title">a</span> <span class="title">different</span> <span class="title">skill</span> <span class="title">level</span> <span class="title">and</span> <span class="title">use</span> <span class="title">case</span>. <span class="title">Read</span> <span class="title">through</span> <span class="title">to</span> <span class="title">see</span> <span class="title">what</span> <span class="title">suits</span>
- <span class="title">your</span> <span class="title">particular</span> <span class="title">needs</span>.
- </<span class="title">p</span>>
- </<span class="title">div</span>>
- <<span class="title">div</span> <span class="title">class</span>="<span class="title">col</span>-<span class="title">xs</span>-4">
- <<span class="title">h2</span> <span class="title">class</span>="<span class="title">page</span>-<span class="title">header</span>">
- 区域二
- </<span class="title">h2</span>>
- <<span class="title">p</span>>
- <span class="title">If</span> <span class="title">you</span> <span class="title">work</span> <span class="title">with</span> <span class="title">Bootstrap</span>'<span class="title">s</span> <span class="title">uncompiled</span> <span class="title">source</span> <span class="title">code</span>, <span class="title">you</span> <span class="title">need</span> <span class="title">to</span> <span class="title">compile</span>
- <span class="title">the</span> <span class="title">LESS</span> <span class="title">files</span> <span class="title">to</span> <span class="title">produce</span> <span class="title">usable</span> <span class="title">CSS</span> <span class="title">files</span>. <span class="title">For</span> <span class="title">compiling</span> <span class="title">LESS</span> <span class="title">files</span> <span class="title">into</span>
- <span class="title">CSS</span>, <span class="title">we</span> <span class="title">only</span> <span class="title">officially</span> <span class="title">support</span> <span class="title">Recess</span>, <span class="title">which</span> <span class="title">is</span> <span class="title">Twitter</span>'<span class="title">s</span> <span class="title">CSS</span> <span class="title">hinter</span> <span class="title">based</span>
- <span class="title">on</span> <span class="title">less</span>.<span class="title">js</span>.
- </<span class="title">p</span>>
- </<span class="title">div</span>>
- <<span class="title">div</span> <span class="title">class</span>="<span class="title">col</span>-<span class="title">xs</span>-4">
- <<span class="title">h2</span> <span class="title">class</span>="<span class="title">page</span>-<span class="title">header</span>">
- 区域三
- </<span class="title">h2</span>>
- <<span class="title">p</span>>
- <span class="title">Within</span> <span class="title">the</span> <span class="title">download</span> <span class="title">you</span>'<span class="title">ll</span> <span class="title">find</span> <span class="title">the</span> <span class="title">following</span> <span class="title">directories</span> <span class="title">and</span> <span class="title">files</span>, <span class="title">logically</span>
- <span class="title">grouping</span> <span class="title">common</span> <span class="title">resources</span> <span class="title">and</span> <span class="title">providing</span> <span class="title">both</span> <span class="title">compiled</span> <span class="title">and</span> <span class="title">minified</span> <span class="title">variations</span>.
- </<span class="title">p</span>>
- </<span class="title">div</span>>
- </<span class="title">div</span>>
- </<span class="title">div</span>></span></code>
效果如下
的确排成一列,然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了,反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格,那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类,然后在同一排的周围进行使用带有row类的容器。
3. 总结
本节主要学习的布局(栅格系统),通过简单的实例来理解它的工作原理。
使用过的类有:
.container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width,用以匹配栅格系统。
.col-xs-4:这个类通过"-"分为三个部分,第三个部分的数字作为一个泛指,它的范围是1到12。就是可以把一个区域分为12个栏,这个要和row类联合使用。
其实这个布局很像HTMl中的Table布局TR行和TD列吧。
- Bootstrap_栅格系统
- Bootstrap_栅格系统
- 栅格系统
- 栅格系统
- 栅格系统
- 栅格系统
- 栅格系统
- Bootstrap中的栅格栅格系统
- Bootstrap3 栅格系统-栅格参数
- 研究网页栅格系统
- Bootstrap栅格系统研究
- CSS Bootstrap 栅格系统
- 网页栅格设计系统
- Bootstrap 栅格系统
- Bootstrap栅格系统研究
- bootstrap3.0 栅格系统
- Bootstrap栅格系统研究
- bootstrap 栅格系统
- LeetCode-Single Number
- 微信公众平台开发(十二) 发送客服消息
- bootstrap_第一次使用
- java中的接口
- 统计0到n之间1的个数
- Bootstrap_栅格系统
- 回归
- MAC无法隐藏文件及其扩展
- mac下安装pycurl报错的解决办法
- boostrap文字的设计
- linux patch
- Dos下如何复制文本
- HashMap和HashSet的区别
- 位运算备忘