Bootstrap 3 之 Bootstrap 网格系统

Bootstrap 网格系统是其最著名和最强大的特性之一。它允许您在页面上创建响应式布局,使您的网站在不同设备上都能够自适应显示。通过使用网格系统,您可以轻松地将页面划分为不同的列和行,以便更好地控制页面布局。

网格系统基础

Bootstrap 网格系统基于12列的布局。页面的整体宽度被分为12等分,每个列的宽度可以根据需要占据其中的若干等分。您可以通过添加相应的 CSS 类来定义每个元素应占据的列数。

响应式布局

Bootstrap 的网格系统是响应式的,这意味着您可以轻松地创建适应不同屏幕尺寸的布局。通过使用不同的 CSS 类,您可以定义在不同设备上显示的列数,从而实现响应式设计。

示例代码:

---- ------------------
    ---- ------------
        ---- --------------- -----------
            ---- ----------------------- ---
        ------
        ---- --------------- -----------
            ---- ----------------------- ---
        ------
    ------
------

在上面的示例中,我们创建了一个包含两列的行。第一列在大屏幕上占据6列,在小屏幕上占据12列;第二列也是如此。这样,无论用户使用何种设备,页面都能够以最佳方式显示。

嵌套网格

您还可以在网格系统中嵌套行和列,以创建更复杂的布局。通过嵌套网格,您可以更加灵活地控制页面的结构。

示例代码:

---- ------------------
    ---- ------------
        ---- -----------------
            ---- ----- ---
        ------
        ---- -----------------
            ---- ----- ---
            ---- ------------
                ---- -----------------
                    ---- --------- ---
                ------
                ---- -----------------
                    ---- --------- ---
                ------
            ------
        ------
    ------
------

在上面的示例中,我们创建了一个包含两列的行。第二列中又嵌套了一个包含两列的行。这种嵌套结构可以无限延伸,以满足您的布局需求。

以上就是关于 Bootstrap 网格系统的基础知识。通过灵活运用网格系统,您可以轻松创建出美观且具有响应式设计的网页布局。在接下来的章节中,我们将深入探讨 Bootstrap 的其他特性和组件。


上一篇:Bootstrap CSS 概览
下一篇:Bootstrap 排版