如何利用Bootstrap美化table表格?
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">。
赞 (0)