BootStrap学习------栅格
使用Bootstrap前端框架-栅格 要点
1.使用Bootstrap需要引入的css和js:
(1)bootstrap.min.js
(2)bootstrap.min.css
2.栅格系统需要通过<div class="container"> 进行承载
3.div相比于table更适合目前的开发，友好度较高
4.栅格参数
<768px(手机) | >=768px(Pad) | >=992px（小型显示器） | >=1200px(宽屏显示器) |
|---|---|---|---|
.col-xs- | .col-sm- | .col-md- | .col-lg- |
Auto | ~62px | ~81px | ~97px |
5.一个屏幕最多承载12个栅格
6.实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
[class*="col-md"] {
padding-top:15px;
padding-bottom:15px;
background-color:#eee;
background-color: rgba(86,61,124,.15);
border:1px solid #ddd;
border:1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
</body>
</html>效果：
实现栅栏偏移
<div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3</div>
</div>嵌套栅格
<div class="row">
<div class="col-md-9">
one
<div class="row">
<div class="col-md-8">
first
</div>
<div class="col-md-4">
two
</div>
</div>
</div>
</div>排序
<div class="row">
<div class="col-md-9">
col-md-9
</div>
<div class="col-md-3">
col-md-3
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-push-3">
col-md-9
</div>
<div class="col-md-3 col-md-pull-9">
col-md-3
</div>
</div>举报
腾讯云开发者
