推荐阅读
  • Bootstrap4 小工具

    Bootstrap4 小工具 Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例

  • Bootstrap4 分页

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

  • Bootstrap4 输入框组

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

  • 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 面包屑导航

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

  • 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

  • Bootstrap4 表格

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

  • Bootstrap4 多媒体对象

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

  • Bootstrap4 教程

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

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地图