推荐阅读
  • Bootstrap4 创建一个网页

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

  • Bootstrap4 表格

    Bootstrap4 表格 Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: 实例 [mycode3 type='html'] Firstname Lastname Email

  • Bootstrap4 表单

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

  • Bootstrap4 文字排版

    Bootstrap4 文字排版 Bootstrap 4 默认设置 Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。 默认的 font-family 为 'Helvetica Neue', Helvetica, Arial, sans-serif。 此外,所有的 <p> 元素 margin

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

  • Bootstrap4 卡片

    Bootstrap4 卡片 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下: 实例 [mycode3 type='html'] 简单的卡片 [/mycode3] 尝试一下 » Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

  • Bootstrap4 分页

    Bootstrap4 分页 网页开发过程,如果碰到内容过多,一般都会做分页处理。 Bootstrap 4 可以很简单的实现分页效果。 要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类:: 实例 [mycode3 type='html&#039

  • Bootstrap4 折叠

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

Bootstrap4 面包屑导航

面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中的 ::before 和 content 来添加,下面所示的 class 自动被添加:

.breadcrumb-item + .breadcrumb-item::before {

  display: inline-block;

  padding-right: 0.5rem;

  color: #6c757d;

  content: "/";

}

<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

我们也可以不用列表形式:


<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图