[Bootstrap]从入门到实战_首页开发（二）
$首页
- 首先做任何页面之前，我们都要先把结构规划好，这样脑子里有清晰的思路，工作起来才有效率。
![[Bootstrap]从入门到实战_首页开发（二）_第1张图片](http://img.e-com-net.com/image/info8/0f3effa489454e6da8c3fcbe89883feb.jpg)
- 首页的效果图前面有展示，它包括如下这几个区域：
导航条 轮播图 客户案例列表 产品截图列表 底部网站信息
![[Bootstrap]从入门到实战_首页开发（二）_第2张图片](http://img.e-com-net.com/image/info8/abc6cbfe8f234b4595969cb2d5e90769.jpg)
$首页-1. 首页 HTML 骨架与素材准备
assets目录里面
- 图片素材（分别是轮播图、客户案例、产品截图，各 3 张）
- style.css 文件，用于保存自定义样式。
然后在 Template 目录里
- index.html
注意我们在页面里引入了样式表文件 ../assets/style.css
$首页-2.引入 Bootstrap 框架相关文件
Bootstrap说白了就是一个样式表文件（bootstrap.min.css）和一个javascript
文件（bootstrap.min.js），在页面里把它们引入进来后，就可以直接使用里面的 CSS 规则和各种组件了。
1-远程 CDN 引入方式（本例采用本方法引入）
编辑 index.html，把几个Bootstrap框架包含的文件添加进来，这里推荐使用 CDN 源 上的远程文件，可以节约本地的带宽。
另外，由于 Bootstrap还依赖jQuery库，所以也要一并把这个 jquery.min.js 文件引入。
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js">script>注意这几个文件的前后顺序，如果不对，会导致页面无法正常运行。
- 先引入 bootstrap.min.css （Bootstrap的样式表文件）
- 然后引入自己写的 css 文件（style.css）
- 然后引入 jQuery（javascript 库）
- 最后引入 bootstrap.min.js 程序文件
2、本地文件引入方式
如果在没有联网的环境，或者用上面的方式引入文件后浏览器报错，可以把Bootstrap的所有文件下载到本地后再引用到页面中。打开下面这个地址，把压缩包下载后解压，全部放到 assets 目录的 bootstrap里面。
下载Bootstrap包含的文件到本地：
http://v3.bootcss.com/getting-started/#download
然后修改index.html里的引入文件代码，使用本地引用文件的方式来使用Bootstrap。
<link rel="stylesheet"href="../assets/bootstrap/css/bootstrap.min.css">
<link href="../assets/style.css" rel="stylesheet">
<script src="../assets/jquery.min.js">script>
<script src="../assets/bootstrap/js/bootstrap.min.js">script>使用bootstrap提供的给出的 HTML 模版，完成初步的页面搭建，代码如下：
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
head>
<body>
<h1>你好，世界！h1>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js">script>
body>
html>
$首页1-1.使用导航条组件
我们可以直接使用Bootstrap的导航条组件
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="">首页a>li>
<li><a href="">关于a>li>
<li><a href="">登录a>li>
ul>
div>
nav>- 添加一个 nav 标签，并设置 class 为 navbar navbar-default，role 为 navigation。
- 然后在里面添加一个类名为 container的 div ，用来容纳导航条里的其他元素（链接、按钮等）。
- 添加一些导航链接
- ，然后把第一个
- 刷新页面，一个漂亮的导航条就诞生了！我们只是写了一些 HTML 代码，没有写一句 CSS 代码，非常省时省力。
导航条位于页面最顶部，提供整个网站所有页面的链接，最终效果如下：
导航条还漏了一个“网站标题”，把下面这段
添加到
- 的前面就可以了
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">微信公众号管家a>
div>
<ul class="nav navbar-nav">
<li class="active"><a href="">首页a>li>
<li><a href="">关于a>li>
<li><a href="">登录a>li>
ul>
div>
nav>
$首页1-2.使用轮播图组件
为了实现一个轮播图效果（也有人叫“幻灯片”），以前我们可能会自己写代码，或者去找 jQuery 的插件。其实 Bootstrap 已经自带了一个轮播组件——Carousel 在nav 导航条下面引入下面代码，同时在Carousel 组件外面加一个类名为container 的父级
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1">li>
<li data-target="#carousel-example-generic" data-slide-to="2">li>
ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../assets/slide1.jpg" alt="...">
<div class="carousel-caption">
<h1>轮播1的标题h1>
<p>这里是轮播图1的说明p>
div>
div>
<div class="item">
<img src="../assets/slide2.jpg" alt="...">
<div class="carousel-caption">
<h1>轮播2的标题h1>
<p>这里是轮播图2的说明p>
div>
div>
<div class="item">
<img src="../assets/slide3.jpg" alt="...">
<div class="carousel-caption">
<h1>轮播3的标题h1>
<p>这里是轮播图3的说明p>
div>
div>
div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">span>
<span class="sr-only">Previousspan>
a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">span>
<span class="sr-only">Nextspan>
a>
div>
div>轮播图组件分三部分
- 是“指示器”，就是下方的那三个白色小点，标记当前播放到哪张图片了。
- 里面是主体内容区域，包括几张图片和对应说明，分别用
包裹起来 最后的两个
元素是手动操作图片左右切换的按钮。
$首页1-3.使用自定义样式来完善 Bootstrap 默认样式
刷新页面，几张图片开始自动播放。但是我们会发现一个问题——如果三张图片大小不一致，这个轮播区域会忽大忽小地变化。
![[Bootstrap]从入门到实战_首页开发（二）_第4张图片](http://img.e-com-net.com/image/info8/fdf20225c9894255ae34e85e0fecfb71.jpg)
这种情况就是 Bootstrap 力不能及的范围了，因为它不知道我们将会使用什么样的素材，因此要自己写一些自定义样式的 CSS 代码来处理这些特殊的情况。
- 打开自定义样式表文件
assets/style.css，在里面添加如下的代码，把图片高度固定设置为 500px，并且设置最小宽度为 100% ，撑满页面。
.carousel-inner > .item > img { min-width: 100%; height: 500px; }好了，现在轮播图的图片滚动很正常了。
![[Bootstrap]从入门到实战_首页开发（二）_第5张图片](http://img.e-com-net.com/image/info8/11407e87a7ef4d72a84a6e6879d5e94b.jpg)
$首页2. 客户案例列表
在这个区域中，有三个宽度均等的横向排列的小块，每个小块是由一个圆形图片和一些说明文字组成。最终效果如下:
![[Bootstrap]从入门到实战_首页开发（二）_第6张图片](http://img.e-com-net.com/image/info8/1ed17b1f7f194df18f004fd2dc68633c.jpg)
首页2-1. 栅格布局
- Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。
- 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
- Bootstrap的栅格系统规定了每个页面的宽度被平均划分为 12 等份，不管整个页面的宽度是 1000像素，还是500像素，都会自动计算每一份（1/12）的宽度是多少。
- 通过给栅格布局内部的元素指定 class 为 col-md-份数，来告诉它的宽度占据这12份里面的几份。
- 例如下面的代码中，有3 个 div 的 class为 col-md-4（先不管中间那个 -md-是什么，关注这个数字就好），算一算4 + 4 + 4 是不是正好等于 12？
在代码后面加入下面代码：
<div class="container"> <div class="row"> <div class="col-md-4">bbdiv> <div class="col-md-4">ccdiv> <div class="col-md-4">eediv> div> div>此时效果如下：
- 刷新页面，然后用 Chrome 浏览器的开发工具看看效果，发现整个页面的宽度正好被平均分成了 3 份(12/4 =3)。栅格系统自动帮我们计算了这 3 份的宽度。
- 举一反三，如果要把页面平均分为 6 份，那每一份的class 就应该指定 col-md-2(12/6 = 2)；如果是 4 份，class 就是 col-md-3（12/4 = 3）
- 完整的栅格布局的说明在这里，http://v3.bootcss.com/css/#grid一定要动手实践！
<div class="case container"> <div class="row"> <div class="col-md-4"> <img class="img-circle" src="../assets/case_1.jpg" alt="" /> <h2>案例1h2> <p>非常不错的产品，我很喜欢11p> div> <div class="col-md-4"> <img class="img-circle" src="../assets/case_2.jpg" alt="" /> <h2>案例2h2> <p>非常不错的产品，我很喜欢22p> div> <div class="col-md-4"> <img class="img-circle" src="../assets/case_3.jpg" alt="" /> <h2>案例3h2> <p>非常不错的产品，我很喜欢33p> div> div> div>首页2-2. 圆形图片样式
- 虽然自己写一个 CSS 规则
border-radius: 50%也可以实现圆形图片，但是如果能够少写一行代码，为什么不偷个懒呢（不要重复造轮子），Bootstrap提供了一个圆形图片的 CSS 类——img-circle（从名称就能看出来它的作用是什么）。 - 好了，知道栅格布局方式，和圆形图片样式，可以把“案例列表”的 HTML 代码改造一下了。
另外，和轮播图一样，为了防止图片大小不一致导致的页面错乱，还要在
style.css里添加一些自定义的样式，固定图片大小，然后把每个元素的内部设置为居中对齐.case { text-align: center; margin-top: 20px; } .case img { height: 200px; }Bootstrap还提供了“圆角图片”、带边框线的“缩略图样式”等图片样式，也可以直接使用，在这里查看文档http://v3.bootcss.com/css/#images
$首页3. 产品截图列表
(用栅格布局将页面拆分成左右宽度不一样的两栏)
其实Bootstrap的栅格布局同样可以实现这种“宽度不一致的分割”。最终效果：
![[Bootstrap]从入门到实战_首页开发（二）_第7张图片](http://img.e-com-net.com/image/info8/17770a2bea594f539af1394161b19007.jpg)
- 开始修改“产品截图”区域的代码，从上到下共有三行，每行的一栏是图片，占有 5 份宽度（col-md-5）；另一栏是说明文字，占据剩下的 7
份宽度（col-md-7）。<div class="container screenshot"> <div class="row item"> <div class="col-md-5"><img src="../assets/screenshot_1.jpg" alt="" class="img-responsive">div> <div class="col-md-7"> <h2>截图1h2> <p>截图说明1，截图说明1，截图说明1，截图说明1，截图说明1，p> div> div> <div class="row item"> <div class="col-md-7"> <h2>截图2h2> <p>截图说明2，截图说明2，截图说明2，截图说明2，截图说明2，p> div> <div class="col-md-5"><img src="../assets/screenshot_2.jpg" alt="" class="img-responsive">div> div> <div class="row item"> <div class="col-md-5"><img src="../assets/screenshot_3.jpg" alt="" class="img-responsive">div> <div class="col-md-7"> <h2>截图3h2> <p>截图说明3，截图说明3，截图说明3，截图说明3，截图说明3，p> div> div> div>- 同样，再添加一点自定义的 CSS 代码，在每一行之间显示一条分割线，并且预留一些空白。
.screenshot .item { border-top: 1px solid #CCC; padding-bottom: 30px; padding-top: 20px; }$首页4. 产品截图列表
这部分没什么特别的内容，使用 HTML5 的新增标签
，使之更“语义化”。<div class="container"> <footer> 微信公众号管家版权所有 2016 <a href="">四光年科技a> footer> div>
![[Bootstrap]从入门到实战_首页开发（二）_第3张图片](http://img.e-com-net.com/image/info8/0bac0efceae747d18e0f02bd873f3aea.jpg)