2

我是 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跨度，就此而言）有什么意义？
4

2 回答 2

4

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

该data-toggle="dropdown"部分涉及将该元素转换为下拉菜单，这是一个可选的 Bootstrap javascript 插件。

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

于 2012-07-06T17:43:55.110 回答
1

和data-toggle属性data-target由JavaScript 下拉组件使用。

该类icon-bar由导航栏 CSS 组件使用。

要学习 twitter bootstrap，在深入了解示例之前访问该站点并至少浏览每个部分是一个非常好的主意。

于 2012-07-06T17:54:55.923 回答