table-finish.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">表格 <small><table></small></h1>
<h2>默认的表格</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>下载量</th>
<th>图书出版</th>
<th>外链数</th>
</tr>
</thead>
<tr>
<td>Wordpress</td>
<td>644,880</td>
<td>83</td>
<td>26,900</td>
</tr>
<tr>
<td>Joomla</td>
<td>86,547</td>
<td>64</td>
<td>45,600</td>
</tr>
<tr>
<td>Drupal</td>
<td>22,836</td>
<td>65</td>
<td>37,100</td>
</tr>
</table>
<h2>条纹表格</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>下载量</th>
<th>图书出版</th>
<th>外链数</th>
</tr>
</thead>
<tr>
<td>Wordpress</td>
<td>644,880</td>
<td>83</td>
<td>26,900</td>
</tr>
<tr>
<td>Joomla</td>
<td>86,547</td>
<td>64</td>
<td>45,600</td>
</tr>
<tr>
<td>Drupal</td>
<td>22,836</td>
<td>65</td>
<td>37,100</td>
</tr>
</table>
<h2>带边框的表格</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>下载量</th>
<th>图书出版</th>
<th>外链数</th>
</tr>
</thead>
<tr>
<td>Wordpress</td>
<td>644,880</td>
<td>83</td>
<td>26,900</td>
</tr>
<tr>
<td>Joomla</td>
<td>86,547</td>
<td>64</td>
<td>45,600</td>
</tr>
<tr>
<td>Drupal</td>
<td>22,836</td>
<td>65</td>
<td>37,100</td>
</tr>
</table>
<h2>压缩表格</h2>
<table class="table table-condensed table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>下载量</th>
<th>图书出版</th>
<th>外链数</th>
</tr>
</thead>
<tr>
<td>Wordpress</td>
<td>644,880</td>
<td>83</td>
<td>26,900</td>
</tr>
<tr>
<td>Joomla</td>
<td>86,547</td>
<td>64</td>
<td>45,600</td>
</tr>
<tr>
<td>Drupal</td>
<td>22,836</td>
<td>65</td>
<td>37,100</td>
</tr>
</table>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到：
相关推荐
Bootstrap表格编辑生成器插件是基于流行的前端框架Bootstrap开发的一款实用工具，主要用于简化网页中表格的创建和编辑过程。在现代Web应用中，表格经常被用于展示结构化的数据，而Bootstrap表格编辑生成器则提供了...
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
Bootstrap表格控件是一种高效、美观的前端框架，用于在网页上展示数据，尤其适用于动态数据的展示和操作。它结合了HTML、CSS和JavaScript技术，提供了丰富的样式和交互功能，使得开发者可以快速构建响应式、易用的...
Bootstrap表格是前端开发中常用的一种组件，它是基于Twitter Bootstrap框架构建的，用于展示结构化的数据。Bootstrap表格以其简洁、响应式的设计和丰富的功能，深受开发者喜爱。在本篇中，我们将深入探讨Bootstrap...
首先，我们来了解一下Bootstrap表格的基础知识。Bootstrap的表格设计简洁、清晰，支持各种类型的表格样式，如 striped（斑马纹）、hover（鼠标悬停高亮）和bordered（带边框）。通过简单的HTML标记和类名，可以轻松...
Bootstrap表格是前端开发中常用的工具，它为网页布局提供了强大的灵活性和一致性。在Bootstrap中，表格（Table）组件是用于展示结构化数据的一种方式。在某些情况下，我们可能需要对表格的列进行合并，以便更好地...
Bootstrap表格提供了丰富的样式和交互功能，能够帮助开发者快速创建美观且功能齐全的数据展示界面。 在“bootstrap 表格（可编辑）”这个主题中，我们关注的是如何创建一个不仅用于展示数据，还能让用户直接在页面...
Bootstrap表格模板是前端开发中常用的一种工具，尤其在构建数据密集型Web应用时，它能够高效地展示和管理大量信息。动态满屏的表格模板，结合了筛选、分页和排序功能，为用户提供了一种直观且易用的数据浏览体验。在...
Bootstrap表格是前端开发中常用的组件，它为网页提供了一种美观、响应式的表格展示方式。Bootstrap-table 是基于Bootstrap框架的扩展插件，它允许开发者在网页中创建功能丰富的表格，包括排序、过滤、分页、行编辑等...
Bootstrap表格通常结合JavaScript库如jQuery和相关的插件（如jqGrid）来增强交互性，提供分页、搜索、排序等高级功能。 Bootstrap表格的基础结构由`<table>`标签开始，通过添加`.table`类来应用基本样式。为了使...
Bootstrap表格导出Excel插件是前端开发中常用的一种工具，它允许用户将Bootstrap表格中的数据方便地导出为Excel文件，极大地提升了数据管理和分享的效率。这个插件主要基于JavaScript和Bootstrap框架，利用HTML5的...
Bootstrap表格控件是一种基于Bootstrap框架开发的前端组件，主要用于在网页上展示结构化的数据，具有良好的可定制性和响应式设计。Bootstrap是Twitter推出的一个开源用于前端开发的工具集，它包含了一系列CSS和...
Bootstrap表格是前端开发中常用的组件，它提供了丰富的样式和功能，使得网页中的数据展示更加美观且易用。在本主题中，我们关注的是"bootstrap-table.css 表格拖拽排序"，这是一种允许用户通过鼠标拖放操作来改变...
Bootstrap表格是一种广泛应用于网页设计中的组件，它提供了一种优雅的方式来组织和展示数据。动态加载数据是指在用户交互时，不预先一次性加载所有数据，而是根据需要从服务器获取并显示部分或全部数据。这种技术在...
在Web开发中，Bootstrap表格插件常用于实现数据的展示、排序、分页、筛选等操作，使得网页中的表格更加用户友好，提升用户体验。 在"测试bootstrap表格插件，表格分页插件"这个场景中，我们关注的核心是表格的分页...
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先，Bootstrap 提供了丰富的 CSS 样式和组件，包括表格（Table）样式，使得我们可以轻松创建出响应式的、美观的表格。而 ...
这个插件允许我们在Bootstrap表格中展示层次结构的数据，这对于显示具有父子关系或者分类信息的数据非常有用。 首先，`treeTable.html`是演示如何使用该树形表格插件的HTML文件。在这个文件中，我们可以看到一个...
Bootstrap表格样式是网页设计中常用的一种布局方式，尤其在C#开发的Web应用程序中，Bootstrap框架为创建响应式、美观的表格提供了强大的支持。Bootstrap是由Twitter开发并开源的一个前端框架，它提供了一系列预定义...
Bootstrap表格模板是一款基于Bootstrap框架，利用CSS样式和JavaScript（包括jQuery）实现的动态非满屏网页表格组件。这款模板设计精致，旨在提供一种高效、易用的数据显示方式，特别适用于前端开发人员快速构建数据...