Come ottenere lo stile della lista di navigazione apposto da Bootstrap?

Ho giocato con Bootstrap per un po '. Mentre sono sempre stato in grado di far funzionare tutto. Ho preso in considerazione per un progetto imminente, che presuppone un apposto side-nav esattamente come quella presente nel Twitter Bootstrap doc.Come ottenere lo stile della lista di navigazione apposto da Bootstrap?

Ho anche cercato di includere queste classi per il mio elemento.

<ul class="nav nav-list affix-top">

Eventuali esperti di bootstrap qui che potrebbe aiutarmi a capire quello che avevo bisogno di aggiungere per ottenere questi e di lavoro. Inoltre, non sono stato in grado di visualizzare le galloni esattamente come finite lì, i miei galloni vengono sempre schiacciati insieme al testo.

fonte

2012-10-14 Ameen

Ti sei ricordato di accenderlo in JS?

Essi usano:

$('#navbar').affix()

, ma avrete bisogno di cambiare il selettore a qualsiasi vostra esigenza.

Ah, ora hai riformulato quello che vuoi!

Hanno un'altra classe su quella denominata .bs-docs-sidenav

.bs-docs-sidenav { 
    width: 228px; 
    margin: 30px 0 0; 
    padding: 0; 
    background-color: #fff; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); 
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); 
    box-shadow: 0 1px 4px rgba(0,0,0,.065); 
}

Essi quindi aggiungere una classe chiamata active alla Li, quindi specificare il comportamento di quella qui:

.bs-docs-sidenav > .active > a { 
    position: relative; 
    z-index: 2; 
    padding: 9px 15px; 
    border: 0; 
    text-shadow: 0 1px 0 rgba(0,0,0,.15); 
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 
}

Così, in breve, che non è una funzione integrata di bootstrap.

fonte

2012-10-14 09:48:49

Grazie, ma questo è solo per l'apposizione del nav. Non riesco a ricreare lo stile visivo ((.nav-tabs impilati) si avvicina, ma non ha l'evidenziazione della selezione corrente) della loro lista di navigazione. Grazie comunque. :) – Ameen

Grazie mille. Inoltre, avrei bisogno di armeggiare con JS perché "attivo" funzioni correttamente? Inoltre, in realtà volevo aggiungere un'immagine a questo post per trasmettere ciò che intendevo realmente, sembra che non sia ancora in grado di farlo. – Ameen

Non ne sono sicuro, non sembra. Immagino che potresti aver bisogno anche di scrollspy per farlo risaltare. Va bene! Otterrai la reputazione abbastanza velocemente! –

Ho avuto lo stesso problema e non sono riuscito a far funzionare il mio finché non lo avessi trovato nella pagina dei documenti di bootstrap.

http://twitter.github.com/bootstrap/assets/js/application.js

!function ($) { 

    $(function(){ 

    var $window = $(window) 

    // Disable certain links in docs 
    $('section [href^=#]').click(function (e) { 
     e.preventDefault() 
    }) 

    // side bar 
    $('.bs-docs-sidenav').affix({ 
     offset: { 
     top: function() { return $window.width() <= 980 ? 290 : 210 } 
     , bottom: 270 
     } 
    })   
    }) 
}(window.jQuery)

in modo da aggiungere il codice dimora durante la copia e incollando il bootstrap di navigazione AFIX dovrebbe prendersi cura del problema.

fonte

2013-01-27 08:49:12 NICKO

Per ottenere lo stesso effetto di quello sulla pagina github.io è necessario il pieno css hanno aggiunto

<style type="text/css"> 

.bs-docs-sidenav > li > a { 
    border: 1px solid #E5E5E5; 
    /*display: block;*/ 
    /*margin: 0 0 -1px;*/ 
    padding: 8px 14px; 
} 

.bs-docs-sidenav > li > a { 
    border: 1px solid #E5E5E5; 
    /*display: block;*/ 
    /*margin: 0 0 -1px;*/ 
    padding: 8px 14px; 
} 

.bs-docs-sidenav > li:first-child > a { 
    border-radius: 6px 6px 0 0; 
} 

.bs-docs-sidenav > li:last-child > a { 
    border-radius: 0 0 6px 6px; 
} 

.bs-docs-sidenav > .active > a { 
    border: 0 none; 
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1) inset, -1px 0 0 rgba(0, 0, 0, 0.1) inset; 
    padding: 9px 15px; 
    position: relative; 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
    z-index: 2; 
} 

.bs-docs-sidenav .icon-chevron-right { 
    float: right; 
    margin-right: -6px; 
    margin-top: 2px; 
    opacity: 0.25; 
} 

.bs-docs-sidenav > li > a:hover { 
    background-color: #F5F5F5; 
} 

.bs-docs-sidenav a:hover .icon-chevron-right { 
    opacity: 0.5; 
} 

.bs-docs-sidenav .active .icon-chevron-right, .bs-docs-sidenav .active a:hover .icon-chevron-right { 
    /*background-image: url("../img/glyphicons-halflings-white.png");*/ 
    opacity: 1; 
} 

.bbs-docs-sidenav.affix { 
    top: 40px; 
} 

.bbs-docs-sidenav.affix-bottom { 
    bottom: 270px; 
    position: absolute; 
    top: auto; 
} 

</style>

includere questo nella vostra modello o html e seguono il bootstrap formato di navigazione laterale:

<div class="row"> 
     <div class="span3 bs-docs-sidebar"> 
     <ul class="nav nav-list bs-docs-sidenav"> 
      <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a></li> 
      <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a></li> 
      .... 
     </ul> 
     </div> 
     <div class="span9"> 

     .... 

     </div> 
</div>

fonte

2013-06-24 03:58:03

Come ottenere lo stile della lista di navigazione apposto da Bootstrap?

risposta

Problemi correlati