当前位置:趣知科普网>游戏数码>IT技术>

如何自定义Bootstrap美化过的table表格?

IT技术 阅读(8.7K)

Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架之一,它定义的css样式代码,为我们平常使用的大多数HTML控件都做了统一的样式外观。
在应用了Bootstrap样式后,我们能否再自定义自己的样式?可以的,下面我们一起来看下怎么自定义。

操作方法

(01)要应用bootstrap样式,我们要先引入对应的样式文件,如图。

如何自定义Bootstrap美化过的table表格?

(02)然后再看下我们的示例代码,代码很简单,就是一个四行四列的table,并且为表格添加一个‘table-bordered’的样式,如图

如何自定义Bootstrap美化过的table表格? 第2张

(03)运行后,我们可以看到一个有边线的table表格,如图

如何自定义Bootstrap美化过的table表格? 第3张

(04)bootstrap为我们的表格添加的边线是灰色的边线,如果我们要把边线的颜色自定义一下,改成红色的边线,该怎么修改?我们可以自定义自己的样式代码,来覆盖bootstrap定义的边线颜色就行了。代码如图,

如何自定义Bootstrap美化过的table表格? 第4张

(05)刷新页面,可以看到现在的表格边线已经是比较显眼的红色线条了,

如何自定义Bootstrap美化过的table表格? 第5张

(06)为表格添加table-striped样式,会让表格有隔行效果。如图<table class="table table-bordered table-striped">

如何自定义Bootstrap美化过的table表格? 第6张

(07)如果想要为表格设置不一样的隔行背景色,我们也可以自己写样式来覆盖bootstrap的样式。代码如图

如何自定义Bootstrap美化过的table表格? 第7张

(08)刷新页面看下效果,我们为table自定义的隔行背景色是灰黑色。通过上面的例子可以看到,我们既可以使用bootstrap为我们提供的美观的控件样式,又可以在这些样式基础上随意修改,覆盖bootstrap提供的默认样式,自定义自己的样式。

如何自定义Bootstrap美化过的table表格? 第8张