第一次接触神奇的Bootstrap基础排版

当你第一次接触Bootstrap基础排版时，可能会有些困惑。不过，通过一些简单的步骤和几个示例，你将能轻松学会Bootstrap基础排版。

步骤

引入Bootstrap的CSS和JS文件

在你的HTML文件中，你需要引用Bootstrap的CSS和JS文件。你可以在Bootstrap的官方网站下载这些文件，或者在CDN上引用，如下所示：

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">

<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

创建一个基础的HTML页面

创建一个基础的HTML页面，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap基础排版</title>

  <!-- 引入Bootstrap的CSS文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

</body>
</html>

添加容器

Bootstrap的网格系统是通过一系列容器和栅格（rows和cols）来实现的。因此，你需要先添加一个容器。

<div class="container"> 
  <!-- 在这里添加内容 -->
</div>

添加栅格

在容器中添加一个栅格，如下所示：

<div class="container"> 
  <div class="row">
    <div class="col-sm-6">
      <!-- 在这里添加左侧内容 -->
    </div>
    <div class="col-sm-6">
      <!-- 在这里添加右侧内容 -->
    </div>
  </div>
</div>

其中，我们使用了col-sm-6类将容器分为两列。

示例

示例1：创建一个简单的两列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap基础排版示例1</title>

  <!-- 引入Bootstrap的CSS文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container"> 
    <div class="row">
      <div class="col-sm-6">
        <h1>左侧内容</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat convallis nibh, sed efficitur purus eleifend eu. Fusce ut bibendum eros, eu sagittis tellus. Ut non odio ut purus iaculis auctor at id mi. Donec fringilla, enim quis malesuada rhoncus, turpis urna malesuada ex, a sollicitudin nunc urna at urna. Donec rhoncus euismod tortor, eget euismod neque commodo vel.</p>
      </div>
      <div class="col-sm-6">
        <h1>右侧内容</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat convallis nibh, sed efficitur purus eleifend eu. Fusce ut bibendum eros, eu sagittis tellus. Ut non odio ut purus iaculis auctor at id mi. Donec fringilla, enim quis malesuada rhoncus, turpis urna malesuada ex, a sollicitudin nunc urna at urna. Donec rhoncus euismod tortor, eget euismod neque commodo vel.</p>
      </div>
    </div>
  </div>
</body>
</html>

示例2：创建一个带有导航栏的页面布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap基础排版示例2</title>

  <!-- 引入Bootstrap的CSS文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Bootstrap基础排版示例2</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">产品</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container"> 
    <div class="row">
      <div class="col-sm-9">
        <h1>左侧内容</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat convallis nibh, sed efficitur purus eleifend eu. Fusce ut bibendum eros, eu sagittis tellus. Ut non odio ut purus iaculis auctor at id mi. Donec fringilla, enim quis malesuada rhoncus, turpis urna malesuada ex, a sollicitudin nunc urna at urna. Donec rhoncus euismod tortor, eget euismod neque commodo vel.</p>
      </div>
      <div class="col-sm-3">
        <h1>右侧内容</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat convallis nibh, sed efficitur purus eleifend eu. Fusce ut bibendum eros, eu sagittis tellus. Ut non odio ut purus iaculis auctor at id mi. Donec fringilla, enim quis malesuada rhoncus, turpis urna malesuada ex, a sollicitudin nunc urna at urna. Donec rhoncus euismod tortor, eget euismod neque commodo vel.</p>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap的JS文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

以上就是学习Bootstrap基础排版的完整攻略，希望能帮助到你。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：第一次接触神奇的Bootstrap基础排版 - Python技术站

第一次接触神奇的Bootstrap基础排版

步骤

示例

示例1：创建一个简单的两列布局

示例2：创建一个带有导航栏的页面布局

相关文章