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提供的默认样式， 自定义自己的样式 。
文章插图
以上内容就是如何自定义Bootstrap美化过的table表格？的内容啦， 希望对你有所帮助哦！
推荐阅读
- 如何使用SolidWorks的镜像零件的功能
- 战地指挥官如何突破第六关
- 如何利用360安全卫士优化加速电脑
- 如何把Excel表格导入Word
- word中如何制作空心字
- 如何快速截取视频中间的一段
- 女人手相如何算命
- IIS网站如何自定义错误页
- 微信农场背景图怎么设置微信农场背景图如何设置
- 微信农场背景怎么换微信农场背景如何换