Bootstrap5 教程 | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
Bootstrap5 教程
Bootstrap5 教程
Bootstrap5 安装使用
Bootstrap5 容器
Bootstrap5 网格系统
Bootstrap5 文字排版
Bootstrap5 颜色
Bootstrap5 表格
Bootstrap5 图像形状
Bootstrap5 Jumbotron
Bootstrap5 信息提示框
Bootstrap5 按钮
Bootstrap5 按钮组
Bootstrap5 徽章
Bootstrap5 进度条
Bootstrap5 加载效果
Bootstrap5 分页
Bootstrap5 列表组
Bootstrap5 卡片
Bootstrap5 下拉菜单
Bootstrap5 折叠
Bootstrap5 导航
Bootstrap5 导航栏
Bootstrap5 轮播
Bootstrap5 模态框
Bootstrap5 提示框
Bootstrap5 弹出框
Bootstrap5 滚动监听
Bootstrap5 侧边栏导航
Bootstrap5 小工具
Bootstrap5 Flex
Bootstrap5 表单
Bootstrap5 表单
Bootstrap5 下拉菜单
Bootstrap5 复选框与单选框
Bootstrap5 选择区间
Bootstrap5 输入框组
Bootstrap5 表单浮动标签
Bootstrap5 表单验证
Bootstrap5 安装使用
Bootstrap5 教程
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
谁适合阅读本教程？
只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。
阅读本教程前，您需要了解的知识：
在您开始阅读本教程之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:
HTML 教程
CSS 教程
JavaScript 教程
为什么使用 Bootstrap
容易上手：只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。
响应式设计：Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。
移动优先：在 Bootstrap 中，自适应移动端是框架的核心部分。
浏览器兼容性：Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。 如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。
Bootstrap5 实例
以下是一个简单的 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>
尝试一下 »
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 添加新功能。
Bootstrap5 安装使用
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
Matplotlib imre...
·
Matplotlib imsa...
·
Matplotlib imsh...
·
Matplotlib 直方图
·
Python object()...
·
Python AI 绘画
·
神辅助 Cursor ...
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2023 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注