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
  • Bootstrap,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,可是一旦想做3个对齐的成效,则要将col翻过的列数达到十二个。固然要创立四个分外的列则要选择三个.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%的布局,在平板总括机上是十分之五/八分之四的布局。在巨型视口的配备上,它将是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-*丰硕3个新的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>

相关文章