码迷,mamicode.com
首页 > Web开发 > 详细

用Bootsharp搭建简单网页二--栅格系统

时间:2017-12-14 03:53:59      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:标准   ali   手机   body   blog   yellow   back   post   col   

  小白。刚开始使用bootsharp做网页的时候,不懂得什么栅格系统、容器,什么响应式布局、视口(viewport)。秉着不懂就上网寻找答案,加上bootsharp官网上又很多现成的例子,自己动手试了下,大概明白了,什么是流式栅格系统。

  栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。行(row)必须包含在.container(固定宽度)或 .container-fluid(100% 宽度)中,作为流式布局容器使用.container-fluid能够将屏幕栅格布局设置为 100% 宽度的布局,也就是说.container会使得布局的宽度是固定的,在不同设备的显示下会有偏差,而在.container-fluid下,都会满屏显示。

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

<div class="container">
  ...
</div>

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

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

 

技术分享图片

技术分享图片

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

  /* 超小屏幕(手机,小于 768px) */
  /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */

  /* 小屏幕(平板,大于等于 768px) */
  @media (min-width: @screen-sm-min) { ... }

  /* 中等屏幕(桌面显示器,大于等于 992px) */
  @media (min-width: @screen-md-min) { ... }

  /* 大屏幕(大桌面显示器,大于等于 1200px) */
  @media (min-width: @screen-lg-min) { ... }

 下面来创建一个大屏幕(col-lg-*)基本的栅格系统:

css部分:
.col-lg-1, .col-lg-2, .col-lg-4, .col-lg-6, .col-lg-8
{ background-color: yellow; color: blue; text-align: center; border: 1px solid #000; }

 

html部分:
<
div class="container-fluid"> <div class="row"> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> <div class="col-lg-1">.col-lg-1</div> </div> <div class="row"> <div class="col-lg-8">.col-lg-8</div> <div class="col-lg-4">.col-lg-4</div> </div> <div class="row"> <div class="col-lg-4">.col-lg-4</div> <div class="col-lg-4">.col-lg-4</div> <div class="col-lg-4">.col-lg-4</div> </div> <div class="row"> <div class="col-lg-6">.col-lg-6</div> <div class="col-lg-6">.col-lg-6</div> </div> </div>

  在.container-fluid下,所有列(column)放在.row内。效果如下:

技术分享图片

将页面以12为标准划分不同的列数,到达划分整个页面的效果。

  在手机、平板、桌面,使用 .col-xs-* 、.col-sm-*、.col-md-*类,达到更加动态和强大的布局。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!--可选: 如果内容高度不匹配,可以清除xs栏 --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>

技术分享图片

  如果在网页中使用到上面四种栅格类,可能会遇到列高不匹配的问题,可以使用使用 .clearfix 和 响应式工具类,例如上面的<div class="clearfix visible-xs-block"></div>。

技术分享图片

用Bootsharp搭建简单网页二--栅格系统

标签:标准   ali   手机   body   blog   yellow   back   post   col   

原文地址:http://www.cnblogs.com/pzhwpblog/p/8029995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!