【问题标题】: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】:

        不,这不是一回事。 &lt;div&gt; 可以做的事情,&lt;table&gt; 不能总是完成

        - 使用 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 比表格更容易摆弄 非常僵硬
        • 对于&lt;table&gt;,你需要一个额外的标签&lt;tbody&gt;,这意味着更多的代码。

        • 在更新您的 html 代码时,使用 div 代替 table 不那么麻烦。

        • 表格的响应式设计非常困难。使用 div 时,您可以使用大多数 CSS 属性和方法来让您的网站跨设备运行

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2016-04-28
          • 2019-06-16
          • 2013-06-30
          • 2018-08-19
          • 2019-08-03
          • 2012-10-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多