一、由于案例比较长我们先简单分析首页中header 部分的制做情况。
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8">
二、下面表示用最新的的浏览器解析网站代码，为了保证网站解析效果的完整性
<meta http-equiv="X-UA-Compatible" content="IE=edge">
三、下面是浏览器视口的声明，initial-scale代表着初始化缩放为1是代表着不缩放的意思,为了保证1:1提供最佳的效果体验，user-scalabel是用户可缩放的属性设置no
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>传智播客 - 安全的互联网微金融资产交易平台</title>
四、对于JS中的某些样式能放在后面的要放在后面，让用户更加快捷的浏览到网页的内容，把DOM树更快的加载完成。提供网页的解析速度。对于网页的样式的CSS文件需要放在header部分。jQuery文件放在body中是可以的。最好不要放在</html>后。
<link rel="stylesheet" href="css/main.css">
五、下面是条件注释，满足条件会执行的操作。前者为了让浏览器兼容Ｈ５ 后者为了兼容ＣＳＳ中的媒体查询功能
<!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
六、下面重点说bootstrap是怎么使用的问题了。我们可到中文bootstrap官网查看。有源码版本可以更改自己喜欢的样式。下载用于生产环境的版本。可以引入到网页中使用。开发项目使用的是压缩版，使用的是bootstrap.css 关于主题的版本暂时不用。
bootstrap怎么用，有时候我们看着就蒙了，其实没有什么，就是在源码中我们需要简单浏览，他的样式的设置。他就是一个帮我们定义了我们开发中常用功能的模块的集合。我们需要关注它定义了那些类，需要使用直接复制粘贴代码，引入到我们的网页代码中就可以。
七、bootstrap定义的板块分类
１.全局ＣＳＳ样式：表格 表单 按钮 图片 栅格系统
２.组件 字体图标 下拉菜单 按钮组 导航 分页 标签
３.ＪＳ组件 下拉菜单 按钮 轮播图（ carousel) Collapse(手风琴效果）
注意的是：关于屏幕大小的
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
|---|---|---|---|---|
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
col是样式前缀是column栏目的意思 后面是 xs sm md lg规定了在不同的屏幕条件下使用的是不同的样式。
<body>
<!-- 头部区域 -->
<header id="header">
<!-- <div class="topbar hidden-sm hidden-xs"> -->
<div class="topbar visible-md visible-lg">
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<a href="#" class="mobile-link">
<i class="icon-mobilephone"></i>
<span>手机微金所</span>
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="img/c_06.jpg" height="136" width="120" alt="扫一扫">
</a>
</div>
<div class="col-md-5 text-center">
<i class="icon-telephone"></i>
<span>4006-89-4006（服务时间：9:00-21:00）</span>
</div>
<div class="col-md-2 text-center">
<a href="#">常见问题</a>
<a href="#">财富登录</a>
</div>
<div class="col-md-3 text-center">
<a href="#" class="btn btn-itcast btn-sm">免费注册</a>
<a href="#" class="btn btn-link btn-sm">登录</a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切换菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投资</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">微论坛</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- /头部区域 -->
<!-- 广告轮播 -->
<section id="main_ad"></section>
<!-- /广告轮播 -->
<!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 -->
<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->
<!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 -->
<!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>