小白教程
所有教程
关于
Search
108.162.216.34
108.162.216.34
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 教程”的源代码
本页内容
下一节:
Bootstrap5_安装使用
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 教程}}[[Category:Bootstrap 5 教程|1]] = Bootstrap5 教程 = Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目,其由Twitter内部孵化并开源,有着非常多的第三方组件<ref>https://github.com/search?q=Bootstrap</ref>。 Bootstrap 5 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件,可以帮组你快速设计和自定义响应式、移动设备优先的站点。 == 谁适合阅读本教程? == 只要您具备 HTML 和 CSS 的基础知识,您就可以阅读本教程,进而开发出自己的网站。在您学习完本教程后,您即可达到使用 Bootstrap 开发 Web 项目的中等水平。 == 阅读本教程前,您需要了解的知识: == 在您开始阅读本教程之前,您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念,那么建议您先阅读我们的这些教程: * [[HTML 教程]] * [[CSS 教程]] * [[JavaScript 教程]] == 为什么使用 Bootstrap == * '''容易上手:'''只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。 * '''响应式设计:'''Bootstrap 可以根据不同平台(手机、平板电脑和台式机)进行调整。 * '''移动优先:'''在 Bootstrap 中,自适应移动端是框架的核心部分。 * '''浏览器兼容性:'''Bootstrap 5 兼容所有主流浏览器(Chrome、Firefox、Edge、Safari 和 Opera)。 如果您需要支持 IE11 及以下版本,请使用 Bootstrap4 或 Bootstrap3。 == Bootstrap5 实例 == 以下是一个简单的 Bootstrap5 实例: == Bootstrap5 实例 == <sample title="" desc="" lang="html" hererun="1"> <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> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <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> </body> </html> </run> == Bootstrap5 与 Bootstrap 3 & 4 == Bootstrap5 是 Bootstrap 的最新版本,使用了新组件、更快的样式表以及拥有更快的响应能力。 Bootstrap5 支持所有主要的最新稳定版本浏览器,但不支持 Internet Explorer 11 及以下版本。 Bootstrap5 和 Bootstrap 3 & 4 的主要区别在于 Bootstrap5 不再依赖 jQuery,使用了原生的 [[js tutorial|JavaScript]],当然我们如果要想用也可以引入 '''jQuery'''。 Bootstrap5 IE11 以下版本的浏览器,Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持。如果需要对旧版本浏览器兼容,那么请使用 [[bootstrap tutorial|Bootstrap3]]。 <blockquote>'''注意:'''目前官方团队仍然在维护 Bootstrap 3 和 Bootstrap 4 ,我们可以继续使用它们, 但是,不会向 Bootstrap 3 & 4 添加新功能。 </blockquote>
返回至“
Bootstrap5 教程
”。
下一节:
Bootstrap5_安装使用