BootStrap学习------栅格

时间:2021-08-29 15:19:53

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

效果:BootStrap学习------栅格

实现栅栏偏移

   <div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3</div>
</div>

BootStrap学习------栅格

嵌套栅格

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

BootStrap学习------栅格

排序

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

BootStrap学习------栅格