Bootstrap学习笔记系列1——-Bootstrap网格网

Bootstrap网格系统 学习笔记

[TOC]

简易网格

先上代码再解释

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-md-6" style="background-color: #FFFF00">
            <p>第一块区域</p>
            </div>
            <div class="col-md-6" style="background-color: #99fF66">
            <p>第一块区域</p>
            </div>
         </div>
      </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

CSS和JS的引用

  • Bootstrap需要引用bootstrap.min.css夫样式表,jquery.min.jsbootstrap.min.js
  • jquery的援要在bootstrap的援的前头。
  • 好毫无下载这些文档,直接利用百度CDN上当面之类库入口来促成上述代码,,这样光凭一个记载本类软件就能落实。
    譬如bootstrap.min.css利用连接
    http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css;
    jquery以连接
    http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js
    bootstrap.min.js利用连接
    http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js

    #### BootStrap网格系统的工作规律

  • 行要放于 .container class 内, 以便获得确切的对齐和内边距。
    代码的率先单 <div> 的好像设置也 container
    的目的就是是也这,并且代码中之 div.row 也必放在 div.container
    中就是为取对旅和内边距。

  • 运实行来创造列的水平组,内容应该在列内,且仅列好是履行的直子元素
  • 预定义的网格类(比较简单)是透过.row.col-xs-4等等的代码来飞实现之。col-xs-4
    表示创建一个迈四约束的排(一共是12排)
    此地xs的意义是超小型设备;如果换成.col-sm-4
    则表示于小型机械电脑及之四格宽度之排;md 代表中设备;lg
    表示台式机之类的巨型设施
    详见请见表格:
超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px)
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px
Class 前缀 .col-xs- .col-sm-
列数量和 12 12
最大列宽 Auto 60px
间隙宽度 30px (一个列的每边分别 15px) 30px (一个列的每边分别 15px)
可嵌套 Yes Yes
偏移量 Yes Yes
列排序 Yes Yes
  • 网格系统是经想要跨过的12独可用的列来实现的。各列的总跟毫无等12,但是如果想做一个针对一头之功能,则要用col横跨的列数达到12个。如果只要创三单相当的列则要使用三只.col-sm-4

BootStrap的响应式

比方如为这实例同时支持大型装备,小型设备和中设备虽然要这样定义列的代码

<div class="col-sm-3 col-md-6 col-lg-4">
    ...
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
    ...
</div>

如此这般于手机上,它将左25%
右边75%的布局,在平板计算机上是50%/50%之布局。在巨型视口的设备及,它以凡33%/66%之布局。

偏移列

只要我们虽想错落有致按照好爱的措施摆放列的,就要用偏移列的。使用
.col-md-offset-* 类。这些看似即见面将一个排的左外边距(margin)增加 *
列,其中 * 范围是从 1 到 11,大家好品味下的代码

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
     <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #00FFFF">
            </div>
            <div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #33FF99">
            </div>
            <div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #66FF66">
            </div>
            <div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #99FF33">
            </div>
            <div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #FFFF00">
            </div>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

嵌套列

在内容遭得以嵌套默认的网格,也老简短,就是于一个div.col-md-*添加一个初的div.row,并在row吃补充加新的col就OK了。同样的,小盒子的列数也非能够超过12

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
     <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-md-6" style="height: 100px;background-color: #330033">
            </div>
            <div class="col-md-6" style="height: 100px;background-color: #3399FF">
            </div>
         </div>
         <div class="row">
            <div class="col-md-6" style="height: 100px;background-color: #99FF33">
            </div>
            <div class="col-md-6" style="height: 100px;background-color: #99FFCC">
               <div class="row">
                  <div class="col-md-6" style="height: 50px;background-color: #330033">
                  </div>
                  <div class="col-md-6" style="height: 50px;background-color: #99FF33">
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6" style="height: 50px;background-color: #99FFCC">
                  </div>
                  <div class="col-md-6" style="height: 50px;background-color: #3399FF">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

列排序

列排序可以允许我们因为相同种植顺序编写列,以其他一样种顺序显示列。这就是足以被咱们所以底本来让列进行动态的移位。
.col-md-push-*.col-md-pull-*来改内置网格的依次。其中*的范围是起1-11;

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container">  
         <div class="row">
            <div id="left" class="col-md-6" style="height: 100px;background-color: #FF3333;color:white;">
               我是第一个
            </div>
            <div id="right" class="col-md-6" style="height: 100px;background-color: #3333CC;color:white">
               我是第二个
            </div>
         </div>
      </div>  
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            $("#left").click(function(){
               $(this).addClass("col-md-push-6");
               $("#right").addClass("col-md-pull-6");
            })
         })
      </script>>
   </body>
</html>

相关文章