Bootstrap3 栅格系统-简介
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。
- The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
- 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
通过研究后面的实例,可以将这些原理应用到你的代码中。
—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx
转载于:https://www.cnblogs.com/hainange/p/6153776.html
Bootstrap3 栅格系统-简介相关推荐
- Bootstrap3栅格系统布局实例
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先.使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局. 先看一个简单实例,来加深对移动设备优先的理 ...
- Bootstrap3 栅格系统之列排序
列排序 Bootstrap 栅格系统中一个非常人性化的特性,就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序.push 将元素向右推动 * 指定的列数,pul ...
- Bootstrap3 栅格系统之列嵌套
列嵌套 Bootstrap栅格系统也支持列嵌套,即在一个列中嵌套一个或多个行.被嵌套的行依然遵守最大 12 列的规则,即一行中所包含的总列数不能大于12(当然,也没有要求你必须占满12列),如果大于 ...
- Bootstrap3 栅格系统
栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 Bootstrap栅格系统通过一系列的行 ...
- Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
- Bootstrap3 栅格系统-栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...
- Bootstrap3 栅格系统之自定义mixin和变量
mixin和变量 除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin,通过自定义这些变量和 mixin,可以生成简单.语义化的布局. 1.变量 通过变量来定 ...
- Bootstrap3 栅格系统之列平移
列平移 使用 .col-md-offset-* 类,可以将列向右侧平移,* 指定要平移的列数.平移的本质,是为元素增加 * 列的左外边距(margin-left).如,.col-md-offset-4 ...
- 移动WEB开发之响应式布局--Bootstrap栅格系统
栅格系统简介 栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数 的定义来模块化页面布局. Bo ...
最新文章
- java核心技术读书笔记1
- 35岁前务必成功的12级跳(男女通用) 转
- CentOS7用yum安装软件报:Cannot find a valid baseurl for repo: base/7/x86_64
- exception in initAndListen: 12596 old lock file, terminating
- ACL 2019 开源论文 | 基于知识库和大规模网络文本的问答系统
- 2504(多项式求和)
- 硬质合金销售真的有那么难么?
- Mac上Jupyter之notebook快捷键
- 图书管理系统 ——mysql数据库
- 如何部署自定义统计图
- Ubuntu 16.04 (Ubuntu18.04 也可以用)远程桌面(使用win10远程桌面客户端链接)和 使用vncveiwer链接的配置
- ROS项目开发流程、框架
- SDN 教程[2]: SDN基础操作
- 抽象类和接口不能直接实例?
- 加百利号角/托里拆利小号
- 10个小技巧,让你使用ZBrush建模操作效率翻倍
- Struts2拦截器入门
- PTPX功耗分析实战, VCD, SAIF, FSDB的区别
- 数据库系统分析师考试大纲
- matlab中函数绝对值图像,Matlab中图像函数大全 详细功能介绍
热门文章
- 计算机网络管理与安全探索
- Treemap and Treeset java 实现
- web安全之信息刺探防范(上)
- 目前计算机无法显示的四叠字,四叠字列表(共19个),还能用的四叠字大全
- Metasploit新增技巧提示功能
- php虚拟键盘输入,[问题] bash下如何模拟键盘输入
- 注释工具_干货:PS工具介绍“计算工具+注释工具”
- gets会读取回车键吗_Linux Shell 读取从键盘输入的数据
- 得出来的视差图左边有黑色补上原图_「PS教程」Photoshop使用通道快速抠图的详细教程...
- java邮件附件默认路径_JavaMail - 文件夹管理( Folder Management)