bootstrap_概论及栅格系统

　　此处与bootstrap3的中文文档内容相一致，主要是使得对bootstrap的内容进行一遍复习，以及日后再次查找资料的时候，进行使用

　　全局CSS样式：

　　　　　　1.概论

　　　　　　　　　使用bootstrap的过程中，需要将html文件的基本格式设置未html5的格式。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

　　　　　　　2.移动设备优先

　　　　　　　　　　bootstrap3关于基于移动设备的方面已经是融合于框架之内的。也就是说是移动设备优先的。

<meta name="viewport" content="width=device-width, initial-scale=1">

　　　　　　　　在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为

user-scalable=no

可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　　　　　　　　3.布局容器

　　　　　　　　　Bootstrap 需要为页面内容和栅格系统包裹一个

.container

容器。我们提供了两个作此用处的类。注意，由于

padding

等属性的原因，这两种容器类不能互相嵌套。

.container

类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid

类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

　　　　　　2.栅格系统

　　　　　　　　　　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

　　　　　　　　　　　1.简介

　　　　　　　　　　　　栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：　　　

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding ，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding 。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

　　　　　　　　　　　　　2.栅格参数

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

　　　　　　　　　　　　　这里需要注意的是：类前缀，这个严格控制了屏幕的大小所使用的布局。　

　　　　　　　　　　　　　　xs sm md lg 这些都是比较重要的

　　　　　　　　　　　　 3.实例：多余的列将另起一行

　　　　　　　　　　　　　　　　如果在一个

.row

内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

　　　　　　　　　　　　 4.响应式列重置

　　　　　　　　　　　　　　　　在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用

.clearfix

和响应式工具类。

　　　　　　　　　　　 5.列偏移

　　　　　　　　　　　　　　　　使用

.col-md-offset-*

类可以将列向右侧偏移。这些类实际是通过使用

选择器为当前元素增加了左侧的边距（margin）。例如，

.col-md-offset-4

类将

.col-md-4

元素向右侧偏移了4个列（column）的宽度。

　　　　　　　　　　　 6.嵌套类

　　　　　　　　　　　　　　　　为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的

.row

元素和一系列

.col-sm-*

元素到已经存在的

.col-sm-*

元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

　　　　　　　　　　　　7.列排序

　　　　　　　　　　　　　　　　通过使用

.col-md-push-*

和

.col-md-pull-*

类就可以很容易的改变列（column）的顺序。

　　　　　　　　　　　　8.代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            div{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        
        <div class="row">
          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-xs-6 col-sm-4">
              dddddddddddddddds
          </div>
          <div class="col-xs-6 col-sm-4">
              dsssdddddddddddddddds
          </div>
          <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
              ddddddddddddddddds
          </div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
          <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
        </div>
        
        <div class="row">
          <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
          <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
        </div>
        
        
        
        <br /><br /><br /><br />
        <div class="row">
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 Resize your viewport or check it out on your phone for an example. </div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix visible-xs-block"></div>
        
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        </div>
        
        
        <br /><br /><br /><br />
        <div class="row">
          <div class="col-xs-9">.col-xs-9</div>
          <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
          <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
        </div>
        <br /><br /><br /><br />
        
        
        
        <div class="container-fluid">
            <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-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
        
        
        <br /><br /><br />
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row">
          <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row">
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
          <div class="col-xs-6">.col-xs-6</div>
          <div class="col-xs-6">.col-xs-6</div>
        </div>
        
        
        <br /><br /><br /><br />
        <div class="row">
              <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
              <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
              <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
              <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
              <!-- Optional: clear the XS cols if their content doesn't match in height -->
              <div class="clearfix visible-xs-block">ssssssssss</div>
             <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        </div>
        
        
        
        
        
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
          <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

转载于:https://www.cnblogs.com/strator/p/7513136.html

bootstrap_概论及栅格系统

全局CSS样式：

1.概论

2.移动设备优先

3.布局容器

2.栅格系统

1.简介

2.栅格参数

3.实例：多余的列将另起一行

4.响应式列重置

5.列偏移

6.嵌套类

7.列排序

8.代码演示

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条