4

有人知道如何将 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

4

3 回答 3

3

我有一个解决方案，因为我正在寻找类似的东西。特里的片段对我帮助太大了。我使用了 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();
  }

}

查看演示

我希望这有帮助！

于 2013-07-08T23:47:43.983 回答
2

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

  • 引导程序.css
  • bootstrap-responsive.css <--这是你需要的最重要的。此 .css 文件将根据页面宽度指示遵循的布局。
  • jquery-lastest-pack.js <-- 在 google 中搜索：“最新包 jquery”
  • 引导程序.js

名为 bootstrap 的文件将包含在您下载的 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 主页并减小浏览器的宽度。

于 2012-07-12T21:06:07.793 回答
2

如果您可以使用 Javascript，则可以在确定用户在移动设备上时创建一个函数来转换它。

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

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

http://jsfiddle.net/mBddM/

于 2012-07-13T13:54:19.047 回答