您的位置：首页 > Web前端 > BootStrap

全局样式和grid布局—Bootstrap中文使用指南（2）

2013-11-11 22:46 549 查看
源地址：http://www.36ria.com/5230


全局样式


1.要求html5文档类型

Bootstrap使用的css属性和html元素依赖于html5的文档类型声明，请确保每个Bootstrap的页面包含下面的代码：

<!DOCTYPE html>

<html>

...

</html>


2.排版和链接样式

全局的排版和链接样式放在scaffolding.less文件内（关于less教程后面会有详细说明）。默认做了如下处理：

移除body的外边距
设置body的背景颜色为白色
background-color: white;

使用
@baseFone
，
@baseFontSize
，
@baseLineHeight
属性作为排版基础
使用
@linkColor
设置了全局链接颜色和
:hover
伪属性的下划线


3.默认样式重置

从 Bootstrap 2开始，CSS重置样式基于Normalize.css，新的重置样式，可以在reset.less中找到（Bootstrap做了许多的简化）。


默认栅格布局系统

Bootstrap的默认布局系统由总宽度为940px的12列组成。

它能够适应各个分辨率的显示设备，比如手机、平板、超高分辨率屏幕等。

（ps：请看demo）

上面的代码将创建二列栅格，span4容器占总宽度的4/12即（1/3）。

1.如何处理列的偏移

比如我们希望有个栅格是右靠齐。

第二个span4容器，增加个offset4样式名，表示跟前一个容器相隔4个列距离。

2.处理列的嵌套

（ps：请看demo）

在Bootstrap中使用静态（非浮动）的布局处理栅格的嵌套是非常简单的事。

.row的容器内部是一个占满12列的层(.span12)，下面嵌套个新的.row容器，内部是span6二列布局。


浮动布局系统

浮动布局系统，就是我们经常使用的float:left;布局方式，比较特殊的是bootstrap使用百分比来定义栅格的宽度。

1.浮动栅格的行容器

（ps：请看demo）

流动布局，行容器使用. row-fluid 样式名，其他地方不变。


2.宽度使用百分比，而不是像素值

浮动布局系统比静态布局系统，拥有更强的适应性，同样适应不同分辨率的屏幕。


3.浮动布局中处理容器的嵌套

（ps：请看demo）

浮动布局中的嵌套处理有点不大一样:嵌套的栅格不需要匹配父容器的栅格数，每一行的宽度都占用父容器的100%宽度。


定制栅格

变量
默认值
描述
@gridColumns
12列的数量
@gridColumnWidth
60px列的宽度
@gridGutterWidth
20px列的间隔

LESS中的变量

Bootstrap中定制一套自己的940px栅格系统，只需要很少的less变量。这些变量可以在variables.less中找到。

如何定制

你需要修改@grid*三个变量（指的是上面表格中的三个变量），并重新编译Bootstrap（less重新编译出新的css文件）。关于less的编译可以看 four ways documented to recompile，如果新增了列，务必在grid.less增加上对应的样式。

保留适应性

自适应的栅格系统只能用于默认的940px栅格。为了维持Bootstrap的自适应性，需要额外在 responsive.less中自定义栅格样式。


布局


静态布局


浮动布局

使用container-fluid样式名，产生浮动页面结构，下面的demo中演示了生成常用的2列布局。

效果如下图：





自适应设计




如何让栅格布局系统适应不同分辨率的屏幕？

需要用到css3的media queries，严重推荐阅读《CSS3 media queries使用参考指南》和《CSS3
Media Queries 详解》。Media Queries的引用，让你可以针对不同的设备定制不一样的css样式，可以很方便的让布局系统适应不同的媒体设备。

原文讲得比较晦涩，明河借用《CSS3 Media Queries 详解》举个简单例子：

样式表引用增加media属性。

screen： 媒体类型里的一种，10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media
features部分

screen and (min-width: 400px)的意思是当屏幕的宽度大于等于400px的时候，应用此条CSS，也就是说media非常像条件语句。

bootstrap支持的设备
Label
Layout width
Column width
Gutter width
智能手机等于小于480px无固定宽度无固定宽度
介于智能手机和平板电脑之间等于小于767px无固定宽度无固定宽度
平板电脑等于大于768px42px20px
默认等于大于980px60px20px
超分辨率等于大于1200px70px30px

需要meta标签


使用media queries

Bootstrap默认不包含这些media queries的样式，你可以通过下列的方式引入：

页面引入bootstrap-responsive.css
重编译bootstrap时，增加@import “responsive.less”
修改和单独编译responsive.less为一个独立的文件

Bootstrap 的media queries代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航