学习使用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 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
JS敏感词过滤代码
Dec 23 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
layui的layedit富文本赋值方法
Sep 18 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
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python实现机器学习之元线性回归
2018/09/06 Python
使用python实现简单五子棋游戏
2019/06/18 Python
Python内置函数locals和globals对比
2020/04/28 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
搞笑爱情保证书
2014/04/29 职场文书
学雷锋倡议书
2015/01/19 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
redis实现共同好友的思路详解
2021/05/26 Redis
python字典进行运算原理及实例分享
2021/08/02 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技