Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架之一 ， 它定义的css样式代码 ， 为我们平常使用的绝大多数HTML控件都做了统一的样式外观 。 下面我们看下怎么利用Bootstrap来美化table表格 。 操作方法 01 【如何利用Bootstrap美化table表格？】先看下我们的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"> 。
以上内容就是如何利用Bootstrap美化table表格？的内容啦 ， 希望对你有所帮助哦！
猜你喜欢
- CAD中的点画线如何绘制？
- Photoshop如何进行通道抠图？
- 如何能使快手作品不让同城的人看到 同城不可见
- 今日头条怎么注销账号，今日头条账号注销步骤
- 如何批量导出顺丰速发系统中存储的收件人信息
- 酷狗音乐如何和别人约歌
- 猫咪的视力到底如何
- 春天到了，我们该如何阻挡喵星人脱毛
- 如何用SolidWorks做应力分析
- Excel如何为数据插入图表并设置美观的图表格式