bootstrap --- > 表格

最新推荐文章于 2024-04-13 04:51:15 发布
最新推荐文章于 2024-04-13 04:51:15 发布
阅读量521 收藏
点赞数
分类专栏： bootstrap 文章标签： 方便查询

在这里插入图片描述
几个可选类:
.table-bordered: 为表格加上边框

.table-striped: 为表格加上斑马效果

.table-hover: 鼠标悬停在表格行上时展现不同得颜色

.table-condensed: 更为紧凑的表格样式

// 导入样式,从bootstrap官网导入CDN
// HEAD
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" 
		  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
		  crossorigin="anonymous">
// HTML
	<table class="table table-bordered table-hover">
	<tr class="danger">
		<th>#</th>
		<th>姓</th>
		<th>名</th>
		<th>昵称</th>
	</tr>
	<tr class="active">
		<td>1</td>
		<td>李</td>
		<td>四</td>
		<td>拉里</td>
	</tr>
	<tr>
		<td>2</td>
		<td>王</td>
		<td>五</td>
		<td>博德</td>
	</tr>
</table>

// 使表格成为响应式
// 将表格包裹在一个class="table-responsive"的元素中
<div class="table-responsive">
    <div class="table"> ... </table>
</div>

选项

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 
		integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body style="margin:15px;">

<ul class="list-group">
	<li class="list-group-item"><a href="#">选项一</a></li>
	<li class="list-group-item"><a href="#">选项二</a></li>
	<li class="list-group-item"><a href="#">选项三</a></li>
	<li class="list-group-item"><a href="#">选项四</a></li>
</ul>

</body>
</html>

将其他的元素展开成列表的样子

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 
		integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body style="margin:20px;">

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">紫薯布丁1</h4>
		<p class="list-group-item-text">紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">紫薯布丁2</h4>
		<p class="list-group-item-text">紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁</p>
	</a>
</div>
		
		
</body>
</html>

为列表组增加标记

在这里插入图片描述

<ul class="list-group">
	<li class="list-group-item">
		<span class="badge">14</span>
		紫薯布丁的价格
	</li>
	<li class="list-group-item active">
		<span class="badge">12</span>
		布丁紫薯的价格
	</li>
</ul>

参考《CSS高效开发实战》 P155~P157 、 P173~P174

