$首页
- 首先做任何页面之前,我们都要先把结构规划好,这样脑子里有清晰的思路,工作起来才有效率。
- 首页的效果图前面有展示,它包括如下这几个区域:
导航条 轮播图 客户案例列表 产品截图列表 底部网站信息
$首页-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
文件引入。
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<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 模版,完成初步的页面搭建,代码如下:
<!DOCTYPE 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 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<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 ,用来容纳导航条里的其他元素(链接、按钮等)。
- 添加一些导航链接<li>,然后把第一个 <li> 的 class指定为active,表示激活状态。
- 刷新页面,一个漂亮的导航条就诞生了!我们只是写了一些 HTML 代码,没有写一句 CSS 代码,非常省时省力。
导航条位于页面最顶部,提供整个网站所有页面的链接,最终效果如下:
导航条还漏了一个“网站标题”,把下面这段<div class=”navbar-header”>添加到<ul class=”nav navbar-nav”>的前面就可以了
<!--导航-->
<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 navigation</span>
<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">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<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>
<!-- Controls -->
<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">Previous</span>
</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">Next</span>
</a>
</div>
</div>
轮播图组件分三部分
<ol class="carousel-indicators">
是“指示器”,就是下方的那三个白色小点,标记当前播放到哪张图片了。<div class="carousel-inner" role="listbox">
里面是主体内容区域,包括几张图片和对应说明,分别用<div class="item">
包裹起来最后的两个
<a class="left carousel-control">
元素是手动操作图片左右切换的按钮。
效果如下:
$首页1-3.使用自定义样式来完善 Bootstrap 默认样式
刷新页面,几张图片开始自动播放。但是我们会发现一个问题——如果三张图片大小不一致,这个轮播区域会忽大忽小地变化。
这种情况就是 Bootstrap 力不能及的范围了,因为它不知道我们将会使用什么样的素材,因此要自己写一些自定义样式的 CSS 代码来处理这些特殊的情况。
- 打开自定义样式表文件
assets/style.css
,在里面添加如下的代码,把图片高度固定设置为 500px,并且设置最小宽度为 100% ,撑满页面。
.carousel-inner > .item > img {
min-width: 100%;
height: 500px;
}
好了,现在轮播图的图片滚动很正常了。
$首页2. 客户案例列表
在这个区域中,有三个宽度均等的横向排列的小块,每个小块是由一个圆形图片和一些说明文字组成。最终效果如下:
首页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">bb</div>
<div class="col-md-4">cc</div>
<div class="col-md-4">ee</div>
</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>案例1</h2>
<p>非常不错的产品,我很喜欢11</p>
</div>
<div class="col-md-4">
<img class="img-circle" src="../assets/case_2.jpg" alt="" />
<h2>案例2</h2>
<p>非常不错的产品,我很喜欢22</p>
</div>
<div class="col-md-4">
<img class="img-circle" src="../assets/case_3.jpg" alt="" />
<h2>案例3</h2>
<p>非常不错的产品,我很喜欢33</p>
</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的栅格布局同样可以实现这种“宽度不一致的分割”。最终效果:
- 开始修改“产品截图”区域的代码,从上到下共有三行,每行的一栏是图片,占有 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>截图1</h2>
<p>截图说明1,截图说明1,截图说明1,截图说明1,截图说明1,</p>
</div>
</div>
<div class="row item">
<div class="col-md-7">
<h2>截图2</h2>
<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>截图3</h2>
<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 的新增标签<footer></footer>
,使之更“语义化”。
<!--底部-->
<div class="container">
<footer>
微信公众号管家版权所有 2016
<a href="">四光年科技</a>
</footer>
</div>