Bootstrap 简明教程
Bootstrap - Overview
Bootstrap
Bootstrap 是一种流行的开源前端框架，可用于创建响应式移动优先网站和 Web 应用。
Bootstrap is a popular open-source front-end framework that is used to create responsive and mobile-first websites and web applications.
它提供了一系列的 CSS 和 JavaScript 组件，例如网格、表单、按钮、导航栏等等，这些组件可以轻松地实现和定制，以创建响应且视觉上吸引人的 Web 界面。
It provides a collection of CSS and JavaScript components, such as grids, forms, buttons, navigation bars, and more, which can be easily implemented and customized to create responsive and visually appealing web interfaces.
借助于 Bootstrap，开发者可以通过利用预先设计的组件以及网格系统创建响应布局，从而节省时间和精力。它还提供众多样式选项和实用工具来增强网站的整体外观和功能。Bootstrap 被 Web 开发人员广泛用于简化 Web 开发流程并创建一致且视觉上吸引人的用户界面。
With Bootstrap, developers can save time and effort by utilizing pre-designed components, as well as the grid system for creating responsive layouts. It also provides numerous styling options and utilities to enhance the overall appearance and functionality of websites. Bootstrap is widely used by web developers to streamline the web development process and create consistent and visually appealing user interfaces.
History of Bootstrap
Mark Otto 和 Jacob Thornton 在 Twitter 开发了 Bootstrap。2011 年 8 月，Bootstrap 以开源产品的形式在 GitHub 上发布。
Mark Otto and Jacob Thornton developed the Bootstrap, at Twitter. In August 2011, Bootstrap was released as an open source product, on GitHub.
Key points in Bootstrap 5 and later versions
与 Bootstrap 4 相比，Bootstrap 5 有很多新功能和变化。其中一些明显的变化包括：
There are several new features and changes in Bootstrap 5 compared to Bootstrap 4. Some of the notable ones include:
Bootstrap - important globals
让我们检查 Bootstrap 如何使用数量有限的关键全局样式和设置，它们主要集中于使跨浏览器样式标准化。
Let’s examine how Bootstrap utilizes a limited number of crucial global styles and settings that are primarily focused on normalizing cross-browser styles.
HTML5 doctype
使用 HTML5 doctype 至关重要，没有它，样式将不完整且不恰当。
HTML5 doctype is crucial to be used, without which the styling will be incomplete and inappropriate.
针对 LTR 方向：
For LTR direction:
<!DOCTYPE html>
<html lang="en">
...
</html>针对 RTL 方向：
For RTL direction:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
...
</html>Viewport meta
Bootstrap 遵循“移动优先”开发方法，其中最初针对移动设备优化代码，然后通过 CSS 媒体查询按需扩展组件。为了确保在所有设备上准确渲染和触摸缩放，必须在网页的 <head> 节中包含响应视口元标记。
Bootstrap follows a "mobile-first" development approach, where the code is initially optimized for mobile devices, and then components are scaled up as needed through CSS media queries. To ensure accurate rendering and touch zooming on all devices, it’s essential to include the responsive viewport meta tag in the <head> section of your webpage.
<meta name="viewport" content="width=device-width, initial-scale=1">Box-sizing
全局 box-sizing 值从 content-box 切换到 border-box ，以在 CSS 中进行广泛调整大小。它确保元素的最终宽度不受 padding 的影响。
The global box-sizing value is switched from content-box to border-box, for extensive sizing in CSS. It ensures that the final width of an element is not affected by the padding.
以下代码将允许所有嵌套元素（包括通过 ::before 和 ::after 生成的元素）该 .selector-for-some-widget 继承指定的 box-sizing ：
The following code will let all the nested elements, including the ones with generated content via ::before and ::after, inherit the specified box-sizing for that .selector-for-some-widget:
.selector-for-some-widget {
box-sizing: content-box;
}