Bootstrap 网格列.pdfVIP

Bootstrap ⽹格列 Bootstrap有四种类型的前缀，⽤于为不同⼤⼩的显示创建列： col-xs⽤于超⼩显⽰器 （屏幕宽度768px ） col-sm⽤于较⼩的显⽰器 （屏幕宽度 = 768px ） col-md⽤于中等显⽰器 （屏幕宽度 = 992px ） col-lg⽤于较⼤的显⽰器 （屏幕宽度 = 1200px ） 当我们指定类 col-xs-12 时，它表⽰元素应 额外的⼩屏幕上跨越所有12个可⽤ 的Bootstrap列。 让我们检查下⾯的标记： div class=container div class=row div class=col-xs-12 col-sm-6 h4Column 1/h4 /div div class=col-xs-12 col-sm-6 h4Column 2/h4 /div /div /div 这段代码中，我们将col-xs-12 类⽤于超⼩显⽰器和类 col-sm-6 ⽤于较⼩的 显⽰器。 因此，超⼩型显⽰器中的每⼀列将占⽤所有12个可⽤的Bootstrap列，这将显 ⽰为列的堆栈。然⽽ 较⼩的显⽰器上，它们每个只占⽤6个Bootstrap列，实现两列 布局。 例⼦ !D CTYPE html html lang=en head link rel=stylesheet href=/bootstrap/3.2.0/css/bootst /head body div class=container div class=row div class=col-xs-12 col-sm-6 h4Column 1/h4 /div div class=col-xs-12 col-sm-6 h4Column 2/h4 /div /div /div /body /html 你可以调整浏览器窗⼜的⼤⼩以查看动态更改。 嵌套列 我们可以 布局中的任何列中创建⼀组新的12个Bootstrap列，以便创建嵌套列。 !D CTYPE html html lang=en head link rel=stylesheet href=/bootstrap/3.2.0/css/bootst /head body div class=container div class=row div class=col-md-6 col1 h3Column 1/h3 !-- Nesting Starts -- div class=row div class=col-md-6 col3 h3Column 4/h3 /div div class=col-md-6 col4 h3Column 5/h3 /div /div /div div class=col-md-6 col2 h3Column 2/h3 /div /div /div /body /html 偏移列 偏移⽤于增加列的左边距。 例如，如果你有⼀个列出现 三个Bootstrap列之间，则可以使⽤偏移功能。 可⽤于偏移的类有： col-xs-offset-* col-sm-offset-* col-md-offset-* col-lg-offset-* 假设我们要 超⼩显⽰器中向右移动⼀列三个Bootstrap列，我们可以使⽤类“col-xs- offset-3” ，例如： !D CTYPE html html lang=en head link rel=stylesheet