Question

任何人都知道如何将Twitter Bootstrap标签转换为选择菜单？这对于移动布局来说非常方便。

像这样......

<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

Answer 1

我有一个解决方案，因为我看起来像那样。特里的片段对我的帮助太过分了。我用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

我希望这有帮助！

Answer 2

你不需要做任何特别的事情。如果您在页面中包含以下四个文件：

bootstrap.css
bootstrap-responsive.css＆lt; - 这对您所需要的最重要。此.css文件将根据页面宽度指示后续布局。
jquery-lastest-pack.js＆lt; - 在谷歌搜索：“lastest pack jquery”
bootstrap.js

名为bootstrap的文件将包含在您下载的引导程序包中。

导航栏必须是这样的：

<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文档here中阅读更多内容

如果您想查看最终结果的示例，请转到Bootstrap Main Page并缩小浏览器的宽度。

Answer 3

如果你可以使用Javascript，你可以在确定用户在手机上时创建一个转换它的功能。

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

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

http://jsfiddle.net/mBddM/

将Twitter引导标签转换为选择菜单

3 个答案: