zoukankan html css js c++ java

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>

查看全文

相关阅读:
居中
 <script type="text/javascript"></script>
移动端获取全文高度
 video
transition animation
移动端隐藏overflow：auto滚轮
 Vue将组件data内的数据重置
 文字刚刚刚刚刚好的居中
 小程序总结（不断更新）
vue组件之间的传值

原文地址：https://www.cnblogs.com/CallmeYhz/p/4991489.html