Meniuri
Cele mai multe pagini web au un fel de meniu.
In HTML, un meniu este adesea definit într - o listă neordonată <ul> (și stil ulterior), ca aceasta:
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Dacă doriți să creați un meniu orizontal al listei de mai sus, se adaugă .list-inline clasa la <ul> :
Sau puteți afișa meniul de mai sus cu Bootstraps' Tabs and Pills ( a se vedea mai jos).
Notă: A se vedea ultimul exemplu pe această pagină pentru a afla cum să facă file și pastile toggleable / dinamice.
Tab-uri
Tab - uri sunt create cu <ul class="nav nav-tabs"> :
Sfat: De asemenea , marcați pagina curentă cu <li class="active"> .
Exemplul următor creează file de navigare:
Exemplu
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Încearcă - l singur » Tab-uri cu meniul vertical
Tab-uri pot organiza, de asemenea, meniuri derulante.
Următorul exemplu adaugă un meniu drop - down "Menu 1" :
Exemplu
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Încearcă - l singur » Pills
Pastilele sunt create cu <ul class="nav nav-pills"> . De asemenea , marca pagina curentă cu <li class="active"> :
Exemplu
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Încearcă - l singur » verticale Pills
Pills pot fi , de asemenea , afișate pe verticală. Trebuie doar să adăugați .nav-stacked clasă:
Exemplu
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Încearcă - l singur » Verticale Pills într - un rând
Text...
Text...
Text...
Următorul exemplu plasează meniul vertical în interiorul pilula ultima coloană. Deci, pe un ecran mare meniul va fi afișat în partea dreaptă. Dar, pe un ecran mic, conținutul în sine va ajusta în mod automat într-un aspect de o singură coloană:
Exemplu
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> Încearcă - l singur » Pills cu meniul vertical
Pills pot organiza , de asemenea , meniurile derulante.
Următorul exemplu adaugă un meniu drop - down "Menu 1" :
Exemplu
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Încearcă - l singur » Centrat Tabs and Pills
Pentru centru / justifica filele și pills , utilizați .nav-justified clasa.
Rețineți că , pe ecrane care sunt mai mici decât 768px, elementele din listă sunt stivuite (content will remain centered) :
Exemplu
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Încearcă - l singur » Toggleable / dinamice Tabs
ACASĂ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua.
Pentru a face toggleable filele, adăugați data-toggle="tab" de data-toggle="tab" - data-toggle="tab" atribut pentru fiecare link. Apoi se adaugă un .tab-pane clasa cu un cod unic pentru fiecare filă și înveliți - le în interiorul unui <div> Element cu clasa .tab-content .
Dacă doriți ca filele să se estompeze în și atunci când faceți clic pe ele, adăugați .fade clasa la .tab-pane :
Exemplu
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Încearcă - l singur » Toggleable / dinamice Pills
Același cod se aplică pills ; schimba numai data-toggle de data-toggle="pill" data-toggle atributul la data-toggle="pill" de data-toggle="pill" :
Exemplu
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
Completați Bootstrap de navigare de referință
Pentru o referință completă a tuturor claselor de navigare, du - te pentru a completa nostru Bootstrap de navigare de referință .
Pentru o referință completă a tuturor opțiunilor fila, metode și evenimente, du - te la nostru Bootstrap JS Tab Reference .