编程 Javascript

Bootstrap栅格系统的使用和理解2

Posted in Javascript onDecember 14, 2016

栅格系统

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

简介

栅格系统用于通过一系列的行（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-* 不存在，也影响大屏幕设备。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

Bootstrap栅格系统的使用和理解2

我的理解是当到达不同的屏幕宽度，特定的类起作用。

但如果屏幕宽1366px，并没用.col-lg- 的类标识。会以.col-md-设定栅格内容宽度。如果.col-md-也没有，会以.col-sm- 设定。大概如此。

当.col-xx-xx不在自己的作用范围内时，便失效。如果是div元素就会占一整行，宽与.container 元素相同。（错误请指出）。

demo1:

注意：引必要的.css .js 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 模板</title>
 <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 <style>
 .row>div{
  border: 1px solid #333;
  background-color: #e0e0e0;
 }
 </style>
</head>
<body>
<!-- bootstrap 栅格系统 试用 -->
<!-- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 -->
<strong>改变浏览器宽度查看效果</strong>
<div class="container">
 <div class="row">
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
 </div>
 
</div>
<strong>一行显示不下就会挤到下一行</strong>


<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>

<script>
 $(function(){
 var content = null;
 showText();
 function showText(){
  var width = $(window).width();
  if(width<768){
   content = "超小屏幕设备(手机)(宽度小于768px)的时候<br>因为设置了类名 有 col-xs-6<br>所以一行显示2个";
  }else if(width<992){
   content = "小屏幕设备(平板)(宽度大于768px 小于992px)的时候<br> 因为设置了类名 有 col-sm-4<br> 所以一行显示3个";
  }else if(width<1200){
   content = "中等屏幕设备(桌面显示器)(宽度大于992px 小于1200px)的时候 <br>因为设置了类名 有 col-md-2<br> 所以一行显示6个";
  }else{
   content = "大屏幕设备(大桌面显示器)(宽度大于1200)的时候<br> 因为设置了类名 有 col-lg-1 <br>所以一行显示12个";
  }
  $(".container>div>div").html(content); 
 }

 $(window).on('resize', function(event) {
  showText();
 });
 
 });
</script>
</body>
</html>

流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
 <title>container & container-fluid</title>
 <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
 <!--[if lt IE 9]>
 <script src="../lib/html5shiv/html5shiv.min.js"></script>
 <script src="../lib/respond/respond.js"></script>
 <![endif]-->
 <!--自己的css文件-->
 <style>
  .container{
   background: yellowgreen;
   height: 400px;
  }
  .container-fluid{
   background: red;
   height: 100px;
  }
 </style>
</head>
<body>
 <!--布局容器 没有高度 响应式容器-->
 <div class="container">

 </div>
 <!-- 将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。 -->
 <div class="container-fluid">

 </div>


<!--因为 bootstrap 是依赖 jquery 引用jquery文件-->
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 模板</title>
 <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
 <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 <style>
  .row>div{
  border: 1px solid #333;
  background-color: #e0e0e0;
  }
 </style>
 </head>
 <body>
 
 <div class="container">
  <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>
 </div>


 <script src="lib/jquery/jquery.js"></script>
 <script src="lib/bootstrap/js/bootstrap.js"></script>
 </body>
</html>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 模板</title>
 <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
 <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 <style>
  .row>div{
  border: 1px solid #333;
  background-color: #e0e0e0;
  }
 </style>
 </head>
 <body>
 
 <div class="container">
  
  <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>

 </div>


 <script src="lib/jquery/jquery.js"></script>
 <script src="lib/bootstrap/js/bootstrap.js"></script>
 </body>
</html>

以上为初学时，学习到的。有错误请指出。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap栅格系统的使用和理解2

- Author -

浪迹灬天涯

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jscript之Read an Excel Spreadsheet

Jun 13 Javascript

网站页面自动跳转实现方法PHP、JSP（上）

Aug 01 Javascript

JQuery Highcharts 动态生成图表的方法

Nov 15 Javascript

JavaScript中instanceof与typeof运算符的用法及区别详细解析

Nov 19 Javascript

深入理解JavaScript系列（26）：设计模式之构造函数模式详解

Mar 03 Javascript

第七章之菜单按钮图标组件

Apr 25 Javascript

使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

Jul 07 Javascript

AngularJs Injecting Services Into Controllers详解

Sep 02 Javascript

jQuery日程管理插件fullcalendar使用详解

Jan 07 Javascript

详解基于electron制作一个node压缩图片的桌面应用

Jan 29 Javascript

详解vue中的父子传值双向绑定及数据更新问题

Jun 13 Javascript

Vue深入理解插槽slot的使用

Aug 05 Vue.js

jQuery的extend方法【三种】

Dec 14 #Javascript

AngularJS实现给动态生成的元素绑定事件的方法

Dec 14 #Javascript

Bootstrap导航条的使用和理解3

Dec 14 #Javascript

jQuery学习笔记之入门

Dec 14 #Javascript

Bootstrap轮播图的使用和理解4

Dec 14 #Javascript

12 款 JS 代码测试必备工具(翻译)

Dec 13 #Javascript

使用BootStrap实现悬浮窗口的效果

Dec 13 #Javascript