本案例实现的招商银行首页效果如图所示：

操作提示：

（1）创建HTML5页面，在页面中引入meta。

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

（2）引入bootstrap.min.css文件。

<link rel="stylesheet" href="css/bootstrap.min.css" />

（3）在body中添加容器div。

<div class="container">

</div>

（4）在container div中，先完成Logo部分，此处可以作为一行。

<div class="row">

<div class="col-sm-7">

<img src="img/logo.jpg" class="img-responsive" />

</div>

<div class="col-sm-5 ">

<div class="row">

<div class="col-sm-12" style="padding-top: 20px;"><input type="text" />

<button class="btn"> 搜索</button>

</div>

</div>

</div>

</div>

（5）在Logo行下面加导航条，这里用到了后面要讲的导航条的内容。

<nav class="navbar navbar-default">

<div class="navbar-header>

<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>

<li><a href="#">小企业</a></li>

<li><a href="#">i理财</a></li>

<li><a href="#">商旅预定</a></li>

<li><a href="#">今日招行</a></li>

<li><a href="#">在线服务</a></li>

</ul>

</nav>

（6）添加内容行，包含2列，左边列含3个栅格，右边含9个栅格。

<div class="row ">

<div class="col-sm-3 ">

<aside>

<h5>在线服务</h5>

<ul>

<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>

<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>

<li><a href="# ">个人留学贷款</a></li>

</ul>

</aside>

</div>

<div class="col-sm-9 content">

        <h4>个人消费贷款</h4>

            <section>

              <h5>适用客户</h5>

              <p>所有需要申请个人消费贷款的客户</p>

              <p>购车、装修、旅游、留学……各种用途任您选择！贷款金额最高可达2000万元！30年超长期限，全方位满足您各种消费需求！把您的房产变成提款机，尽情享用！</p>

              <p>期限：授信期限最长可达30年</p>

              <p>成数：最高7成</p>

            </section>

            <section>

            <h5>办理流程</h5>

              <p>距您成功贷款，只有三步！</p>

              <p>第一步：提交申请</p>

              <p>第二步：银行审批</p>

              <p>第三步：提款消费</p>

            </section>

            <section>

              <h5>您需要准备的贷款申请资料</h5>

              <p>1.身份证、婚姻证明</p>

              <p>2.房产证</p>

              <p>3.住址证明【至少任选其一】：

                                            水、电、气、电话或物管等费用账单</p>

              <p>4.收入证明【至少任选其一】：

                                           工资证明/银行流水/所得税税单/社保记录/其他收入证明</p>

              <p>5.用途证明：提供相应的交易证明材料</p> 

            </section>

</div>

</div>

（7）添加页脚行。

<div class="row ">

<div class="col-sm-12 ">

<footer class="text-center ">

                    <p>  © 2014 招商银行 版权所有  ICP许可证号 粤B2-20040497 </p>

                   </footer>

</div>

</div>

（8）在head部分添加内容的样式。

<style type="text/css">

aside {

border: solid 1px #CCCCCC;

}

aside ul li {

padding: 5px 5px;

}

.content {

border: solid 1px #CCCCCC;

}

section {

padding: 5px 10px;

}

footer {

background-color: #f8f8f8;

border-color: #e7e7e7;

height: 50px;

border: 1px solid #e7e7e7;

border-radius: 4px;

margin-top: 20px;

padding: 15px 0px;

}

h5 {

font-weight: bold;

font-size: 15px;

}

</style>