【Bootstrap】学习笔记(一)——栅格系统

工作原理

  • .container:左右各有15px内边距,支持响应式设计,针对不同设备的宽度不同
  • .row:内可设定最多12个column,行左右各-15px外边距,抵消.container的内边距
  • .column:左右各15px内容边距,可以保证内容不贴边,相邻column有30px间距
  • .col-md-num:可以通过设置num的值来设置元素所占列数

使用方法

  1. 列偏移:
    col-(size)-offset-(num)
    可以移动列
  2. 列排序:
    col-(size)-push-(num) col-(size)-pull-(num)
    可以改变列的顺序,push向右,pull向左
  3. 列嵌套:
  4. 响应式:
    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>

你可能感兴趣的