Twitter Bootstrap選項卡式表

我正在做一個帶有Bootstrap框架的網頁。我想要一個單頁面，並彈出一個窗體，並有兩個或三個標籤。我想這一點，Twitter Bootstrap選項卡式表

Bootstrap example

爲「標記」，「CSS的」，「JavaScript的」的選項卡。我讓它們顯示在頁面的左上角，就像它在主導航欄上一樣，但我無法在其他任何地方找到它們。

理想情況下，我希望它們位於表單頂部並在表單之間切換。

另一個問題是這可能是小學，但得到的按鈕像我有他們，我用這個代碼，

<div class="note-tabs"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#navbar-fixed-html" data-toggle="tab"><strong>The Markup</strong></a></li> 
      <li><a href="#navbar-fixed-css" data-toggle="tab"><strong>The CSS</strong></a></li> 
      <li><a href="#navbar-fixed-js" data-toggle="tab"><strong>The JavaScript</strong></a></li> 
     </ul> 
</div>

是什麼意思時，href字段有一個＃在前面？這是來自tutsplus的示例頁面，這是下載的內容。這些沒有單獨的html文件，那麼究竟鏈接到了什麼？

感謝

UPDATE

這裏是我的形式，我想的標籤添加到該表單的頂部。一個選項卡選擇此表單，另一個選項卡將選擇另一個表單。形式是發生在頁面中間

http://jsfiddle.net/BS4Te/3/

來源

2013-08-24 zburns12

元素前面的＃被稱爲「片段」，它們允許您跨頁面移動。

你可以用下面的代碼獲得彈出：

的HTML代碼：

<div class="container-popup"> 
    <div class="popup"></div> 
</div>

的CSS代碼：

.container-popup { 
    position: relative; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,.8); 
} 

.popup { 
    width: 50%; 
    height: 50%; 
    background: #1abcb9; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
}

入住這DEMO

如果你想少「侵入碼」，你可以使用一個pseudoelement，如下所示：

入住這SECOND DEMO

正如你可以在下面的例子中看到，HTML代碼只有一個元素：

<div class="popup">

乾杯！

編輯：選中此Fiddle。我只用一種形式製作，但我認爲你會理解這個想法。

乾杯！

來源

2013-08-24 03:26:57 leoMestizo

唉唉好吧，我現在明白了碎片元件。我不確定那是我在找什麼，我試圖添加它。也許我做錯了。我想要那些引用我相信片段的選項卡，但我希望片段是表單。照片可以幫助解決這個問題嗎？ – zburns12

從技術上講，＃字符不是「元素」，而是[標識符]（http://en.wikipedia.org/wiki/Fragment_identifier）。 – leoMestizo

啊好吧，明白了。謝謝。可以用於表單嗎？我希望它是一個地址信息的表單，然後是另一個標籤，只需輸入一個電子郵件地址即可。 – zburns12

那些HREF領域與＃在相同的HTML文檔

內前鏈路ID例如：

<a href="#section1">Go to Section 1</a>

鏈接以id「section1」

<a id="section1">Here is Section 1</a>

希望這有助於！

來源

2013-08-24 03:25:04

我有一個標籤的形式，工作得很好，

HTML：

<ul class="nav nav-tabs form-tabs"> 
    <li id="basic-list" class="active"><a data-toggle="tab" href="#form1">form 1</a> 

    </li> 
    <li class="" id="team_details-list"> <a data-toggle="tab" href="#form2">form 2</a> 

    </li> 
    <li class="" id="identity_information-list"> <a data-toggle="tab" href="#form3">form 3</a> 

    </li> 
    <li class="" id="address_details-list"> <a data-toggle="tab" href="#form4">form 4</a> 

    </li> 
</ul> 
<div class="tab-content"> 
    <fieldset id="form1" class="tab-pane active">this is form 1</fieldset> 
    <fieldset id="form2" class="tab-pane ">this is form 2</fieldset> 
    <fieldset id="form3" class="tab-pane ">this is form 3</fieldset> 
    <fieldset id="form4" class="tab-pane ">this is form 4</fieldset> 
</div> 
<button class="btn btn-success">submit</button>

你可以看到這對JSFiddle

來源

2013-12-06 14:38:46 Renier

Twitter Bootstrap選項卡式表

回答

相關問題