Bootstrap 简明教程

Bootstrap - Overview

Bootstrap 是一种流行的开源前端框架，可用于创建响应式移动优先网站和 Web 应用。

它提供了一系列的 CSS 和 JavaScript 组件，例如网格、表单、按钮、导航栏等等，这些组件可以轻松地实现和定制，以创建响应且视觉上吸引人的 Web 界面。

借助于 Bootstrap，开发者可以通过利用预先设计的组件以及网格系统创建响应布局，从而节省时间和精力。它还提供众多样式选项和实用工具来增强网站的整体外观和功能。Bootstrap 被 Web 开发人员广泛用于简化 Web 开发流程并创建一致且视觉上吸引人的用户界面。

Mark Otto 和 Jacob Thornton 在 Twitter 开发了 Bootstrap。2011 年 8 月，Bootstrap 以开源产品的形式在 GitHub 上发布。

与 Bootstrap 4 相比，Bootstrap 5 有很多新功能和变化。其中一些明显的变化包括：

使用 Bootstrap 有很多好处：

让我们检查 Bootstrap 如何使用数量有限的关键全局样式和设置，它们主要集中于使跨浏览器样式标准化。

使用 HTML5 doctype 至关重要，没有它，样式将不完整且不恰当。

针对 LTR 方向：

    <!DOCTYPE html>
    <html lang="en">
      ...
    </html>

针对 RTL 方向：

    <!DOCTYPE html>
    <html lang="ar" dir="rtl">
      ...
    </html>

Bootstrap 遵循“移动优先”开发方法，其中最初针对移动设备优化代码，然后通过 CSS 媒体查询按需扩展组件。为了确保在所有设备上准确渲染和触摸缩放，必须在网页的 <head> 节中包含响应视口元标记。

    <meta name="viewport" content="width=device-width, initial-scale=1">

全局 box-sizing 值从 content-box 切换到 border-box ，以在 CSS 中进行广泛调整大小。它确保元素的最终宽度不受 padding 的影响。

以下代码将允许所有嵌套元素（包括通过 ::before 和 ::after 生成的元素）该 .selector-for-some-widget 继承指定的 box-sizing ：

    .selector-for-some-widget {
        box-sizing: content-box;
      }

为了纠正跨不同浏览器和设备的不一致性，请使用 reboot 。这将改善跨浏览器渲染。

CDN ，内容分发网络，是一个服务器网络，用于加快数据密集型应用程序的网页加载速度。

按照以下步骤操作：