Bootstrap精巧布局

转载地址：http://www.see-source.com/blog/300000033/280

Bootstrap提供俩种布局方式固定(网格)布局和流式(网格)布局。结合上篇文章所讨论的栅格系统来说，Bootstrap的布局实际上是在栅格外加个容器(container)。固定布局加的是固定宽度(width)的容器，流式布局加的是自适应(或叫可变)宽度的容器，这是二者的唯一区别。

1.固定布局

下面来看个示例：

view sourceprint?

01.<body>

02.<div class="container">

03.<div class="row">

04.<div class="span4"> span4</div>

05.<div class="span8"> span8</div>

06.</div>

07.<div class="row">

08.<div class="span4"> span4</div>

09.<div class="span6"> span6</div>

10.<div class="span2"> span2</div>

11.</div>

12.</div>

13.</body>

<div class="container">就是上面所说的容器，其内有俩行栅格(.row)。

Bootstrap中规定固定容器的总的宽度为940px，具体看下源码定义，如下：

view sourceprint?

1..container,

2.{

3.width: 940px;

4.}

还有就是规定了这个container的页面居中，源码如下：

view sourceprint?

1..container {

2.margin-left: auto;

3.margin-right: auto;

4.*zoom: 1;

5.}

（这里有个技巧，为了让div在各种浏览器下下产生同样的居中效果将margin-left和margin-right的值为auto是最简单的方式。*zoom这个css hack是为了兼容ie6和7，但具体为什么要使用zoom=1还不得而知。）

同时，还使用了css伪元素选择器，在这个类里面还清空了前后的内容，并且在后面还清除了浮动：

view sourceprint?

01..container:before,

02..container:after {

03.display: table;

04.line-height: 0;

05.content: "";

06.}

07..container:after {

08.clear: both;

09.}

接下来简单谈一下使用span进行整页布局的一个技巧：无论是做几列的布局，那么请一定保证在一个row内的各个span的名字加起来正好是12. 比如可以是前面说的span4+span8；也可以是一个单独的span12；也可以是span6+ span6；或者span4+ span4+ span4等等。

注：文字中谈的数字（比如container的宽度为940px，每个span的宽度都是缺省值，实际开发中我们可以适当重写。）

2.流式布局

也是先看个示例：

view sourceprint?

01.<body>

02.<div class="container-fluid">

03.<div class="row-fluid">

04.<div class="span2">...</div>

05.<div class="span10">...</div>

06.</div>

07.<div class="row-fluid">

08.<div class="span2">...</div>

09.<div class="span10">...</div>

10.</div>

11.</div>

12.</body>

<div class=" container-fluid" >是流式布局的容器，其内有俩行流式栅格。其实并非一定要固定容器中只能配固定式栅格，流式容器只能配流式栅格，视需要而定。

源码如下：

view sourceprint?

1..container-fluid {

2.padding-right: 20px;

3.padding-left: 20px;

4.*zoom: 1;

5.}

容器左右各加了20px的内边距。

view sourceprint?

01..container-fluid:before,

02..container-fluid:after {

03.display: table;

04.line-height: 0;

05.content: "";

06.}

07.

08..container-fluid:after {

09.clear: both;

10.}

清空了前后的内容，并且在后面清除了浮动。

3.布局的嵌套

布局的嵌套实际就是栅格的嵌套。如下：

view sourceprint?

01.<div class="row">

02.<div class="span12">

03.嵌套的顶级

04.<div class="row">

05.<div class="span6">嵌套的2级</div>

06.<div class="span6">嵌套的2级</div>

07.</div>

08.</div>

09.</div>

归结起来， Bootstrap的布局其实就是　容器 +　栅格系统，容器只是限制外围的宽度，主要变化在于栅格，通过栅格的合并、偏移、嵌套来最终达到布局效果的。

Bootstrap精巧布局相关推荐

bootstrap-dist的下载和使用bootstrap可视化布局代码无样式解决
bootstrap-dist目前我自己用到的范围也就是bootstrap可视化布局后复制生成好的HTML,然后引用链接,也就这么多 1.下载官网地址点我博主下载好的文件点我(官网下载的)提取码:2 ...
Bootstrap栅栏布局
Bootstrap栅格布局 bootstrap栅栏系统css中的col-xs-.col-sm-.col-md-* .col-lg-*的意义: 小于 768px 的时候,用 col-xs-12 类对应的 ...
HTML创建12列小屏幕网格,Bootstrap 网格系统布局详解
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平 ...
根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器
咱们大部分围绕着两个问题来叙述是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录
当第一次接触到 position:sticky 这个属性,我就意识到之前的不少 js 场景可以用这个 css 属性去改写.譬如网站右侧的不少广告,滚动上去后需要 fixed,完全就是 sticky ...
BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
bootstrap panel 布局
panel 1. 效果 2. 基于bootstrap实现用于页面分专栏展示 1. 效果成品 2. 基于bootstrap实现 <!DOCTYPE html> <html>& ...
Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'><h2 class='page-header'>导航</h2><!-- .navrbar n ...

Bootstrap精巧布局

Bootstrap精巧布局相关推荐

最新文章

热门文章