什么是 Bootstrap

Bootstrap 是一个免费的开源 CSS 框架，使得前端 Web 开发变得更加简单。

简介： 它使我们的 HTML 内容看起来很漂亮（或者至少不那么难看）。

让我们从 HTML 开始

<h1>Hello world</h1>

<h3>This is a table</h3>

<table>
    <thead>
        <tr>
            <th>fruit</th>
            <th>price</th>
            <th>country</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>apple</td>
            <td>4</td>
            <td>sg</td>
        </tr>
        <tr>
            <td>apple</td>
            <td>5</td>
            <td>hk</td>
        </tr>
        <tr>
            <td>orange</td>
            <td>6</td>
            <td>cn</td>
        </tr>
        <tr>
            <td>pear</td>
            <td>7</td>
            <td>my</td>
        </tr>
    </tbody>
</table>

<h3>This is a form</h3>

<div>
    Name: <input type="text">
    Age: <input type="text">
    <button>Submit</button>
</div>

这看起来像什么：

让我们让它不那么丑陋。

注意 — 将其另存为index.html 在您计算机上的某个位置，然后使用浏览器打开文件路径（例如 C:/users/test/some/path/index.html）。

第一步——注入 Bootstrap

将此行添加到 HTML 文件的顶部。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

这是一个CDN地址。

把它放在你的 HTML 文件的顶部等同于导入 Bootstrap 中你所需要的大部分文件。

你可以使用这个链接，或者你可以搜索一个不同的链接（网上有很多链接可以做同样的事情）

第二步——向我们的 HTML 元素添加 class

• class="table table-bordered table-striped" 添加到 table
• class="form-control" 添加到 inputs
• class="btn btn-outline-primary" 添加到 button

这些 class 直接告诉 Bootstrap 如何设置 HTML 元素的样式。现在看起来像什么：

是的，它看起来比之前的稍微舒服一些。

只需将 class 添加到我们的 HTML 元素中，就可以使它们看起来完全不同，因为 Bootstrap 发挥了它的魔力。

让我们添加更多 class 以使其看起来更加美观。

继续优化

• 在所有Html元素最外围添加了一个 div 元素
• class="card mx-5 px-4 my-3 py-3 w-25" 添加到 div

现在的样子：

结论

我们还可以做更多的工作来使这个页面看起来更好。

Bootstrap 使用起来比我们许多人想象的要简单。

在官方文档中可以找到更多关于 Bootstrap 的内容：

https://getbootstrap.com/docs/5.3/components/buttons/

希望这对您了解 Bootstrap 有所帮助！