学习使用Bootstrap栅格系统


Posted in Javascript onMay 11, 2017

Bootstrap之栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。

一. 移动设备优先

所谓移动设备优先,重要的是屏幕,不是设备。

移动设备优先就是说起初样式是在移动设备写的,然后写到sm尺寸的时候样式得改变了,于是就加media screen max-width >=768, 再写sm的样式,这样尺寸递进就完成了所有的媒体查询,由于不加media query的样式是在最小尺寸,也就是移动设备上写的,所以叫做移动设备优先。

移动设备优先有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

//分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

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

二. 栅格系统

1. 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。由于 padding等属性的原因,这两种容器类不能相互嵌套。

//固定宽度
<div class="container"></div>

//100%宽度
<div class="container-fluid"></div>

栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多12列。通过一系列的行(row)与列(column)的组合来创建页面布局。

2. 栅格系统工作原理:

“行(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-*不存在, 也影响大屏幕设备。

3. 栅格参数

学习使用Bootstrap栅格系统

栅格系统最外层区分了四种宽度的浏览器:超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为:自动、750px、970px 和 1170px。自动的意思为,如果你是手机屏幕,则全面独占一行显示。

4. 实践演示代码

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
  <title>栅格系统</title>
  <link rel="stylesheet" href="../bootstrap-3.3.4/css/bootstrap.min.css" rel="external nofollow" >
  <style>
  .a{
    height:50px;
    border: 1px solid black;
    background-color: #ccc;
  }
  .b{
    height:100px;
    border: 1px solid black;
    background-color: #eee;
  }
  </style>
  </head>
  <body>

  <div class="container a ">
    固定宽度
  </div>
  <div class="container-fluid b ">
    100%宽度
  </div>

  <br><!-- 创建最多 12 列的响应式行(问题:当屏幕小于一定程度时,每行只会显示1列) -->
  <div class="container ">
    <div class="row">
      <div class="col-md-1 a">1</div>
      <div class="col-md-1 a">2</div>
      <div class="col-md-1 a">3</div>
      <div class="col-md-1 a">4</div>
      <div class="col-md-1 a">5</div>
      <div class="col-md-1 a">6</div>
      <div class="col-md-1 a">7</div>
      <div class="col-md-1 a">8</div>
      <div class="col-md-1 a">9</div>
      <div class="col-md-1 a">10</div>
      <div class="col-md-1 a">11</div>
      <div class="col-md-1 a">12</div>
    </div>
    <div class="row">
      <div class="col-md-8 a">8</div>
      <div class="col-md-4 a">4</div>
    </div>
    <div class="row">
      <div class="col-md-4 a">4</div>
      <div class="col-md-4 a">4</div>
      <div class="col-md-4 a">4</div>
    </div>
  </div>

  <br><!-- 四种屏幕分类全部激活,大屏幕是每行显示4列,中等屏幕每行显示3列,小屏幕和超小屏幕每行显示2列 -->
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4</div>
    </div>
  </div>

  <br><!-- 列偏移,中间保持空隙 -->
  <div class="container">
    <div class="row">
      <div class="col-md-8 a">8</div>
      <div class="col-md-3 col-md-offset-1 a">3</div>
    </div>
  </div>

  <br><!-- 嵌套,嵌满也是 12 列 -->
  <div class="container">
    <div class="row">
      <div class="col-md-9 a">
        <div class="col-md-8 a">1-8</div>
        <div class="col-md-4 a">9-12</div>
      </div>
      <div class="col-md-3 a">11-12</div>
    </div>
  </div>

  <br><!-- 交换列的位置 -->
  <div class="container">
    <div class="row">
      <div class="col-md-9 a">9</div> <!-- 向右移动3列 -->
      <div class="col-md-3 a">3</div> <!-- 向左移动9列 -->
    </div>
    <div class="row">
      <div class="col-md-9 col-md-push-3 a">9</div> <!-- 向右移动3列,push 向右移动 -->
      <div class="col-md-3 col-md-pull-9 a">3</div> <!-- 向左移动9列,pull 向左移动 -->
    </div>
  </div>
  </body>
  </html>

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

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
js类的静态属性和实例属性的理解
Oct 01 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
jQuery实现的简单在线计算器功能
May 11 #jQuery
学习使用Bootstrap页面排版样式
May 11 #Javascript
Angularjs 与 bower安装和使用详解
May 11 #Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 #Javascript
es6学习笔记之Async函数基本教程
May 11 #Javascript
Bootstrap模态框插件使用详解
May 11 #Javascript
canvas实现弧形可拖动进度条效果
May 11 #Javascript
You might like
PHP5函数小全(分享)
2013/06/06 PHP
Opacity.js
2007/01/22 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
Bootstrap实现翻页效果
2017/11/27 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python实现年会抽奖程序
2019/01/22 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python中str内置函数用法总结
2020/12/27 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
电子信息工程自荐信
2014/05/26 职场文书
历史学专业求职信
2014/06/19 职场文书
家庭教育的心得体会
2014/09/01 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
应聘教师自荐信
2015/03/26 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
2016年安全月活动总结
2016/04/06 职场文书