本网站只能被运行在支持JavaScript脚本的环境中

第2章 Bootstrap中的布局方式

本节概述

本节介绍Bootstrap中提供的几种布局方式、重点介绍什么是Bootstrap中的栅格系统。

固定布局与流动布局

在Bootstrap中,提供固定布局与流动布局两种布局方式。

固定布局

当需要将Web页面的宽度固定并显示在浏览器窗口中央时,可以使用固定布局。固定布局为一种无论浏览器窗口大小为多少,始终将内容显示在940px宽度范围内的布局方式。

当使用固定布局时,需要将整个页面的容器div元素的class属性值设定为container。

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

流动布局

当需要根据浏览器窗口大小而动态改变内容宽度时,可以使用流动布局。当使用流动布局时,需要将整个页面的容器div元素的class属性值设定为container-fluid。

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

什么是栅格系统?

栅格系统为一种将容器元素进行网格状分解的设计手法。在Bootstrap中采用12栏栅格系统(在大屏幕中最多可以横向排列12栏)。

例如,当一个页面中具有主区域及侧边栏时,在Bootstrap中可以为主区域分配9栏,为侧边栏分配3栏,如下图所示。

另外,Bootstrap自动为每栏指定15px的padding(左右两边共30px),开发者可修改该padding样式属性值。

什么是断点?

所谓断点,即屏幕宽度的临界点。

在Bootstrap的栅格系统将中根据“智能手机屏幕”、“平板电脑屏幕”、“一般PC屏幕”、“大PC屏幕”这几类断点来自动决定如何排列展示栅格系统中的每一栏。

如果根据下表所示规则来指定样式类,Bootstrap将根据对应断点来进行布局。

智能手机(屏幕宽度<768px) 平板电脑(屏幕宽度>=768px) 一般PC屏幕(屏幕宽度>=992px) 大PC屏幕(屏幕宽度>=1200px)
布局原则 横向占据整屏宽度 在指定屏幕宽度范围内可横向排列多个元素
class名前缀 col-xs- col-sm- col-md- col-lg-
在class名前缀后书写栏数数值

例如:当需要在PC电脑(992px~1199px)中并排放置2栏,当屏幕宽度小于992px时全部纵向排列时可以将需要排列的元素的class属性指定为“col-md-6”。

当需要在PC电脑中并排放置4栏、平板电脑中并排放置6栏时可通过在class属性中指定多个属性值(属性值与属性值之间使用空格分隔)来实现这一要求。

例如当需要在PC电脑中并排放置3栏、平板电脑中并排放置2栏、智能手机中全部纵向排列时,可以将需要排列的元素的class属性值指定为“col-md-4 col-sm-6”。

使用Bootstrap进行确认

接下来,让我们尝试使用Bootstrap进行布局。

在HTML 5页面的head标签中,书写如下所示的代码。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

现在,我们即可正常使用Bootstrap框架。

另外,为了让元素更醒目、添加元素margin及背景色,添加如下所示的css样式代码。

<style>
body{
    font-size:16px;
    font-weight:bold;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
    background: #7abcff; /* Old browsers */
    background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Firefox3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
    font-size:16px;
    padding:15px;
    font-weight:bold;
    border-radius:15px;
    color:#fff;
}
.container{
    background-color:#FFF2D0;
    border-radius:15px;
}
.row{
    background-color:#D6F4BD;
    border-radius:15px;
}
div{
    margin:30px 0;
}
</style>

书写HTML代码

为栅格系统书写基本代码

在Bootstrap中,栅格系统的使用原则为:

  • 1:将容器元素的class属性值设置为“container”。
  • 2.在其中放置class属性值为“row”的容器元素。
  • 3.在其中放置class属性值为col-(断点)-(栏数)的容器元素。
  • 4.一行中的所有栏数值合计不能超过12。

首先查看基本代码。

为了让内容居中,在.container元素(class属性值为container的元素)中,书写用于表示1行的.row元素,在其中使用class属性值为col-(断点)-(栏数)的元素以指定栏数。

