小编给大家分享一下Bootstrap怎么轻松制作漂亮表格,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

1.那么我们要做一张表格就需要创建我们的项目,然后再项目中加入我们的静态页面代码,而且在我们的代码中我们只有需要编辑html的内容就可以了,因为我们的css样式可以使用已经写好的Bootstrap的.css样式代码,我们需要通过<link type="text/css" rel="stylesheet" href="css/bootstrap.css">这串代码引入我们写好的bootstrap.css代码,代码如下:

<htmllang="en"><head><metacharset="UTF-8"><title>BootStrap制作表格</title><linktype="text/css"rel="stylesheet"href="css/bootstrap.css"></head><body><divclass="container"><table><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr></thead><tbody><tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></tbody></table></div></body></html>

我们在完成这个代码输入时,我们可以在网页中浏览大致的样式。

我们透过这个运行结果发下你这是没有添加任何样式的效果。


2.我们为了更好的表现出表格的美感我们在table中加入我们的bootstrap样式,代码如下:

<tableclass="tabletable-stripedtable-hovertable-bordered">

通过加入这串代码之后我们可以看到我们的结果是另一个效果。

以上是“Bootstrap怎么轻松制作漂亮表格”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!