0

我不确定我需要的内容是否不言自明，所以我会试一试。

请在继续之前，请注意：

  • 我正在使用 Twitter Bootstrap
  • 我也在广泛使用 LESS

所以，我以上层导航为例。我的代码是：

        <div class="navbar navbar-inverse navbar-fixed-top" style='-moz-box-shadow: 0 3px 10px #888; -webkit-box-shadow: 0 3px 10px #888; box-shadow: 0 3px 10px #888;'>
            <div class="navbar-inner">
                <div class="container">
                    <div class="nav-collapse collapse">
                        <a class="brand" href="http://www.google.com"><img alt="This is an image" src="<?= base_url('library/img/logo-2.png'); ?>" width="200"/></a>
                        <ul class="nav pull-right">
                            <li class="active"><a href="http://www.google.com"><i class="icon-home icon-lightgray"></i>&nbsp;&nbsp;Home</a></li>
                            <li><a href="http://www.google.com"><i class="icon-th icon-lightgray"></i>&nbsp;&nbsp;Themes</a></li>
                            <li><a href="http://www.google.com"><i class="icon-wrench icon-lightgray"></i>&nbsp;&nbsp;Tools</a></li>
                            <li><a href="http://www.google.com"><i class="icon-align-right icon-lightgray"></i>&nbsp;&nbsp;Blog</a></li>
                            <li class="divider-vertical"></li>
                            <li class="dropdown">
                                <a href="http://www.google.com" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="icon-user icon-lightgray"></i>&nbsp;&nbsp;Log In<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="http://www.google.com">An Item 1</a></li>
                                    <li><a href="http://www.google.com">An Item 2</a></li>
                                    <li><a href="http://www.google.com">An Item 1</a></li>
                                    <li><a href="http://www.google.com">An Item 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

所以，我在想——“我们这里有什么？” ：

  • 4 个嵌套的 DIV
  • 许多“冗余”类（我没有在任何navbar其他地方使用or navbar-inverse，这是我感兴趣的唯一组合）。navbar-fixed-top

我正在尝试做的事情

简而言之，我可以想象同样的东西写成（甚至更多）：

    <div class="navigation">
                    <a class="brand" href="http://www.google.com"><img alt="This is an image" src="<?= base_url('library/img/logo-2.png'); ?>" width="200"/></a>
                    <ul class="nav pull-right">
                        <li class="active"><a href="http://www.google.com"><i class="icon-home icon-lightgray"></i>&nbsp;&nbsp;Home</a></li>
                        <li><a href="http://www.google.com"><i class="icon-th icon-lightgray"></i>&nbsp;&nbsp;Themes</a></li>
                        <li><a href="http://www.google.com"><i class="icon-wrench icon-lightgray"></i>&nbsp;&nbsp;Tools</a></li>
                        <li><a href="http://www.google.com"><i class="icon-align-right icon-lightgray"></i>&nbsp;&nbsp;Blog</a></li>
                        <li class="divider-vertical"></li>
                        <li class="dropdown">
                            <a href="http://www.google.com" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="icon-user icon-lightgray"></i>&nbsp;&nbsp;Log In<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="http://www.google.com">An Item 1</a></li>
                                <li><a href="http://www.google.com">An Item 2</a></li>
                                <li><a href="http://www.google.com">An Item 1</a></li>
                                <li><a href="http://www.google.com">An Item 2</a></li>
                            </ul>
                        </li>
                    </ul>
    </div>

您可能不会发现它有多大用处，但我仍然相信它会使我的页面更具可读性（就代码而言）。

那么，你会怎么做呢？

免责声明： 请原谅这个问题有点奇怪。对于仍然喜欢为他不喜欢现有编译器/解释器/语言的每一位编写自己的编译器/解释器/语言的人来说，我认为这是可以原谅的。:-)

4

0 回答 0