Bootstrap 组件-列表组

最新推荐文章于 2024-05-15 00:21:36 发布
最新推荐文章于 2024-05-15 00:21:36 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 前端-Bootstrap
1 : 基本列表组    
2 : 徽记    
3 : 链接    
4 : 按钮    
5 : 颜色    

  • 基本列表组


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<ul class="list-group">
  <li class="list-group-item">回锅肉</li>
  <li class="list-group-item">烧烤</li>
  <li class="list-group-item">鱼香肉丝</li>
  <li class="list-group-item">麻婆豆腐</li>
  <li class="list-group-item">夫妻肺片</li>
</ul>
  • 徽记


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<ul class="list-group">
  <li class="list-group-item"><span class="badge">3</span>回锅肉</li>
  <li class="list-group-item"><span class="badge">14</span>烧烤</li>
  <li class="list-group-item"><span class="badge">15</span>鱼香肉丝</li>
  <li class="list-group-item"><span class="badge">92</span>麻婆豆腐</li>
  <li class="list-group-item"><span class="badge">6</span>夫妻肺片</li>
</ul>
  • 链接


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
  <a href="#" class="list-group-item active">
    回锅肉
  </a>
  <a href="#" class="list-group-item">烧烤</a>
  <a href="#" class="list-group-item">鱼香肉丝</a>
  <a href="#" class="list-group-item">麻婆豆腐</a>
  <a href="#" class="list-group-item">夫妻肺片</a>
</div>
  • 按钮


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
  <button type="button" class="list-group-item active">
    回锅肉
  </button>
  <button type="button" class="list-group-item">烧烤</button>
  <button type="button" class="list-group-item">鱼香肉丝</button>
  <button type="button" class="list-group-item">麻婆豆腐</button>
  <button type="button" class="list-group-item">夫妻肺片</button>
</div>
  • 颜色


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
  <a href="#" class="list-group-item active">
    回锅肉
  </a>
  <a href="#" class="list-group-item list-group-item-success">烧烤</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>
</div>

