Bootstrap5 教程学习笔记

引言

Bootstrap是一个流行的前端开发框架，早在2011年就被Twitter发布。它提供了一套易于使用的HTML，CSS和JavaScript组件，可以帮助开发者快速构建美观且响应式的网站。

Bootstrap5是Bootstrap系列的最新版本，其相较于前一个版本，在外观和性能上有了很大的改进。这份教程将介绍Bootstrap5的基础知识，以及如何使用它来创建漂亮的Web应用程序。

布局

在Bootstrap5中，您可以使用容器（container）、行（row）和列（column）来创建响应式页面布局。

容器

容器（container）是一个固定宽度的框，用于包含网页内容。Bootstrap5提供了两种容器类型：.container和.container-fluid。

.container：容器具有固定的最大宽度，并在大屏幕设备上水平居中对齐。它的宽度会随着屏幕尺寸的变化而改变。
.container-fluid：容器的宽度覆盖整个视口。

使用示例：

htmlCopy Code
<div class="container">
  <!-- 网页内容 -->
</div>

<div class="container-fluid">
  <!-- 网页内容 -->
</div>

行

行（row）是容器的直接子元素，用于定义列的组合。Bootstrap5中的行有以下特点：

行必须包含一或多个列。
列会在行中水平排列。
行和列具有负边距，以消除边框间的间隙。

使用示例：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col">列1</div>
    <div class="col">列2</div>
  </div>
</div>

列

列（column）是行中的子元素，用于控制内容的宽度和排列方式。在Bootstrap5中，列使用了Flexbox布局。

使用示例：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col">默认宽度</div>
    <div class="col-6">占据一半宽度</div>
    <div class="col-3">占据四分之一宽度</div>
  </div>
</div>

组件

Bootstrap5提供了许多易于使用的HTML、CSS和JavaScript组件，包括导航、警告框、按钮、表单等。这些组件可以帮助开发者快速构建漂亮且功能强大的Web应用程序。

导航栏

导航栏（navbar）是一种用于导航网页的组件，通常位于页面的头部。

使用示例：

htmlCopy Code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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>
    </ul>
  </div>
</nav>

警告框

警告框（alert）用于向用户显示重要的提示信息。

使用示例：

htmlCopy Code
<div class="alert alert-success" role="alert">
  成功提示信息。
</div>

按钮

按钮（button）是一种用于执行操作的组件，可以与链接、表单一起使用。

使用示例：

htmlCopy Code
<button type="button" class="btn btn-primary">Primary</button>
<a href="#" class="btn btn-secondary">Secondary</a>
<input type="submit" class="btn btn-danger" value="Danger">

表单

表单（form）是一种用于收集用户信息的组件，包括输入框、下拉列表、单选框、多选框等。

使用示例：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入Email地址">
    <small id="emailHelp" class="form-text text-muted">我们将保护您的隐私。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

结论

Bootstrap5是一个功能强大而易于使用的前端开发框架，提供了许多实用的组件和布局工具，可以帮助开发者快速构建美观且响应式的网站。掌握Bootstrap5的基础知识，您将能够更轻松地创建自己的Web应用程序。