您现在的位置是:主页 > Web前端技术 > Web前端技术

bootstrap的表格类有哪些

IDCBT2022-01-10服务器技术人已围观

简介本篇文章为大家展示了bootstrap的表格类有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 bootstrap的表格类有:1、“.table”,基础

本篇文章为大家展示了bootstrap的表格类有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

bootstrap的表格类有:1、“.table”,基础表格;2、“.table-striped”,斑马线表格;3、“.table-bordered”,带边框的表格;4、“ .table-hover”,鼠标悬停高亮的表格等等。

本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

标签描述<table>为表格添加基础样式。<thead>表格标题行的容器元素(<tr>),用来标识表格列。<tbody>表格主体中的表格行的容器元素(<tr>)。<tr>一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。<td>默认的表格单元格。<th>特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。<caption>关于表格存储内容的描述或总结。

Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

类描述.table为任意 <table> 添加基本样式 (只有横向分隔线).table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持).table-bordered为所有表格的单元格添加边框.table-hover在 <tbody> 内的任一行启用鼠标悬停状态.table-condensed紧凑表格.table-responsive响应式表格.table-bordered带边框的表格

基本的表格

如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

标签:

很赞哦! ()

本栏推荐