看程序学bootstrap3-基本样式之表格

最新推荐文章于 2022-05-04 17:04:46 发布
最新推荐文章于 2022-05-04 17:04:46 发布
阅读量148 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/93507354
版权

示例 1 : 基本表格

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 2 : 带斑马线的表格

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-striped">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 3 : 带边框的表格

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-bordered">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 4 : 有鼠标悬停状态的表格

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-hover">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 5 : 更加紧凑的表格

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
试一下

示例 6 : 多种表格效果整合在一起

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-striped table-bordered table-hover  table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 7 : 激活样式

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="active">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 8 : 成功样式

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="success">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 9 : 信息样式

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="info">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 10 : 警告样式

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="warning">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

示例 11 : 危险样式

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
    <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="danger">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstraptable-treeview树形，树形空格缩进bug已解决
09-14
BootstrapTable 是一个基于 Bootstrap 框架的前端数据展示插件，它提供了丰富的功能，如分页、排序、过滤和自定义操作等。在本文中，我们将深入探讨 "bootstraptable-treeview"，这是一个用于在 BootstrapTable 中...
Bootstrap3 表格处理
weixin_44055272的博客
05-12 1209
1 表格基本功能回顾 1.1 定义表格总结，定义行及行内元素 1.table标签表示一整张表 2.tr标签表示一行 3.td标签表示一个单元格 1.2 合并单元格 1.通过col，row 1.3 其他标签 1.caption标签 2. 2 表格样式 2.1 基础样式 2.2 有边框的表格 2.3 条纹状表格 2.4 点击会有悬浮样式的表格 2.5 紧凑型表格 2.6 响应式表格 ...
BootStrap3 表格系列
爱喝水的qdy的博客
11-17 301
目录官方地址基类条纹状表格带边框鼠标悬停紧缩表格状态类响应式表格整体代码 官方地址 https://v3.bootcss.com/css/#tables 基类 .table 条纹状表格 .table-striped <table class="table table-striped"> <thead> <tr> <th&gt...
Bootstrap03(媒体对象&表格&模态框&图标&)
m0_67294268的博客
05-04 318
今天带大家了解一些组件 ： 1、媒体对象 媒体对象有助于构建复杂且重复的组件，其中一些媒体位于不环绕所述媒体的内容旁边。 <div class="media"> <img src="img/1.png" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0"><b>冷间谍</b></h5>
【技巧】Bootstrap3表格之实战
zuncle的博客
03-16 758
先来看效果：全部代码在下面：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <meta name="viewport" content="in
Bootstrap3 表格样式
歪脖先生的博客
05-06 387
紧凑型表格 为 <table> 添加 .table-condensed 类，所有单元格的 padding 都由8px减到5px，让表格更加紧凑。这种样式适合信息密集的情况。如： <tableclass="table table-condensed"> <thead> <tr> <th>#&lt...
startbootstrap-sb-admin-2-master
09-26
"startbootstrap-sb-admin-2-master" 是一个广泛使用的后台管理模板，由 StartBootstrap 团队开发。StartBootstrap 是一个开源的 HTML、CSS 和 JavaScript 模板库，它提供了多种预设计的网页模板，帮助开发者快速...
bootstrap-table-fixed-columns(css,js)
05-06
CSS（层叠样式表）是用于描述网页及应用程序界面外观和表现的样式语言，通过修改这个文件，开发者可以自定义固定列的视觉效果，如边框、背景色、字体样式等。 `bootstrap-table-fixed-columns.js`则是JavaScript...
mastering-bootstrap:学习仓库-引导程序
04-16
4. **表格（Table）**：基本表格样式，以及如何使表格响应式。 5. **表单（Form）**：Bootstrap的表单控件样式，表单验证，以及如何与AJAX集成。 6. **按钮（Button）**：各种按钮样式，大小，状态，以及按钮组...
bootstrap-form-examples:引导程序形式的示例
07-09
Bootstrap表格是前端开发中常用的一种布局工具，尤其在构建响应式和用户友好的网页表单时，Bootstrap框架提供了丰富的预定义样式和组件。本项目"bootstrap-form-examples"旨在提供一系列Bootstrap表单的实例，帮助...
Bootstrap 表格的可选样式
歪脖先生的博客
03-06 1万+
表格的可选样式除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥，可以根据需要，为一个表格应用多个类。1、带条纹背景的表格为 &lt;table&gt; 添...
bootstrap 学习笔记 - 3 （表格 + 表单 +控件）
zhagener
06-04 6702
Bootstrap学习 Bootstrap学习之 - 表格 表格（） table-striped ：每一行增加斑马条纹样式。 thead ： 指定表格最上行 tfoot ：指定表格最下行 table-bordered ：为表格和其中的每个单元格增加边框。 table-hover ：每一行对鼠标悬停状态作出响应。 table-condensed ： 让表格更加紧凑，单
基于bootstrap3的表格组件
acweilisky0825的专栏
07-29 7850
表格在自己目前的开发中很常用，每次都写那么多重复的代码，感觉很繁琐。为了以后的开发中表格使用方便，特将表格封装成了一个组件，调用方式类似jquery的easyui，比较方便通用。 样子大概如下： 调用方式：引入jquery、bootstrap、lodash，之后在html页面写如下代码： 新建
前端表格插件 BootstrapTable 入门教程
热门推荐
JAVA_HIGHNESS的专栏
06-29 13万+
官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/Github地址： https://github.com/wenzhixin/bootstrap-table 官网介绍： 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 主要功能 支持
Bootstrap 基本样式-表格
litengbin的博客
01-19 2820
1 : 基本表格    table 2 : 带斑马线的表格    table table-striped 3 : 带边框的表格    table table-bordered 4 : 有鼠标悬停状态的表格    table table-hover 5 : 更加紧凑的表格    table table-condensed 6 : 多种表格效果整合在一起    table table-str
Bootstrap3 表单
歪脖先生的博客
05-07 688
表单 Bootstrap 为表单和表单控件提供了一些全局样式，不需要添加任何辅助类，即可让表单使用默认布局。默认布局中，表单元素采用垂直布局，标签和输入框采用顶对齐方式。 Bootstrap 中创建表单的基本步骤如下： 为每个表单控件<input>、<textarea>和<select>元素添加.form-control类； 把成对的<labe...
浅谈对Bootstrap的看法之一（文字颜色、表格、进度条、按钮）
吉帅振博客
06-14 1万+
今天第一次接触Bootstrap，官方介绍其是前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。个人认为，Bootstrap是一个大型的CSS样式包，里面包含了各种各样的CSS样式。当程序员进行网站开发时，可以直接使用包中定义好的样式。另外，Bootstrap自适应屏幕，包内的样式能够起到跟随屏幕大小而改变文字或图片大小的功能。接下来，我将从文字颜色、表格、进度条、按钮等多个方面进行介...
BootStrap3--全局CSS之表格
吴声子夜歌的博客
11-22 391
表格 基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 Optional table caption. # First Name Last Name ...
bootstrap-3.4.1-dist.zip\bootstrap-3.4.1-dist - zip 压缩文件, 解包大小为 1,7
最新发布
05-08
Bootstrap是一种目前非常流行的开源前端框架，旨在为开发人员提供一种快速、简单和功能丰富的方法来创建响应式网站和Web应用程序。Bootstrap-3.4.1-dist.zip是一个压缩包，包括了Bootstrap 3.4.1的所有源代码和样式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值