·您当时的方位:主页 > 技能教程 >

什么是 Bootstrap 网格体系(Grid System)?

时刻:2019-02-11 17:46Bootstrap
Bootstrap 包括了一个呼应式的、移动设备优先的、不固定的网格体系,能够跟着设备或视口巨细的添加而恰当地扩展到 12 列。它包括了用于简略的布局选项的预界说类,也包括了用于生成更多语义布局的功用强大的混合类。

什么是 Bootstrap 网格体系(Grid System)?

Bootstrap 官方文档中有关网格体系的描绘:

Bootstrap 包括了一个呼应式的、移动设备优先的、不固定的网格体系,能够跟着设备或视口巨细的添加而恰当地扩展到 12 列。它包括了用于简略的布局选项的预界说类,也包括了用于生成更多语义布局的功用强大的混合类。

让咱们来了解一下上面的句子。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比方移动设备、平板电脑)开端,然后扩展到大屏幕设备(比方笔记本电脑、台式电脑)上的组件和网格。

移动设备优先战略

  • 内容
    • 决议什么是最重要的。
  • 布局
    • 优先规划更小的宽度。
    • 根底的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强
    • 跟着屏幕巨细的添加而添加元素。

呼应式网格体系跟着屏幕或视口(viewport)尺度的添加,体系会主动分为最多12列。

Bootstrap 网格体系(Grid System)的作业原理

网格体系经过一系列包括内容的行和列来创立页面布局。下面列出了 Bootstrap 网格体系是怎么作业的:

  • 行有必要放置在 .container class 内,以便取得恰当的对齐(alignment)和内边距(padding)。
  • 运用行来创立列的水平组。
  • 内容应该放置在列内,且唯有列能够是行的直接子元素。
  • 预界说的网格类,比方 .row  .col-xs-4,可用于快速创立网格布局。LESS 混合类可用于更多语义布局。
  • 列经过内边距(padding)来创立列内容之间的空隙。该内边距是经过 .rows 上的外边距(margin)取负,表明榜首列和最终一列的行偏移。
  • 网格体系是经过指定您想要横跨的十二个可用的列来创立的。例如,要创立三个持平的列,则运用三个 .col-xs-4

 

抢手文章引荐

请稍候...