Bootstrap5教程Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的WEB项目。Bootstrap5目前是Bootstrap的最新版本，是一套用于HTML、CSS和JS开发的开源工具集。它支持Sass变量和mixins、响应式网格系统、大量的预建组件和强大的JavaScript插件，助你快速设计和自定义响应式、移动设备优先的站点。谁适合阅读本教程？只要您具备HTML和CSS的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用Bootstrap开发Web项目的中等水平。阅读本教程前，您需要了解的知识：在您开始阅读本教程之前，
Bootstrap4创建一个网页接下来我们通过Bootstrap4来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htmHTML代码divclass="jumbotrontext-center"style="margin-bottom:0">h1>我的第一个Bootstrap4页面h1>p>重置浏览器窗口大小查看效果！p>div>navclass="navbarnavbar-expand-smbg-darknavbar-dark">aclass="navbar-
Bootstrap4创建一个网页接下来我们通过Bootstrap4来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htmHTML代码divclass="jumbotrontext-center"style="margin-bottom:0">h1>我的第一个Bootstrap4页面h1>p>重置浏览器窗口大小查看效果！p>div>navclass="navbarnavbar-expand-smbg-darknavbar-dark">aclass="navbar-
Bootstrap4多媒体对象Bootstrap提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加.media类，然后将多媒体内容放到子容器上，子容器需要添加.media-body类，然后添加外边距，内边距等效果:实例divclass="mediaborderp-3">imgdecoding="async"src="mobile-icon.png"alt="JohnDoe"class="mr-3mt-3rounded-circle"style="width:60px;">divclass="media
Bootstrap4多媒体对象Bootstrap提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加.media类，然后将多媒体内容放到子容器上，子容器需要添加.media-body类，然后添加外边距，内边距等效果:实例divclass="mediaborderp-3">imgdecoding="async"src="mobile-icon.png"alt="JohnDoe"class="mr-3mt-3rounded-circle"style="width:60px;">divclass="media
Bootstrap4Flex（弹性）布局Bootstrap4通过flex类来控制页面的布局。弹性盒子(flexbox)Bootstrap3与Bootstrap4最大的区别就是Bootstrap4使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是CSS3的一种新的布局模式，更适合响应式的设计，如果你还不了解flex，可以阅读我们的CSS3弹性盒子(FlexBox)教程注意：IE9及其以下版本不支持弹性盒子，所以如果你需要兼容IE8-9，请使用Bootstrap3。以下实例使用d-flex类创建一个弹性盒子容器，并设置三个弹性子元素：实例divclass="d-flexp-3bg-seconda
Bootstrap4Flex（弹性）布局Bootstrap4通过flex类来控制页面的布局。弹性盒子(flexbox)Bootstrap3与Bootstrap4最大的区别就是Bootstrap4使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是CSS3的一种新的布局模式，更适合响应式的设计，如果你还不了解flex，可以阅读我们的CSS3弹性盒子(FlexBox)教程注意：IE9及其以下版本不支持弹性盒子，所以如果你需要兼容IE8-9，请使用Bootstrap3。以下实例使用d-flex类创建一个弹性盒子容器，并设置三个弹性子元素：实例divclass="d-flexp-3bg-seconda
Bootstrap4小工具Bootstrap4提供了一些小工具，可以让我们不用写CSS代码就能实现想要的效果。边框使用border类可以添加或移除边框:实例spanclass="border">span>spanclass="borderborder-0">span>spanclass="borderborder-top-0">span>spanclass="borderborder-right-0">span>spanclass="borderborder-bottom-0">span>spanclass="borderborder-left-0">span>尝试一下»边框颜色Bootstr
Bootstrap4小工具Bootstrap4提供了一些小工具，可以让我们不用写CSS代码就能实现想要的效果。边框使用border类可以添加或移除边框:实例spanclass="border">span>spanclass="borderborder-0">span>spanclass="borderborder-top-0">span>spanclass="borderborder-right-0">span>spanclass="borderborder-bottom-0">span>spanclass="borderborder-left-0">span>尝试一下»边框颜色Bootstr
Bootstrap4滚动监听(Scrollspy)滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。如何创建滚动监听以下实例演示了如何创建滚动监听：实例可滚动区域-->bodydata-spy="scroll"data-target=".navbar"data-offset="50">Thenavbar-Theelementsareusedtojumptoasectioninthescrollablearea-->navclass="navbarnavbar-expand-smbg-darknavbar-darkfix
