Learning Path

Bootstrap 4 tutorials

Browse tutorials and chapters for Bootstrap 4.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TAXONOMYFrontendFetched/Bootstrap 4

Bootstrap4 教程

Bootstrap4 教程 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。谁适合阅读本教程？只要您具备 HTML 和 ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 信息提示框

Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例 [mycode3 type=..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 徽章（Badges）

Bootstrap4 徽章（Badges）徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 New 测试标题 New 测试标题 New ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 面包屑导航（Breadcrumb）

Bootstrap4 面包屑导航（Breadcrumb）面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 按钮组

Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。可以在 <div> 元素上添加 .btn-group 类来创建按钮组。实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .btn-group-lg|sm 类来设置..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 按钮

Bootstrap4 按钮 Bootstrap 4 提供了不同样式的按钮。实例 [mycode3 type='html'] 基本按钮主要按钮次要按钮成功信息警告危险黑色浅色链接 [/mycode3] 尝试一下 » 按钮类可用于 <a>, <button>, 或 <input> 元素..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 卡片

Bootstrap4 卡片 Bootstrap 4 卡片（Card）组件是一种灵活且强大的内容容器，可以用于显示各种类型的内容，如文本、图像、列表等。卡片组件是 Bootstrap 4 中非常常见的 UI 元素，通常用于展示信息、博客文章、产品或社交媒体帖子等。基本结构卡片组件是由多个嵌套元素组成的，主要包括以下几部分：.card：卡片的最外层容器。.card-body：包含卡片内容的容器，通常用于放置文本、标题或其他元素。...

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 轮播

Bootstrap4 轮播轮播是一个循环的幻灯片：如何创建轮播以下实例创建了一个简单的图片轮播效果：实例 [mycode3 type='html'] [/mycode3] ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 折叠

Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。实例 [mycode3 type='html'] 折叠 Lorem ipsum dolor text.... [/mycode3] 尝试一下 » 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。控..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 颜色

Bootstrap4 颜色 Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: 实例 [mycode3 type='html'..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 下拉菜单

Bootstrap4 下拉菜单 Bootstrap 4 下拉菜单（Dropdown）是一个非常常见的 UI 组件，用于展示一系列可点击的选项或菜单项。 Bootstrap4 下拉菜单通常用于导航栏、表单或其他交互式界面中。基本结构 Bootstrap 4 下拉菜单的核心是 .dropdown 类，它可以嵌套其他元素（如按钮、链接或文本）来触发菜单的显示。菜单项本身使用 .dropdown-menu 类来进行标识，具体选项使用 .d..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 Flex（弹性）布局

Bootstrap4 Flex（弹性）布局 Bootstrap4 通过 flex 类来控制页面的布局。弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程注意：..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 自定义表单

Bootstrap4 自定义表单 Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。自定义复选框如果要自定义一个复选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 <div> 里头，然后复选框设置为 type='checkbox'，类为 .cust..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 输入框组

Bootstrap4 输入框组我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。 Bootstrap4 实例 [mycode3 type='..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 表单控件

Bootstrap4 表单控件 Bootstrap4 支持以下表单控件： input textarea checkbox radio select Bootstrap Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url,..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 表单

Bootstrap4 表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。 Bo..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 网格系统

Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数： table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0px; } table.grid ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 图像形状

Bootstrap4 图像形状圆角图片 .rounded 类可以让图片显示圆角效果：实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 安装使用

Bootstrap4 安装使用我们可以通过以下两种方式来安装 Bootstrap4：使用 Bootstrap 4 CDN。从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用字节跳动静态资源公共库： Bootstrap4 CDN [mycode3 type='html'] [/mycode3] ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 Jumbotron

Bootstrap4 Jumbotron Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。我们可以通过在 <div> 元素中添加 .jumbotron 类来创建 jumbotron: 实例 [mycode3 type='html'] ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 列表组

Bootstrap4 列表组大部分基础列表组都是无序的。要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: 实例 [mycode3 type='html'] First item Second item Third item [/mycode3] ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 创建一个网页

Bootstrap4 创建一个网页接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 [mycode3 type='html'] 我的第一个 Bootstrap 4 页面重置浏览器窗口大小查看效果！ ..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 多媒体对象

Bootstrap4 多媒体对象 Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: 实例 [mycode3 type='html'] 菜鸟教..

TUTORIALFrontendFetched/Bootstrap 4

Bootstrap4 模态框

Bootstrap4 模态框模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。如何创建模态框以下实例创建了一个简单的模态框效果：实例 [mycode3 type='html'] 打开模态框模态框头部 &am..