Bootstrap4 创建一个网页

使用Bootstrap4创建一个网页

Bootstrap是最受欢迎的前端框架之一，它可以帮助开发人员快速创建响应式的，移动优先，美观的网页。本文将介绍如何使用Bootstrap4创建一个简单的网页。

准备工作

在使用Bootstrap4之前，您需要引入它的样式和脚本文件到您的HTML文件中。您可以在Bootstrap官方网站上下载这些文件，也可以使用CDN（内容分发网络）来引入它们。以下是引入Bootstrap4的代码片段，在<head>标签之间添加：

<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha384-MvP/gvBIWJnuM3cNRgU5irP/ds/t2xye3NvMpkEEZys3hJ5k7oURyc7MHaALphGK" crossorigin="anonymous">

<!-- 引入Bootstrap脚本文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js" integrity="sha384-version-staging+SHA384-J4UgX3UquWvARO+DVKO8+3bdLKsI7gDl3rh6wZprzpzE5C9uk7MnY8uA8VCfGL4d" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-yILFWRfNK/nvLmxCE3R+wf36RlGrIaeW/O1hpg6ke3NAyLHsJFJuGK86dweaCy6q" crossorigin="anonymous"></script>

使用网格系统

Bootstrap的网格系统是其最常用的特性之一，它可以让页面布局更容易和灵活。Bootstrap4的网格系统是基于flexbox的，使用类名来创建排列方式。下面是一个基本的网格系统布局：

<div class="container">
  <div class="row">
    <div class="col-sm-4">1</div>
    <div class="col-sm-4">2</div>
    <div class="col-sm-4">3</div>
  </div>
  <div class="row">
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
  </div>
</div>
  • .container是一个容器，包含了整个网页的内容。
  • .row是一个行，在这个例子中，我们使用两个行来分隔第一排和第二排。注意，每行的列数应该相同。
  • .col-sm-4和.col-sm-6是列，sm代表的是小屏幕尺寸。这里我们创建了三个宽度相等的列和两个宽度相等的列，总共创建了5个列。

创建响应式导航栏

Bootstrap的导航栏组件是另外一个经典的UI组件。它可以让用户方便地浏览和跳转到网站中的不同部分。下面是一个基本的导航栏布局：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
          <a class="nav-link" 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>
        <li class="nav-item">
          <a class="nav-link" href="#">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

在上面的示例中：

  • .navbar是整个导航栏的容器。
  • .navbar-expand-sm是定义在小屏幕上保持导航栏可见的类名。
  • .navbar-dark和.bg-dark是定义导航栏主题颜色和背景颜色的类名。
  • .navbar-brand是网站名称的链接。
  • .navbar-toggler是在小屏幕下隐藏菜单条目并显示一个可折叠的按钮的类名。
  • .navbar-collapse是包装菜单条目的容器。
  • .navbar-nav是包含所有菜单项的ul元素。
  • .nav-item是每个菜单项的容器。
  • .nav-link是每个菜单项的链接。

使用其他Bootstrap组件

除了网格系统和导航栏组件，Bootstrap还提供了许多其他有用的UI组件，比如按钮、卡片、表格、表单、模态框等等。您可以在Bootstrap官方文档中找到这些组件的详细信息和用法。

结论

在本文中，我们介绍了如何使用Bootstrap4创建一个简单的网页。您可以使用其网格系统来创建灵活的布局，并使用导航栏和其他UI组件来建立自己的网站。当然，这只是Bootstrap4的冰山一角。该框架有各种方法和组件来帮助您创造出各种惊人的网站。

Bootstrap4 列表组 Bootstrap4 加载效果