bootstrap栅格系统

匿名 (未验证) 提交于 2019-12-03 00:27:02

一、背景介绍

Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间,即使他们的大小是未知的或者动态的。

flex布局的主要思想是,让容器能够改变它的子元素的宽度/高度(甚至顺序),从而更好地填充可用的空间(主要是为了适应所有种类的设备和屏幕大小)。

最重要的,flexbox 布局是可以改变方向的。与之相对的是传统布局(block是垂直方向的从上到下,inline是水平方向的从左到右)。虽然他们在页面上表现良好,但是他们缺乏弹性(字面意义上的缺乏弹性)来适应大型的或者复杂的应用(尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时)。


二、知识剖析

采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross



三、常见问题

栅格布局的用法相信大家都很熟悉了,今天我们主要来探讨容器的padding 15px,行的margin -15px,列的padding 15px为什么要这么来回的使用15px



四、解决方案

















五、编码实战

<!DOCTYPE html>
<html lang="en">
<head>







</head>
<body>

















<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

六、拓展思考

1.栅格系统是按照12等分来设计的,如果想要5等分怎么做?

七、参考文献

参考一:







八、更多讨论



提问1:栅格五等分该怎么办

回答: 将每个元素的宽度设置为百分之20.

提问2:栅格有什么缺点

回答:

提问3:若超出12个栅格会怎么显示?

回答:会在另起一行显示


感谢大家观看!

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能,请移步官网 点击链接直达:http://www.jnshu.com/login/1/17884272

文章来源: bootstrap栅格系统
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!