栗子好好吃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 表格
书香水墨
07-23 889
一、Bootstrap 表格 基于Bootstrap4 == 1.1 表格元素== Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素 元素 描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素（<tr>），用来标识表格列。 <tbody> 表...
Bootstrap实现边框表格效果
qq_37555524的博客
09-20 1695
Bootstrap实现边框表格效果 通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示： <!DOCTYPEhtml> <...
bootstrapTable的使用及表格的导出_bootstraptable 导出
最新发布
2401_84240554的博客
04-13 1125
有toolbar：的样式无toolbar：的样式（2）sidePagination："client"或 “server”：分页方式：client客户端分页，server服务端分页（*）**client客户端分页：**如果是客户端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中没有pageSize和PageNumber这两个属性；server服务端分页：如果是r服务端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中必须有pageSize和PageNumber这两个属性；
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9379
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
Bootstrap - 【echart】 统计图表基本使用（一）
Mr_WoLong
07-04 2179
Bootstrap是一个流行的前端框架，而ECharts是一个流行的可视化库。 Bootstrap可以用来设计网站和应用程序的用户界面，而ECharts可以用来创建交互式和可视化的图表
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap-editable.zip
07-27
可编辑bootstrap-table及相关组件：bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css； 配合起来，可以实现可编辑bootstrap-table列表。代码实现： ...
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
bootstrap-table插件：bootstrap-editable,可编辑下拉框，以及代码实例,
将bootstrap-table表格翻译为中文
03-04
1、使用boostrap-table,表格为英文，使用此js翻译为中文。 2、免费下载，希望大家爱上学习。 3、后面会出一个boostrap-tableb表格的简单使用。
bootstrap-table+treegrid实现树形表格
10-16
主要为大家详细介绍了bootstrap-table+treegrid实现树形表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【Java 进阶篇】深入了解 Bootstrap 表格和菜单
繁依Fanyi的博客
10-21 905
表格是用于展示和组织数据的常见元素，它们通常由行和列组成，每个单元格中包含信息。Bootstrap 提供了一系列表格样式，使表格看起来漂亮、一致且易于阅读。菜单是网页上的导航元素，用于帮助用户浏览和导航到不同的页面或功能。Bootstrap 提供了多种菜单组件，如导航栏、下拉菜单和标签页，以满足不同导航需求。尽管 Bootstrap 提供了丰富的表格和菜单组件，但您也可以根据需要进行自定义。您可以使用自己的CSS样式或JavaScript来增强这些元素。您可以通过添加自定义CSS样式来改变表格的外观。
Boostrap对HTML的表格的设计和优化
昊虹AI笔记
09-14 927
Boostrap对HTML的表格的设计和优化
零基础Bootstrap入门教程(7)--使用表格
程序员大阳
04-26 3154
表单控件 添加.form-control样式即可将基本表单控件转化为Bootstrap样式 .form-control 应用于表单控件 .input-lg 大号控件 .input-sm 小号控件 Bootstrap基本表单 &amp;lt;form&amp;gt;&amp;lt;!--表单--&amp;gt; &amp;lt;div class=&quot;form-group&quot;&amp;gt;&amp
BootstrapTable简单的使用
FeiSir_PC的博客
03-24 5543
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 本篇文章介绍bootstrap-table的简单的使用（查询，新增，修改，删除），在看之前，需要有一点点bootstrap的基础知识，很多bootstrap的相关知识点就不介绍了，只讲bootstrap-table的相关内容。bootstrap-table 的使用非常简单，只需要像引用JQuery一样将js文件以
echarts
u010004858的专栏
09-21 354
var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山', value: 12}, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {name: '青岛', value: 18}, {na...
可视化项目
YasWestmere的博客
11-24 473
可视化
Bootstrap table表格常用操作 hover提示,动态表格,排序字段自定义获取/自定义排序图标
瑶山的博客
12-26 1850
表格标题提示，hover可显示 tooltip (提示框) 动态创建Table 设置表格标题居中 固定左侧右侧表头 使用data-sortable="true"排序, 自定义获取排序参数
Bootstrap Table数据表格的使用指南，作为一个Java程序员
m0_60388117的博客
03-22 507
其实关于Kafka，能问的问题实在是太多了，扒了几天，最终筛选出44问：基础篇17问、进阶篇15问、高级篇12问，个个直戳痛点，不知道如果你不着急看答案，又能答出几个呢？若是对Kafka的知识还回忆不起来，不妨先看我手绘的知识总结脑图（xmind不能上传，文章里用的是图片版）进行整体架构的梳理梳理了知识，刷完了面试，如若你还想进一步的深入学习解读kafka以及源码，那么接下来的这份《手写“kafka”》将会是个不错的选择。Kafka入门为什么选择KafkaKafka的安装、管理和配置。
bootstrap-suggest 下拉表格
11-13
bootstrap-suggest 是一个基于 Bootstrap 框架的下拉表格插件。它可以帮助我们实现在输入框中输入文字时，自动显示相应的下拉表格供用户选择。 使用 bootstrap-suggest 插件非常简单，首先需要引入相关的 CSS 和 JavaScript 库，然后在输入框中添加相应的属性和事件。 在输入框中，我们可以通过添加 data-toggle="bootstrap-suggest" 属性来启用 bootstrap-suggest 功能。然后，我们还需要设置 data-source 属性来指定下拉表格的数据源。 数据源可以是一个 JavaScript 数组，也可以是一个服务器端的 API 接口。bootstrap-suggest 会根据用户的输入，自动从数据源中过滤出匹配的选项，并将匹配的选项以表格的形式展示给用户。 除了 data-source 属性，我们还可以设置其他一些属性来自定义 bootstrap-suggest 的展示和行为。例如，我们可以设置 data-highlight-class 属性来指定选中的行的 CSS 样式。 在用户输入文字时，bootstrap-suggest 会根据用户的输入自动过滤数据源，并将符合条件的选项以表格的形式展示在输入框下方。用户可以通过键盘上下箭头和回车键来选择某一行，也可以通过鼠标点击来选中某一行。 当用户选择某一行时，bootstrap-suggest 会将选中的行的值填充到输入框中，方便用户进一步操作。 总之，bootstrap-suggest 是一个非常方便的下拉表格插件，可以帮助我们提供更好的用户输入体验，减少用户的输入错误，提高用户的操作效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值