<!--用于将内容居中的块元素“.container”-->
<div class="container">
    <!--用于表示1行的元素“.row”-->
    <div class="row">
        <!--一用于表示栏的块元素“col-(断点)-(栏数)”-->
        <div class="col-md-1">
            1栏
        </div>
        :
        :
        :
    </div><!--/.row-->
</div><!--/.container-->

.row元素与.container元素必须为块元素(display样式属性值为block的元素)。

另外,由于Bootstrap中已经解决了各浏览器间渲染的差异性,使CSS样式代码得到了标准化。

另外,在HTML 5中,下述元素均为块元素。

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • main
  • nav
  • section
  • summary

当1行内的合计栏数超过12时将换行显示。例如,1行内放入5个3栏元素时将换行显示(第1行显示4个3栏元素,第2行显示1个3栏元素)。

可以使用offset让栏偏离

在默认情况下从左向右紧密排列每1栏。可以使用offset让栏与栏中间空开一段距离。其方法为在class属性值中书写“col-断点”-offset-“想跳过的栏数”。

<div class="container">
    <div class="row">
        <div class="col-md-3">
        3栏
        </div>
        <!--“.col-断点-offset-想跳过的栏数”-->
        <div class="col-md-4 col-md-offset-5">
        4栏 跳过5栏
        </div>
    </div><!--/.row-->
</div><!--/.container-->

另外,由于CSS代码中使用margin-left进行跳跃,所以当包含跳跃栏数在内的总栏数超过12时,换行后行首还是按指定的跳跃栏数进行跳跃。

可以让栏顺序自由改变的pull・push

如前所述,在默认情况下从左向右依序排列放置每1栏。可以使用pull与push轻松改变栏的显示顺序。如文字所述,这两个关键字的作用是将栏首向后推多少栏或向前拉多少栏。

<div class="container">
  <div class="row">
    <!--[.col-断点-push-向后推多少栏]-->
    <div class="col-md-8 text-center col-md-push-4">
      第1个元素 (8栏 后推4栏)
    </div>
    <!--[.col-断点-pull-向前拉多少栏]-->
    <div class="col-md-4 text-center col-md-pull-8">
      第2个元素 (4栏 前拉8栏)
    </div>
  </div>
</div>

另外,在CSS样式代码中使用position样式属性修改布局。因此请注意,如果后推或前拉太多行,则可能引起元素超出容器边界或栏与栏重叠的现象。与offset不同的是不会引起换行现象。

在自适应设计中指定高度

在特定断点中显示或隐藏元素时可以使用的class名,以及用于在打印时指定是否要显示的class名如下表所示。

在特定断点中用于指定显示/隐藏的class名
class名 智能手机(屏幕宽度<768px) 平板电脑(屏幕宽度>=768px) 一般PC屏幕(屏幕宽度>=992px) 大PC屏幕(屏幕宽度>=1200px)
visible-xs 显示 隐藏 隐藏 隐藏
visible-sm 隐藏 显示 隐藏 隐藏
visible-md 隐藏 隐藏 显示 隐藏
visible-lg 隐藏 隐藏 隐藏 显示
hidden-xs 隐藏 显示 显示 显示
hidden-sm 显示 隐藏 显示 显示
hidden-md 显示 显示 隐藏 显示
hidden-lg 显示 显示 显示 隐藏
打印时用于指定显示/隐藏的class名
class名 浏览器 打印
visible-print 隐藏 显示
hidden-print 显示 隐藏

栅格系统的嵌套使用

可以嵌套使用栅格系统。其做法为在栅格系统内再放置class属性值为“row”的容器元素,在其中放置class属性值为col-(断点)-(栏数)的容器元素,这些容器元素的栏数总和不能超过父元素的栏数。

例如,在8栏元素中放置1个4栏元素及1个8栏元素的代码如下所示:

<div class="container">
    <div class="row">
        <div class="col-md-4">4栏元素</div>
        <div class="col-md-8">8栏元素
            <div class="row">
                <div class="col-md-4">4栏元素</div>
                <div class="col-md-8">8栏元素</div>
            </div>
        </div>
    </div>
</div>