LESS框架 Bootstrap3中的表格实现
背景
在Web前端开发中，表格是常见的UI元素之一。无论是展示数据还是进行数据录入，表格的使用频率非常高。Bootstrap是前端开发中非常流行的框架之一，它在表格的实现上也提供了很多便利。
本文将介绍在Bootstrap3框架中，如何使用LESS来实现表格，并给出详细示例代码。同时，还会探讨LESS在表格实现中的一些高效应用。
LESS
LESS 是一种动态样式语言，是 CSS 的一种扩展，使得 CSS 更易于维护和扩展。LESS 可以运行在 Node.js 环境中，也可以在浏览器中使用。LESS文件的后缀名为.less，可被编译为CSS格式。
LESS主要有如下特性：
- 变量：通过变量可以在多处使用同一个值，并且只修改一处即可。
- 混合（Mixin）：混合用于将一些常用的样式封装起来，以便在其他地方进行复用。
- 循环（Loop）：循环是通过 LESS 提供的 for 循环语句来实现的，在开发中可以大大减少代码的重复。
- 嵌套规则：实现了 CSS 中选择器的嵌套。
Bootstrap3
Bootstrap是由Twitter推出的一个前端开发框架，包含了许多Bootstrap组件，如表格、导航、操作按钮等，以及一套Bootstrap的CSS样式，使得前端的开发效率得到了极大提高。
在Bootstrap3中，表格有着清晰的分割线、鼠标悬停时的变色效果、表头浮动、大小不同的表格以及响应式表格等特性。
表格实现
在Bootstrap3中，使用表格的方式很简单，只需要引入相应的CSS和JS文件，并在HTML中添加相应的代码即可。
基本表格
基本表格只是简单的表格，没有任何的特效。在Bootstrap中，使用table类可以创建一个基本表格，如下所示：
-- -------------------- ---- ------- ------ -------------- ------- ---- ---------- --------- --------- -------- --------- ----------------- ----- -------- ------- ---- ---------- ------------- ------------- ------------- ----- ---- ---------- -------------- ----------------- ------------- ----- ---- ---------- -------------- ------- --------- ----------------- ----- -------- --------展开代码
使用上述代码，可以创建一个非常简单的基本表格，效果如下图所示：
带边框的表格
在上述基本表格的基础上，通过添加.table-bordered类可以使表格带上边框，如下所示：
-- -------------------- ---- ------- ------ ------------ ---------------- ------- ---- ---------- --------- --------- -------- --------- ----------------- ----- -------- ------- ---- ---------- ------------- ------------- ------------- ----- ---- ---------- -------------- ----------------- ------------- ----- ---- ---------- -------------- ------- --------- ----------------- ----- -------- --------展开代码
上述代码会创建一个带边框的基本表格，效果如下图所示：
鼠标悬停变色效果的表格
为了让表格具有更好的交互效果，可以添加.table-hover类，使得鼠标在表格行上悬停时会出现背景色变化的效果，如下所示：
-- -------------------- ---- ------- ------ ------------ ------------- ------- ---- ---------- --------- --------- -------- --------- ----------------- ----- -------- ------- ---- ---------- ------------- ------------- ------------- ----- ---- ---------- -------------- ----------------- ------------- ----- ---- ---------- -------------- ------- --------- ----------------- ----- -------- --------展开代码
上述代码会创建一个带有鼠标悬停变色效果的基本表格，效果如下图所示：
带标题的表格
在上述基本表格的基础上，通过添加.table-header类可以使表格的标题栏固定在浏览器窗口的顶部，以便在滚动表格内容时能看到标题，如下所示：
-- -------------------- ---- ------- ---- ------------------------- ------ ------------ -------------- ------- ---- ---------- --------- --------- -------- --------- ----------------- ----- -------- ------- ---- ---------- ------------- ------------- ------------- ----- ---- ---------- -------------- ----------------- ------------- ----- ---- ---------- -------------- ------- --------- ----------------- ----- -------- -------- ------展开代码
上述代码会创建一个带有标题的基本表格，效果如下图所示：
响应式表格
随着移动设备的广泛应用，设计响应式的网站变得越来越重要。在Bootstrap3中，使用.table-responsive类可以给表格添加响应式支持，使得在移动设备上能够更好地显示表格数据，如下所示：
-- -------------------- ---- ------- ---- ------------------------- ------ -------------- ------- ---- ---------- --------- --------- -------- --------- ----------------- ----- -------- ------- ---- ---------- ------------- ------------- ------------- ----- ---- ---------- -------------- ----------------- ------------- ----- ---- ---------- -------------- ------- --------- ----------------- ----- -------- -------- ------展开代码
上述代码会创建一个响应式表格，当屏幕变窄时会出现滚动条以便查看全部的表格数据，效果如下图所示：
高效应用
在表格实现中，LESS中的循环和混合非常有用。例如，我们可以通过以下示例代码创建一个矩阵表格：
-- -------------------- ---- ------- ------------- - ----- - -- - ------- - ----------------- --------------------- ---- - -- - ------- - ----------------- --------------------- ---- - - - - ----- -- - ------- --- ----- ------------ -------- ----- ----------- ------- --------------- ------- - ----- -------------- - ------------ ----- - ----- -------------- -- - ----------------- ------------ ------------ ----- - -------------- --- ----------- --- ------------------ -- ---- --- -- -------------- - ----- ----------------------------- - ----- - ----------------- -------- - ----------------- - --- - ---------------------- -- ---- --- -- ----------- - ----- ------------------ -- - ----------------- -------- - --------------------- - --- - ----------------- --------------------- -展开代码
上述代码中的.generate-grid()和.generate-grid-row()都是LESS中的Recursive混合。通过Recursive混合可以很容易地生成多样式，非常适合循环性质的样式生成。在上面的代码中，我们通过递归循环生成了一个10列10行的矩阵表格。
同时，我们也可以通过LESS的循环语句来生成不同大小的表格。例如，以下代码将生成一个由不同大小的表格组成的集合：
-- -------------------- ---- ------- ------------- -- -- --- ---------------- - ------------------------- -- ---- --- -- --------------------- - ------------------------- - -- - ------ ---- - ----------------- - - ------------------------ - --- - - -------------------展开代码
上述代码中的.generate-tables()就是一个生成不同大小表格循环的混合。在其中，我们用到了LESS的length函数，它可以用来获取数组的长度。使用这样的方式可以大大提高表格的可复用性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7b9d0cc0f7239cdf9a6a5
