创建一个布局简单的页面
到目前为止，您对网格系统有了更好的理解。现在让我们逐步了解使用网格系统创建简单布局页面的步骤。首先，常用的布局有以下几种。
这一次，我们将挑战如下图所示在一个页面上混合两列和三列的布局。这是一个典型的网页布局。我们还将了解放置在该布局页面上的组件（如导航栏和按钮等部分）。
导航栏
写一个标签，写一个链接标签等等，从头开始创建一个导航栏（菜单），这需要花费大量的时间和精力，使用 Bootstrap 的模板可以轻松完成。该模板可以从Bootstrap 站点获得。
打开Bootstrap的站点，然后在[Components]的菜单上，单击[Navbar], 查找定制的模板和代码。
如何查找组件
在搜索框中键入“alert”。会出现一些建议。这次我们选择 Live Example。
要使用示例代码，只需复制并粘贴模板即可。
例如，如果你想创建一个导航栏，只需搜索“navbar”并粘贴代码。让我们粘贴下面的代码。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>然后我们可以像这样创建一个导航栏：
此外，如果屏幕尺寸因响应式支持而缩小，它将切换到汉堡菜单。很方便，不是吗？
大图
大图像是放置在称为中心区域的部分的图像。中心区域是您网站的访问者看到的第一个区域。您经常会看到在您打开的第一页上使用大图像的网站。也可以通过简单地指定一个 CSS 类来实现。
<p> < img src = "..." class = "img-fluid" alt = "..." >< / p > 上面的代码用于使图像响应。如果你写一个名为“img-fluid”的CSS类，图像的大小会根据父元素的宽度放大或缩小。
卡片
Bootstrap 还支持卡片设计。卡片设计如下所示：卡片设计简单、易懂、美观。与 Navbar 一样，Bootstrap 的官方网站“Components”上提供了一个模板。
页尾
如果您从头开始自己编写 HTML/CSS，页脚可能会从屏幕底部稍微浮动。这是因为内容量小而发生的情况。但是，如果使用 Bootsstrap 提供的模板，无论内容多少，都可以将页脚固定在屏幕底部。您所要做的就是使用下面的代码。
<footer class="footer"></footer>
完成版
现在，让我们使用到目前为止所学的组件和网格系统创建一个简单的布局页面。也尝试使用文本编辑器。首先，让我们检查一下这次我们将创建的布局的最终形式。除了导航栏和页脚，我们还将采用卡片设计，采用混合 2 列和 3 列的布局。
创建导航
首先，我们设置导航栏。将Bootstrap站点上“Supported content”项的模板复制粘贴到HTML文件中，参考上面的“navbar”项。但是，这个模板是一个白色的导航栏模板。让我们使用自定义 CSS 类将导航栏设为深灰色。以下是代码更改：
放置大图像
接下来，让我们安装 Bigimage。用“container-fluid”附上“img-fluid”。代码如下。这将扩展图像以填充屏幕的宽度。
< div class = "container-fluid img-hidden" >
< img src = "image/b.jpg" class = "img-fluid" >
</ div >上面的 img-fluid 部分是用于编写原始 CSS 的 CSS 类。此类名称可以是您选择的任何名称。原来写CSS的原因是在大图等情况下，必须设置父元素（容器）的高度，隐藏溢出的部分，否则图片会太大。这是因为它会显示在 . 原来的 CSS 描述是这样的。
div.img-hidden {
height: 300px;
overflow: hidden;
}放置卡片
接下来是内容部分。首先，将三张牌并排放置。使用允许您在卡片之间添加空间的模板。下面的 `…/100px200/` 部分是您指定图像的地方，因此请输入任何图像。
<div class="container container-m">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src=".../100px200/" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src=".../100px200/" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>用于卡片设计的模板封装在一个容器中。该容器包含一个用于添加 CSS 的类。这是因为如果您让模板保持原样，它将与 bigimage 完美契合，因此您需要指定边距。CSS描述如下。
div.container-m {
margin-top: 80px;
}
创建2列部分
接下来，我们将创建两列布局部分。它使用我们在上一章中学习的网格系统。让我们按如下方式创建列。
<div class="container">
<div class="row">
<div class="col-md-4 img-hidden">
<img src="image/c.jpg" alt="img" class="img-fulied">
</div>
<div class="col-md-8">
<h1>Sample Text</h1>
<p>Sample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample TextSample Text</p>
</div>
</div>
</div>
同样，有必要添加 CSS，但由于它使用与 bigimage 相同的 CSS，因此将与 bigimage 相同的Class添加到“col-md-4”div。此外，将 CSS 添加到卡片容器以移除边距。
div.container-m {
margin-top: 80px;
}将上面的Class[container-m] 添加到 HTML 中。
<div class="container container-m">
<div class="row">
<div class="col-md-4 img-hidden">
<img src="image/c.jpg" alt="img" class="img-fulied">
</div>
...3列布局
这是一个 3 列布局。创建它如下。这一次，内容的内容都是图像。再次，将“img-hidden”Class添加到“col-md-4”div。另外，还要再次使用之前的“container-m”Class，因为我们要保留边距。将它添加到容器 div里。
<div class="container container-m">
<div class="row">
<div class="col-md-4 img-hidden">
<img src="image/d.jpg" alt="img" class="img-fulied">
</div>
<div class="col-md-4 img-hidden">
<img src="image/d.jpg" alt="img" class="img-fulied">
</div>
<div class="col-md-4 img-hidden">
<img src="image/d.jpg" alt="img" class="img-fulied">
</div>
</div>
</div>
布置页脚
最后，页脚。创建一个固定的底部页脚。让我们这样写代码：
<footer class=”footer”>© flashyonder.com</footer>如果保持原样，背景颜色会变浅，看整个站点会失去统一感，所以用CSS改变颜色。另外，将文本居中。
完成
您的网页现已完成。很简单，但我能够在很短的时间内创建一个具有统一感的网站。另外，我认为我能够在到目前为止的章节中掌握 Bootstrap 的基础知识。Bootstap 还有很多其他组件，可以定制。让我们继续学习吧。
