如何自定义Bootstrap美化过的table表格？ _小知识

Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架之一，它定义的css样式代码，为我们平常使用的大多数HTML控件都做了统一的样式外观。 <br/>在应用了Bootstrap样式后，我们能否再自定义自己的样式？可以的，下面我们一起来看下怎么自定义。操作方法 01 要应用bootstrap样式，我们要先引入对应的样式文件，如图。

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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