【原】Bootstrap 5 入门教程

进击的iter 2021-12-21

展开全文

Bootstrap 是一个强大的前端框架，用于更快、更轻松地进行 Web 开发。

Bootstrap 使我们能够以更少的工作量创建灵活且响应式的 Web 布局。

Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。

Bootstrap 最初是由 Twitter 的一名设计师和一名开发人员于 2010 年年中创建的。在成为开源框架之前，Bootstrap 被称为 Twitter Blueprint。

提示：我们的 Bootstrap 教程将对每个主题进行易于理解的解释，帮助大家逐步学习 Bootstrap 的基本和高级功能。对于初学者，请从基础开始，然后通过每天学习一点点来逐步前进。

使用 Bootstrap 的优势

如果您对其他前端框架有一定的使用经验，您可能想知道是什么让 Bootstrap 如此特别。以下是 Bootstrap 框架的一些优势：

节省大量时间——可以使用 Bootstrap 预定义设计模板和类，从而节省大量时间和精力，并专注于其他开发工作。
响应式功能— 使用 Bootstrap，您可以轻松创建响应式网站，这些网站在不同设备和屏幕分辨率上显示得更合适，而无需更改标记。
一致的设计——所有 Bootstrap 组件通过一个中央库共享相同的设计模板和样式，因此您的网页的设计和布局将保持一致。
易于使用——Bootstrap 非常易于使用。任何具有 HTML、CSS 和 JavaScript 基本知识的人都可以开始使用 Bootstrap 进行开发。
与浏览器兼容——Bootstrap 是为现代网络浏览器创建的，它与所有现代浏览器兼容，如 Chrome、Firefox、Safari、Internet Explorer 等。
开源- 最好的部分是，它可以完全免费下载和使用。

注意 ： Bootstrap 默认采用移动优先的方式进行响应。Bootstrap 5 是 Bootstrap 的最新、最稳定的版本。所有主要的现代浏览器都支持 Bootstrap 5，例如 Google Chrome、Firefox、Safari、Internet Explorer 10 及更高版本等。

阅读本教程前，您需要了解的知识：

在开始阅读本教程之前，你必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:

Bootstrap5 实例

以下是一个简单的 Bootstrap5 实例：

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一个响应式页面，重置浏览器大小查看效果!</p> </div>
 <div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
        <h3>第一列</h3>
        <p>迹忆客</p>
        <p>分享的是技术，关注的是成长！！！</p>
        </div>
        <div class="col-sm-4">
        <h3>第二列</h3>
        <p>迹忆客</p>
        <p>分享的是技术，关注的是成长！！！</p>
        </div>
        <div class="col-sm-4">
        <h3>第三列</h3>        
        <p>迹忆客</p>
        <p>分享的是技术，关注的是成长！！！</p>
        </div>
    </div></div>

尝试一下