导航条 轮播图 客户案例列表 产品截图列表 底部网站信息
assets目录里面
然后在 Template 目录里
注意我们在页面里引入了样式表文件 ../assets/style.css
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>
注意这几个文件的前后顺序,如果不对,会导致页面无法正常运行。
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>
我们可以直接使用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">
<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>
为了实现一个轮播图效果(也有人叫“幻灯片”),以前我们可能会自己写代码,或者去找 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>
轮播图组件分三部分
是“指示器”,就是下方的那三个白色小点,标记当前播放到哪张图片了。
刷新页面,几张图片开始自动播放。但是我们会发现一个问题——如果三张图片大小不一致,这个轮播区域会忽大忽小地变化。 这种情况就是 Bootstrap 力不能及的范围了,因为它不知道我们将会使用什么样的素材,因此要自己写一些自定义样式的 CSS 代码来处理这些特殊的情况。 在这个区域中,有三个宽度均等的横向排列的小块,每个小块是由一个圆形图片和一些说明文字组成。最终效果如下: 另外,和轮播图一样,为了防止图片大小不一致导致的页面错乱,还要在 Bootstrap还提供了“圆角图片”、带边框线的“缩略图样式”等图片样式,也可以直接使用,在这里查看文档http://v3.bootcss.com/css/#images (用栅格布局将页面拆分成左右宽度不一样的两栏) 其实Bootstrap的栅格布局同样可以实现这种“宽度不一致的分割”。最终效果: 这部分没什么特别的内容,使用 HTML5 的新增标签
$首页1-3.使用自定义样式来完善 Bootstrap 默认样式
assets/style.css
,在里面添加如下的代码,把图片高度固定设置为 500px,并且设置最小宽度为 100% ,撑满页面。.carousel-inner > .item > img {
min-width: 100%;
height: 500px;
}
$首页2. 客户案例列表
首页2-1. 栅格布局
在 代码后面加入下面代码:
<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>
<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. 圆形图片样式
border-radius: 50%
也可以实现圆形图片,但是如果能够少写一行代码,为什么不偷个懒呢(不要重复造轮子),Bootstrap提供了一个圆形图片的 CSS 类—— img-circle
(从名称就能看出来它的作用是什么)。
style.css
里添加一些自定义的样式,固定图片大小,然后把每个元素的内部设置为居中对齐.case {
text-align: center;
margin-top: 20px;
}
.case img {
height: 200px;
}
$首页3. 产品截图列表
- 开始修改“产品截图”区域的代码,从上到下共有三行,每行的一栏是图片,占有 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>
.screenshot .item {
border-top: 1px solid #CCC;
padding-bottom: 30px;
padding-top: 20px;
}
$首页4. 产品截图列表
,使之更“语义化”。
<div class="container">
<footer>
微信公众号管家版权所有 2016
<a href="">四光年科技a>
footer>
div>