bootstrap最多可以分多少列-猿码集

Bootstrap最多可以分多少列？

对于web开发者来说，Bootstrap 是一个非常流行的前端框架。它提供了一些预先定义好的 CSS 类和 JavaScript 插件，帮助开发者更快速、更方便地构建响应式、移动设备友好的网站，减轻了开发的负担。而在 Bootstrap 中，一个页面可以被分为 12 列，这个数字是一个基础的概念，也是 Bootstrap 的核心，接下来我们将详细介绍。

Bootstrap 栅格系统

Bootstrap 栅格系统是一个响应式的、流式的、移动设备优先的系统，它使用一套预定义的规则来根据屏幕大小进行自适应布局。

栅格系统基于一个 12 列的响应式网络，默认使用 16px 作为栅格系统的基准像素。开发者可以使用预定义的 CSS 类在每一列中添加内容或调整布局比例。在大多数情况下使用组合栅格系统就可以完成整个页面的布局了，当然也可以混合多个栅格系统。甚至可以种植一个嵌套的栅格系统来构建复杂的布局。

下面我们来看看一个简单的Bootstrap 网格系统数学表达式：


.container{
    width: 100%;
    margin-right: obsoletepx;
    margin-left: obsoletepx;
} 
.row{
    margin-right: obsoletepx;
    margin-left: obsoletepx;
}
.col-x{
    position: relative;
    min-height: 1px;
    padding-right:  obsoletepx;
    padding-left:  obsoletepx;
}
.col-x-1, .col-x-2, ... .col-x-12{
    position: relative;
    min-height: 1px;
    padding-right:  obsoletepx;
    padding-left:  obsoletepx;
}
.col-x-12{
    width: 100%;
}
.col-x-11{
    width: 91.66666667%;
}
.col-x-10{
    width: 83.33333333%;
}
.col-x-9{
    width: 75%;
}
.col-x-8{
    width: 66.66666667%;
}
.col-x-7{
    width: 58.33333333%;
}
.col-x-6{
    width: 50%;
}
.col-x-5{
    width: 41.66666667%;
}
.col-x-4{
    width: 33.33333333%;
}
.col-x-3{
    width: 25%;
}
.col-x-2{
    width: 16.66666667%;
}
.col-x-1{
    width: 8.33333333%;
}

在上述代码中，我们可以看到12 个 col-x-* 类，这代表一行分成 12 列。具有以下特征：

1. 栅格系统只有针对大屏幕、中屏幕、小屏幕和超小屏幕四个响应式布局，栅格的行必定为 rows 类，列必定为 col*-* 类。

2. 由于栅格系统是响应式设计的，所以随着浏览器或设备的变化，它的布局也会自动变化。

3. 每一个分栏都必须包裹在 rows 类当中，这个类中自动清除浮动。

4. 在每一行中，栅格的创建是基于指定的列、偏移、清除和可见性值。

Bootstrap 列数和宽度

Bootstrap 中的列数和宽度是由宽度比例值定义的 .col-- 类。每一列都必须包裹在 .row 类中。以下是 Bootstrap 可用的类：

.col-*

.col-sm-*

.col-md-*

.col-lg-*

其中，* 可以是介于 1 到 12 之间的任意数字，表示一个栏所占的列数，例如：

.col-md-4 .col-md-4 .col-md-4

这意味着，我们将一个 3 列分别占 4 列。每列占用的百分比为 33.33% (100 / 3)。同时，我们还可以在同一个栏中添加其他项目，例如

.col-md-8 .col-md-4

再举一个例子，如果我们想要一个栏占用整个行的 60%，我们可以使用类 .col-md-6 来定义宽度：

.col-md-6

这意味着这个栏分别占据了六个宽度单位中的四个，即 50%。

Bootstrap 偏移和额外的类

在 Bootstrap 中，可以使用偏移类来实现排版上下文中栏的平移。类 .col-md-offset-* 可以指定一个栏向右移动的列数。例如：

.col-md-4 .col-md-4 .col-md-offset-4

这意味着我们的第二个栏将空出 4 列的父级 .row 的空间，实际上向右移动了这么多宽度单位。

此外，Bootstrap 还提供了其他的类来帮助开发者快速构建更加丰富和多样化的布局，如：

.col-xs-* 定义小屏幕设备上的列。

.col-sm-* 定义中等屏幕设备上的列。

.col-md-* 定义大屏幕设备上的列。

.col-lg-* 定义超大屏幕设备上的列。

.visible-xs 和 .hidden-xs 控制在哪个屏幕大小下可见或隐藏。

.clearfix 清除一个元素的默认浮动行为。

.sr-only 用来提供屏幕阅读器专用标记。

.sr-only-focusable 用来提供有键盘焦点的屏幕阅读器专用标记。

结论：

通过上述内容，可以看到 Bootstrap 最多可以分为 12 列。它提供了一套预定义好的 CSS 类和 JavaScript 插件，这个数字是 Bootstrap 的基础概念，同时也是它的核心。开发者可以使用栅格系统、列数和宽度、偏移和额外的类来快速搭建各种响应式的布局。在后续的项目中，只要遵循这个原理，通过布局的多样性和溢出控制，最终可以获得更完美的开发体验和优秀的作品效果。

bootstrap最多可以分多少列