bootStrap实习原理

原创 2016年05月31日 21:44:02
           bootStrap是通过网格原理的实现:通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。


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


1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
<divclass= container >
<divclass= row ></div>
</div>
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:   <divclass= container >
<divclass= row >
  <divclass= col-md-4 ></div>
  <divclass= col-md-8 ></div>3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素


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


网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。在不同屏幕尺寸使用了不同的网格样式,如下图,到达该宽度时样式就会变化:




列偏移:
   有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
<;div class= col-md-2col-md-offset-4 >;列向右移动四列的间距</div>


列排序:
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*右边移动”和“col-md-pull-*左边移动”(其中星号代表移动的列组合数)。理解成:把该div向左边移动或者像右边移动几个列;


列的嵌套:即在一个容器下的div下嵌套一个列,该列div row作为开头 仍然是以12列为100%;


版权声明:本文为博主原创文章,未经博主允许不得转载。

webpack的使用和vue.js的初次尝试

最近想学点技术,就从webpack开始了。其中参考了webpack 的中文指南。中文指南链接地址下面是阅读笔记。方便自己以后记忆。CommonJS###node.js 遵循commonJS规范,规范的...
  • stubbor
  • stubbor
  • 2016年12月19日 16:36
  • 1913

ionic在win7下环境配置

注意 : 所有路径均不支持中文。 软件环境 : windows _x64 、Android Studio2.2 、JDK1.8 一 , 安装JDK JDK默认的安装的位置 c:/Program Fil...

【Bootstrap】响应式原理和设计

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅...

Bootstrap栅格系统原理

Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1)响应式设计 我们现实生活中所使用到的设...

Bootstrap3 Grid system原理及应用

刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放。 ...
  • MrZZhou
  • MrZZhou
  • 2017年02月23日 10:26
  • 185

玩转Bootstrap(基础) (4.网格系统实现原理)

代码 基本用法

【Web】Bootstrap栅格布局系统设计原理

这个布局提供了一套响应式布局解决方案。一. 前提被定义的元素内边距和边框不再会增加它的宽度。* { -webkit-box-sizing: border-box; -moz-box-s...
  • WHUZXQ
  • WHUZXQ
  • 2017年05月21日 14:50
  • 665

bootstrap网格布局原理解析

简介bootstrap根据媒体查询设置不同的container容器宽度,在容器内用百分比设置其列col的宽度以自适应不同大小的屏幕,一行row共有12个col,只需添加相关的类名,且对应类名后面的数字...

Bootstrap响应式布局原理

Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootst...

Bootstrap3.0学习第二轮(栅格系统原理)

Bootstrap3.0学习第二轮(栅格系统原理) Bootstrap3.0系列导航 1.BootStrap学习从现在开始 http://www.cnblogs.com/aehyok/p/33...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootStrap实习原理
举报原因:
原因补充:

(最多只允许输入30个字)