工作原理
- .container：左右各有15px内边距，支持响应式设计，针对不同设备的宽度不同
- .row：内可设定最多12个column，行左右各-15px外边距，抵消.container的内边距
- .column：左右各15px内容边距，可以保证内容不贴边，相邻column有30px间距
- .col-md-num：可以通过设置num的值来设置元素所占列数
使用方法
- 列偏移：
col-(size)-offset-(num)
可以移动列 - 列排序：
col-(size)-push-(num) col-(size)-pull-(num)
可以改变列的顺序，push向右，pull向左 - 列嵌套：
- 响应式：
size：xs sm md lg
*清除浮动：clearfix（针对xs：visible-xs）
案例：招商银行首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-e=1" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
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: solid 0.0625rem #E7E7E7;
border-radius: 4px;
margin-top: 20px;
padding: 15px 0;
}
h5{
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<!-- logo -->
<div class="container">
<div class="row">
<div class="col-sm-7">
</div>
<div class="col-sm-5">
<div class="col-sm-12" style="padding-top: 20px;">
<input type="text" name="" id="" value="" />
<button class="btn">搜索</button>
</div>
</div>
</div>
</div>
<!-- 导航条-->
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand"></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>
<!-- 内容行 -->
<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>
<!-- 页脚 -->
<div class="row ">
<div class="col-sm-12 ">
<footer class="text-center ">
<p> ©2014招商银行 版权所有 ICP许可证号 粤B2-20040497 </p>
</footer>
</div>
</div>
</div>
</body>
</html>
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
