乐趣区

关于bootstrap:你想要了解Bootstrap栅格系统的都在这儿

Bootstrap 框架是现在最风行的前端框架之一,Bootstra 功能强大,简略易学,很符合实际利用场景。然而其中蕴含的内容比拟多,老手往往不能很快的熟练掌握。接下来,咱们一起对 Bootstra 栅格零碎做一下简略的总结:

Bootstrap 栅格零碎的定义是什么呢?

Bootstrap 蕴含了一个响应式的、挪动设施优先的、不固定网格零碎,能够随着设施或视口大小的减少而适当地扩大到 12 列。它蕴含了用于简略的布局选项的预约义类,也蕴含了用于生成更多语义布局的功能强大的混合类

从上述话语中能够简略的整顿出三个方面:

1、Bootstrap3 是挪动设置优先

2、Bootstrap 的栅格零碎最多 12 列

3、Bootstrap 中蕴含了许多预约义类

在通常咱们写的页面里,浏览器放大到肯定水平,页面会错位、变形,这在 Bootstrap 中不会,因为它是自适应的。

Bootstrap 栅格零碎(Grid System)相干类

\1. container 类示意栅格。应用 container 类可能取得 Bootstrap 默认设置的对齐(alignment)和内边距(padding)款式。

\2. 应用.row 来创立一行,每行又分为多个列。

\3. 应用.col-[screen style]-[percent] 预约列元素来快创立栅格。

\4. 内容应该搁置在列内,且只有列能够是行的间接子元素。

Ps:row>col

\5. 列通过内边距(padding)来创立列内容之间的间隙。该内边距是通过.rows 上的外边距(margin)取负值失去。就是说:你想缩小列间距,用负的 margin 来写。

\6. 网格零碎是通过指定你想要横跨的十二个可用的列来创立的。例如,要创立三个相等的列,则应用三个.col-md-4。

Bootstrap 网格的根本构造

< div class=”container”>// 容器

< div class=”row”>// 栅格中的行

< div class=”col-”>< /div>// 行下的间接元素列

< div class=”col-”>< /div>

< /div>

< div class=”row”>…< /div>

< /div>

< div class=”container”>

栅格选项

Bootstrap 栅格把设施分为了四种:

超小设施(手机)、小型设施(平板)、中型设施(笔记本电脑)、大型设施(大尺寸显示器)这四种设施它们各自的列数量和都不能够超过 12.

它们的列有不同 class 前缀做标识。

超小设施用.col-xs

小型设施用.col-sm

中型设施用.col-md

大型设施用.col-lg-

不管哪种设施,它们的间隙都是 30px(指列的 padding-left;15px 和 padding-right:15px;)

应用栅格布局的步骤

\1. 引入 bootstrap 所须要的库

就好比引入一个内部样式表,只不过这个是 bootstrap 的样式表,它蕴含 css 和 js 两局部

\2. 增加 bootstrap 容器

在 body 中写一个 div,并为这个 div 增加一个 container 类,这个类是十分有用的,它能在页面中创立一个居中的区域,而后咱们把其它的元素放在外面。它等于是创立了一个具备动态宽度,并且 margin 值为 auto 的一个居中的 div 框,container 的优先在于它是响应式的,它会以以后屏幕的宽度为根底计算出最佳的宽度予以应用。

\3. 在 container 中增加 row

咱们用 row 来横向布局

\4. 在 row 中增加列

就好比表格中增加了 tr. 之后在 tr 中增加 td 一样。

Row 中的列就是咱们之前的.col-xs-6,加起来正好 12 列

栅格零碎是 Bootstrap 中的外围,正是因为栅格零碎的存在,Bootstrap 能力有着如此弱小的响应式布局计划。

退出移动版