BootStrap-表格

最新推荐文章于 2024-05-19 13:56:53 发布
最新推荐文章于 2024-05-19 13:56:53 发布
阅读量106 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxy1625309592/article/details/112172375
版权
本文详细介绍了如何使用BootStrap实现各种表格样式，包括基本表格、带斑马线、带边框、鼠标悬停效果、紧凑型以及表格效果的整合，通过代码示例和执行结果展示，帮助读者掌握BootStrap表格的美化技巧。
摘要由CSDN通过智能技术生成

1.1 基本表格

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--网页编码的类型-->
  <meta charset="utf-8">
  <!--使用最新的支持H5浏览器内核来解析-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--
  视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>基本表格</title>

  <!-- 导入文件：bootstrap.css -->
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">

  <!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
  <script src="../static/js/jquery-3.1.1.js"></script>

  <!-- 加载 Bootstrap的所有 JavaScript插件-->
  <script src="../static/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>七龙珠</h2>
  <table class="table">
	<thead>
	  <th>编号</th>
	  <th>姓名</th>
	  <th>性别</th>
	  <th>电话</th>
	</thead>
	<tr>
	  <td>1302</td>
	  <td>贝吉塔</td>
	  <td>男</td>
	  <td>19509869504</td>
	</tr>
	<tr>
	  <td>5940</td>
	  <td>孙悟空</td>
	  <td>男</td>
	  <td>13938475687</td>
	</tr>
	<tr>
	  <td>6841</td>
	  <td>龟仙人</td>
	  <td>男</td>
	  <td>18501029504</td>
	</tr>
  </table>
</div>
</body>
</html>

执行结果

1.2 带斑马线的表格

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--网页编码的类型-->
  <meta charset="utf-8">
  <!--使用最新的支持H5浏览器内核来解析-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--
  视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>带斑马线的表格</title>

  <!-- 导入文件：bootstrap.css -->
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">

  <!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
  <script src="../static/js/jquery-3.1.1.js"></script>

  <!-- 加载 Bootstrap的所有 JavaScript插件-->
  <script src="../static/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>七龙珠</h2
最低0.47元/天 解锁文章
guardwhy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap-基本概述
hxy1625309592的博客
01-03 492
1- Bootstrap概述 1.1 什么是Bootstrap 一个前端的框架，提高前端的开发效率，制作出更加专业，漂亮的页面。 基于html、css、js技术，只要有这个基础就可以使用Bootstrap。 ​ bootstrap中文官网：http://www.bootcss.com 1.2 Bootstrap的优势 自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 Bootstrap支持所有的主流浏览器。如：Internet Explorer、 Firefox、 Opera、
将bootstrap-table表格翻译为中文
03-04
Bootstrap表格是前端开发中常用的组件，它为网页提供了一种美观、响应式的表格展示方式。Bootstrap-table 是基于Bootstrap框架的扩展插件，它允许开发者在网页中创建功能丰富的表格，包括排序、过滤、分页、行编辑等...
Bootstrap-表格
weixin_34358365的博客
11-22 83
1 表格 2 .table 3 .table-bordered 带边框 4 .table-striped 隔行变色的表格 5 .table-hover 带鼠标悬停效果的表格 6 .table-responsive 响应式表格 7 <div class="table-responsive"> 8 <table>...
BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类
最新发布
林林一928的博客
05-19 1157
一. 表格 1.基本表格2.带边框的表格3.条纹状表格4.鼠标悬停时作出响应的表格5.紧缩表格6. 状态类7. 响应式表格。 二.表单 1.基本实例2.水平排列的表单3.内联表单4.被支持的控件4.1输入框4.2文本域4.3多选4.4 单选5.表单状态5.1焦点在状态5.2禁用状态5.3只读状态5.4效验状态5.5控制尺寸 三.按钮 1.可作为按钮使用的标签或元素2. 预定义样式3. 尺寸4. 禁用状态 四.图片 1.响应式图片2.图片形状 五.辅助类 1.情景文本颜色2.情景背景色3.关闭按钮4.三角符号
bootstrap
weixin_44654375的博客
02-15 2317
bootstrap 能够完成BootStrap环境搭建 能够理解bootstrap的栅格系统 能够查询文档创建BootStrap的按钮、表格、表单等常用组件 能够查询文档使用BootStrap的轮播图、分页条 能够利用Bootstrap完成网站首页 第一章 bootstrap简介 1.1 bootstrap概述 1.1.1 什么是bootstrap Bootstrap，基于 HTML、CSS、...
Bootstrap 表格
Juey
04-13 725
http://aehyok.com/Blog/Detail/5.html http://aehyok.com/Blog/Detail/11.html本文主要讲解的是表格，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的各种列表的展示，有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下，Bootstrap已经为我们准备那些类型的表格呢？如下所示： 1.基本案例 2.条纹状
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
Bootstrap Table 是一个基于Bootstrap框架的开源前端组件，用于创建功能丰富的、响应式的表格。它提供了很多高级特性，如排序、过滤、分页、列切换等。在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可...
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
Bootstrap表格模板是前端开发中常用的一种工具，尤其在构建数据密集型Web应用时，它能够高效地展示和管理大量信息。动态满屏的表格模板，结合了筛选、分页和排序功能，为用户提供了一种直观且易用的数据浏览体验。在...
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap-table+treegrid实现树形表格
10-16
ue":"open:system:manage"},{"id":3,"pid":1,"status":1,"name":"用户添加","permissionValue":"open:user:add"},{"id... $(function() { $table.bootstrapTable({ data: data, columns: [{ field: 'state', checkbox:
bootstrap自适应表格
12-27
基于bootstrap写的自适应表格，支持单元格在数据较多时单行显示。
bootstrap表格
lickybay的博客
09-29 647
bootstrap表格1、表格插件 官方下载地址 中文帮助文档 2、实际应用 采用jquery调用表格，代码如下： html：<table data-toggle="table" id="deviceTable"> </table>js： var $table = $('#deviceTable'); $table.bootstrapTable({ url: "dat
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
2.5 Bootstrap 表格
梁辰兴的博客
07-02 471
内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。Bootstrap 提供了一个清晰的创建表格的布局。如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加。下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。，还有一些可以用来为标记定义样式的类。这些类可被应用到 、 或 。除了基本的表格标记和。
Bootstrap 学习之表格
-ELZ-
10-23 248
表格 + 示例 + Head 表头处理 + 条纹状表格 + 表格边框处理 + 行悬停效果 + 紧缩效果 + 语义状态化 示例 <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username&lt
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9974
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
BootStrap表格详解
july_29的博客
10-11 3203
表格 html： 表格标签用table标签表示，每一行由<tr>表示。表格是由行组成，行由列组成,列由<td>单元格组成。 <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr>
bootstrap表格使用
xxaann的博客
05-17 591
bootstrap表格使用 第一点：bootstrap tab好用,并且是前端分页（就是不需要去读后台数据库来辅助分页） 你下载了bootstrap，不是你就有了bootstrap table插件，你还得要下载bootstrap table插件； bootstrap下载地址：http://www.bootcss.com/ bootstrap table插件下载地址（下面3个有关）最好是从Githu...
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、付费专栏及课程。

余额充值