Bootstrap框架网格系统工作原理

Bootstrap 框架的网格系统工作原理如下：

1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。

如： <div class=" container ">

</div>

2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。

如： <div class="container">

3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素

4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距(padding) 的影响

详： http://www.imooc.com/code/2325

Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（ row ）容器，然后在这个行容器中插入列。但在列容器中的行容器（ row ），宽度为 100% 时，就是当前外部列的宽度。

详： http://www.imooc.com/code/2329

Bootstrap框架网格系统工作原理相关推荐

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
python scrapy框架原理_Scrapy框架的工作原理是什么?
Scrapy框架的工作原理是什么? Scrapy架构学习Scrapy框架,从理解它的架构开始.图1所示是Scrapy的架构图. 从图1可知,Scrapy框架主要包含以下组件: (1)Scrapy E ...
php ci 框架扩展缓存类,PHP CodeIgniter框架的工作原理研究
这篇文章主要介绍了PHP CodeIgniter框架的工作原理研究,本文首先分析了它的工作流程,然后总结了它的工作原理,需要的朋友可以参考下 CodeIgniter(以下简称CI,官网以及中国站)是一 ...
Spring框架的工作原理
Spring框架是一个开源的Java平台,它为容易而快速的开发出耐用的Java应用程序提供了全面的基础设施.完成基础阶段的学习后,就会开始接触框架的知识,接下来就给大家简单讲解Spring框架的工作原 ...
java ssh实现原理_SSH三大框架的工作原理及流程
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Hibernate工作原理及为什么要用? 原理通过Configuration().configure();读取并解析hibernate.cfg.xml配 ...
MVC框架基本工作原理
MVC工作原理 MVC要实现的目标是将软件用户界面和业务逻辑分离以使代码可扩展性.可复用性.可维护性.灵活性加强. Model 模型层,一般对数据的处理,业务逻辑都会放在model进行处理 View ...
SSH框架笔记_SSH三大框架的工作原理及流程
Hibernate工作原理及为什么要用? 原理: 1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件 2.由hibernate.cfg ...
scrapy 中爬取时被重定向_一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程...
今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助. 1.Scrapy爬虫框架 Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且 ...
小程序框架 uni-app 工作原理
官方介绍: uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉 ...

Bootstrap框架网格系统工作原理

Bootstrap框架网格系统工作原理相关推荐

最新文章

热门文章