zoukankan      html  css  js  c++  java
  • Bootstrap学习系列(一)之栅格系统概述

    一、什么是栅格系统。

      这里主要介绍的是Bootstrap的所提供的一套响应式栅格系统,栅格系统故名思义就是把一个系统分成一个个栅格来进行布局,而Bootstrap把一些主流的屏幕或者视口,分成了一行最多12列(例如:col-md-1到col-md-12)来进行布局,bootstrap把整个页面分割成多个row与column,也就是栅格来进行布局,而我们只需要把相应的标签填充到栅格里。这样系统就会自适应的根据不同的屏幕尺寸来进行布局。

    二、Bootstrap栅格系统的工作原理。

      1)通过行row在水平方向进行布局,然后在row中分割多个column,一行中column最多拥有12个。

      2)行row必需包含在一个容器中.container(固定宽度)或者.container-fluid(100%宽度),以便为其赋予合适的排列(aligment)和内补(padding)。

      3)所有的内容标签都应该放置于column中,而column必需放置在row中(只有column可以作为row的直接子元素)。

      4)类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

      5)通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding

      6)负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

      7)栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

      8)如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

      9)栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

    三、分界点阀值。

      Bootstarp一共有4种分界点阀值(xs,sm,ms,lg),在Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

     1 /* 超小屏幕(手机,小于 768px) */
     2 /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
     3 
     4 /* 小屏幕(平板,大于等于 768px) */
     5 @media (min- @screen-sm-min) { ... }
     6 
     7 /* 中等屏幕(桌面显示器,大于等于 992px) */
     8 @media (min- @screen-md-min) { ... }
     9 
    10 /* 大屏幕(大桌面显示器,大于等于 1200px) */
    11 @media (min- @screen-lg-min) { ... }

      栅格参数如下: 

     超小屏幕 手机 (<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)
    列排序

    个人建议:一个页面column多于6个,使用lg布局,多于4个使用md,2个使用sm,2个以下使用xs.

  • 相关阅读:
    HOJ 2139 Spiderman's workout(动态规划)
    FZU 2107 Hua Rong Dao(dfs)
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 无向连通图最少包含多少条边
    Java 第十一届 蓝桥杯 省模拟赛 无向连通图最少包含多少条边
  • 原文地址:https://www.cnblogs.com/Neallin/p/5787483.html
Copyright © 2011-2022 走看看