Tutorial di base Bootstrap

Plugin Bootstrap

Bootstrap 导航元素

In questa sezione esamineremo alcune delle opzioni fornite da Bootstrap per definire gli elementi di navigazione. Utilizzano lo stesso etichettatura e base .nav。Bootstrap fornisce anche delle classi di aiuto per condividere etichette e stato. Cambiando la classe decorativa, puoi passare da un stile all'altro.

Navigazione tabella o etichetta

Creare un menu di navigazione etichettato:

con una class .nav all'inizio dell'elenco non ordinato.
aggiungi class .nav-tabs.

Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Menu di navigazione etichettato</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Menu di navigazione etichettato</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

Menu di navigazione a capsule

Menu di navigazione a capsule di base

Se vuoi cambiare lo stile delle etichette in quello delle capsule, è sufficiente utilizzare la classe .nav-pills al posto di .nav-tabs è sufficiente, altri passaggi sono come sopra.

Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Menu di navigazione a capsule di base</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Menu di navigazione a capsule di base</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

Menu di navigazione a capsule verticali

Puoi farlo utilizzando la classe .nav, .nav-pills allo stesso tempo utilizzando la classe .nav-stackedrendendo le capsule verticamente sovrapposte.

Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Menu di navigazione a capsule verticali</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Menu di navigazione a capsule verticali</p>
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

Elementi di navigazione allineati ai lati

Puoi farlo quando la larghezza dello schermo è maggiore di 768px, utilizzando rispettivamente .nav, .nav-tabs o .nav, .nav-pills allo stesso tempo utilizzando la classe .nav-justified，rendendo la navigazione etichettata o a capsule della stessa larghezza dell'elemento genitore. Sui schermi più piccoli, i link di navigazione si sovrappongono.

Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Elementi di navigazione allineati ai lati</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Elementi di navigazione allineati ai lati</p>
<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

link disabilitato

per ogni .nav aggiungi class .disabled aggiungi class, verrà creato un link grigio e disabilitato :hover Stati, come mostrato nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Link disabilitati negli elementi di navigazione</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Link disabilitati negli elementi di navigazione</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (link disabilitato)</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net (link disabilitato)</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

Questa class cambia solo l'aspetto di <a>, senza modificare la sua funzione. In questo caso, è necessario utilizzare JavaScript personalizzato per disabilitare i link.

menu a discesa

I menu di navigazione e i menu a discesa utilizzano una sintassi simile. Di default, l'ancora dell'elemento elenco collabora con alcuni attributi di dati per attivare una .dropdown-menu l'elenco non ordinato con class.

Etichetta con menu a discesa

Ecco i passaggi per aggiungere un menu a discesa alle etichette:

con una class .nav all'inizio dell'elenco non ordinato.
aggiungi class .nav-tabs.
aggiungi con .dropdown-menu l'elenco non ordinato con class.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap esempio - Etichetta con menu a discesa</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Etichetta con menu a discesa</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Link separato</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

Capsule con menu a discesa

Le fasi sono le stesse per creare una etichetta con menu a discesa, ma è necessario sostituire .nav-tabs cambia class .nav-pillscome mostrato nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap esempio - Capsule con menu a discesa</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Capsule con menu a discesa</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Link separato</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Prova a vedere ‹/›

Il risultato è come segue:

Più componenti di esempio di elementi di navigazione

Schede e schede a capsula

Classe	Descrizione	Esempio
.nav nav-tabs	Schede	尝试一下
.nav nav-pills	Schede a capsula	尝试一下
.nav nav-pills nav-stacked	Schede a capsula organizzate in modo verticale	尝试一下
.nav-justified	Schede allineate a entrambi i lati, sugli schermi con una larghezza superiore a 768px, è facile far apparire schede o schede a capsula con la stessa larghezza tramite la classe .nav-justified. Sui schermi di piccole dimensioni, i link di navigazione sono presentati in stile stackato.	尝试一下
.disabled	Scheda disabilitata	尝试一下
Aggiungi un menu a discesa alle etichette		尝试一下
Schede a capsula con menu a discesa		尝试一下
.tab-content	与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改	尝试一下
.tab-pane	与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改	尝试一下

Bootstrap 导航栏 Bootstrap 输入框组