Bootstrap网格系统使用的详细说明

时间：2021-09-03 来源：互联网编辑：宝哥软件园浏览：次

序

Bootstrap是基于HTML、CSS和JAVASCRIPT的。简单灵活，使得Web开发速度更快。

网格系统是Bootstrap的核心，也正是因为网格系统的存在，Bootstrap才有了如此强大的响应性布局方案。

首先，什么是网格系统

官方文件是这样说的：

Bootstrap提供了一个响应迅速、移动设备优先的流式网格系统。随着屏幕或视口大小的增加，系统会自动分成多达12列。它包含用于简单布局选项的预定义类和用于生成更多语义布局的强大混合类。

当我们理解这段话时，可以发现最重要的部分是移动设备优先级，那么什么是移动设备优先级呢？

Bootstrap的基本CSS代码默认从小屏设备(如移动设备、平板电脑)开始，然后通过使用媒体查询扩展到大屏设备(如笔记本电脑、台式电脑)上的组件和网格。

具有以下策略：

内容：决定什么最重要。布局：优先设计较小的宽度。渐进式增强：随着屏幕尺寸的增加添加元素。

二、工作原理

网格系统用于通过一系列行和列的组合来创建页面布局，您的内容可以放入这些创建的布局中。

工作原理如下：

“row”必须包含在中。容器(固定宽度)或。容器-液体(100%宽度),以使其适当对齐和填充。

div class='container '！-水平居中，两边空白，当屏幕最小时充满父元素-div class=' row'/div/div！-or-div class='容器-流体'！-默认情况下，整个父元素总是被填充的-div class=' row'/div/div通过“row”水平创建一组“column”。但是，列数的总和不能超过等分列的总数(超过时，多余的部分将换行)，默认值为12。(可以使用Less或Sass进行自定义)，如下所示：

div class=' container ' div class=' row ' div class=' col-MD-2 '/div class=' col-MD-6 '/div div class=' col-MD-4 '/div/div/div您的内容应该放在一个“列”中，并且只能

像这样的预定义类。第二排。col-xs-4可用于快速创建栅格布局。Bootstrap源代码中定义的Mixin也可以用来创建语义布局。

设置“列”的填充属性以创建列之间的间隔。为设置负边距。元素偏移为。容器元素，它间接补偿“行”中包含的“列”的填充。负边际是以下例子引人注目的原因。网格列中的内容是对齐的。

栅格系统中的列通过指定1到12之间的值来表示。例如，可以使用三个创建三个等宽的列。第4栏。

如果“行”中包含的“列”大于12，则额外“列”所在的元素将从另一行作为一个整体排列。

光栅类适用于屏幕宽度大于或等于截止点大小的设备，涵盖了小屏幕设备的光栅类。因此，应用任何。元素上的col-md-*栅格类适用于屏幕宽度大于或等于分界点大小的设备，并覆盖小屏幕设备的栅格类。因此，任何。应用于元素的col-lg-*不存在，这也会影响大屏幕设备。

2.1媒体查询

在网格系统中，我们在Less文件中使用以下媒体查询来创建分界点的临界阈值。

/*超小屏(手机，小于768px) *//*没有与媒体查询相关的代码，因为这是Bootstrap中的默认值(还记得Bootstrap是移动设备的优先级吗？)*//*小屏幕(平板，768px或以上)*/@介质(最小宽度： @屏幕-sm-min){ 0.}/*中等屏幕(桌面显示器，大于或等于992像素)*/@介质(最小宽度： @屏幕-纵向-最小){ 0.}/*大屏幕(大型桌面显示器，大于或等于1200 px) */@媒体(最小宽度： @屏幕-LG-min){ 0.}我们偶尔会查询媒体中的代码

@media(最大宽度： @ screen-xs-max){ 0.} @媒体(最小宽度： @屏幕-sm-min)和(最大宽度： @屏幕-sm-max){ 0.} @媒体(最小-宽度： @屏幕-纵向-最小)和(最大-宽度3360 @屏幕-纵向-最大){ 0.} @媒体(最小宽度3360 @屏幕-LG-最小){ 0.} 2.2基本用法

千言万语，不如直接上图：

一幅画胜过千言万语。下表详细显示了引导网格系统如何在各种屏幕设备上工作。我想我不需要谈论用法。让我们看看下面的一些例子。

这种方式是最基本的用法：

div class=' container ' div class=' row ' div class=' col-MD-6 '。col-MD-6/div class=' col-MD-6 '。col-MD-6/div/div class=' row ' div class=' col-MD-4 '。col-MD-4/div class=' col-MD-4 '。col-MD-4/div class=' col-MD-4 '。col-MD-4/div/div class=' row ' div class=' col-MD-2 '。col-MD-2/div class=' col-MD-6 '。col-MD-6/div class=' col-MD-4 '。MD-4/分区/分区/分区上校

Bootstrap作为一个响应框架，当然不会只有这么简单的功能。让我们继续

2.3响应列复位

即使使用给定的栅格类，您也不可避免地会遇到一些问题。例如，在某些阈值下，某些列可能高于其他列。为了克服这个问题，建议使用。clearfix和响应工具类。

div class=' row ' div class=' col-xs-6 col-sm-3 '。第6栏。col-sm-3/div class=' col-xs-6 col-sm-3 '。第6栏。列sm-3/div！-只为所需的视口添加额外的clear fix-Div class=' clear fix visible-xs-block '/Div Div class=' col-xs-6 col-sm-3 '。第6栏。col-sm-3/div class=' col-xs-6 col-sm-3 '。第6栏。col-sm-3/div/div除了在分界点清除响应，请看这个网格示例。

div class=' row ' div class=' col-sm-5 col-MD-6 '。sm-5上校。col-MD-6/div class=' col-sm-5 col-sm-offset-2 col-MD-6 col-MD-offset-0 '。sm-5上校。col-sm-offset-2md-6上校。col-MD-offset-0/div/div div class=' row ' div class=' col-sm-6 col-MD-5 col-LG-6 '。sm-6上校。md-5上校。col-LG-6/div class=' col-sm-6 col-MD-5 col-MD-offset-2 col-LG-6 col-LG-offset-0 '。sm-6上校。md-5上校。col-md-offset-2lg-6上校。上校-LG-offset-0/div/div

2.4列偏移

在某些情况下，我们不希望相邻的列靠得很近。如果你想在没有额外余量或其他手段的情况下实现这一点，Bootstrap内置为我们提供了列偏移量，这是一系列帮助我们达到预期效果的类。

只需将类名col-md-offset-*(星号代表要偏移的列组合数)添加到要偏移的column元素中，具有该类名的列将向右偏移。这些类实际上通过使用*选择器将左边距添加到当前元素中。例如，向列元素添加. col-md-offset-6类会将。col-md-6元素向右移动6列的宽度。

div class=' row ' div class=' col-MD-4 '。col-MD-4/div class=' col-MD-4 col-MD-offset-4 '。md-4上校。col-MD-offset-4/div/div div class=' row ' div class=' col-MD-3 col-MD-offset-3 '。上校md-3。col-MD-offset-3/div div class=' col-MD-3 col-MD-offset-3 '。上校md-3。col-MD-offset-3/div/div div class=' row ' div class=' col-MD-6 col-MD-offset-3 '。md-6上校。上校-MD-offset-3/div/div