Heim > Artikel > Web-Frontend > Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen
Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen
- 青灯夜游nach vorne
- 2021-11-22 19:45:312869Durchsuche
本篇文章带大家一起了解一下Bootstrap中的表格插件的用法，介绍一下表格的颜色、表格的结构、响应式表格、表格边框等，希望对大家有所帮助！
1 强大的Bootstrap的表格
在html标签<table>加上基本类别 .table就可以使用Bootstrap的表格可选修饰类别或是自定义样式进行扩展。【相关推荐：《<a href="https://www.php.cn/course/list/15.html" target="_blank" textvalue="bootstrap教程">bootstrap教程</a>》】<p><strong>所有表格样式在Bootstrap中都不会继承，意味着嵌套表格的样式都是独立于父表格。</strong></p>
<p>以下是使用最基本的表格排版在Bootstrap中的外观。</p><pre class="brush:js;toolbar:false;"><!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>表格演示</title>
</head>
<body>
<div class="container">
<h1>表格演示</h1>
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>张三</td>
<td>男</td>
<td>程序员</td>
</tr>
<tr>
<th>2</th>
<td>李四</td>
<td>女</td>
<td>美工</td>
</tr>
<tr>
<th>3</th>
<td>王五</td>
<td colspan="2">我只会耍大刀</td>
</tr>
</tbody>
</table>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html></pre><p><img src="https://img.php.cn/upload/image/409/149/315/163758117010721Wie%20verwende%20ich%20Tabellen%20in%20Bootstrap?%20Eine%20kurze%20Analyse%20der%20Verwendung%20leistungsstarker%20Tabellen" title="163758117010721Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen" alt="Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen"></p>
<p>可以看到，默认的简单表格只是在table标签加了个class="table"，就和普通的html表格外观上有了很大改观。</p>
<h1 data-id="heading-1">2 表格的颜色</h1>
<p>使用语意化class给表格列或单元格上色。表哥颜色可以分别设置在<code><table>、<tr>、<thead>、<th>、</th>
<td>等一切表格元素中。如果是加在表格中，则在整个表格中有效，加在行中对整行有效，加在单元格中对整个单元格有效。<p>到目前为止好像没法加在整列中，要对整列使用某个颜色，只能将其中的所有单元格设置颜色。</p><pre class="brush:js;toolbar:false;"><!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>表格演示</title>
</head>
<body>
<div class="container">
<table class="table">
<tr><td>Default</td></tr>
<tr class="table-primary"><td>table-primary</td></tr>
<tr class="table-secondary"><td>table-secondary</td></tr>
<tr class="table-success"><td>table-success</td></tr>
<tr class="table-danger"><td>table-danger</td></tr>
<tr class="table-warning"><td>table-warning</td></tr>
<tr class="table-info"><td>table-info</td></tr>
<tr class="table-light"><td>table-light</td></tr>
<tr class="table-dark"><td>table-dark</td></tr>
<tr><td class="table-success">table-success</td></tr>
</table>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html></pre><p><img src="https://img.php.cn/upload/image/977/398/286/163758117832327Wie%20verwende%20ich%20Tabellen%20in%20Bootstrap?%20Eine%20kurze%20Analyse%20der%20Verwendung%20leistungsstarker%20Tabellen" title="163758117832327Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen" alt="Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen"></p>
<p>通过这个例子大家可以基本明白表格颜色的用法，需要主要的是对整个表格运用颜色是用<code><table class="table table-secondary">，不要省略前面的table，
虽然例子中最后一行也是table-success，但是事实上，最后一行是设置在单元格上的。<h1 data-id="heading-2">3 表格的结构-表头、表尾、标题</h1><pre class="brush:js;toolbar:false;"><!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>表格演示</title>
</head>
<body>
<div class="container">
<table class="table caption-top">
<caption class="text-center"><h3>人员登记表</h5></caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>张三</td>
<td>男</td>
<td>警察</td>
</tr>
<tr>
<th>2</th>
<td>李四</td>
<td>女</td>
<td>护士</td>
</tr>
<tr>
<th>3</th>
<td>王五</td>
<td>男</td>
<td>教师</td>
</tr>
</tbody>
<tfoot>
<th>序号</th>
<td>姓名</td>
<td>性别</td>
<td>职业</td>
</tfoot>
</table>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html></pre><p>显示效果</p>
<p><img src="https://img.php.cn/upload/image/272/596/675/163758118692480Wie%20verwende%20ich%20Tabellen%20in%20Bootstrap?%20Eine%20kurze%20Analyse%20der%20Verwendung%20leistungsstarker%20Tabellen" title="163758118692480Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen" alt="Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen"></p>
<p>从上面的例子可以看出表格由下面几部分组成：</p>
<ul>
<li>表头thead：t是表格的简写head是头部</li>
<li>表尾tfoot：t是表格foot是底部</li>
<li>标题caption：只有一行，默认在表尾底部，演示中我通过在table中添加caption-top使他在上部。默认标题靠左对齐，我通过在caption中添加class="text-center"使文字居中。默认字体较小，我通过h3标题使他变大。</li>
<li>行tr：一行，td标签必须写在tr中。</li>
<li>列td：一个单元格，通过<code><td colspan="2">可以使两个相邻的单元格合并，里面的数字可以更改，但不能大于行中所有的列数。<li>表头列th：与td唯一区别是里面文字粗体显示</li>
<p>通常为了美观，一般使用<code><thead>或<code><thead> 使<code><thead>显示为浅灰色或深灰色，其用法与11.2.1中的行的颜色一样，另外一般情况下表尾很少使用。<p><img src="https://img.php.cn/upload/image/700/205/353/163758119011937Wie%20verwende%20ich%20Tabellen%20in%20Bootstrap?%20Eine%20kurze%20Analyse%20der%20Verwendung%20leistungsstarker%20Tabellen" title="163758119011937Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen" alt="Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen"></p>
<h1 data-id="heading-3">4 响应式表格</h1>
<p>当表格一行的内容超过浏览器宽度的时候，默认浏览器会出现滚动条，这样存在的一个问题就是会把页面无线拉伸，严重影响网页中其他页面元素的显示效果。</p>
<p>而响应式表格是指把表格放在一个<code><div class="table-responsive"> </div>标签中，而该div标签是响应的，与容器同宽度，当表格宽度大于该div标签的时候，该div容器就会出现滚动条，而不是在浏览器上，这样就保证了表格不会超出页面宽度。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>表格演示</title>
<style>
td{white-space:nowrap;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table caption-top">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
<th>表头6</th>
<th>表头7</th>
<th>表头8</th>
<th>表头9</th>
<th>表头10</th>
</tr>
</thead>
<tbody>
<tr>
<td>我是第1个单元格</td>
<td>我是第2个单元格</td>
<td>我是第3个单元格</td>
<td>我是第4个单元格</td>
<td>我是第5个单元格</td>
<td>我是第6个单元格</td>
<td>我是第7个单元格</td>
<td>我是第8个单元格</td>
<td>我是第9个单元格</td>
<td>我是第10个单元格</td>
</tr>
</table>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>该代码的css部分是为了禁止文字换行，否则单元格会挤压成很多行。
在特点断点处响应
table-responsive{-sm|-md|-lg|-xl|-xxl}表示在断点前会出现滚动条，从该断点开始，表格将正常运行并且不会水平滚动。你可以把上面的代码中table-responsive换为table-responsive-md 查看一下效果，在此我就不演示了。
5 表格边框
默认表格是只有行边框的，你可以用table-bordered 为表格和单元格的所有边添加边框，还可以用可以添加边框颜色实用类来更改边框颜色（边框颜色通表格颜色，只不过把前缀table换成border）。
<table class="table table-bordered border-primary"> ... </table>
你还可以table-borderless构造无框的表格。
<table class="table table-borderless"> ... </table>
现在给出一个综合实例。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>表格演示</title>
</head>
<body>
<div class="container">
<table class="table caption-top table-bordered border-primary">
<caption class="text-center"><h3>带颜色边框表格</h5></caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>张三</td>
<td>男</td>
<td>警察</td>
</tr>
<tr>
<th>2</th>
<td>李四</td>
<td>女</td>
<td>护士</td>
</tr>
<tr>
<th>3</th>
<td>王五</td>
<td>男</td>
<td>教师</td>
</tr>
</tbody>
</table>
<table class="table caption-top table-borderless">
<caption class="text-center"><h3>无边框表格</h5></caption>
<thead class="table-light">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>张三</td>
<td>男</td>
<td>警察</td>
</tr>
<tr>
<th>2</th>
<td>李四</td>
<td>女</td>
<td>护士</td>
</tr>
<tr>
<th>3</th>
<td>王五</td>
<td>男</td>
<td>教师</td>
</tr>
</tbody>
</table>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
6 紧凑表格（小表格）
添加table-sm将所有单元格填充减半，使任何table更加紧凑。
Das obige ist der detaillierte Inhalt vonWie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!