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%;


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

Bootstrap学习笔记(实习第2天)

1、学习网站: http://www.bootcss.com/ 2、页面中加入下面代码即可调用bootstrap。 3、基本模版                  ...
  • acmjk
  • acmjk
  • 2015年01月06日 16:37
  • 1010

BootStrap学习与实践(一)

BootStrap是什么?BootStrap是基于HTML、CSS、JS的一个非常优秀的前端框架,只需要简单的代码就可以快速搭建好一组前端的界面,对于后端开发的看官,只需要关注自己的业务逻辑开发,而不...
  • tom_code
  • tom_code
  • 2017年03月06日 10:18
  • 224

半个月实训总结

心境变化 来了南京东软培训已有半个月,这半个月学习了一个星期的Oracle数据库,一个星期的Java,Oracle数据库加固了自己的SQL语句,主要对于查询语句有了更深的理解,如《收获不止Oracl...
  • u012157999
  • u012157999
  • 2015年07月19日 22:46
  • 589

bootstrap原理分析

bootstrap原理分析
  • u013035477
  • u013035477
  • 2016年11月02日 21:02
  • 2135

Bootstrap栅格系统原理

Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1)响应式设计 我们现实生活中所使用到的设...
  • yang5726685
  • yang5726685
  • 2017年04月03日 09:52
  • 1104

bootstrap响应式布局的控制原理

响应式布局 响应式布局使用css3的@media这个属性来控制的。 body { background-color: #000;/*默认的背景色为heise*/ } @media(max-w...
  • xdd_lmd
  • xdd_lmd
  • 2015年06月14日 22:47
  • 2506

bootstrap源码阅读(一)——modal原理

虽然bootstrap主要是css,但是我还是从bootstrap的js入手进行学习 #检查jquery,以及jquery版本/*typeof检查是否存在jquery对象*/ if (typeof ...
  • sinat_25127047
  • sinat_25127047
  • 2016年12月12日 22:04
  • 2318

浅析bootstrap原理及优缺点

网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统 网格系统的实现原理,是通过定...
  • AlbenXie
  • AlbenXie
  • 2017年05月12日 10:36
  • 954

Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

转自:http://www.cnblogs.com/willian/p/3558180.html?utm_source=tuicool 这个标题取的有点奇怪,怪我翻译的有问题吧。英文学平有限,有...
  • chelen_jak
  • chelen_jak
  • 2015年05月14日 10:32
  • 1494

Bootstrap 3 布局原理

对于 Web 开发来说,一个永远的话题是如何创建一个跨浏览器兼容的布局。许多年来,各种框架使用各种技术来解决这个问题。Bootstrap 使用了一个不同的方式来解决这个问题。基于 960 像素的布局h...
  • jiangfeng_1204
  • jiangfeng_1204
  • 2015年01月26日 09:27
  • 1725
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootStrap实习原理
举报原因:
原因补充:

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