bootstrap网格系统

基本用法:
网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。关于屏幕尺寸如下图:

屏幕尺寸图

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

列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,974评论 3 184
  • 栅格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询,就制作出了强大...
    hcxowe阅读 849评论 0 2
  • 网络系统 bootstrap允许将页面划分成共12个等宽逻辑单元,既允许单独地使用这12个等分逻辑单元,也可以将其...
    博为峰51Code教研组阅读 440评论 0 1
  • 实现原理 网格系统的实现原理,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),...
    lvyweb阅读 1,640评论 1 2
  • 大家好,我是IT修真院深圳分院第01期学员,一枚正直纯洁善良的web程序员。 今天给大家分享一下,修真院官网CSS...
    嘴角那抹温柔阅读 972评论 0 1