如何利用Bootstrap美化table表格?

Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架之一,它定义的css样式代码,为我们平常使用的绝大多数HTML控件都做了统一的样式外观。下面我们看下怎么利用Bootstrap来美化table表格。

操作方法

  • 01

    先看下我们的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">。

(0)

相关推荐

  • 如何快速美化excel表格呢?

    在excel中制作表格后,可以美化一下表格,那如何快速美化excel表格呢?我们来学习一下. 方法/步骤 1.打开excel文件,先制作一个表格. 2.全选内容,从开始中找到表格样式. 3.在表格样式 ...

  • 利用excel进行word表格几个方法介绍

    接触多了excel之后,会发现word里面虽然也可以插入表格,但使用上跟excel相比并不方便,而且有一些功能在word表格中如何使用也很少有人知道.其实,我们可以选择利用excel来进行word的表 ...

  • 怎么利用公式给Excel表格中的数据设置舍去小数取整数

    今天给大家介绍一下怎么利用公式给Excel表格中的数据设置舍去小数取整数的具体操作步骤.1. 这里我们用到的公式为INT函数.2. 点击Excel表格上方的公式选项,然后选择左侧的插入函数选项3. 在 ...

  • 如何取消table表格之间的空隙

    如何取消table表格之间的空隙 操作方法 01 新建html文件 02 插入表格 03 插入表格代码 04 插入表格视图模式 05 定义表格宽度并在表格中添加数据 06 浏览器预览效果如图,这是表格 ...

  • DW中如何插入table表格【基础教程】

    DW中如何插入table表格[基础教程] 操作方法 01 在插入选项中,选择Table选项 02 在表格设置栏中,上方可以设置表格的行数.列数以及整个表格的宽度值,下方标题选项,可以设置标题所在的位置 ...

  • Html如何创建好看的table 表格?

    Html如何创建好看的table 表格?简单几步,让你轻松解决. 操作方法 01 1. 参考经验如下创建一个html文件.HBuilder X如何创建html文件?启动运行教程 02 2.  在bod ...

  • 利用WORD里的表格让插入的图片保持一致的大小

    操作方法 01 工作中,我们经常会遇到,在Word中进行图片排版的问题,如果直接利用图片插入,必须一边又一遍的调整图片的大小,而利用其他的排版软件,个人觉得图片命名方面又没有Word方便,下面我就教大 ...

  • H5(html):table表格 合并单元格 行列合并

    对于table标签,在传统html页面或者H5页面都是一样的表现形式与设置方式.本文为您介绍table表格的使用,与如何合并行单元格与列单元格. 本文使用VSCode工具快速构建H5界面DOM结构,不 ...

  • word中如何利用橡皮擦来擦拭表格中的线

    word中如何利用橡皮擦来擦拭表格中的线呢?下面小编来教大家. 操作方法 01 首先,我们打开我们电脑上面的word: 02 然后我们点击工具栏中的插入: 03 弹出的界面,我们点击表格: 04 弹出 ...