litengbin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 组件：列表组组件（list-group）
WangMin@汪末末
09-07 3133
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。 列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分： 类 状态 list-group 列表组容器，常用的是ul元素，也可以是ol或div元素 l
Bootstrap 组件
武林半侠的博客
06-01 945
Bootstrap 组件   1.字体图标 Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。 可以使用或标签来配合使用，具体如下： //使用小图标 glyphicon glyphicon-star"> glyphicon glyphicon-star"> //也可以结合按钮
Bootstrap系列之列表组（List Group）
老__L的博客
06-15 3281
列表组是用于显示一系列内容的灵活而强大的组件。修改和扩展它们以支持其中的任何内容。最基本的列表组是一个无序列表，包含列表项和适当的类。在此基础上使用以下选项进行构建，或者根据需要使用您自己的CSS。 将添加到项以指示当前的活动选择。 将添加到项中，使其显示为禁用。注意，有些带有的元素也需要自定义JavaScript来完全禁用它们的点击事件(例如，链接)。 通过添加，使用或来创建具有悬停、禁用和活动状态的可操作列表组项。我们分离了这些伪类，以确保由非交互元素(如或)组成的列表组不提供单击或点击可视性。请确保不
Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）
m0_69034993的博客
10-09 2566
除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。
bootstrap下拉列表多选组件_booterstrip多选
最新发布
code8889的博客
05-15 1549
正文和，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种bootstrap mutiselect组件，界面渲染效果略差；再比如select2一些兼容性问题、多选的取值赋值等问题都困扰着博主以及很多园友，项目里面的下拉框很早就替换为今天介绍的这款组件，所以今天介绍给大家，让大家多一个选择也好！说点题外话。
BootStrap4：组件
分享日常工作技术
03-29 1720
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
零基础Bootstrap入门教程(22)--列表组
程序员大阳
03-07 1231
本文目录1. 概述2. 普通列表组3. 将普通链接转换为列表组4. 调整列表项的样式5. 带徽章的列表组6. 添加标题和内容7. 小结 1. 概述 列表组用来显示一组关联的显示元素，Bootstrap提供了可以灵活使用的列表组组件list-group，本篇就来具体演示下。 2. 普通列表组 用list-group类修饰ul元素，使用list-group-item类修饰li元素，即可创建列表组，代码如下： 普通列表组： <ul class="list-group"
Bootstrap4 列表组
weixin_45116096的博客
07-10 226
大部分基础列表组都是无序的。 实例： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https
深入浅析Bootstrap列表组组件
09-02
在实际应用中，列表组可以与其他Bootstrap组件（如按钮、下拉菜单等）结合，构建出更复杂的交互式界面。例如，可以在列表项中嵌入按钮或下拉菜单，以提供更多的操作选项。 总结起来，Bootstrap列表组组件是一个强大...
bootstrap-5.1.3-dist.zip
11-11
2. **预定义组件**：Bootstrap提供了丰富的预构建组件，如导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、按钮组（button group）、卡片（card）等，这些组件简化了网页的开发过程。 3. **CSS样式**：...
bootstrap-select-1.13.14
06-05
在版本 1.13.14 中，这个插件继续致力于提供高效、易用且响应式的下拉选择组件，适用于各种 Web 应用和网站。 Bootstrap Select 的核心功能包括但不限于以下几点： 1. **多选支持**：用户可以选择多个选项，通过复...
React-Bootstrap:用React构建的Bootstrap组件-开源
04-26
React-Bootstrap取代了Bootstrap JavaScript。 每个组件都是作为一个真正的React组件从头开始构建的，没有像jQuery这样的不需要的依赖项。... 结果是一组可以通过普通Bootstrap进行默认访问的组件。
Bootstrap基本组件学习笔记之列表组(11)
09-01
此外，列表组还可以与其他Bootstrap组件结合使用，如按钮、链接、图像等，以实现更丰富的交互和布局。例如，将列表项转换为可点击的按钮或链接，只需添加`.list-group-item-action`类。 ```html ...
Bootstrap的列表组相关知识
昊虹AI笔记
10-20 1350
Bootstrap的列表组相关知识
bootstrap表格分页功能
qq_32871893的博客
08-17 1700
2、后端分页：每次向后台请求页数，也就是每次只查询当前页面加载所需要的那几条数据。1、前端分页：数据库查询所有的数据，也就是数据一次性加载出来，在前端进行分页。
BootStrap笔记-列表组的使用
IT1995的博客
01-24 542
运行截图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> &lt.
Bootstrap 列表组
书香水墨
07-24 2337
一、Bootstrap 列表组 1.1 基础列表组 要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: <div class="container"> <ul class="list-group"> <li class="list-group...
JQ-6 Bootstrap入门到实战；Bootstrap的（优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；项目实践
qq_54075517的博客
07-25 1167
Bootstrap入门到实战；Bootstrap的（优缺点、安装教程、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；小项目实践
bootstrap multiselect下拉列表多选组件[转载]
willeny的博客
08-16 4484
转载地址：http://www.cnblogs.com/landeanfen/p/7457283.html 阅读目录 一、组件开源地址以及API说明 二、组件效果示例 三、使用示例 1、基础示例 2、其他效果示例 3、组件取值赋值 4、组件其他用法 5、组件封装 四、源码下载 五、总结 正文 前言：之前分享过两篇bootstrap下拉框的组件：JS组件系列——两种bootstrap ...
react-bootstrap Table组件使用方法
06-06
React-Bootstrap 是一个基于 Bootstrap 的 React UI 库，提供了一组 React 组件来实现常用的 UI 功能。其中 Table 组件是用于创建表格的。 使用 React-Bootstrap 的 Table 组件，您需要先安装它并在您的项目中导入所需的组件。可以使用 npm 命令进行安装： ``` npm install react-bootstrap ``` 然后在您的组件中导入所需的 Table 组件： ```jsx import { Table } from 'react-bootstrap'; ``` 接下来，您可以在 render 方法中使用 Table 组件来创建表格，并传递所需的数据和选项作为 props。下面是一个基本的例子： ```jsx <Table striped bordered hover> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Doe</td> <td>@johndoe</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>Doe</td> <td>@janedoe</td> </tr> <tr> <td>3</td> <td>Bob</td> <td>Smith</td> <td>@bobsmith</td> </tr> </tbody> </Table> ``` 在这个例子中，我们创建了一个简单的表格，并使用了一些选项，如 `striped`、`bordered` 和 `hover` 来改变表格的外观和行为。您可以根据您的需求使用其他选项，例如 `responsive`、`variant` 等。 您还可以在 Table 组件中添加其他组件，例如 `<thead>`、`<tbody>`、`<tfoot>`、`<tr>`、`<th>` 和 `<td>` 等，来更精细地控制表格的结构和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值