2012-07-06 55 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因爲做了這麼出色的工作。