bootstrap入门;bootstrap学习

解决方案简述

对于想要快速构建响应式、移动设备优先的网页，Bootstrap 是一个非常棒的选择。它提供了丰富的CSS样式和组件，以及基于jQuery的JavaScript插件。使用Bootstrap，你可以大大减少从零开始编写CSS的时间，专注于内容创建和功能开发。

获取并引入Bootstrap

方法一：CDN 引入

最简单的方法是直接通过 CDN（内容分发网络）来引入 Bootstrap。只需要在HTML文档的<head>标签中添加以下代码：

html  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

方法二：下载并本地引用

你也可以从官网下载 Bootstrap 的压缩包，解压后将其中的css文件夹复制到你的项目目录下，然后在 HTML 中这样引用：

html <link href="./css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

基础网格系统

Bootstrap 提供了一个强大的栅格系统，可以轻松地创建响应式的布局。下面是一个简单的例子：

html</p>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">Column 1</div>
    <div class="col-sm-6 col-md-4">Column 2</div>
    <div class="col-sm-12 col-md-4">Column 3</div>
  </div>
</div>

<p>

这里我们定义了三个列，它们在小屏幕（sm）上占据一半宽度，在中等屏幕（md）及以上占据三分之一宽度，在更小屏幕上则会自动换行显示为整行。

使用Bootstrap组件

Bootstrap 内置了许多实用的 UI 组件，如按钮、表单、导航栏等。比如要创建一个带有图标的按钮：

html</p>

<button type="button" class="btn btn-primary">
  <span class="bi bi-search"></span> 搜索
</button>

<p>

注意这里的图标来自 Bootstrap Icons 库，你需要单独引入该库才能正常使用图标。

以上只是对 Bootstrap 的初步介绍，随着学习深入，你会发现更多有趣且有用的功能等待探索。