爱学习网
Copyright © 2022
学习 Bootstrap4
  • 爱学习公众号

    关注爱学习公众号

  • 扫码手机阅读更方便

栏目
推荐阅读
  • Bootstrap4 导航栏

    Bootstrap4 导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class='navbar-nav' 类。 然后在 &a

  • Bootstrap4 教程

    Bootstrap4 教程 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出

  • Bootstrap4 面包屑导航

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

  • Bootstrap4 Jumbotron

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

  • Bootstrap4 信息提示框

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

  • Bootstrap4 下拉菜单

    Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 实例 [mycode3 type='html'] Dropdown button Link 1 Link 2 Link 3 [/mycode3] 尝试一下 &

  • Bootstrap4 轮播

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

  • Bootstrap4 导航

    Bootstrap4 导航 如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: 实例 [mycode3 type='html'] Link Link

  • Bootstrap4 按钮组

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

  • Bootstrap4 图像形状

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

Bootstrap4 进度条

进度条可以显示用户任务的完成过程。

创建一个基本的进度条的步骤如下：

  • 添加一个带有 .progress 类的 <div>。
  • 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

进度条高度

进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：


<div class="progress" style="height:20px;">
  <div class="progress-bar" style="width:40%;"></div>
</div>

进度条标签

可以在进度条内添加文本，如进度的百分比：


<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

不同颜色的进度条

默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条：


<div class="progress">
  <div class="progress-bar bg-success" style="width:40%"></div>
</div>
 
<div class="progress">
  <div class="progress-bar bg-info" style="width:50%"></div>
</div>
 
<div class="progress">
  <div class="progress-bar bg-warning" style="width:60%"></div>
</div>
 
<div class="progress">
  <div class="progress-bar bg-danger" style="width:70%"></div>
</div>

条纹的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条：


<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

动画进度条

使用 .progress-bar-animated 类可以为进度条添加动画：


<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>

混合色彩进度条

进度条可以设置多种颜色：


<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图