如何利用Bootstrap美化table表格？

2022-10-17 20:45:37 发布:网友投稿来源：网友投稿

热度:68

Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架之一，它定义的css样式代码，为我们平常使用的绝大多数HTML控件都做了统一的样式外观。下面我们看下怎么利用Bootstrap来美化table表格。

操作方法

01
先看下我们的html代码，就是一个简单的table，四行四列。
02
运行页面后，可以看到没有加上任何样式的table表格，是一个很丑陋的表格。
03
要利用Bootstrap美化table表格，首先我们要引入bootstrap样式文件，如图。
04
我们不用额外写自己的样式代码，只要在原来的html里为table添加一个‘table’的样式名就行了，如图，这个样式在bootstrap.css样式文件里是有定义的，是插件为我们定义的样式。所以我们自己不需要写任何一行样式代码，就可以美化table表格。
05
添加后，刷新页面看下效果。从图中可以看到，现在的table表格看起来整洁很多了。
06
我们还可以加上另外一个样式名，让表格的单元格显示分隔线。把代码里的 <table class="table">改成 <table class="table table-bordered">，效果如图
07
再加上table-striped的样式，可以让table有隔行的效果。如图<table class="table table-bordered table-striped">
08
如果需要效果：在鼠标放到每一行时，该行显示不一样的背景色，那么我们可以加上样式名：table-hover。<table class="table table-bordered table-hover">。