Twitter Bootstrap - 奇怪的参数？答案

【问题标题】：Twitter Bootstrap - weird parameters?Twitter Bootstrap - 奇怪的参数？
【发布时间】：2012-07-07 01:54:55
【问题描述】：

我是 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 跨度实例（或空的 caret 跨度，就此而言）有什么意义？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

documentation 说明那些空的 <i></i> 标记会创建图标。这是一个与空跨度类似的故事。它们具有与特定类名相关联的样式，从而将它们变成您可以使用的可爱的东西。如果您删除了该类，它们将只是空的、无意义的元素。

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

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

【讨论】：

【解决方案2】：

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

icon-bar 类被 navigation bar CSS component 使用。

要学习 twitter bootstrap，在深入了解示例之前，最好访问该站点并至少浏览每个部分。

【讨论】：