Boostrap技能点整理之【网格系统】
今天我们来串串bootstrap总的网格系统,说到网格系统,依稀记得当时教程上不叫网格,而叫栅格,我总觉得这个栅(shān )读起来不得劲,就读他的另一个音,栅(zhà)格,每次遇到就读栅(zhà)格系统栅(zhà)格系统
好了,闲言少叙,接下来我们看看bootstrap中的网(栅)格系统。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列,这12列也是可以随便拆分与组合的,即:
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
使用行来创建列的水平组。
内容应该放置在列内,且唯有列可以是行的直接子元素。
预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。
LESS 混合类可用于更多语义布局。
列通过内边距(padding)来创建列内容之间的间隙。
该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。
例如,要创建三个相等的列,则使用三个 .col-xs-4。
下面我们可以来写一个基本的网格结构:
<div class="container"><div class="row"><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div></div>
</div>
运行结果是这样的:
我们从图中不难看出,整个网格系统将会浏览器的宽度分为了12等分,那么这12个等分可不可以进行随便组合或者随便嵌套呢?答案是肯定的。
列组合
比如我们可以这样:
<div class="row"><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div></div>
也可以这样:
<div class="row"><div class="col-md-5">5等分</div><div class="col-md-7">7等分</div></div>
列偏移
或者这样:
<div class="row"><div class="col-md-3">3等分</div><div class="col-md-3 col-md-offset-6">3等分</div></div>
上面这段代码中有个新知识点,即:col-md-offset表示列偏移,偏移多少取决于后面的数字,例如本段代码就是向右偏移6等分。(中间的空格部分为6等分,大家可以自行算算)
下面再来一个关于列偏移的案例,加深一下理解:
<div class="row"><div class="col-md-2">2等分</div><div class="col-md-2 col-md-offset-1">2等分</div><div class="col-md-2 col-md-offset-2">2等分</div><div class="col-md-2 col-md-offset-1">2等分</div></div>
(空格部分已经标注明白)
除了组合之外,我们还可以进行对网格的嵌套:
列嵌套
<div class="row"><div class="col-md-6">6等分<div class="col-md-12" style="background: mediumpurple;">12等分</div><div class="col-md-6" style="background: green;">6等分</div><div class="col-md-6" style="background: red;">6等分</div><div class="col-md-4" style="background: yellow;">4等分</div><div class="col-md-4" style="background: greenyellow;">4等分</div><div class="col-md-4" style="background: darkgoldenrod;">4等分</div></div><div class="col-md-6" style="background: red;">6等分</div></div>
说明一下:最外面的大的是两个6等分,左边的6等分里面:
第一行分为1个12等分
第二行分为2个6等分
第三行分为3个4等分
下面我相信大家会往下接了,例如4个3等分,6个2等分以及12个1等分
列排序
还可以对网格进行排序(稍微复杂点)
<div class="row"><div class="col-md-1">1等分</div><div class="col-md-1 col-md-offset-1">3等分</div><div class="col-md-1 col-md-offset-1">5等分</div><div class="col-md-1 col-md-offset-1">7等分</div><div class="col-md-1 col-md-offset-1">9等分</div><div class="col-md-1 col-md-offset-1">11等分</div></div><div class="row"><div class="col-md-1 col-md-push-6">右推6等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1 col-md-pull-2" style="background: red;">左拉2等分</div></div>
在分析运行结果之前,先看两个陌生词:
push:
推的意思,向右推,后面的数字代表拉的量
pull:
拉的意思,向左拉,后面的数字代表拉的量
上面这段代码就是:
将第一个网格向右推6等分,于是就到了7等分的位置;
将第5个等分向左拉2个网格,于是就到了3等分的位置
这样就好理解了吧。
以上就是今天整理的内容,有想法的可以留言至文章下面哦~
往期推荐
Boostrap技能点整理之【bootstrap简介】
2020-05-25
C#基础知识详解之【字段与属性】
2020-05-24
C#基础知识详解之【文件的输入与输出】
2020-05-23
C#基础知识详解之【值类型和引用类型】
2020-05-21
C#基础知识详解之【异常处理】
2020-05-22
欢
迎
关
注
公众号:雄雄的小课堂
CSDN:穆雄雄的博客
Boostrap技能点整理之【网格系统】相关推荐
- Boostrap技能点整理之【按钮样式】
昨天我们看了看bootstrap的网(栅)格系统,想必都对bootstrap网格系统有个大致的了解,今天我们再来看看bootstrap的按钮组合. 按钮的样式 在boostrap中,任何带有 clas ...
- Boostrap技能点整理之【bootstrap简介】
bootstrap,目前市面上最受欢迎HTML.CSS.JavaScript框架,用于开发响应式布局.移动设备优先的 WEB 项目. 从今天起,我们就开始整理bootstrap的相关技能点. 1 什么 ...
- 从多个Word文档中批量取值,整理到Excel表中的技能,整理简历者必备
从多个Word文档中批量取值,整理到Excel表中的技能,整 从多个Word文件中提取指定的值到Excel中,也可以理解为把多个Word文件的值放在一个表格中,便于统计或查阅. 本教材提供了4种不同情 ...
- 2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】)
对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...
- 3分钟内看完这,bootstraptable表格控件,受益匪浅!
今天分享一下bootstraptable的相关技能点,由于第一次接触,所以刚开始碰了好多壁,于是趁现在过去不久,先总结总结. Bootstraptable简单的来说就是一个表格控件,但是这个表格可不是 ...
- Photoshop中将图片拖不进软件的编辑区的解决方法,超详细
今天在学习ps的过程中,发现我的ps怎么和人家老师的不一样,怎么不一样呢?人家老师的ps5中,鼠标可以直接拖到ps的编辑栏中,可是我的死活拖不进去.怎么办?怎么办?经过自己瞎鼓捣和上网查,终于知道了怎 ...
- 软技能代码之外的生存指南【读后整理】
作者背景 作者是叫做John Sonmez,他的个人网站是 Simple Programmer,主要是<Soft Skills: The Software Developer's Life Ma ...
- 10激活网页被劫持_新手学习SEO需掌握的10大SEO技能
对新手来说困惑网站SEO不知应该从哪里学起?也不太明白学习SEO的应该要掌握哪些SEO技能和知识呢?小编今天就分享一下学习SEO需要掌握哪些技能,整理一下有10个条,包括:搜索引擎工作原理,HTML ...
- Android初级、中级、高级、资深工程师(架构师、专家)技能图谱
我的新书<Android App开发入门与实战>已于2020年8月由人民邮电出版社出版,欢迎购买.点击进入详情 文章目录 前言 划分目的 技能图谱 总结 欢迎加入Android开发交流QQ ...
最新文章
- Elasticsearch5.X Mapping万能模板
- iOS开发UI篇——Button基础
- 计算机与人脑_要把人脑连到计算机上!马斯克真敢想,但人类准备好了吗?
- C#中改变进度条(progressbar)的颜色
- 我对创业和管理的一些看法
- hazelcast_带弹簧的Hazelcast分布式执行
- mysql临时表空间_MySQL 5.7 深度解析: 临时表空间
- 基于Python的ModbusTCP客户端实现
- 精通Android自定义View(十三)事件分发简述
- lombok slfj 中_lombok @Slf4j注解
- Hi3861开发板搭建环境
- 犀牛脚本插件-python-vb-编辑使用方式-rhino脚本插件
- AI,机器学习(模式识别),深度学习的区别与联系
- 数据结构与算法_01链表
- 称重管理系统方案之车牌识别摄像机的应用
- python练手程序之猜大小
- pagehelper插件显示total为-1或1
- windows10 基于Spin的模型检测
- 关于Contiguous()方法
- 计算机械功的公式,机械功的计算
热门文章
- 树的存储结构-孩子兄弟表示法
- Java——编译与反编译
- Java修炼之路——基础篇——Java关键字
- [SCOI2008]着色方案(DP)
- #2686. 「BalticOI 2013」雪地足迹 双端队列01bfs + 模型转换
- CF605C. Freelancer's Dreams
- P2825 [HEOI2016/TJOI2016]游戏
- Weird Flecks, But OK
- [刷题记录] luogu网络流24题 及 网络流心得体会 及 经典模型不定期更新
- CF914G Sum the Fibonacci(FWT模板+子集卷积)