• 隐藏侧边栏
  • 展开分类目录
  • 关注微信公众号
  • 我的GitHub
  • QQ:1753970025
Chen Jiehua

Bootstrap小记 

今天因为工作需要,重新用到了Bootstrap,虽然以前看过,不过基本忘光了,现在重新温故一下~~~~

资料来自:
http://www.bootcss.com/
http://v3.bootcss.com/

首先,在html中加入Bootstrap文件

栅格系统

系统自动将行(row)分为12列;

  • “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 使用“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

嵌套列

为了使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-列到已经存在的.col-md-列内即可实现。嵌套row所包含的列加起来应该等于12。

码字很辛苦,转载请注明来自ChenJiehua《Bootstrap小记》

评论