Bootstrap4 网格系统学习笔记
什么是Bootstrap4网格系统？
Bootstrap4网格系统是一种基于栅格布局的响应式设计方法，它能够让我们在不同屏幕尺寸下更加方便地对页面进行排版。
Bootstrap4网格系统的使用方法
基本用法
我们可以使用 .container 类来创建一个容器，然后在容器中添加 .row 类来创建一行。最后，在这一行中添加 .col-*-* 类来定义每个列的宽度以及跨越的列数。
例如，要创建一个包含两个等宽列的网格，可以这样写：
htmlCopy Code<div class="container">
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
这将创建一个容器，其中包含一行，这一行中包含两个等宽的列。在这个例子中，我们使用了 .col-sm-6 类来指定每个列的宽度为50%。
响应式设计
Bootstrap4网格系统能够很好地支持响应式设计。通过在 .col-*-* 类中使用屏幕尺寸前缀，我们可以定义每个列在不同屏幕尺寸下的宽度和跨越的列数。
例如，以下代码表示在小屏幕设备上，每个列的宽度为100%；在中型屏幕设备上，每个列的宽度为50%；在大型屏幕设备上，每个列的宽度为25%：
htmlCopy Code<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">Column 1</div>
<div class="col-12 col-md-6 col-lg-3">Column 2</div>
<div class="col-12 col-md-6 col-lg-3">Column 3</div>
<div class="col-12 col-md-6 col-lg-3">Column 4</div>
</div>
</div>
偏移和嵌套
除了定义列的宽度和跨越的列数外，Bootstrap4网格系统还支持偏移和嵌套。
偏移可以让我们将某个列向右移动一定的列数，从而在页面上创建出不同的布局。例如，以下代码将第一个列向右移动了两列：
htmlCopy Code<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-2">Column 1</div>
<div class="col-sm-4">Column 2</div>
</div>
</div>
嵌套则可以让我们在某个列内再次创建一个网格系统来进行布局。例如，以下代码表示在第一个列中创建了一个包含两个列的子网格：
htmlCopy Code<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">Subcolumn 1</div>
<div class="col-sm-6">Subcolumn 2</div>
</div>
</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
实例展示
下面是一个简单的实例展示，它展示了如何使用Bootstrap4网格系统来创建一个响应式的页面。
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Grid System Demo</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
.headline {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
font-weight: bold;
padding: 10px;
text-align: center;
}
.item {
background-color: #f9f9f9;
border-radius: 4px;
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 headline">My Responsive Page</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="item">
<h2>My First Item</h2>
<p>This is my first item. It's a simple piece of text to show how the grid system works.</p>
</div>
</div>
<div class="col-md-4">
<div class="item">
<h2>My Second Item</h2>
<p>This is my second item. It's another simple piece of text to show how the grid system works.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">
<h2>My Third Item</h2>
<p>This is my third item. Again, it's just some text to show how the grid system works.</p>
</div>
</div>
<div class="col-md-6">
<div class="item">
<h2>My Fourth Item</h2>
<p>This is my fourth item. It's the last simple piece of text to show how the grid system works.</p>
</div>
</div>
</div>
</div>
</body>
</html>
在这个例子中，我们创建了一个包含两列的网格和一个包含四个子项的网格。我们还使用了Bootstrap内置的类来添加一些样式，并使用了响应式设计来让页面在不同尺寸下呈现不同的布局。
希望这篇学习笔记可以帮助你更好地理解Bootstrap4网格系统的使用方法。