推荐阅读
  • Bootstrap4 按钮组

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

  • Bootstrap4 模态框

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

  • Bootstrap4 表格

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

  • Bootstrap4 教程

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

  • Bootstrap4 卡片

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

  • Bootstrap4 提示框

    Bootstrap4 提示框 提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-toggle='tooltip' 来来创建提示框。 title 属性的内容为提示框显示的内容: [mycode3 type='html'] 鼠标移动到我这 [/mycode3] 注意: 提示框要写

  • Bootstrap4 折叠

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

  • Bootstrap4 下拉菜单

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

  • Bootstrap4 Jumbotron

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

  • Bootstrap4 导航栏

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

Bootstrap4 列表组

大部分基础列表组都是无序的。

要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:


<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

激活状态的列表项

通过添加 .active 类来设置激活状态的列表项:


<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

禁用的列表项

.disabled 类用于设置禁用的列表项:


<ul class="list-group">
  <li class="list-group-item disabled">Disabled item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

链接列表项

要创建一个链接的列表项,可以将 <ul> 替换为 <div><a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

多种颜色列表项

列表项目的颜色可以通过以下列来设置: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-darklist-group-item-light:


<ul class="list-group">
  <li class="list-group-item list-group-item-success">成功列表项</li>
  <li class="list-group-item list-group-item-secondary">次要列表项</li>
  <li class="list-group-item list-group-item-info">信息列表项</li>
  <li class="list-group-item list-group-item-warning">警告列表项</li>
  <li class="list-group-item list-group-item-danger">危险列表项</li>
  <li class="list-group-item list-group-item-primary">主要列表项</li>
  <li class="list-group-item list-group-item-dark">深灰色列表项</li>
  <li class="list-group-item list-group-item-light">浅色列表项</li>
</ul>

链接的多种颜色列表项


<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
    <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
    <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
    <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
    <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
    <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
    <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
    <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
    <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
</div>
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图