bootstrap 5 教程——迹忆客-ag捕鱼王app官网

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 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:

• html 教程
• css 教程
• javascript 教程

bootstrap5 实例

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

    
    
这是一个响应式页面，重置浏览器大小查看效果!
 

 

    

        

        
第一列
        
迹忆客
        
分享的是技术，关注的是成长！！！
        
        

        
第二列
        
迹忆客
        
分享的是技术，关注的是成长！！！
        
        

        
第三列
        
        
迹忆客
        
分享的是技术，关注的是成长！！！
        
    

本教程涵盖的内容

这个 bootstrap 教程系列涵盖了 bootstrap 框架的所有功能。

从基础开始

• 网格系统
• 排版样式机制
• 表单样式方法
• 表格
• 列表
• 图像

此外，您将学习如何利用现成的 bootstrap 组件

• 列表组
• 输入组
• 按钮组
• 卡片
• 导航栏
• 面包屑
• 分页
• 标签和徽章
• 进度条

以及如何自定义它们以创建它们的不同变体。

最后，您将探索 bootstrap 的一些高级功能，

• 创建模态窗口
• 动态选项卡
• 工具提示
• 警报
• 手风琴菜单
• 轮播
• scrollspy

以及如何使用可用选项和方法自定义它们或扩展其现有功能.

提示 ：本教程的每一章都包含大量真实示例，可以使用尝试和测试这些示例。这些示例将帮助我们更好地理解概念或主题。

bootstrap5 与 bootstrap 3 & 4

bootstrap5 是 bootstrap 的最新版本，使用了新组件、更快的样式表以及拥有更快的响应能力。

bootstrap5 支持所有主要的最新稳定版本浏览器，但不支持 internet explorer 11 及以下版本。

bootstrap5 和 bootstrap 3 & 4 的主要区别在于 bootstrap5 不再依赖 jquery，使用了原生的 javascript，当然我们如果要想用也可以引入 jquery。

bootstrap5 ie11 以下版本的浏览器，bootstrap4 放弃了对 ie8 以及 ios 6 的支持。如果需要对旧版本浏览器兼容，那么请使用 bootstrap3。

注意 ：目前官方团队仍然在维护 bootstrap 3 和 bootstrap 4 ，我们可以继续使用它们， 但是，不会向 bootstrap 3 & 4 添加新功能。