將Twitter引導標籤轉換爲選擇菜單

任何人都知道如何將Twitter Bootstrap標籤轉換爲選擇菜單？這對移動佈局來說非常方便。將Twitter引導標籤轉換爲選擇菜單

事情是這樣的......

<select> 
<option value="#everything">Everything</option> 
<option value="#catalog">Catalog</option> 
<option value="#articles">Articles+</option> 
<option value="#ejournals">E-Journals</option> 
<option value="#reserve">Reserve</option> 
<option value="#databases">Databases</option> 
</select>

這是一個活生生的例子。我有標籤設置和正在工作。但我希望它也可以使用選擇菜單。所以選擇菜單也會改變標籤。這將用於網站的移動版本。

http://library.buffalo.edu/redesign/html/tabs.html

來源

2012-07-12 closeyetfar

你沒有做什麼特別的。如果您在頁面中包含這四個文件：

bootstrap.css
引導-responsive.css < - 這是你所需要的最重要的。這個.css文件將根據頁面的寬度指示什麼樣的佈局。
jQuery的最新的-pack.js < - 在谷歌搜索：「最新的包jQuery的」
bootstrap.js

被命名爲引導文件將被包含在你的引導程序包下載。

導航欄必須是這樣的：

<div class="navbar"> 
<div class="navbar-inner"> 
    <div class="container"> 

    <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
    <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> 

    <!-- Be sure to leave the brand out there if you want it shown --> 
    <a class="brand" href="#">Project name</a> 

    <!-- Everything you want hidden at 940px or less, place within here --> 
    <div class="nav-collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 
    </div> 

    </div> 
</div> 
</div>

和您在nav-collapse包括的東西會被納入移動設備的一個不錯的菜單。您可以在第「可選響應變化」

如果你想看到的是如何將是最終結果的一個例子，去Bootstrap Main Page，減少瀏覽器的寬度，更多的引導文件here英寸

來源

2012-07-12 21:06:07 Pigueiras

我看到你在說什麼，但我想將標籤變成 Databases " – closeyetfar 2012-07-13 13:24:58

呃好的，我不明白那個問題。 – Pigueiras 2012-07-13 14:29:24

如果您可以使用Javascript，您可以創建一個函數將其轉換爲當您確定用戶在移動設備上時進行轉換。

var $select = $('<select></select>'); 

$('.nav-tabs li a').each(function() { 
    $select.append('<option>' + $(this).text() + '</option>'); 
});

http://jsfiddle.net/mBddM/

來源

2012-07-13 13:54:19 Terry

我有一個解決方案，因爲我一直在尋找類似的東西。特里的片段爲我的成就提供了很多幫助。我用jQuery的：

$(document).ready(function() { 

    $(window).resize(responsive); 
    $(window).trigger('resize'); 

}); 

function responsive(){ 

    // get resolution 
    var resolution = document.documentElement.clientWidth; 

    // because mobile layout 
    if (resolution < 979) { 

    if($('.select-menu').length === 0) { 

     // create select menu 
     var select = $('<select></select>'); 

     // add classes to select menu 
     select.addClass('select-menu input-block-level'); 

     // each link to option tag 
     $('.nav-tabs li a').each(function(){ 
     // create element option 
     var option = $('<option></option>'); 

     // add href value to jump 
     option.val(this.href); 

     // add text 
     option.text($(this).text()); 

     // append to select menu 
     select.append(option); 
     }); 

     // add change event to select 
     select.change(function(){ 
     window.location.href = this.value; 
     }); 

     // add select element to dom, hide the .nav-tabs 
     $('.nav-tabs').before(select).hide(); 

    } 

    } 

    // max width 979px 
    if (resolution > 979) { 
    $('.select-menu').remove(); 
    $('.nav-tabs').show(); 
    } 

}

View Demo

我希望這有助於！

來源

2013-07-08 23:47:43

將Twitter引導標籤轉換爲選擇菜單

回答

相關問題