L'effondrement latéral avec Bootstrap 3

J'ai visité cette page http://www.elmastudio.de/ et je me demandais si il est possible de construire la barre latérale gauche de l'effondrement avec Bootstrap 3.

Code à l'effondrement de la barre latérale à partir du haut (téléphone uniquement):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

Encadré lui-même a l'hidden-xs classe. Il est supprimé à la suite de js

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Si vous cliquez sur le bouton, il permet de basculer la barre latérale à partir du haut. Génial pour voir l'encadré de se comporter comme le site web ci-dessus montre. Toute aide est appréciée!

InformationsquelleAutor Chris We | 2013-10-16
  1. 120

    Bootstrap 3

    Oui, c'est possible. Ce "off-canvas" exemple devrait vous aider à vous lancer.

    http://bootply.com/88026

    Fondamentalement, vous avez besoin d'envelopper la mise en page dans un div extérieure, et d'utiliser les media queries pour basculer la disposition sur les petits écrans.

    /* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

    Aussi, il y a plusieurs plus de Bootstrap barre latérale exemples ici

    Bootstrap 4

    Créer un réactif barre de navigation sidebar "tiroir" dans le Bootstrap 4?

    • Ce lien est Rompu
    • quel lien? ils travaillent tous les deux pour moi.
    • bootply.com/88026 Ce lien est rompu, la barre latérale n'est pas démontable
    • Le lien fonctionne et la barre latérale est pliable... réduire votre largeur du navigateur pour voir.
    • bootply est cassé pour moi,je peux ouvrir la page d'accueil et les nouveaux mais tout le reste y compris connexion/inscription ou accès à un existant bootply extrait de code me redirige vers une page d'erreur.Pourriez-vous s'il vous plaît poster le code dans un violon ou peut-être un codepen
    • bootply semble être en panne de temps en temps...
    • il fonctionne dans le navigateur, mais pas sur le téléphone.
    • il fonctionne sur google Chrome sur Android. Bootply lui-même ne fonctionne pas correctement, mais cliquez sur le bouton "passer à render view" lien.
    • c'est minable de la solution. Vous pouvez toujours faire défiler vers le côté qui est un gros problème.
    • C'est ce que l'OP a demandé.
    • ici c'est officiel bootstrap modèle de tableau de bord avec barre latérale
    • Il se cache sur le mobile et la tablette versions qui est le problème.
    • Trop de râleurs ici. J'ai répondu basé sur l'OP de la demande d'origine qui n'est plus accessible. L'exemple est un "push" barre latérale de gauche, mais il y a de nombreuses autres approches comme à droite, de superposition, de haut, etc..

    InformationsquelleAutor Zim
  2. 88

    Il y a un autre utile starter modèle ici, pour toute personne intéressée.

    http://startbootstrap.com/templates/simple-sidebar.html

    • Je ne sais pas pourquoi vous avez une baisse de vote. Merci bien.
    • Le lien est cassé maintenant
    • nouveau lien direct: startbootstrap.com/templates/simple-sidebar
    • si quelqu'un a besoin , ici c'est officiel bootstrap modèle de tableau de bord avec barre latérale
    InformationsquelleAutor Chris W.
  3. 24

    http://getbootstrap.com/examples/offcanvas/

    C'est officiel exemple, peut être mieux pour certains. C'est en vertu de leurs Expériences section des exemples, mais puisque c'est officiel, il doit être tenu au courant de l'amorçage de la libération.

    Dirait qu'ils ont ajouté une toile fichier css utilisé dans l'exemple:

    http://getbootstrap.com/examples/offcanvas/offcanvas.css

    Et certains code JS:

    $(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
    InformationsquelleAutor Jon
  4. 8

    EDIT: j'ai ajouté une option de plus pour bootstrap encadrés.

    Il ya en fait trois façons dans laquelle vous pouvez faire un bootstrap 3 barre latérale. J'ai essayé de garder le code le plus simple possible.

    Fixe la barre latérale

    Ici vous pouvez voir un démo d'une simple barre latérale fixe j'ai développé à la même hauteur que la page

    La barre latérale dans une colonne

    J'ai aussi développé un plutôt simple colonne de barre de menu qui fonctionne en deux ou trois colonnes de la page à l'intérieur d'un conteneur. Il prend la longueur de la plus longue colonne. Ici vous pouvez voir un démo

    Tableau de bord

    Si vous google bootstrap tableau de bord, vous pouvez trouver plusieurs approprié du tableau de bord, comme cette une. Cependant, la plupart d'entre eux nécessitent beaucoup de codage. J'ai développé un tableau de bord qui fonctionne sans javascript supplémentaire (à côté du bootstrap, javascript). Voici une démo

    Pour les trois exemples, vous devez inclure jquery, bootstrap css, js et le thème.les fichiers css.

    Barre de défilement

    Si vous souhaitez que la barre latérale de cacher en appuyant sur un bouton, cela est également possible avec seulement un peu de javascript.Voici une démo

    InformationsquelleAutor FabianW
  5. 6

    Via Angulaire: à l'aide de ng-class Angulaire, on peut masquer ou afficher la barre latérale.

    http://jsfiddle.net/DVE4f/359/

    <div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

    .

    function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}
    InformationsquelleAutor Razan Paul
  6. 3

    Ses pas mentionné sur la doc, mais la barre latérale de Gauche sur Bootstrap 3 est possible à l'aide de "l'Effondrement" de la méthode.

    Comme mentionné par bootstrap.js :

    Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

    - Ce que cela signifie, ajout de la classe de "largeur" dans la cible, va étendre en largeur plutôt qu'en hauteur :

    http://jsfiddle.net/2316sfbz/2/

    • Comment feriez-vous pour cacher le menu de gauche, seulement 80% et de montrer un petit bouton pour augmenter de nouveau le menu?
    InformationsquelleAutor erw13n