使用引导表样式设置 div 样式？

Posted 2023-03-06

【中文标题】使用引导表样式设置 div 样式？

【英文标题】：Style a div with bootstrap table styles?

【发布时间】：2014-02-10 11:06:36

【问题描述】：

Bootstrap 带有一组漂亮的表格样式。

但是，我需要相同的样式，但对于具有类似表格内容的 div。

我查看了 css，发现有一个复杂的 css 选择器层次结构，它们针对表格的每个标签。我可以更新引导 css 以定位我的 div，但这很混乱。

没有快速的方法将引导 css 表格样式应用到我的带有 .row 和 .cell 内部 div 的 div 吗？

【问题讨论】：

我的建议：如果它是“表格”，它应该是table。如果您需要一个使用divs 来渲染表格（或用于渲染divs 的表格）的前端框架，Bootstrap 不是您的最佳选择。

表格没有简单的方法可以把行变成链接，不用js；这是我需要做的。

JS有什么问题？如果您使用的是 Bootstrap，您应该对它感到满意。我喜欢 Bootstrap，所以我鼓励你使用它，即使你必须让自己适应它的“标准”。

你做了太多假设。如果将 div 用作链接，则会失去一些浏览器的功能，例如右键菜单。

表格并不总是一个好的选择。例如。当逻辑项跨越多个表格行时，就无法使用表格对行进行分组，就像您可以使用 div 一样。所以这个问题是有效的，有时你想将 div 显示为表格，即使基础数据不适合表格。

【参考方案1】：

还有大量其他库可供您使用，它们的尺寸要小得多且简约。

我过去使用过的最精简的变体之一是：

960 网格系统

在此处创建自定义 CSS 文件，无需 bootstrap.js 的所有额外必需品。

http://grids.heroku.com/

了解更多：

http://960.gs

它不完全是一个表格系统，但您可以创建完整的行并以相同的方式将其添加。

看这里：http://grids.heroku.com/fluid_grid?column_amount=5