Bootstrap - 概述

引导程序

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

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

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

Bootstrap 的历史

Mark Otto和Jacob Thornton在Twitter开发了 Bootstrap 。2011年8月，Bootstrap作为开源产品在GitHub上发布。

Bootstrap 5及更高版本中的要点

与 Bootstrap 4 相比，Bootstrap 5 中有一些新功能和变化。其中一些值得注意的包括：

文件大小更小：Bootstrap 5.* 的设计更加轻量级，删除了 jQuery 和其他依赖项。它已切换到 Vanilla JavaScript。这会导致更快的加载时间。
改进的网格系统：Bootstrap 5.* 中的网格系统具有新的、更灵活的布局。它引入了新的间隙实用程序，不再依赖于浮动。
更新了默认颜色和主题：Bootstrap 5.* 引入了新的默认调色板和主题。新颜色更加现代且更具视觉吸引力。
改进的表单控件：Bootstrap 5.* 中的表单控件已通过新的样式和选项得到增强。复选框和单选按钮有新的样式，以及改进的自定义选择菜单。
新的帮助程序和实用程序：Bootstrap 5.* 引入了新的实用程序类和帮助程序，例如垂直居中、拉伸链接实用程序等。
改进的文档和可访问性： Bootstrap 5 的文档已更新和改进，使其更易于使用和理解。此外，Bootstrap 5 更注重可访问性，具有更好的 ARIA 支持和改进的键盘导航。

Bootstrap - 优点

使用 Bootstrap 有几个好处：

响应式设计：Bootstrap 采用移动优先的方法构建，这意味着它的设计具有响应性并适应不同的屏幕尺寸。这可确保您的移动应用程序在各种设备（包括智能手机和平板电脑）上看起来良好且运行良好。
节省时间：Bootstrap 提供了各种预定义和可定制的 CSS 和 JavaScript 组件，例如网格、按钮、导航栏和模式。这些即用型组件无需从头开始编写所有代码，从而帮助开发人员节省时间和精力。
一致的外观：借助 Bootstrap，您可以在整个移动应用程序中实现一致且专业的设计。它提供了一组预定义的样式和主题，可以轻松自定义以匹配您的品牌标识。
跨浏览器兼容性：Bootstrap 旨在跨不同的 Web 浏览器良好运行，确保您的移动应用程序能够为用户提供一致的功能，无论他们喜欢使用哪种浏览器。
社区和支持：Bootstrap 拥有一个庞大且活跃的开发人员社区，他们为改进做出了贡献，并通过论坛和在线资源提供支持。如果您在移动应用程序开发过程中遇到任何挑战或有疑问，这会很有帮助。
可访问性：Bootstrap 遵循现代 Web 开发标准和最佳实践，包括可访问性指南。这可确保残障用户可以访问您的移动应用程序，从而增强其可用性和覆盖范围。
持续更新和增强：Bootstrap 定期更新和改进，提供新功能、错误修复和性能增强。通过使用 Bootstrap，您可以利用这些更新来使您的移动应用程序保持最新状态并进行优化。

Bootstrap - 重要的全局变量

让我们研究一下 Bootstrap 如何利用有限数量的关键全局样式和设置，这些样式和设置主要侧重于规范化跨浏览器样式。

HTML5 文档类型

HTML5 文档类型的使用至关重要，没有它，样式将不完整且不合适。

对于 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 的指定框大小：

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

重启

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

CDN的使用

CDN（内容交付网络）是一个服务器网络，可加快数据密集型应用程序的网页加载速度。

如何使用Bootstrap CDN？

请按照以下步骤操作：

构建基本 HTML 文件- 使用您喜欢的代码编辑器创建文件
将文件转换为 Bootstrap 模板-通过 CDN 链接包含Bootstrap CSS CDN和 Bootstrap JS CDN 文件，以及 Popper 和 Bootstrap jQuery
保存并查看文件- 将文件保存为扩展名.html并作为模板。