0

Bootstrap 是我注意到这种做法的众多网站之一，对我来说这似乎很糟糕，但它已经足够广泛，并且由比我更有经验的人完成，我认为我一定错过了一些东西。以Bootstrap的 2.1.0 版本为例，如果您查看源代码，第 44-46 行（页面顶部菜单）是这些：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">

我了解每个类的相关 CSS 属性，以及使用在尽可能多的情况下对尽可能多的人有用但已基本完成设计的框架的缺点，我现在正试图清理我的标记。当 2 个（据我所知）就足够时，是否有理由使用 3 个 div？

虽然 '.container' 具有设置的宽度、清晰的属性和用于居中的边距设置，但我不明白为什么 '.navbar-inner' 位于与其父级不同的 div 中。将它作为一个类添加到它的父 div 并减少一层嵌套似乎更有意义。

是否有理由让我保留这个结构（或者就此而言，我应该将其纳入未来的编码实践中）？

4

3 回答 3

3

嵌套 div 允许您单独设置和访问它们，这可以派上用场。但这当然取决于您的实际需求，并且正如您所说，只需使用 css 而无需过多的 div 就可以完成很多工作。

于 2012-08-22T21:20:45.230 回答
2

这就是样式（在这种情况下，例如宽度/高度、边框、边距、填充）在不同浏览器（IE 与其他浏览器）上效果最佳的方式。

于 2012-08-22T21:16:44.620 回答
2

在大多数情况下，您可以通过组合几个类来降低标记的复杂性，例如

<div class="navbar navbar-inverse navbar-fixed-top navbar-inner container">

或者

<div class="navbar-inverse-fixed-top-inner-container">

但是要使这种标记起作用，您必须生成大量的 CSS 规则来满足每种情况。

通过将 CSS 中的大多数用例和标记分开，您最终会得到一些可读性很强的东西，并且在 CSS 和 HTML 方面都不那么繁重。

这也使您可以满足大量用户的大量组合。

恕我直言，该层次结构背后的主要原则是可扩展性。因为您可以轻松移除.container以放置其他东西 - 或者只是将其移动到其他地方。这只是供以后使用，当您可能在 10 年后再次阅读您的代码时。

我想指出的另一个原则是封装。如果您使用面向对象的语言（JS、C++、C#、Java 等）进行编程，那么您必须熟悉它。

根据您的示例：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">

.container不应该知道它的容器——你似乎同意这一点——但也不应该.navbar-inner知道它自己的.navbar状态：它是固定的、反向的，甚至不是导航栏。

应该只为它的.navbar-inner孩子提供适当的行为，我认为这就是为什么最好将它分开，即使你可以将它与导航栏混合。

也许在某些新版本中，或者只是想更改默认行为，导航栏与其内部可能存在冲突。

Let's try to avoid that and keep the intended structure. It doesn't look so messy anyway...

于 2012-08-22T22:12:40.797 回答