bootstrap布局

关于作者：

郑云飞(天放), 程序员Java
weibo：@tianFang
学习路线图
跟我一步一步学习bootstrap

bootstrap在网页中使用

bootstrap布局

bootstrap响应式布局

bootstrap内置了一套网格布局系统，而且可以是响应时的网格布局系统，简单的来解释一下，网格布局就是将网页分割成一定数量的栏数或者叫做网格，bootstarp架构的网格系统就是把网页分成12栏，如果你想让一个元素占用一定栏数的宽度，你可以在这个元素上面应用一个特定的类，那么bootstarp架构使用的就是span加栏数这种形式的类，下面我们来看一下，我们新建一个layout.html文件，写入如下内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"/>
    <![endif]-->
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
<p>使用bootstrap的布局</p>
<h2 class="page-header">区块一</h2>
<p>区块1</p>
<h2 class="page-header">区块二</h2>
<p>区块2</p>
<h2 class="page-header">区块三</h2>
<p>区块3</p>
</body>
</html>
<script src="../js/vendor/jquery-1.10.2.min.js"/>
<script src="../js/bootstrap.js"/>

在浏览器中打开效果如下图所示：

bootstrap布局_html

这里你可以看到页面中的文字已经有了一些样式，比如说大标题的字号，在h1下面会显示一条灰色的线，还有small标签里面文字的颜色，这些样式都是在bootstrap架构里面定义好的，下面我们来学习几个布局的方法，首页我们将这个页面的内容显示在页面的中间，我们还是回到代码中，我们现在内容的周围去添加一个大的容器，我们这里使用div标签，开始输入<div>，在结束的地方输入</div>,在开始的地方添加一个属性<div class="container">,如下面代码

<div class="container">
    <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
    <p>使用bootstrap的布局</p>
    <h2 class="page-header">区块一</h2>
    <p>区块1</p>
    <h2 class="page-header">区块二</h2>
    <p>区块2</p>
    <h2 class="page-header">区块三</h2>
    <p>区块3</p>
</div>

我们再在浏览器中看一下效果：

bootstrap布局_html_02

container这个类设定了宽度，并且可以让内容显示在中间，我们再将下面的内容显示在同一排并且平均分成3栏，下面我们就使用bootstrap布局的网格系统来让这3块内容平均分成3栏显示在同一排，首先我们需要添加一个容器包围住想要显示在同一排的内容。在这里我们输入一个<div class="row">包围住这3块，下面我们在分别在这3块内容的周围添加一个div标签，并且在上面使用网格布局的span的类，因为我们想让这3块内容平均分成3栏，所以呢每一栏会占用4个网格布局的宽度，也就是4栏的宽度，那么整个页面的宽度是12网格，所以呢12平均分成3份，每一个份正好是4个网格的宽度，那么我们就需要在每个块中添加<div class="span4">与</div>标签，如下内容：

<div class="container">
    <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
    <p>使用bootstrap的布局</p>
    <div class="row">
        <div class="span4">
            <h2 class="page-header">区块一</h2>
            <p>区块1</p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块二</h2>
            <p>区块2</p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块三</h2>
            <p>区块3</p>
         </div>
    </div>
</div>

然后我们在浏览器中预览一下效果：

bootstrap布局_html_03

在这里你可以看到，这3块内容会平均分成3栏，显示在同一排，使用同样的方法，你可以创建出复杂的布局，你只需要在布局使用的容器上面添加网格相应的类，比如说内容占用8个网格，你只需要添加一个span8的类，内容占用4个网格，你中需要添加一个span4的类，然后在同一块内容的周围使用一个row类的容器，想让内容相对于浏览器的窗口居中的话，那么设置一个宽度，并且在周围添加一个带有container的容器。

下面我们来看一下嵌套布局和流动布局，使用bootstrap架构实现这些布局方式都非常的简单，嵌套布局就是在一个应用了网格类的容器里面在嵌套其他使用网格类的容器，比如上面图片上的区块三，那么这块内容占用了4个网格的宽度，如果你想再把这个区块三平均分成2栏，那么4除以2正好是2，也就是说每一栏占用2个网格的宽度，注意在固定宽度的布局下面，那么被嵌套的元素占用的网格数量应该小于或者等于包围他们元素所占用的网格的数量，下面我进入代码，找到区块3这段内容的代码，然后在这个span4类的容器里面再添加一个具有row类元素的div标签，<div class="row"></div>，然后我们在这这个div里面添加2组div标签，并在上面添加span2的类，<div class="span2"></div><div class="span2"></div>然后我们再在每个容器里面随便添加一点内容，如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"/>
    <![endif]-->
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
    <p>使用bootstrap的布局</p>
    <div class="row">
        <div class="span4">
            <h2 class="page-header">区块一</h2>
            <p>区块1</p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块二</h2>
            <p>区块2</p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块三</h2>
            <p>区块3</p>
            <div class="row">
                <div class="span2">区块3-1</div>
                <div class="span2">区块3-2</div>
            </div>
         </div>
    </div>
</div>
</body>
</html>
<script src="../js/vendor/jquery-1.10.2.min.js"/>
<script src="../js/bootstrap.js"/>

然后在浏览器中预览效果如下：

bootstrap布局_bootstrap_04

下面我们在看一下流动布局，使用流动布局的页面会根据浏览器窗口的大小，自动的去缩放，那么你上面看到的那个页面使用的是固定布局宽度的方式，也就是说不管你浏览器的窗口有多大，那么页面的宽度是固定的，我们把bootstrap架构的固定布局转换成流动布局只需要去变换一下那个container和row类的名称，我们把container换成container-fluid，container应用的是固定布局的宽度，container-fluid应用的是一个百分比的宽度，然后我们需要把所有的row类属性改成row-fluid，在浏览器看下效果：

bootstrap布局_bootstrap_04

现在我们变换一下浏览器窗口的大小，再来看一下效果：

bootstrap布局_html_06

你会看到浏览器的内容会随着浏览器窗口的变化而变化，我们要知道在流动布局下面，布局使用的网格类的宽度会变成百分比，而不是固定的宽度，这里呢要注意一下，这个区块3嵌套的这2个容器，前面我们在这2个容器里面分别应用了一个span2的类，在固定布局的下面，这2个容器占用的网格的数量，正好是区块3整体占用网格数量，而在流动布局的下面，那么span2的宽度大概就是百分之14.8936，这个百分比是相对于包含他们容器的宽度，如果你仍然想让他们平均分成2栏，应该呢用12除以2，也就是每个容器占用6个网格，我们再去修改一下代码，找到区块3

<div class="span4">
            <h2 class="page-header">区块三</h2>
            <p>区块3</p>
            <div class="row-fluid">
                <div class="span6">区块3-1</div>
                <div class="span6">区块3-2</div>
            </div>
         </div>

在浏览器中预览：

bootstrap布局_java_07

这样区块3中的2块内容就会平均显示了。

上一篇博客：bootstrap在网页中使用下一篇博客：响应式布局

标签：bootstrap,浏览器,布局,网格,宽度,区块
From： https://blog.51cto.com/u_15785444/5833986

相关文章

赞助商

阅读排行