栅格系统

pangbianlaogu 2014-09-27

Boostrap排版、链接样式设置了基本的全局样式。分别是:为body元素设置background-color:#fff;使用@font-family-base、@font-size-base和@line-height-basea变量作为版本的基本参数;为所有链接设置了基本颜色@link-color,并且当链接处于:hover状态时菜添加下划线。这些样式在scaffoliding.less文件中可以找到对应的源码。

布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器。Bootstrap提供了两个作此用处的类。由于padding等属性的原因,这两种容器类不能相互嵌套。

.container类用于固定宽度病支持响应式布局的容器。

.container-fluid类用于100%宽度,占据全部视口(viewport)的容器。

固定布局

bootstrap提供了一个通用的固定宽度的布局方式

<divclass="container">

流式布局

利用<divclass="container-fluid">代码可以创建一个流式、两列的页面,非常适合应用和文档类页面。

Bootstrap默认的栅格系统为12例,形成一个940px宽的容器,默认没有响应式布局特性。若加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整,在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。

媒体查询(mediaquery):在栅格系统中,我们在Less文件中使用以下媒体查询来创建关键的分界点阈值。

//小屏幕平板大于等于768px

@media(min-width:@screen-sm-min)

//中等屏幕桌面显示器大于等于992px

@media(min-width:@screen-md-min)

//大屏幕大桌面显示器大于等于1200px

@media(min-width:@screen-xd-min)

对于简单的两列式布局,创建一个.row容器,并在容器中刚加入合适数量的.span*列即可。由于默认的是12列的栅格,所有.span*列所跨越的栅格数之和最多是12。

Bootstrap还包含了一组Less变量和mixin用于生成简单、语义化的布局。

变量:通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。还可以定制mixin

@grid-columns:12

@grid-gutter-width:30px

@grid-float-breakpoint:768px

mixin用来和栅格变量一同使用,为每个列(column)生成语义化的CSS代码。

偏移列

把列向右移动可使用.offset*类。每个类都给列的左边距增加了指定单位的列。

<divclass="span4offset4">.offset4将.span4右移了4个列的宽度。

嵌套列

在默认的栅格系统里,在已有的.span*内添加一个新的.row并加入.span*列,可以实现嵌套。被嵌套中的每列列数总和要等于父级别。

<divclass="row">

<divclass="span9">

Level1

<divclass="row">

<divclass="span6">Level2</div>

<divclass="span3">Level3</div>

</div>

</div>

</div>

流式栅格

流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统过一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。

<divclass="row-fluid">

<divclass="span4">...</div>

<divclass="span8">...</div>

</div>

列排序:通过使用.col-md-push-*、.col-md-pull-*类可以很容易的改变列(column)的顺序

<divclass="row">

<divclass="col-md-9col-md-push-3">我在后面哦</div>

<divclass="col-md-3col-md-pull-9">我跑到前面去了呀</div>

</div>

启用响应式特性

通过在文档中的<head>标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。若你已经在定制页面编译好一个Bootstrap,那么只需添加一个meta标签。

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<linkhref="assets/css/bootstrap-responsive.css"rel="stylesheet">

<!doctypehtml>

<html>

<head>

<metacharset="UTF-8">

<title>index_栅格系统</title>

<linkrel="stylesheet"href="d:\bootstrap\css\bootstrap.min.css"/>

<scriptsrc="d:\jQuery\jquery-1.9.1.min.js"></script>

<scriptsrc="d:\bootstrap\js\bootstrap.min.js"></script>

<scriptsrc="d:\bootstrap\js\Application.js"></script>

<scriptsrc="d:\bootstrap\js\holder.js"></script>

<styletype="text/css">

.col-md-12{

background:#ccc;

}

.col-md-3{

background:#fff;

}

.col-md-6{

background:#fff;

}

.row{

margin-bottom:10px;

}

.footer{

background:#ccc;

}

</style>

</head>

<body>

<!--整体布局格式-->

<divclass="container">

<!--栅格布局分成12行-->

<divclass="row">

<divclass="col-md-12">

<h3>bootstrapcol-md-12</h3>

<p>dddddddddddddddddddddd</p>

</div>

<divclass="row">

<divclass="col-md-3">

<imgsrc="E:\photo\歌词控_JJ\1.jpg"></img>

</div>

<divclass="col-md-3">

<imgsrc="E:\photo\歌词控_JJ\1.jpg"></img>

</div>

<divclass="col-md-6">

<imgsrc="E:\photo\歌词控_JJ\1.jpg"></img>

</div>

<!--防止样式漂浮-->

<divclass="clearfix"></div>

</div>

<divclass="col-md-12">

<imgsrc="E:\photo\歌词控_JJ\2.jpg"></img>

</div>

<divclass="footer">

<divclass="col-md-12">

<p>foreverforever</p>

</div>

</div>

</div>

</div>

</body>

</html>

相关推荐