Bootstrap - 概述

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 和其他依赖项。它已切换到原生 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 并通过论坛和在线资源提供支持做出了贡献。如果您在移动应用程序的开发过程中遇到任何挑战或有任何疑问，这将非常有帮助。
可访问性：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

全局box-sizing值从content-box切换到border-box，用于 CSS 中的扩展大小。它确保元素的最终宽度不受padding的影响。

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

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

重置样式

为了纠正各种浏览器和设备之间存在的不一致性，请使用重置样式。这将改进跨浏览器渲染。

使用 CDN

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

如何使用 Bootstrap CDN？

请按照以下步骤操作：

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

打印页面