Bootstrap 网格系统学习笔记

Bootstrap 是一个流行的前端开发框架，它提供了许多有用的组件和工具来快速构建现代化的网站和应用程序。其中最重要的一个组件就是网格系统，它可以帮助我们创建响应式的布局，确保页面能够适应不同的屏幕尺寸和设备类型。

什么是网格系统？

网格系统是一种基于列和行的布局方式，它将页面划分为等宽的列，然后根据需要将内容放置在这些列中。网格系统可以帮助我们实现许多常见的布局模式，例如两列布局、三列布局和混合布局等。

Bootstrap 的网格系统是基于 CSS Flexbox 和 CSS Grid 技术实现的，它提供了一组类名来定义网格布局。以下是一些最常用的类名：

• .container：用于包含整个网页内容的容器，通常在此添加内边距以留出空白区域。
• .row：用于创建行，每行可包含一或多个列。
• .col-*：用于创建列，* 可以是数字 1~12，表示该列占据页面宽度的比例。例如 .col-6 表示该列占据一半的宽度，.col-12 表示该列占据全部宽度。
• .offset-*：用于创建偏移列，* 可以是数字 1~11，表示该列左侧应该留出多少空白区域。例如 .offset-2 表示该列左侧应该留出两个单位的空白。

网格系统实例

两列布局

以下是一个简单的两列布局示例，左侧列占据三分之一的宽度，右侧列占据三分之二的宽度：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col-4">左侧内容</div>
    <div class="col-8">右侧内容</div>
  </div>
</div>

三列布局

以下是一个三列布局示例，其中左侧列占据四分之一的宽度，中间列占据一半的宽度，右侧列占据四分之一的宽度：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col-3">左侧内容</div>
    <div class="col-6">中间内容</div>
    <div class="col-3">右侧内容</div>
  </div>
</div>

混合布局

以下是一个混合布局示例，其中左侧列占据四分之一的宽度，中间两列占据四分之一的宽度，右侧列占据四分之二的宽度：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col-3">左侧内容</div>
    <div class="col-2">中间内容 1</div>
    <div class="col-2">中间内容 2</div>
    <div class="col-5">右侧内容</div>
  </div>
</div>

以上就是 Bootstrap 网格系统的基本用法和示例。通过灵活运用网格系统，我们可以轻松地实现各种不同的布局，从而创建出美观且具有响应式的网站页面。