2012-07-06 57 views
2

我是一个HTML5和Twitter Bootstrap的新手,但是 - 因为我一直在寻找一些预建的例子 - 我有几个问题...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-toggledata-target参数的意义是什么?
  • 这3个空的icon-bar范围实例(或空的caret范围)的点是什么?

回答

4

documentation解释说那些空的<i></i>标签创建图标。这是一个空的跨度类似的故事。他们的造型与特定的班名相关,这将他们变成可以使用的可爱的东西。如果你删除了课程,他们只会是空的,没有意义的元素。

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

引导背后的想法是给你一大堆优雅的造型和功能,而不必自己做所有的工作。荣誉Mark OttoJacob Thornton因为做了这么出色的工作。