Bootstrap3 - 3.网格系统

作者: 廖马儿 | 来源:发表于2018-01-03 09:16 被阅读9次

网格系统:Grid System
文章介绍:https://www.w3cplus.com/css3/introduction-into-css3-grid-layout.html

把一个页面分成了一定份数的网格,常见的有12栏网格,16栏网格。在布局的时候可以使用指定的网格数,你可以让主要内容占用8份/12, 让边栏的内容占用剩余的4份。
Bootstrap3使用的是12栏网格。
用户在元素上面的应用上面的运用有一些的区别。
在Bootstrap3的网格系统里面,每一个网格有4种类型:

col-xs-*   # col: 栏, 列。  xs: 特别小(屏幕宽度小于768pix时候会使用这样的网格类)
col-sm-*  # sm: small 。 这样的网格类可以使用在小尺寸的屏幕上面,比如平板电脑。  768px<=窗口宽度 
col-md-*  # md: middle。 中等尺寸的设备。  992px <= 窗口宽度。 一般尺寸的桌面电脑上。
col-lg-*    # lg: large。  大尺寸的设备。  1200px<=窗口宽度 

详细的就是比如:col-xs-6,元素会占用6个网格的宽度,也就是50%。
如果我们没有为元素设置在其他的宽度窗口上面的网格类的话,那么这个元素就会在所有的窗口的宽度上面都占用50%的宽度。如果你想元素在一般尺寸的桌面电脑上面占用9个网格的宽度,我们可以在这个元素上面添加一个col-md-9的网格类,

相关文章

  • Bootstrap3 - 3.网格系统

    网格系统:Grid System文章介绍:https://www.w3cplus.com/css3/introdu...

  • 网格系统总结:从初识到应用

    网格系统总结:从初识到应用 目录: 1.什么是网格 2.为什么要使用网格 3.网格系统中都包括什么 4.如何制作网...

  • Bootstrap3 - 5.grid类(网格系统)

    考虑:使用什么样的布局,在什么样的条件下使用这样的布局。比如我们想把布局分为两栏,左边是主题内容占用8个网格,右边...

  • 什么是栅格系统

    一、概念 1、栅格系统(grid systems),也叫“网格系统”。栅格设计系统(又称网格设计系统、标准尺寸系统...

  • Bootstrap学习(一)入门

    Date: 2018-10-17 1、Bootstrap网格系统 Bootstrap网格系统定义: Bootstr...

  • 网格系统(grid)

    网格系统代码网格系统测试代码 1.思路 使用row.vue和col.vue构成网格系统的基础部分 两单文件所需要的...

  • 网格系统

    什么是网格系统? 包含了水平和垂直方向的参考线,用来合理排列内容。 最基本的网格系统由一系列水平和垂直的、彼此交叉...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • Bootstrap--常用及实例合集

    栅格系统 列的样式 文本对齐类 表单 表格 响应式表格 按钮 快速浮动 清除样式 Bootstrap3居中处理 垂...

网友评论

    本文标题:Bootstrap3 - 3.网格系统

    本文链接:https://www.haomeiwen.com/subject/nlrcnxtx.html