it-swarm.com.de

Machen Sie Bootstrap 3 Tabs Responsive

Derzeit reagieren die Registerkarten nicht, wenn Sie Registerkarten in Bootstrap 3 einrichten.

Dies:

enter image description here

Daraus ergibt sich:

enter image description here

CSS. Es ist ganz einfach, das Aussehen zu korrigieren, indem Sie den Float usw. mit maximaler Breite entfernen. Der Inhalt ist jedoch nicht mit der Registerkarte verbunden, sodass ein Stapel von Registerkarten wie Registerkarten funktioniert, Sie jedoch in kleineren Ansichtsfenstern kann die Änderung des Inhalts sehen oder nicht.


Dies ist der grundlegende HTML-Code zum Erstellen einer Navigation mit Registerkarten:

      <!--begin tabs going in wide content -->
       <ul class="nav nav-tabs" id="maincontent" role="tablist">
          <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li class="dropdown">
             <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
             </ul>
          </li>
       </ul><!--/.nav-tabs.content-tabs -->


       <div class="tab-content">

          <div class="tab-pane fade in active" id="home">
             <p>Home Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="profile">
             <p>Profile Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown1">
             <p>Dropdown1 - ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown2">
             <p>Dropdown 2 - ...</p>
          </div><!--/.tab-pane -->

       </div><!--/.tab-content -->

Wie verwandeln Sie die Tabs in Akkordeon oder Collapse, so dass ein kleines Ansichtsfenster angezeigt wird?

25
Christina

Bootstrap-Registerkarten reagieren nicht sofort. Responsive, IMO, ist eine Stiländerung, das Ändern von Funktionen ist adaptiv. Es gibt ein paar Plugins, um die Bootstrap= 3 Registerkarten in eine Collapse-Komponente zu verwandeln. Die beste und aktuellste ist: https://github.com/flatlogic/bootstrap-tabcollapse .

Hier ist eine Möglichkeit, es zu implementieren:

DEMO: http://jsbin.com/zibani/1/

EDIT: http://jsbin.com/zibani/1/edit

Dadurch wird der Inhalt zu einer Reduzierungskomponente:

enter image description here

Abhängigkeiten:

  1. Bootstrap 3.2 CSS oder höher, aber immer noch in der 3er Serie
  2. Bootstrap 3.2 jQuery oder höher, aber immer noch in der 3er-Reihe
  3. Kompatible Version von bootstrap-tabcollapse.js

HTML - wie Frage mit Klassennamenzusatz:

       <ul class="nav nav-tabs content-tabs" id="maincontent" role="tablist">

jQuery:

