Question

我是HTML5和Twitter Bootstrap的新手，但是 - 因为我一直在研究一些预先构建的示例 - 我有几个问题......

我们以这段代码为例（来自Fluid Layout Example）：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Username
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

有人可以告诉我：

data-toggle和data-target参数的重要性是什么？
这3个空的icon-bar span实例（或空caret范围）的重点是什么？

Answer 1

documentation解释说那些空的<i></i>标签会创建图标。这是一个类似的空洞跨越的故事。它们具有与特定类名相关联的样式，将它们变成可以使用的可爱的东西。如果你删除了这个类，它们就会是空的，毫无意义的元素。

data-toggle="dropdown"部分涉及将该元素转换为dropdown menu, which is an optional Bootstrap javascript plugin.

Bootstrap背后的理念是为您提供一大堆优雅的样式和功能，而无需自己完成所有工作。感谢Mark Otto和Jacob Thornton做了如此出色的工作。

Answer 2

JavaScript dropdown component使用data-toggle和data-target属性。

icon-bar类使用{{1}}类。

要学习推特软件，最好先去网站，至少浏览每个部分，然后再深入了解样本。

Twitter Bootstrap - 奇怪的参数？

2 个答案: