主要内容:实例,实例,闪烁的加载效果,实例,设置加载效果大小,实例,加载按钮,实例要创建加载中效果可以使用 .spinner-border 类: 实例 <div class="spinner-border"></div> 可以使用文本颜色类设置不同的颜色: 实例 <div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div> <div class="spi
主要内容:实例,进度条高度,实例,进度条标签,实例,不同颜色的进度条,实例,条纹的进度条,实例,动画进度条,实例,混合色彩进度条,实例进度条可以显示用户任务的完成过程。 创建一个基本的进度条的步骤如下: 添加一个带有 .progress 类的 <div>。 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。 添加一个带有百分比表示的宽度的 style 属性,例如 style="width:70%" 表示进度条在 70% 的位置。 实例 <d
主要内容:实例,各种颜色类型的徽章,实例,药丸形状徽章,实例,徽章插入到元素内,实例徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化: 实例 <h1>测试标题 <span class="badge badge-secondary">New</span></h1> <h2>测试标题 <span cla
主要内容:实例,实例,垂直按钮组,实例,内嵌按钮组及下拉菜单,实例,拆分按钮下拉菜单,实例,垂直按钮组及下拉菜单,实例,多个按钮组,实例Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 实例 <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="b
主要内容:实例,实例,按钮设置边框,实例,不同大小的按钮,实例,块级按钮,实例,激活和禁用的按钮,实例,加载按钮,实例Bootstrap 4 提供了不同样式的按钮。 实例 <button type="button" class="btn">基本按钮</button> <button type="button" class="btn btn-primary">主要按钮</button> <button type="button" class="btn btn-secondary">次要按钮</bu
主要内容:实例,提示框添加链接,实例,关闭提示框,实例,提示框动画,实例Bootstrap 4 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例 <div class="alert ale
主要内容:实例,全屏幕的 Jumbotron,实例Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。 提示: Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。 我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron: 实例 <div class="jumbotron"> <h1>小牛知识库</h1> <p>学的不仅是技术,更是梦想
主要内容:圆角图片,实例,椭圆图片,实例,缩略图,实例,图片对齐方式,实例,图片居中,实例,响应式图片,实例圆角图片 .rounded 类可以让图片显示圆角效果: 实例 <img decoding="async" src="cinqueterre.jpg" class="rounded" alt="Cinque Terre"> 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 <img decoding="async" src="cinqueterre.jpg" class
主要内容:Bootstrap4 基础表格,实例,条纹表格,实例,带边框表格,实例,鼠标悬停状态表格,实例,黑色背景表格,实例,黑色条纹表格,实例,鼠标悬停效果 - 黑色背景表格,实例,无边框表格,实例,指定意义的颜色类,实例,表头颜色,实例,较小的表格,实例,响应式表格,实例,实例Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: 实例 <table class="table"> <thead> <tr> <th>Firstname</t
主要内容:实例,实例,背景颜色,实例Bootstrap 4 提供了一些有代表意义的颜色类:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: 实例 <div class="container"> <h2>
主要内容:Bootstrap 4 默认设置,<h1> - <h6>,实例,实例,<small>,实例,<mark>,实例,<abbr>,实例,<blockquote>,实例,<dl>,实例,<code>,实例,<kbd>,实例,<pre>,实例,更多排版类Bootstrap 4 默认设置 Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。 默认的 font-family 为 "Helvetica Neue", Helvetica, Arial
主要内容:网格类,Bootstrap 4 网格的基本结构,Bootstrap4 网格基本结构,实例,实例,实例,平板和桌面端,实例,平板、桌面、大桌面显示器、超大桌面显示器,实例,偏移列,实例Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。 我们也可以根据自己的需要,定义列数: 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 Bootstrap 4 的网格系统是响应式的
主要内容:Bootstrap4 CDN,创建第一个 Bootstrap 4 页面,容器类,两个 Bootstrap 4 页面,Bootstrap4 .container 实例,Bootstrap4 .container-fluid 实例我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 Staticfile CDN 上的库: Boot
主要内容:谁适合阅读本教程?,阅读本教程前,您需要了解的知识:,Bootstrap4 实例,Bootstrap4 实例,Bootstrap4 与 Bootstrap3Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者
主要内容:实例,提示框添加链接,实例,关闭提示框,实例,提示框动画,实例Bootstrap 5 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例 <div class="alert ale