$(document).ready(function() {

    // DEPENDENCY: https://github.com/flatlogic/bootstrap-tabcollapse
    $('.content-tabs').tabCollapse();

    // initialize tab function
    $('.nav-tabs a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });

});

CSS - optional für fette Finger und aktive Zustände:

.panel-heading {
    padding: 0
}
.panel-heading a {
    display: block;
    padding: 20px 10px;
}
.panel-heading a.collapsed {
    background: #fff
}
.panel-heading a {
    background: #f7f7f7;
    border-radius: 5px;
}
.panel-heading a:after {
    content: '-'
}
.panel-heading a.collapsed:after {
    content: '+'
}
.nav.nav-tabs li a,
.nav.nav-tabs li.active > a:hover,
.nav.nav-tabs li.active > a:active,
.nav.nav-tabs li.active > a:focus {
    border-bottom-width: 0px;
    outline: none;
}
.nav.nav-tabs li a {
    padding-top: 20px;
    padding-bottom: 20px;
}
.tab-pane {
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: -1px;
}
29
Christina

Slack hat eine coole Art, Tabs in kleinen Ansichtsfenstern auf einigen ihrer Administrationsseiten benutzerfreundlich zu gestalten. Ich habe etwas Ähnliches mit Bootstrap gemacht. Es ist eine Art Tabs → Dropdown.

Demo: http://jsbin.com/nowuyi/1

So sieht es in einem großen Ansichtsfenster aus: as tabs

In einem kleinen Ansichtsfenster sieht es wie folgt aus:

collapsed dropdown

So sieht es in einem kleinen Ansichtsfenster erweitert aus:

open dropdown

das HTML ist genau das gleiche wie die Standardregisterkarten bootstrap.

Es gibt ein kleines JS-Snippet, das jquery erfordert (und zwei span-Elemente in das DOM einfügt):

$.fn.responsiveTabs = function() {
  this.addClass('responsive-tabs');
  this.append($('<span class="glyphicon glyphicon-triangle-bottom"></span>'));
  this.append($('<span class="glyphicon glyphicon-triangle-top"></span>'));

  this.on('click', 'li.active > a, span.glyphicon', function() {
    this.toggleClass('open');
  }.bind(this));

  this.on('click', 'li:not(.active) > a', function() {
    this.removeClass('open');
  }.bind(this));
};

$('.nav.nav-tabs').responsiveTabs();

Und dann gibt es viel CSS (weniger):

@xs: 768px;


.responsive-tabs.nav-tabs {
  position: relative;
  z-index: 10;
  height: 42px;
  overflow: visible;
  border-bottom: none;

  @media(min-width: @xs) {
    border-bottom: 1px solid #ddd;
  }

  span.glyphicon {
    position: absolute;
    top: 14px;
    right: 22px;
    &.glyphicon-triangle-top {
      display: none;
    }
    @media(min-width: @xs) {
      display: none;
    }
  }

  > li {
    display: none;
    float: none;
    text-align: center;

    &:last-of-type > a {
      margin-right: 0;
    }

    > a {
      margin-right: 0;
      background: #fff;
      border: 1px solid #DDDDDD;

      @media(min-width: @xs) {
        margin-right: 4px;
      }
    }

    &.active {
      display: block;
      a {
        @media(min-width: @xs) {
          border-bottom-color: transparent; 
        }
        border: 1px solid #DDDDDD;
        border-radius: 2px;
      }
    }

    @media(min-width: @xs) {
      display: block;
      float: left;
    }

  }

  &.open {

    span.glyphicon {
      &.glyphicon-triangle-top {
        display: block;
        @media(min-width: @xs) {
          display: none;
        }
      }
      &.glyphicon-triangle-bottom {
        display: none;
      }
    }

    > li {
      display: block;

      a {
        border-radius: 0;
      }

      &:first-of-type a {
        border-radius: 2px 2px 0 0;
      }
      &:last-of-type a {
        border-radius: 0 0 2px 2px;
      }
    }
  }
}
28
Lee

enter image description here

Es gibt eine neue: http://hayatbiralem.com/blog/2015/05/15/responsive-bootstrap-tabs/

Und auch Codepen-Beispiel hier verfügbar: http://codepen.io/hayatbiralem/pen/KpzjOL

Kein Plugin nötig. Es braucht nur ein wenig CSS und JQuery.

Hier ist ein Beispiel für ein Tab-Markup:

<ul class="nav nav-tabs nav-tabs-responsive">
    <li class="active">
        <a href="#tab1" data-toggle="tab">
            <span class="text">Tab 1</span>
        </a>
    </li>
    <li class="next">
        <a href="#tab2" data-toggle="tab">
            <span class="text">Tab 2</span>
        </a>
    </li>
    <li>
        <a href="#tab3" data-toggle="tab">
            <span class="text">Tab 3</span>
        </a>
    </li>
    ...
</ul>

.. und jQuery-Codes sind auch hier:

(function($) {

  'use strict';

  $(document).on('show.bs.tab', '.nav-tabs-responsive [data-toggle="tab"]', function(e) {
    var $target = $(e.target);
    var $tabs = $target.closest('.nav-tabs-responsive');
    var $current = $target.closest('li');
    var $parent = $current.closest('li.dropdown');
        $current = $parent.length > 0 ? $parent : $current;
    var $next = $current.next();
    var $prev = $current.prev();
    var updateDropdownMenu = function($el, position){
      $el
        .find('.dropdown-menu')
        .removeClass('pull-xs-left pull-xs-center pull-xs-right')
        .addClass( 'pull-xs-' + position );
    };

    $tabs.find('>li').removeClass('next prev');
    $prev.addClass('prev');
    $next.addClass('next');

    updateDropdownMenu( $prev, 'left' );
    updateDropdownMenu( $current, 'center' );
    updateDropdownMenu( $next, 'right' );
  });

})(jQuery);
11
hayatbiralem

Ich bevorzuge ein CSS-Schema, das auf horizontalem Bildlauf basiert, wie Registerkarten auf Android. Dies ist meine Lösung, nur umbrechen mit einer Klasse, die auf Nav-Tabs reagiert:

<div class="nav-tabs-responsive">
  <ul class="nav nav-tabs" role="tablist">
    <li>...</li>
  </ul>
</div>

Und zwei CSS-Zeilen:

.nav-tabs { min-width: 600px; }
.nav-tabs-responsive { overflow: auto; }

600px ist der Punkt, über den Sie reagieren werden (Sie können ihn mit bootstrap Variablen) einstellen)

Reines CSS nur für Nav-Tabs, sehr einfach für kleine Bildschirme:

@media (max-width: 767px) {
     .nav-tabs {
         min-width: 100%;
         display: inline-grid;
     }
}
1
MrTexas

Die Lösung ist nur 3 Zeilen:

@media only screen and (max-width: 479px) {
   .nav-tabs > li {
      width: 100%;
   }
}

..aber Sie müssen die Idee von Tabulatoren akzeptieren, die in anderen Dimensionen zu mehr Zeilen umgebrochen werden.

Natürlich können Sie mit dem Trick white-space: nowrap Einen horizontalen Bildlaufbereich erzielen, aber die Bildlaufleisten auf Desktops sehen hässlich aus, sodass Sie js-Code schreiben müssen und das Ganze überhaupt nicht mehr trivial wird!

0
centurian