【问题标题】:Responsive Layouts with Bootstrap使用 Bootstrap 的响应式布局
【发布时间】:2015-11-04 23:54:31
【问题描述】:
我已经阅读了人们提出问题的方式。关于具体的细节,问题的发展,卡在一些具体的编码问题上。
恐怕我的问题可以根据意见归类为那些不受欢迎的问题,但正如我所暗示的那样,我多次搜索谷歌并找不到答案。所以我道歉,但它去了。
像 bootstrap 这样的响应式布局难道不是对用表格而不是 css 制作的布局的一种倒退吗? W3C 强烈建议使用 css 而不是表格来进行布局。但是像在引导程序中那样使用网格和列,这难道不是一种再次制作相同的东西(就像使用表格一样),只是使用其他技术?谢谢。
【问题讨论】:
标签:
css
twitter-bootstrap
responsive-design
【解决方案1】:
没有人建议反对表格布局。回到 HTML1 时代,只有一种方法可以制作 tablura 布局,那就是 tables
不推荐的表格是那些在 HTML 中编码为的表格
<table> ... </table>
它们不灵活,无法从当今可用的许多 CSS 功能中受益。
另一方面,Bootstrap 使用 div —— 您使用的每个单元格都在 HTML 中编码为
<div> ... </div>
事实上,它们是这样编码的,它们可以利用各种 CSS 特性来使内容在设备和屏幕尺寸之间具有可移植性和可使用性......
【解决方案2】:
我可以看到您来自哪里 - 在某些方面可以将 Bootstrap 系统与表格进行比较 - 但在其他方面则大不相同。最明显的区别在于,它实际上完全按照您的描述进行:它使用 CSS 替换了表格,以制作更灵活、更通用的布局。虽然表格固定且笨重,但 Bootstrap 网格可以根据 视口 的大小调整各个列的大小。从而允许您的网站在任何尺寸的屏幕上显示为您想要的。此功能在移动可访问性方面特别有用。此外,通过使用 CSS 而不是表格,您还可以通过其他方式获得灵活性。详细地说,您可以修改或添加类以与 Bootstrap 网格一起使用,并创建使用表格布局永远无法实现的效果。
【解决方案3】:
这有点像几年前的桌子。然而,与使用像 Bootstrap 这样的网格系统相比,表格仍然更加静态且流动性更低。修改 HTML 元素的 CSS 仍然允许您更改使用 Bootstrap 构建的网站的结构,而使用表格并不那么容易。覆盖现有的 Bootstrap CSS 也很简单。
当我第一次开始使用 Bootstrap 时,我的想法和你一样,但是在你使用了一段时间之后,你就会明白它是如何比表格灵活得多的。但是,它不如为自己的设计设计和编码自己的 CSS 灵活。
【解决方案4】:
不,这不是一回事。 <div> 可以做的事情,<table> 不能总是完成
- 使用 JavaScript,访问特定的列和行会很困难
$(table tr td table.......).on("click", function(){
});//you are more prone to making a mistake here with too many tags
and
$('#ron').on("click", function(){
});
- 明智的维护:div 比表格更容易摆弄
非常僵硬
对于<table>,你需要一个额外的标签<tbody>,这意味着更多的代码。
在更新您的 html 代码时,使用 div 代替 table 不那么麻烦。
表格的响应式设计非常困难。使用 div 时,您可以使用大多数 CSS 属性和方法来让您的网站跨设备运行