Bootstrap - Guida rapida

Cos'è Twitter Bootstrap?

Bootstrap è un primo framework front-end mobile, intuitivo e potente per uno sviluppo web più rapido e semplice. Utilizza HTML, CSS e Javascript.

Storia

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton su Twitter . È stato rilasciato come prodotto open source nell'agosto 2011 su GitHub.

Perché utilizzare Bootstrap?

• Mobile first approach - Bootstrap 3, il framework consiste di stili Mobile first nell'intera libreria invece che in file separati.

• Browser Support - È supportato da tutti i browser più diffusi.

• Easy to get started- Con la sola conoscenza di HTML e CSS chiunque può iniziare con Bootstrap. Anche il sito ufficiale di Bootstrap ha una buona documentazione.

• Responsive design- Il CSS reattivo di Bootstrap si adatta a desktop, tablet e cellulari. Maggiori informazioni sul responsive design si trovano nel capitolo Bootstrap Responsive Design.

• Fornisce una soluzione pulita e uniforme per la creazione di un'interfaccia per gli sviluppatori.

• Contiene componenti incorporati belli e funzionali che sono facili da personalizzare.

• Fornisce inoltre personalizzazione basata sul web.

• E soprattutto è un open source.

Cosa include il pacchetto Bootstrap?

• Scaffolding- Bootstrap fornisce una struttura di base con Grid System, stili di collegamento e sfondo. Questo è trattato in dettaglio nella sezioneBootstrap Basic Structure

• CSS- Bootstrap viene fornito con la funzionalità delle impostazioni CSS globali, elementi HTML fondamentali in stile e migliorati con classi estensibili e un sistema di griglia avanzato. Questo è trattato in dettaglio nella sezioneBootstrap with CSS.

• Components- Bootstrap contiene oltre una dozzina di componenti riutilizzabili costruiti per fornire iconografia, menu a discesa, navigazione, avvisi, pop-over e molto altro. Questo è trattato in dettaglio nella sezioneLayout Components.

• JavaScript Plugins- Bootstrap contiene oltre una dozzina di plugin jQuery personalizzati. Puoi facilmente includerli tutti o uno per uno. Questo è trattato in dettaglio nella sezioneBootstrap Plugins.

• Customize - Puoi personalizzare i componenti di Bootstrap, le variabili LESS e i plug-in jQuery per ottenere la tua versione.

È molto facile da configurare e iniziare a utilizzare Bootstrap. Questo capitolo spiegherà come scaricare e configurare Bootstrap. Discuteremo anche della struttura del file Bootstrap e ne dimostreremo l'utilizzo con un esempio.

Scarica Bootstrap

Puoi scaricare l'ultima versione di Bootstrap da https://getbootstrap.com/. Quando fai clic su questo link, vedrai una schermata come di seguito:

Qui puoi vedere due pulsanti:

• Download Bootstrap- Facendo clic su questo, puoi scaricare le versioni precompilate e minimizzate di Bootstrap CSS, JavaScript e caratteri. Nessuna documentazione o file di codice sorgente originale sono inclusi.

• Download Source - Facendo clic su questo, puoi ottenere l'ultimo Bootstrap LESS e il codice sorgente JavaScript direttamente da GitHub.

Se lavori con il codice sorgente non compilato di Bootstrap, devi compilare i file LESS per produrre file CSS utilizzabili. Per la compilazione dei file MENO in CSS, Bootstrap supporta ufficialmente solo Recess , che è hinter CSS di Twitter sulla base di less.js .

Per una migliore comprensione e facilità d'uso, utilizzeremo la versione precompilata di Bootstrap durante il tutorial. Poiché i file vengono rispettati e minimizzati, non devi preoccuparti ogni volta di includere file separati per funzionalità individuali. Al momento della stesura di questo tutorial è stata scaricata l'ultima versione (Bootstrap 3).

Struttura dei file

Bootstrap precompilato

Una volta scaricata la versione compilata Bootstrap, estrai il file ZIP e vedrai la seguente struttura di file / directory:

Come puoi vedere, ci sono CSS e JS compilati (bootstrap. *), Così come CSS e JS compilati e minimizzati (bootstrap.min. *). I caratteri di Glyphicons sono inclusi, poiché è il tema Bootstrap opzionale.

Codice sorgente Bootstrap

Se hai scaricato il codice sorgente Bootstrap, la struttura del file sarà la seguente:

• I file in less / , js / e fonts / sono il codice sorgente per i font Bootstrap CSS, JS e icon (rispettivamente).

• La cartella dist / include tutto ciò che è elencato nella sezione di download precompilato sopra.

• docs-assets / , examples / e tutti i file * .html sono documentazione Bootstrap.

Modello HTML

Un modello HTML di base che utilizza Bootstrap sarebbe simile a questo:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Qui puoi vedere il file jquery.js, bootstrap.min.js e bootstrap.min.cssfile inclusi per creare un normale file HTM nel modello con avvio automatico. Assicurati solo di includere la libreria jQuery prima di includere la libreria Bootstrap.

Maggiori dettagli su ciascuno degli elementi in questo pezzo di codice sopra saranno discussi nel capitolo Bootstrap CSS Panoramica .

Esempio

Ora proviamo un esempio utilizzando il modello sopra. Prova il seguente esempio utilizzando l'opzione Live Demo disponibile nell'angolo in alto a destra della casella del codice di esempio sottostante sul nostro sito Web -

<h1>Hello, world!</h1>

In tutti i capitoli successivi abbiamo utilizzato un testo fittizio dal sito https://www.lipsum.com/.

In questo capitolo discuteremo del Bootstrap Grid System.

Cos'è una griglia?

Come affermato da wikepedia -

Nella progettazione grafica, una griglia è una struttura (solitamente bidimensionale) composta da una serie di linee rette (verticali, orizzontali) intersecanti utilizzate per strutturare il contenuto. È ampiamente utilizzato per progettare il layout e la struttura del contenuto nella progettazione di stampa. Nel web design, è un metodo molto efficace per creare un layout coerente in modo rapido ed efficace utilizzando HTML e CSS.

Per dirla in parole semplici, le griglie nel web design organizzano e strutturano i contenuti, rendono i siti web facili da scansionare e riducono il carico cognitivo sugli utenti.

Cos'è Bootstrap Grid System?

Come indicato dalla documentazione ufficiale di Bootstrap per il sistema grid -

Bootstrap include un primo sistema a griglia fluida mobile e reattivo che scala adeguatamente fino a 12 colonne all'aumentare delle dimensioni del dispositivo o della finestra. Include classi predefinite per semplici opzioni di layout, oltre a potenti mixin per la generazione di layout più semantici.

Cerchiamo di capire la dichiarazione di cui sopra. Bootstrap 3 è prima mobile, nel senso che il codice per Bootstrap ora inizia mirando a schermi più piccoli come dispositivi mobili, tablet e quindi "espande" componenti e griglie per schermi più grandi come laptop, desktop.

Mobile First Strategy

• Content

  • Determina cosa è più importante.

• Layout

  • Progettare prima su larghezze inferiori.
  • Prima il dispositivo mobile dell'indirizzo CSS di base; indirizzo di query multimediali per tablet, desktop.

• Progressive Enhancement

  • Aggiungi elementi all'aumentare delle dimensioni dello schermo.

Funzionamento del sistema Bootstrap Grid

I sistemi a griglia vengono utilizzati per creare layout di pagina attraverso una serie di righe e colonne che ospitano il contenuto. Ecco come funziona il sistema di griglia Bootstrap:

• Le righe devono essere inserite in un file .container classe per un corretto allineamento e riempimento.

• Usa le righe per creare gruppi di colonne orizzontali.

• Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere le figlie immediate delle righe.

• Classi di griglia predefinite come .row and .col-xs-4sono disponibili per creare rapidamente layout di griglia. LESS mixin possono essere utilizzati anche per layout più semantici.

• Le colonne creano margini interni (spazi vuoti tra il contenuto delle colonne) tramite imbottitura. Tale riempimento viene spostato nelle righe per la prima e l'ultima colonna tramite il margine negativo attivato.rows.

• Le colonne della griglia vengono create specificando il numero di dodici colonne disponibili che si desidera estendere. Ad esempio, tre colonne uguali ne userebbero tre.col-xs-4.

Query multimediali

Media query è un termine davvero stravagante per "regola CSS condizionale". Applica semplicemente alcuni CSS, in base a determinate condizioni stabilite. Se queste condizioni sono soddisfatte, lo stile viene applicato.

Le media query in Bootstrap ti consentono di spostare, mostrare e nascondere il contenuto in base alle dimensioni del viewport. Le seguenti media query vengono utilizzate nei file LESS per creare i punti di interruzione chiave nel sistema a griglia Bootstrap.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionalmente questi vengono espansi per includere un file max-width per limitare i CSS a un insieme più ristretto di dispositivi.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Le media query hanno due parti, una specifica del dispositivo e quindi una regola delle dimensioni. Nel caso precedente, viene impostata la seguente regola:

Consideriamo questa linea:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Per tutti i dispositivi, indipendentemente dal tipo con larghezza minima: @ screen-sm-min se la larghezza dello schermo diventa inferiore a @ screen-sm-max , allora fai qualcosa .

Opzioni griglia

La tabella seguente riassume gli aspetti del funzionamento del sistema a griglia Bootstrap su più dispositivi:

Struttura a griglia di base

Di seguito è riportata la struttura di base della griglia Bootstrap:

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

<div class = "container">
   ....
</div>

Vediamo alcuni semplici esempi di griglia:

• Esempio: da impilato a orizzontale

• Esempio: dispositivo medio e grande

• Esempio: cellulare, tablet, desktop

Reimpostazioni delle colonne reattive

Con i quattro livelli di griglie disponibili, sei destinato a incappare in problemi in cui a determinati punti di interruzione, le colonne non si schiariscono perfettamente poiché una è più alta dell'altra. Per risolvere il problema, utilizza una combinazione di una classe.clearfixe le classi di utilità reattive come mostrato nel seguente esempio:

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Questo produrrà il seguente risultato:

Ridimensiona la visualizzazione o controlla sul telefono per ottenere il risultato desiderato di questo esempio.

Colonne offset

Gli offset sono una funzione utile per layout più specializzati. Possono essere utilizzati per spingere le colonne per una maggiore spaziatura, (ad esempio). Il.col-xs = * le classi non supportano gli offset, ma possono essere facilmente replicati utilizzando una cella vuota.

Per utilizzare gli offset su schermi di grandi dimensioni, utilizzare il .col-md-offset-*classi. Queste classi aumentano il margine sinistro di una colonna di* colonne dove * vanno da 1 per 11.

Nel seguente esempio, abbiamo <div class = "col-md-6"> .. </div>, centreremo questo utilizzando la classe .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Questo produrrà il seguente risultato:

Colonne di nidificazione

Per nidificare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo file .row e set di .col-md-* colonne all'interno di un file .col-md-*colonna. Le righe nidificate dovrebbero includere un insieme di colonne che si sommano fino a 12.

Nell'esempio seguente, il layout ha due colonne, con la seconda suddivisa in quattro caselle su due righe.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Questo produrrà il seguente risultato:

Ordinamento delle colonne

Un'altra bella caratteristica del sistema di griglia Bootstrap è che puoi facilmente scrivere le colonne in un ordine e mostrarle in un altro. È possibile modificare facilmente l'ordine delle colonne della griglia incorporate con.col-md-push-* e .col-md-pull-* classi modificatrici dove * vanno da 1 per 11.

Nell'esempio seguente abbiamo un layout a due colonne con la colonna di sinistra che è la più stretta e funge da barra laterale. Scambieremo l'ordine di queste colonne usando.col-md-push-* e .col-md-pull-* classi.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Questo produrrà il seguente risultato:

Questo capitolo fornisce una panoramica dei pezzi chiave dell'infrastruttura di Bootstrap, compreso l'approccio di Bootstrap per uno sviluppo web migliore, più veloce e più forte.

Doctype HTML5

Bootstrap fa uso di alcuni elementi HTML e proprietà CSS che richiedono l'uso del doctype HTML5. Quindi includi il seguente pezzo di codice per il doctype HTML5 all'inizio di tutti i tuoi progetti usando Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Da quando è stato lanciato Bootstrap 3, Bootstrap è diventato prima mobile. Significa che gli stili "mobile first" possono essere trovati in tutta la libreria invece che in file separati. Devi aggiungere il fileviewport meta tag al <head> elemento, per garantire un rendering corretto e lo zoom al tocco sui dispositivi mobili.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

• La proprietà width controlla la larghezza del dispositivo. Impostandolo sulla larghezza del dispositivo si assicurerà che venga visualizzato correttamente su vari dispositivi (cellulari, desktop, tablet ...).

• initial-scale = 1.0 garantisce che, una volta caricata, la tua pagina web verrà visualizzata in scala 1: 1 e non verrà applicato alcuno zoom fuori dalla scatola.

Inserisci user-scalable = no al contentattributo per disabilitare le funzionalità di zoom sui dispositivi mobili come mostrato di seguito. Gli utenti possono solo scorrere e non eseguire lo zoom con questa modifica e il tuo sito sembra un po 'più simile a un'applicazione nativa.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalmente viene utilizzata la scala massima = 1.0 insieme a scalabile dall'utente = no . Come menzionato soprauser-scalable = no può offrire agli utenti un'esperienza più simile a un'app nativa, quindi Bootstrap non consiglia di utilizzare questo attributo.

Immagini reattive

Bootstrap 3 ti consente di rendere le immagini reattive aggiungendo una classe .img-responsive al <img>etichetta. Questa classe si applicamax-width: 100%; e height: auto; all'immagine in modo che si adatti bene all'elemento genitore.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografia e collegamenti

Bootstrap imposta una visualizzazione globale di base (sfondo), la tipografia e gli stili di collegamento -

• Basic Global display- Imposta il colore di sfondo: #fff; sull'elemento <body> .

• Typography- Utilizza gli attributi @ font-family-base , @ font-size-base e @ line-height-base come base tipografica.

• Link styles- Imposta il colore del collegamento globale tramite l'attributo @ link-color e applica le sottolineature del collegamento solo su : hover .

Se intendi utilizzare LESS code, puoi trovare tutto questo all'interno di scaffolding.less .

Normalizzare

Bootstrap utilizza Normalize per stabilire la coerenza tra browser.

Normalize.css è un'alternativa moderna e pronta per HTML5 ai ripristini CSS. È un piccolo file CSS che fornisce una migliore coerenza tra browser nello stile predefinito degli elementi HTML.

Contenitori

Usa classe .container per avvolgere il contenuto di una pagina e centrare facilmente il contenuto come mostrato di seguito.

<div class = "container">
   ...
</div>

Dai un'occhiata al .containerclasse nel file bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Si noti che, a causa del riempimento e delle larghezze fisse, i contenitori non sono annidabili per impostazione predefinita.

Dai un'occhiata al file bootstrap.css -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Qui puoi vedere che CSS ha media-query per contenitori con width. Questo aiuta ad applicare la reattività e all'interno di questi la classe contenitore viene modificata di conseguenza per rendere correttamente il sistema a griglia.

Bootstrap utilizza Helvetica Neue, Helvetica, Arial e sans-serif nella sua pila di caratteri predefinita. Utilizzando la funzionalità tipografica di Bootstrap puoi creare titoli, paragrafi, elenchi e altri elementi in linea. Vediamo imparare ognuno di questi nelle sezioni seguenti.

Titoli

Tutti i titoli HTML (da h1 a h6) hanno uno stile in Bootstrap. Di seguito è mostrato un esempio:

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Il segmento di codice sopra con Bootstrap produrrà il seguente risultato:

Sottotitoli in linea

Per aggiungere un sottotitolo inline a uno qualsiasi dei titoli, aggiungi semplicemente <small> attorno a uno qualsiasi degli elementi o aggiungi .small classe e otterrai un testo più piccolo in un colore più chiaro come mostrato nell'esempio sotto -

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

Il segmento di codice sopra con Bootstrap produrrà il seguente risultato:

Lead Body Copy

Per aggiungere un po 'di enfasi a un paragrafo, aggiungi class = "lead". Questo ti darà una dimensione del carattere più grande, un peso più leggero e un'altezza della linea più alta come nell'esempio seguente:

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Enfasi

I tag di enfasi predefiniti dell'HTML come <small> impostano il testo all'85% della dimensione del genitore, <strong> enfatizza un testo con un carattere più pesante e <em> enfatizza un testo in corsivo.

Bootstrap offre alcune classi che possono essere utilizzate per enfatizzare i testi come mostrato nel seguente esempio:

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Abbreviazioni

L'elemento HTML <abbr> fornisce markup per abbreviazioni o acronimi, come WWW o HTTP. Bootstrap stili gli elementi <abbr> con un bordo punteggiato chiaro lungo la parte inferiore e rivela il testo completo al passaggio del mouse (a condizione che il testo venga aggiunto all'attributo del titolo <abbr>). Per ottenere una dimensione del carattere leggermente più piccola, aggiungi .initialism a <abbr>.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Indirizzi

Usando il tag <address> puoi visualizzare le informazioni di contatto sulla tua pagina web. Poiché <address> di default mostra: block; dovrai usare

Tag per aggiungere interruzioni di riga al testo dell'indirizzo incluso.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

Blockquotes

Puoi utilizzare il <blockquote> predefinito attorno a qualsiasi testo HTML. Altre opzioni includono l'aggiunta di un tag <small> per identificare la fonte della citazione e l'allineamento a destra del blockquote utilizzando class .pull-right . L'esempio seguente mostra tutte queste funzionalità:

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Liste

Bootstrap supporta elenchi ordinati, elenchi non ordinati ed elenchi di definizioni.

• Ordered lists - Un elenco ordinato è un elenco che rientra in una sorta di ordine sequenziale ed è preceduto da numeri.

• Unordered lists- Un elenco non ordinato è un elenco che non ha un ordine particolare ed è tradizionalmente in stile con i punti elenco. Se non vuoi che appaiano i punti elenco , puoi rimuovere lo stile utilizzando la classe .list-unstyled . Puoi anche inserire tutti gli elementi dell'elenco su una singola riga utilizzando la classe .list-inline .

• Definition lists- In questo tipo di elenco, ogni elemento dell'elenco può essere costituito sia dagli elementi <dt> che dagli elementi <dd>. <dt> sta per termine di definizione e, come un dizionario, questo è il termine (o frase) che viene definito. Successivamente, <dd> è la definizione di <dt>. Puoi allineare i termini e le descrizioni in <dl> fianco a fianco usando la classe dl-horizontal .

L'esempio seguente mostra ciascuno di questi tipi:

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

Bootstrap ti consente di visualizzare il codice con due diversi modi chiave:

• Il primo è il tag <code>. Se stai per visualizzare il codice inline, dovresti usare il tag <code>.

• Il secondo è il tag <pre>. Se il codice deve essere visualizzato come elemento di blocco autonomo o se ha più righe, è necessario utilizzare il tag <pre>.

Assicurati che quando usi i tag <pre> e <code>, utilizzi le varianti Unicode per i tag di apertura e chiusura - &lt; e &gt;.

Vediamo un esempio di seguito:

<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use &lt;pre&gt; tag as:</p>

<pre>
   &lt;article&gt;
      &lt;h1&gt;Article Heading&lt;/h1&gt;
   &lt;/article&gt;
</pre>

Bootstrap fornisce un layout pulito per la creazione di tabelle. Alcuni degli elementi della tabella supportati da Bootstrap sono:

Tabella di base

Se desideri uno stile di tabella piacevole e di base con solo un po 'di imbottitura leggera e divisori orizzontali, aggiungi la classe base di .table a qualsiasi tabella come mostrato nell'esempio seguente:

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

Classi tabella opzionali

Insieme al markup della tabella di base e alla classe .table, ci sono alcune classi aggiuntive che puoi usare per definire lo stile del markup. Le sezioni seguenti ti daranno un'idea di tutte queste classi.

Tavolo a strisce

Aggiungendo la classe .table-striped , otterrai strisce sulle righe all'interno di <tbody> come mostrato nell'esempio seguente:

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Tavolo bordato

Aggiungendo la classe .table-bordered , otterrai bordi che circondano ogni elemento e angoli arrotondati attorno all'intera tabella come mostrato nell'esempio seguente:

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Hover Table

Aggiungendo la classe .table-hover , uno sfondo grigio chiaro verrà aggiunto alle righe mentre il cursore passa sopra di esse, come mostrato nell'esempio seguente:

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Tabella condensata

Aggiungendo la classe .table-condensed , il riempimento delle righe viene tagliato a metà per condensare la tabella. come si vede nell'esempio seguente. Ciò è utile se desideri informazioni più dense.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Classi contestuali

Le classi contestuali mostrate nella tabella seguente ti permetteranno di cambiare il colore di sfondo delle righe della tabella o delle singole celle.

Queste classi possono essere applicate a <tr>, <td> o <th>.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Tabelle reattive

Avvolgendo qualsiasi .table in una classe .table-responsive , farai scorrere la tabella orizzontalmente fino a piccoli dispositivi (sotto 768px). Durante la visualizzazione su qualcosa di più grande di 768px di larghezza, non vedrai alcuna differenza in queste tabelle.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>

In questo capitolo studieremo come creare moduli con facilità utilizzando Bootstrap. Bootstrap lo rende facile con il semplice markup HTML e classi estese per diversi stili di moduli. In questo capitolo studieremo come creare form con facilità usando Bootstrap.

Layout del modulo

Bootstrap ti fornisce i seguenti tipi di layout di modulo:

• Forma verticale (predefinita)
• Modulo in linea
• Forma orizzontale

Forma verticale o di base

La struttura di base del modulo viene fornita con Bootstrap; i singoli controlli del modulo ricevono automaticamente uno stile globale. Per creare un modulo di base, procedi come segue:

• Aggiungi un modulo di ruolo all'elemento <form> padre.

• Avvolgi etichette e controlli in un <div> con class .form-group . Ciò è necessario per una spaziatura ottimale.

• Aggiungi una classe di .form-control a tutti gli elementi <input>, <textarea> e <select> testuali.

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Modulo in linea

Per creare un modulo in cui tutti gli elementi sono in linea, allineati a sinistra e le etichette sono accanto, aggiungi la classe .form-inline al tag <form>.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

• Per impostazione predefinita, gli input, le selezioni e le aree di testo hanno una larghezza del 100% in Bootstrap. È necessario impostare una larghezza sui controlli del modulo quando si utilizza il modulo inline.

• Usando la classe .sr-only puoi nascondere le etichette dei form inline.

Forma orizzontale

I moduli orizzontali si distinguono dagli altri non solo nella quantità di markup, ma anche nella presentazione del modulo. Per creare un modulo che utilizza il layout orizzontale, procedi come segue:

• Aggiungi una classe di .form-horizontal all'elemento genitore <form>.

• Avvolgi etichette e controlli in un <div> con class .form-group .

• Aggiungi una classe di .control-label alle etichette.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Controlli modulo supportati

Bootstrap supporta nativamente i controlli di form più comuni principalmente input, textarea, checkbox, radio e select.

Ingressi

Il campo di testo del modulo più comune è il campo di input. Qui è dove gli utenti inseriranno la maggior parte dei dati essenziali del modulo. Bootstrap offre supporto per tutti i tipi di input HTML5 nativi: testo, password, datetime, datetime-local, data, mese, ora, settimana, numero, e-mail, URL, ricerca, telefono e colore . La dichiarazione del tipo corretta è necessaria per rendere gli input completamente stilizzati.

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

L'area di testo viene utilizzata quando sono necessarie più righe di input. Modificare l' attributo delle righe secondo necessità (meno righe = riquadro più piccolo, più righe = riquadro più grande).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Caselle di controllo e pulsanti di opzione

Le caselle di controllo ei pulsanti di opzione sono ottimi quando desideri che gli utenti scelgano da un elenco di opzioni preimpostate.

• Quando si crea un modulo, utilizzare la casella di controllo se si desidera che l'utente selezioni un numero qualsiasi di opzioni da un elenco. Usa la radio se vuoi limitare l'utente a una sola selezione.

• Usa .checkbox-inline o .radio-inline class per una serie di checkbox o radio per i controlli visualizzati sulla stessa riga.

L'esempio seguente mostra entrambi i tipi (predefinito e inline):

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Seleziona

Una selezione viene utilizzata quando si desidera consentire all'utente di scegliere tra più opzioni, ma per impostazione predefinita ne consente solo una.

• Usa <select> per le opzioni dell'elenco con cui l'utente ha familiarità, come stati o numeri.

• Usa multiple = "multiple" per consentire agli utenti di selezionare più di un'opzione.

L'esempio seguente mostra entrambi i tipi (select e multiple):

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Controllo statico

Usa la classe .form-control-static su <p>, quando devi inserire testo normale accanto all'etichetta di un modulo all'interno di un modulo orizzontale.

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Stati di controllo del modulo

Oltre allo stato : focus (cioè, un utente fa clic sull'input o su di esso), Bootstrap offre stili per input disabilitati e classi per la convalida del modulo.

Focus sull'input

Quando un input riceve : focus , il contorno dell'input viene rimosso e viene applicata una casella-ombra .

Input disabilitati

Se è necessario disabilitare un input, la semplice aggiunta dell'attributo disabled non solo lo disabiliterà; cambierà anche lo stile e il cursore del mouse quando il cursore passa sopra l'elemento.

Fieldset disabilitati

Aggiungi l'attributo disabled a un <fieldset> per disabilitare tutti i controlli all'interno di <fieldset> contemporaneamente.

Stati di convalida

Bootstrap include stili di convalida per errori, avvisi e messaggi di successo. Per usarlo, aggiungi semplicemente la classe appropriata ( .has-warning, .has-error o .has-success ) all'elemento genitore.

L'esempio seguente mostra tutti gli stati di controllo del modulo:

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Dimensionamento del controllo del modulo

Puoi impostare altezze e larghezze dei moduli utilizzando classi come .input-lg e .col-lg- * rispettivamente. Il seguente esempio lo dimostra:

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Testo guida

I controlli del modulo Bootstrap possono avere un testo della guida a livello di blocco che scorre con gli input. Per aggiungere un blocco di contenuto a larghezza intera, usa il blocco .help dopo <input>. Il seguente esempio lo dimostra:

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

Questo capitolo copre l'età d'uso del pulsante Bootstrap con esempi. Tutto ciò a cui viene assegnata una classe.btnerediterà l'aspetto predefinito di un pulsante grigio con angoli arrotondati. Tuttavia, Bootstrap fornisce alcune opzioni per i pulsanti di stile, che sono riassunte nella tabella seguente:

L'esempio seguente mostra tutte le classi di pulsanti precedenti:

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Dimensione pulsante

La tabella seguente riassume le classi utilizzate per ottenere pulsanti di varie dimensioni:

Il seguente esempio lo dimostra:

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Stato del pulsante

Bootstrap fornisce classi che consentono di modificare lo stato dei pulsanti come attivi, disabilitati ecc., Ognuna delle quali viene discussa nelle sezioni seguenti.

Stato attivo

I pulsanti appariranno premuti (con uno sfondo più scuro, un bordo più scuro e un'ombra all'interno) quando attivi. La tabella seguente riepiloga le classi utilizzate per rendere attivi gli elementi pulsante e gli elementi di ancoraggio:

Il seguente esempio lo dimostra:

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Stato disabilitato

Quando disabiliti un pulsante, il colore si sbiadirà del 50% e perderà il gradiente.

La tabella seguente riepiloga le classi utilizzate per disabilitare l'elemento pulsante e l'elemento di ancoraggio:

Il seguente esempio lo dimostra:

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Tag dei pulsanti

Puoi usare classi di pulsanti con l'elemento <a>, <button> o <input>. Ma si consiglia di utilizzarlo con gli elementi <button> principalmente per evitare problemi di incoerenza tra browser.

Il seguente esempio lo dimostra:

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

Questo capitolo tratta il supporto Bootstrap per le immagini. Bootstrap fornisce tre classi che possono essere utilizzate per applicare alcuni stili semplici alle immagini:

• .img-rounded- aggiunge border-radius: 6px per dare all'immagine angoli arrotondati.

• .img-circle- rende l'intera immagine rotonda aggiungendo border-radius: 500px .

• .img-thumbnail - aggiunge un po 'di imbottitura e un bordo grigio -

Il seguente esempio lo dimostra:

<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">

Questo capitolo discute alcune delle classi di supporto in Bootstrap che potrebbero tornare utili.

Icona Chiudi

Utilizza l'icona di chiusura generica per eliminare contenuti come modali e avvisi. Usa la classeclose per ottenere l'icona di chiusura.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Accenti

Utilizza i simboli per indicare la funzionalità e la direzione del menu a discesa. Per ottenere questa funzionalità usa la classecaret con un elemento <span>.

<p>Caret Example<span class = "caret"></span></p>

Galleggianti veloci

Puoi spostare un elemento a sinistra oa destra con classe pull-left o pull-right rispettivamente il seguente esempio lo dimostra.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

Per allineare i componenti nelle barre di navigazione con le classi di utilità, utilizzare .navbar-left o .navbar-rightanziché. Vedere il capitolo sulla barra di navigazione per i dettagli.

Blocchi di contenuto del centro

Usa classe center-block per impostare un elemento al centro.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

Per cancellare il float di qualsiasi elemento, usa il .clearfix classe.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Mostrare e nascondere i contenuti

È possibile forzare la visualizzazione o la visualizzazione di un elemento (anche per gli screen reader) con l'uso delle classi .show e .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Contenuto dello screen reader

Puoi nascondere un elemento a tutti i dispositivi tranne i lettori di schermo con la classe .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

Qui possiamo vedere che l'etichetta di entrambi i tipi di input è assegnata alla classe sr-only, quindi le etichette saranno visibili solo ai lettori di schermo.

Bootstrap fornisce alcune classi di aiuto manciate, per uno sviluppo più veloce per dispositivi mobili. Questi possono essere usati per mostrare e nascondere i contenuti per dispositivo tramite media query, combinati con dispositivi grandi, piccoli e medi.

Usali con parsimonia ed evita di creare versioni completamente diverse dello stesso sito. Responsive utilities are currently only available for block and table toggling.

Corsi di stampa

La tabella seguente elenca le classi di stampa. Usali per alternare il contenuto per la stampa.

Esempio

L'esempio seguente mostra l'uso delle classi di supporto elencate sopra. Ridimensiona il browser o carica l'esempio su diversi dispositivi per testare le classi di utilità reattive.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks indica che l'elemento è visibile nella visualizzazione corrente.

Questo capitolo tratterà di Glyphicons, il suo utilizzo e alcuni esempi. Bootstrap raggruppa 200 glifi in formato font. Vediamo ora cosa sono i Glyphicons.

Cosa sono i glificoni?

I glifici sono caratteri icona che puoi utilizzare nei tuoi progetti web. I Glyphicons Halfling non sono gratuiti e richiedono una licenza, tuttavia il loro creatore li ha resi disponibili gratuitamente per i progetti Bootstrap.

"Si consiglia, come ringraziamento, di includere un collegamento facoltativo a GLYPHICONS ogni volta che è possibile". - Documentazione Bootstrap

Dove trovare i glificoni?

Ora che abbiamo scaricato la versione 3.x di Bootstrap e comprendiamo la sua struttura di directory dal capitolo Configurazione dell'ambiente , i glyphicons possono essere trovati all'interno della cartella dei font . Questo contiene i seguenti file:

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

Le regole CSS associate sono presenti nei file bootstrap.css e bootstrap-min.css all'interno della cartella css della cartella dist . Puoi vedere i glyphicons disponibili a questo link GLYPHICONS .

Utilizzo

Per utilizzare le icone, è sufficiente utilizzare il codice seguente praticamente ovunque nel codice. Lascia uno spazio tra l'icona e il testo per un riempimento corretto.

<span class = "glyphicon glyphicon-search"></span>

Il seguente esempio lo dimostra:

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

Questo capitolo evidenzierà i menu a discesa di Bootstrap. I menu a discesa sono menu contestuali attivabili per visualizzare i collegamenti in un formato elenco. Questo può essere reso interattivo con il plugin JavaScript a discesa .

Per utilizzare il menu a discesa, avvolgi il menu a discesa all'interno della classe .dropdownL'esempio seguente mostra un menu a discesa di base:

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Opzioni

Allineamento

Allinea il menu a discesa a destra aggiungendo la classe .pull-right per .dropdown-menu. Il seguente esempio lo dimostra:

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Intestazioni

Puoi aggiungere un'intestazione per etichettare sezioni di azioni in qualsiasi menu a discesa utilizzando la classe dropdown-header. Il seguente esempio lo dimostra:

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation" >
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

I gruppi di pulsanti consentono di impilare più pulsanti insieme su una singola riga. Ciò è utile quando si desidera posizionare insieme elementi come pulsanti di allineamento. È possibile aggiungere una radio JavaScript opzionale e un comportamento in stile casella di controllo con Bootstrap Button Plugin .

La seguente tabella riassume le classi importanti che Bootstrap fornisce per utilizzare i gruppi di pulsanti:

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button1</button>
   <button type = "button" class = "btn btn-default">Button2</button>
</div>

<div class = "btn-toolbar" role = "toolbar">
   <div class = "btn-group">...</div>
   <div class = "btn-group">...</div>
</div>

<div class = "btn-group btn-group-lg">...</div>
<div class = "btn-group btn-group-sm">...</div>
<div class = "btn-group btn-group-xs">...</div>

<div class = "btn-group-vertical">
   ...
</div>

Gruppo di pulsanti di base

Il seguente esempio dimostra l'uso di class .btn-group discusso nella tabella sopra -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Barra degli strumenti dei pulsanti

Il seguente esempio dimostra l'uso di class .btn-toolbar discusso nella tabella sopra -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Dimensione pulsante

Il seguente esempio dimostra l'uso di class .btn-group-* discusso nella tabella sopra -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Nidificazione

È possibile nidificare i gruppi di pulsanti all'interno di un altro gruppo di pulsanti, ad esempio posizionare un file .btn-group all'interno di un altro .btn-group . Questo viene fatto quando si desidera che i menu a discesa siano combinati con una serie di pulsanti.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Buttongroup verticale

Il seguente esempio dimostra l'uso di class .btn-group-vertical discusso nella tabella sopra -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Questo capitolo discuterà su come aggiungere un menu a discesa ai pulsanti utilizzando le classi Bootstrap. Per aggiungere un menu a discesa a un pulsante, racchiudi semplicemente il pulsante e il menu a discesa in un file.btn-group. Puoi anche utilizzare <span class = "caret"> </span> per indicare che il pulsante è un menu a discesa.

L'esempio seguente mostra un elenco a discesa di un pulsante singolo di base:

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Menu a discesa dei pulsanti divisi

I menu a discesa dei pulsanti divisi utilizzano lo stesso stile generale del pulsante a discesa ma aggiungono un'azione principale insieme al menu a discesa. I pulsanti di divisione hanno l'azione principale a sinistra e un interruttore a destra che visualizza il menu a discesa.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>
   
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

Dimensione elenco a discesa pulsante

Puoi utilizzare i menu a discesa con qualsiasi dimensione di pulsante: .btn-large, .btn-sm, o .btn-xs.

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Variazione Dropup

I menu possono anche essere costruiti in modo da scorrere verso l'alto anziché verso il basso. Per ottenere ciò, aggiungi semplicemente.dropup al genitore .btn-group contenitore.

<div class = "row" style = "margin-left:50px; margin-top:200px">
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
</div>

Questo capitolo spiega un'altra caratteristica supportata da Bootstrap, i gruppi di input. I gruppi di input sono controlli modulo estesi . Utilizzando i gruppi di input è possibile anteporre e aggiungere facilmente testo o pulsanti agli input basati su testo.

Aggiungendo il contenuto anteposto e aggiunto a un campo di input, è possibile aggiungere elementi comuni all'input dell'utente. Ad esempio, puoi aggiungere il simbolo del dollaro, la @ per un nome utente Twitter o qualsiasi altra cosa che potrebbe essere comune per l'interfaccia dell'applicazione.

Per anteporre o aggiungere elementi a un file .form-control-

• Avvolgilo in un <div> con classe .input-group

• Come passaggio successivo, all'interno dello stesso <div>, inserisci i tuoi contenuti extra all'interno di un <span> con classe .input-group-addon.

• Ora posiziona questo <span> prima o dopo l'elemento <input>.

Per la compatibilità tra browser, evitare di utilizzare gli elementi <select> qui poiché non possono essere completamente definiti nei browser WebKit. Inoltre, non applicare le classi dei gruppi di input direttamente ai gruppi del modulo. Un gruppo di input è un componente isolato.

Gruppo di input di base

L'esempio seguente mostra il gruppo di input di base:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

Dimensionamento del gruppo di input

È possibile modificare la dimensione dei gruppi di input, aggiungendo le relative classi di dimensionamento del modulo come .input-group-lg, input-group-sm, input-group-xs al .input-groupsi. Il contenuto all'interno verrà ridimensionato automaticamente.

I seguenti esempi lo dimostrano:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

Caselle di controllo e componenti aggiuntivi radio

Puoi anteporre o aggiungere pulsanti di opzione e caselle di controllo invece del testo come mostrato nell'esempio seguente:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Button Addons

Puoi anche aggiungere o aggiungere pulsanti nei gruppi di input. Invece di.input-group-addon class, dovrai usare class .input-group-btnper avvolgere i bottoni. Ciò è necessario a causa degli stili di browser predefiniti che non possono essere sovrascritti. I seguenti esempi lo dimostrano:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
					
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Pulsanti con menu a discesa

L'aggiunta di pulsanti con menu a discesa nei gruppi di input può essere eseguita semplicemente avvolgendo il pulsante e il menu a discesa in un file .input-group-btn classe come dimostrato nel seguente esempio:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Pulsanti segmentati

Per segmentare i menu a discesa dei pulsanti nei gruppi di input, utilizzare lo stesso stile generale del pulsante a discesa, ma aggiungere un'azione principale insieme al menu a discesa come si può vedere nell'esempio seguente:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href ="#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
                  
               </div><!-- /btn-group -->
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Bootstrap fornisce alcune opzioni diverse per definire gli elementi di navigazione. Tutti condividono lo stesso markup e la stessa classe di base,.nav. Bootstrap fornisce anche una classe helper, per condividere markup e stati. Scambia le classi dei modificatori per passare da uno stile all'altro.

Navigazione tabulare o schede

Per creare un menu di navigazione a schede:

• Inizia con un elenco di base non ordinato con la classe base di .nav

• Aggiungi classe .nav-tabs.

Il seguente esempio lo dimostra:

<p>Tabs Example</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>

Pillole di navigazione

Pillole di base

Per trasformare le schede in pillole, segui gli stessi passaggi di cui sopra, usa la classe .nav-pills invece di .nav-tabs.

Il seguente esempio lo dimostra:

<p>Pills Example</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>

Pillole verticali

Puoi impilare le pillole verticalmente usando la classe .nav-stacked insieme alle classi - .nav, .nav-pills.

Il seguente esempio lo dimostra:

<p>Vertical Pills Example</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>

Nav giustificato

Puoi creare schede o pillole di larghezza uguale a quella del loro genitore su schermi più larghi di 768px usando class .nav-justified insieme a .nav, .nav-tabs o .nav, .nav-pillsrispettivamente. Sugli schermi più piccoli, i collegamenti di navigazione sono impilati.

Il seguente esempio lo dimostra:

<p>Justified Nav Elements Example</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>

Collegamenti disabilitati

Per ciascuno dei file .nav classi, se aggiungi il file .disabled class, creerà un collegamento grigio che disabilita anche il file :hover stato come mostrato nell'esempio seguente:

<p>Disabled Link Example</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(disabled link)</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(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Questa classe cambierà solo l'aspetto di <a>, non la sua funzionalità. Usa JavaScript personalizzato per disabilitare i link qui.

Menu a discesa

I menu di navigazione condividono una sintassi simile con i menu a discesa. Per impostazione predefinita, hai un elemento dell'elenco che ha un'ancora che lavora insieme ad alcuni attributi di dati per attivare un elenco non ordinato con un.dropdown-menu classe.

Schede con menu a discesa

Per aggiungere menu a discesa alla scheda:

• Inizia con un elenco di base non ordinato con la classe base di .nav

• Aggiungi la classe .nav-tabs.

• Ora aggiungi un elenco non ordinato con un file .dropdown-menu classe.

<p>Tabs With Dropdown Example</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 = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Pillole con menu a discesa

Per fare la stessa cosa con le pillole, scambia semplicemente il file .nav-tabs classe con .nav-pills come mostrato nell'esempio seguente.

<p>Pills With Dropdown Example</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 = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

La barra di navigazione è una delle caratteristiche principali dei siti Bootstrap. Le barre di navigazione sono componenti "meta" reattivi che fungono da intestazioni di navigazione per l'applicazione o il sito. Le barre di navigazione si comprimono nelle viste mobili e diventano orizzontali all'aumentare della larghezza della finestra disponibile. Al centro, la barra di navigazione include lo stile per i nomi dei siti e la navigazione di base.

Navbar predefinita

Per creare una barra di navigazione predefinita:

• Aggiungi le classi .navbar, .navbar-default al tag <nav>.

• Inserisci role = "navigation" all'elemento di cui sopra, per aiutare con l'accessibilità.

• Aggiungi una classe di intestazione .navbar-headerall'elemento <div>. Includi un elemento <a> con classnavbar-brand. Questo darà al testo una dimensione leggermente più grande.

• Per aggiungere collegamenti alla barra di navigazione, aggiungi semplicemente un elenco non ordinato con le classi di .nav, .navbar-nav.

Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Navbar reattivo

Per aggiungere funzionalità reattive alla barra di navigazione, il contenuto che desideri comprimere deve essere racchiuso in un <div> con classi .collapse, .navbar-collapse. La natura che crolla è fatta scattare da un pulsante che ha la classe di.navbar-togglee quindi presenta due elementi di dati. Il primo,data-toggle, viene utilizzato per indicare a JavaScript cosa fare con il pulsante e il secondo, data-target, indica quale elemento attivare / disattivare. Poi con una classe .icon-barcreare quello che ci piace chiamare il pulsante dell'hamburger. Questo attiverà gli elementi che si trovano nel file .nav-collapse<div>. Affinché questa funzionalità funzioni, è necessario includere il plug-in di compressione Bootstrap .

Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
	
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Moduli in Navbar

Invece di usare i moduli predefiniti basati su classi da Chapter Bootstrap Forms , i moduli che si trovano nella barra di navigazione, usa il.navbar-formclasse. Ciò garantisce il corretto allineamento verticale del modulo e il comportamento di compressione nelle finestre strette. Usa le opzioni di allineamento (spiegate nella sezione Allineamento dei componenti) per decidere dove risiede all'interno del contenuto della barra di navigazione.

Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
         <button type = "submit" class = "btn btn-default">Submit</button>
         
      </form>    
   </div>
   
</nav>

Pulsanti in Navbar

Puoi aggiungere pulsanti usando class .navbar-btn a <button> elementi che non risiedono in un <form> per centrarli verticalmente nella barra di navigazione. .navbar-btn può essere utilizzato sugli elementi <a> e <input>.

Non usare .navbar-btnné le classi di pulsanti standard sugli elementi <a> all'interno .navbar-nav.

Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
			
         <button type = "submit" class = "btn btn-default">Submit Button</button>
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Testo in Navbar

Per avvolgere stringhe di testo in un elemento usa la classe .navbar-text. Di solito viene utilizzato con il tag <p> per una corretta interlinea e colore. Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

Collegamenti non di navigazione

Se desideri utilizzare i collegamenti standard che non si trovano nel normale componente di navigazione della barra di navigazione, utilizza la classe navbar-link per aggiungere colori appropriati per le opzioni della barra di navigazione predefinita e inversa come mostrato nell'esempio seguente:

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

Allineamento dei componenti

Puoi allineare componenti come collegamenti di navigazione, moduli, pulsanti o testo a sinistra oa destra in una barra di navigazione utilizzando le classi di utilità.navbar-left o .navbar-right. Entrambe le classi aggiungeranno un float CSS nella direzione specificata. Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      
      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form> 
      
      <p class = "navbar-text navbar-left">Left align-Text</p>
      
      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form> 
		
      <p class = "navbar-text navbar-right">Right align-Text</p>
      
   </div>
</nav>

Fisso in alto

La barra di navigazione Bootstrap può essere dinamica nel suo posizionamento. Per impostazione predefinita, è un elemento a livello di blocco che prende il suo posizionamento in base al suo posizionamento nell'HTML. Con alcune classi helper, puoi posizionarlo nella parte superiore o inferiore della pagina oppure puoi farlo scorrere staticamente con la pagina.

Se vuoi che la barra di navigazione sia fissata in alto, aggiungi classe .navbar-fixed-top al .navbar class. Il seguente esempio lo dimostra:

Per evitare che la barra di navigazione si trovi sopra altri contenuti nel corpo della pagina, aggiungi almeno 50 pixel di spaziatura interna al tag <body> o prova i tuoi valori.

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Fisso in basso

Se vuoi che la barra di navigazione sia fissata in fondo alla pagina, aggiungi classe .navbar-fixed-bottom al .navbar class. Il seguente esempio lo dimostra:

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Top statico

Per creare una barra di navigazione che scorre con la pagina, aggiungi il file .navbar-static-topclasse. Questa classe non richiede l'aggiunta del riempimento a <body>.

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
				
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Barra di navigazione invertita

Per creare una barra di navigazione invertita con uno sfondo nero e con testo bianco, aggiungi semplicemente il file .navbar-inverse classe al .navbar classe come dimostrato nel seguente esempio:

Per evitare che la barra di navigazione si trovi sopra altri contenuti nel corpo della pagina, aggiungi almeno 50 pixel di spaziatura interna al tag <body> o prova i tuoi valori.

<nav class = "navbar navbar-inverse" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

I breadcrumb sono un ottimo modo per mostrare informazioni basate sulla gerarchia per un sito. Nel caso dei blog, i breadcrumb possono mostrare le date di pubblicazione, categorie o tag. Indicano la posizione della pagina corrente all'interno di una gerarchia di navigazione.

Un breadcrumb in Bootstrap è semplicemente un elenco non ordinato con una classe di .breadcrumb. Il separatore viene aggiunto automaticamente da CSS (bootstrap.min.css) tramite la seguente classe:

.breadcrumb > li + li:before {
   color: #CCCCCC;
   content: "/ ";
   padding: 0 5px;
}

L'esempio seguente mostra i breadcrumb:

<ol class = "breadcrumb">
   <li><a href = "#">Home</a></li>
   <li><a href = "#">2013</a></li>
   <li class = "active">November</li>
</ol>

Questo capitolo tratta della funzione di impaginazione supportata da Bootstrap. Impaginazione, una lista non ordinata è gestita da Bootstrap come molti altri elementi dell'interfaccia.

Impaginazione

La tabella seguente elenca le classi fornite da Bootstrap per gestire l'impaginazione.

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Impaginazione predefinita

Il seguente esempio dimostra l'uso di class .pagination discusso nella tabella sopra -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

stati

Il seguente esempio dimostra l'uso di class .disabled, .active discusso nella tabella sopra -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Dimensionamento

L'esempio seguente mostra l'uso delle classi per il dimensionamento, .pagination-* discusso nella tabella sopra -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Pager

Se è necessario creare semplici collegamenti di impaginazione che vadano oltre il testo, il cercapersone può funzionare abbastanza bene. Come i collegamenti di paginazione, il cercapersone è un elenco non ordinato. Per impostazione predefinita, i collegamenti sono centrati. La tabella seguente elenca le classi che Bootstrap fornisce per il cercapersone.

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Pager predefinito

Il seguente esempio dimostra l'uso di class .pager discusso nella tabella sopra -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

Collegamenti allineati

L'esempio seguente mostra l'uso delle classi per l'allineamento, .previous, .next discusso nella tabella sopra -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

stati

Il seguente esempio dimostra l'uso di class .disabled discusso nella tabella sopra -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Questo capitolo tratta le etichette Bootstrap. Le etichette sono ottime per offrire conteggi, suggerimenti o altri markup per le pagine. Usa classe.label per visualizzare le etichette come mostrato nel seguente esempio:

<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>

È possibile modificare l'aspetto delle etichette utilizzando le classi di modificatori come, label-default, label-primary, label-success, label-info, label-warning, label-danger come mostrato nell'esempio seguente:

<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>

Questo capitolo discuterà dei badge Bootstrap. I badge sono simili alle etichette; la differenza principale è che gli angoli sono più arrotondati.

I badge vengono utilizzati principalmente per evidenziare elementi nuovi o non letti. Per usare i badge basta aggiungere<span class = "badge"> a collegamenti, navigazione Bootstrap e altro.

Il seguente esempio lo dimostra:

<a href = "#">Mailbox <span class = "badge">50</span></a>

Quando non ci sono elementi nuovi o non letti, i badge verranno semplicemente compressi tramite CSS :empty selettore, a condizione che non esista alcun contenuto all'interno.

Stati di navigazione attivi

È possibile posizionare badge negli stati attivi delle navigazioni di pillole ed elenchi. Puoi ottenere ciò posizionando<span class = "badge"> ai collegamenti attivi, come dimostrato nel seguente esempio:

<h4>Example for Active State in Pill </h4>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Example for Active State in navigations</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
   <li class = "active">
      <a href = "#">
         <span class = "badge pull-right">42</span>
         Home
      </a>
   </li>
	
   <li><a href = "#">Profile</a></li>
	
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>

Questo capitolo discuterà un'altra caratteristica supportata da Bootstrap, il Jumbotron. Come suggerisce il nome, questo componente può facoltativamente aumentare la dimensione dei titoli e aggiungere molto margine per il contenuto della pagina di destinazione. Per usare il Jumbotron -

• Crea un contenitore <div> con la classe di .jumbotron.

• Oltre a un <h1> più grande, lo spessore del carattere è ridotto a 200 px.

Il seguente esempio lo dimostra:

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Per ottenere un jumbotron di tutta larghezza e senza angoli arrotondati utilizzare il .jumbotron classe fuori da tutti .container classi e invece aggiungi un file .container all'interno, come mostrato nell'esempio seguente:

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

L'intestazione della pagina è una caratteristica piccola e carina per aggiungere la spaziatura appropriata intorno ai titoli di una pagina. Ciò è particolarmente utile su una pagina Web in cui potresti avere diversi titoli di post e hai bisogno di un modo per aggiungere distinzione a ciascuno di essi. Per utilizzare un'intestazione di pagina, racchiudi l'intestazione in un <div> con una classe di.page-header -

<div class = "page-header">
   <h1>
      Example page header 
      <small>Subtext for header</small>
   </h1>
</div>

<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>

Questo capitolo tratta delle miniature di Bootstrap. Molti siti hanno bisogno di un modo per disporre immagini, video, testo, ecc. In una griglia e Bootstrap ha un modo semplice per farlo con le miniature. Per creare miniature utilizzando Bootstrap -

• Aggiungi un tag <a> con la classe di .thumbnail intorno a un'immagine.

• Ciò aggiunge quattro pixel di riempimento e un bordo grigio.

• Al passaggio del mouse, un bagliore animato delinea l'immagine.

L'esempio seguente mostra una miniatura predefinita:

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
</div>

Aggiunta di contenuti personalizzati

Ora che abbiamo una miniatura di base, è possibile aggiungere qualsiasi tipo di contenuto HTML come intestazioni, paragrafi o pulsanti nelle miniature. Segui i passaggi seguenti:

• Cambia il tag <a> che ha una classe di .thumbnail a un <div>.

• All'interno di quel <div>, puoi aggiungere tutto ciò di cui hai bisogno. Poiché si tratta di un <div>, possiamo utilizzare la convenzione di denominazione basata su span predefinita per il dimensionamento.

• Se desideri raggruppare più immagini, inseriscile in un elenco non ordinato e ogni elemento dell'elenco verrà spostato a sinistra.

Il seguente esempio lo dimostra:

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role =" button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
</div>

Questo capitolo discuterà degli avvisi e delle classi che Bootstrap fornisce per gli avvisi. Gli avvisi forniscono un modo per definire lo stile dei messaggi per l'utente. Forniscono messaggi di feedback contestuali per le azioni tipiche degli utenti.

È possibile aggiungere un'icona di chiusura opzionale all'avviso. Per l'eliminazione in linea utilizzare il plug-in jQuery di avvisi .

Puoi aggiungere un avviso di base creando un wrapper <div> e aggiungendo una classe di .alert e una delle quattro classi contestuali (ad es. .alert-success, .alert-info, .alert-warning, .alert-danger). Il seguente esempio lo dimostra:

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Avvisi di licenziamento

Per creare un avviso di licenziamento:

• Aggiungi un avviso di base creando un wrapper <div> e aggiungendo una classe di .alert e una delle quattro classi contestuali (ad es. .alert-success, .alert-info, .alert-warning, .alert-danger)

• Aggiungi anche opzionale .alert-dismissable alla classe <div> sopra.

• Aggiungi un pulsante di chiusura.

Il seguente esempio lo dimostra:

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Assicurati di utilizzare l'elemento <button> con l' attributo dati data-dismiss = "alert" .

Collegamenti negli avvisi

Per ottenere collegamenti negli avvisi:

• Aggiungi un avviso di base creando un wrapper <div> e aggiungendo una classe di .alert e una delle quattro classi contestuali (ad es. .alert-success, .alert-info, .alert-warning, .alert-danger)

• Utilizzare il .alert-link classe di utilità per fornire rapidamente collegamenti colorati corrispondenti all'interno di qualsiasi avviso.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>

Questo capitolo tratta delle barre di avanzamento di Bootstrap. Lo scopo delle barre di avanzamento è mostrare che le risorse sono in caricamento, in corso o che è in corso un'azione relativa agli elementi sulla pagina.

Le barre di avanzamento utilizzano transizioni e animazioni CSS3 per ottenere alcuni dei loro effetti. Queste funzionalità non sono supportate in Internet Explorer 9 e versioni precedenti o precedenti di Firefox. Opera 12 non supporta le animazioni.

Barra di avanzamento predefinita

Per creare una barra di avanzamento di base:

• Aggiungi un <div> con una classe di .progress.

• Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar.

• Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Vediamo un esempio di seguito:

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra di avanzamento alternativa

Per creare una barra di avanzamento con stili diversi:

• Aggiungi un <div> con una classe di .progress.

• Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar e classe progress-bar-* dove * potrebbe essere success, info, warning, danger.

• Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Vediamo un esempio di seguito:

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra di avanzamento a strisce

Per creare una barra di avanzamento a strisce:

• Aggiungi un <div> con una classe di .progress e .progress-striped.

• Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar e classe progress-bar-* dove * potrebbe essere success, info, warning, danger.

• Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Vediamo un esempio di seguito:

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra di avanzamento animata

Per creare una barra di avanzamento animata:

• Aggiungi un <div> con una classe di .progress e .progress-striped. Aggiungi anche classe.active per .progress-striped.

• Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar.

• Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Questo animerà le strisce da destra a sinistra.

Vediamo un esempio di seguito:

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra di avanzamento in pila

Puoi anche impilare più barre di avanzamento. Posiziona le barre di avanzamento multiple nella stessa.progress per impilarli come mostrato nel seguente esempio:

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>

Questo capitolo discute dell'oggetto Media. Si tratta di stili di oggetti astratti per la creazione di vari tipi di componenti (come commenti di blog, Tweet e così via) che presentano un'immagine allineata a sinistra o a destra accanto al contenuto testuale. L'obiettivo dell'oggetto multimediale è di rendere il codice per lo sviluppo di questi blocchi di informazioni drasticamente più breve.

L'obiettivo degli oggetti multimediali (markup leggero, facile estendibilità) viene raggiunto applicando classi ad alcuni dei markup semplici. Ci sono due forme per l'oggetto multimediale:

• .media - Questa classe consente di posizionare un oggetto multimediale (immagini, video e audio) a sinistra oa destra di un blocco di contenuto.

• .media-list- Se stai preparando un elenco in cui gli elementi faranno parte di un elenco non ordinato, utilizza una classe. utile per thread di commenti o elenchi di articoli.

Vediamo un esempio di seguito di oggetto multimediale predefinito:

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>

Vediamo un esempio di elenco dei media -

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
			
         <p>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </p>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               
               <!-- Nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                        alt = "Generic placeholder image">
                  </a>
                  
                  <div class = "media-body">
                     <h4 class = "media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   
   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
            alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>

Lo scopo del componente gruppo di elenchi è di rendere contenuto complesso e personalizzato negli elenchi. Per ottenere un gruppo di elenchi di base:

• Aggiungi la classe .list-group all'elemento <ul>.

• Aggiungi classe .list-group-item a <li>.

Il seguente esempio lo dimostra:

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">24*7 support</li>
   <li class = "list-group-item">Renewal cost per year</li>
</ul>

Aggiunta di badge al gruppo di elenchi

Possiamo aggiungere il componente badge a qualsiasi elemento del gruppo di elenchi e verrà automaticamente posizionato a destra. Basta aggiungere<span class = "badge">all'interno dell'elemento <li>. Il seguente esempio lo dimostra:

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      24*7 support
   </li>
   
   <li class = "list-group-item">Renewal cost per year</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
</ul>

Collegamento di elementi del gruppo di elenchi

Usando gli anchor tag invece degli elementi dell'elenco, possiamo collegare i gruppi dell'elenco. Dobbiamo usare <div> invece dell'elemento <ul>. Il seguente esempio lo dimostra:

<a href = "#" class = "list-group-item active">
   Free Domain Name Registration
</a>

<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>

Aggiungi contenuto personalizzato al gruppo di elenchi

Possiamo aggiungere qualsiasi contenuto HTML ai gruppi di elenchi collegati sopra. Il seguente esempio lo dimostra:

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Starter Website Package
      </h4>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         24*7 support
      </h4>
      
      <p class = "list-group-item-text">
         We provide 24*7 support.
      </p>
   </a>
</div>

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Business Website Package
      </h4>
   </a>
   
   <a href = "#" class="list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">24*7 support</h4>
      <p class = "list-group-item-text">We provide 24*7 support.</p>
   </a>
</div>

Questo capitolo discuterà dei pannelli Bootstrap. I componenti del pannello vengono utilizzati quando si desidera inserire il componente DOM in una scatola. Per ottenere un pannello di base, aggiungi semplicemente la classe.panelall'elemento <div>. Aggiungi anche classe.panel-default a questo elemento come mostrato nel seguente esempio:

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Pannello con intestazione

Esistono due modi per aggiungere l'intestazione del pannello:

• Uso .panel-heading class per aggiungere facilmente un contenitore di intestazioni al pannello.

• Utilizza qualsiasi <h1> - <h6> con a .panel-title class per aggiungere un'intestazione con stile predefinito.

L'esempio seguente mostra entrambi i modi:

<div class = "panel panel-default">
   <div class = "panel-heading">
      Panel heading without title
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">
         Panel With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Pannello con piè di pagina

Puoi aggiungere piè di pagina ai pannelli, avvolgendo pulsanti o testo secondario in una classe contenente <div> .panel-footer. Il seguente esempio lo dimostra.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

I piè di pagina del pannello non ereditano colori e bordi quando si utilizzano variazioni contestuali in quanto non devono essere in primo piano.

Alternative contestuali del pannello

Usa classi di stato contestuali come, panel-primary, panel-success, panel-info, panel-warning, panel-danger, per rendere un pannello più significativo per un particolare contesto.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Pannello con tavoli

Per ottenere una tabella senza bordi all'interno di un pannello, usa la classe .tableall'interno del pannello. Supponiamo che ci sia un <div> contenente.panel-body, aggiungiamo un bordo extra nella parte superiore della tabella per la separazione. Se non è presente <div> contenente.panel-body, quindi il componente si sposta dall'intestazione del pannello alla tabella senza interruzioni.

Il seguente esempio lo dimostra:

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Pannello con gruppi di elenchi

È possibile includere gruppi di elenchi in qualsiasi pannello. Crea un pannello aggiungendo una classe.panelall'elemento <div>. Aggiungi anche classe.panel-defaulta questo elemento. Ora all'interno di questo pannello includi i tuoi gruppi di elenchi. Puoi imparare a creare un gruppo di elenchi dal capitolo Gruppi di elenchi .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>

Un pozzetto è un contenitore in <div> che fa sì che il contenuto appaia infossato o abbia un effetto interno sulla pagina. Per creare un pozzo, racchiudi semplicemente il contenuto che desideri che appaia nel pozzo con un <div> contenente la classe di.well. L'esempio seguente mostra un riquadro predefinito:

<div class = "well">Hi, am in well !!</div>

Dimensionamento

Puoi modificare la dimensione del pozzo utilizzando le classi opzionali come, well-lg o well-lg. Queste classi vengono utilizzate insieme a.wellclasse. Questi influenzano l'imbottitura, rendendo il pozzo più grande o più piccolo a seconda della classe.

<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>

I componenti discussi nei capitoli precedenti sotto Layout Componentssono solo l'inizio. Bootstrap viene fornito in bundle con 12 plugin jQuery che estendono le funzionalità e possono aggiungere più interazioni al tuo sito. Per iniziare con i plug-in JavaScript di Bootstrap, non è necessario essere uno sviluppatore JavaScript avanzato. Utilizzando Bootstrap Data API, la maggior parte dei plugin può essere attivata senza scrivere una sola riga di codice.

I plugin Bootstrap possono essere inclusi nel tuo sito in due forme:

• Individually- Utilizzo dei singoli file * .js di Bootstrap . Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi i plug-in singolarmente, assicurati di controllare queste dipendenze nei documenti.

• O compiled (all at once)- Utilizzando bootstrap.js o bootstrap.min.js minimizzato . Non tentare di includerli entrambi, poiché sia bootstrap.js che bootstrap.min.js contengono tutti i plugin in un unico file.

Tutti i plugin dipendono da jQuery. Quindi jQuery deve essere incluso prima dei file del plugin. Controlla bower.json per vedere quali versioni di jQuery sono supportate.

Attributi dei dati

• Tutti i plugin Bootstrap sono accessibili utilizzando la Data API inclusa. Pertanto, non è necessario includere una singola riga di JavaScript per richiamare nessuna delle funzionalità del plug-in.

• In alcune situazioni potrebbe essere opportuno disattivare questa funzionalità di Data API. Se è necessario disattivare l'API dei dati, è possibile svincolare gli attributi aggiungendo la seguente riga di JavaScript:

$(document).off('.data-api')

• Per disattivare un plug-in specifico / singolo, includi semplicemente il nome del plug-in come spazio dei nomi insieme allo spazio dei nomi data-api in questo modo:

$(document).off('.alert.data-api')

API programmatica

Gli sviluppatori di Bootstrap credono che dovresti essere in grado di utilizzare tutti i plugin esclusivamente tramite l'API JavaScript. Tutte le API pubbliche sono metodi singoli, concatenabili e restituiscono la raccolta su cui si è agito, ad esempio:

$(".btn.danger").button("toggle").addClass("fat")

Tutti i metodi accettano un oggetto opzioni opzionale, una stringa che prende di mira un metodo particolare o niente (che avvia un plugin con comportamento predefinito) come mostrato di seguito -

// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Ogni plugin espone anche il suo costruttore grezzo su un file Constructorproprietà: $ .fn.popover.Constructor . Se desideri ottenere una particolare istanza di plug-in, recuperala direttamente da un elemento -

$('[rel = popover]').data('popover').

Nessun conflitto

I plugin Bootstrap possono talvolta essere utilizzati con altri framework dell'interfaccia utente. In queste circostanze, possono occasionalmente verificarsi conflitti di spazio dei nomi. Per superare questa chiamata.noConflict sul plugin di cui desideri ripristinare il valore.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Eventi

Bootstrap fornisce eventi personalizzati per la maggior parte delle azioni uniche del plugin. Generalmente, questi eventi si presentano in due forme:

• Infinitive form- Viene attivato all'inizio di un evento. Ad esempio, mostra . Gli eventi infiniti forniscono la funzionalità preventDefault . Ciò fornisce la possibilità di interrompere l'esecuzione di un'azione prima che inizi.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

• Past participle form- Viene attivato al completamento di un'azione. Ad esempio mostrato.

Il plugin di transizione fornisce semplici effetti di transizione.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di transition.jsuna volta insieme agli altri file JS. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Transition.js è un supporto di base per gli eventi TransitionEnd, nonché un emulatore di transizione CSS. Viene utilizzato dagli altri plugin per verificare il supporto della transizione CSS e per rilevare le transizioni sospese.

Casi d'uso

Alcuni esempi del plugin di transizione sono:

• Scorrimento o dissolvenza in modalità modale. È possibile trovare un esempio nel capitolo Plugin modale Bootstrap .

• Schede in dissolvenza. Puoi trovare un esempio nel capitolo Plugin per schede Bootstrap .

• Avvisi in dissolvenza. È possibile trovare un esempio nel capitolo Avvisi Bootstrap .

• Vetri a carosello scorrevole. Puoi trovare un esempio nel capitolo Plugin Bootstrap Carousel .

Un modale è una finestra figlia che è sovrapposta alla sua finestra genitore. In genere, lo scopo è visualizzare il contenuto da un'origine separata che può interagire senza lasciare la finestra principale. Le finestre secondarie possono fornire informazioni, interazioni o altro.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di modal.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi attivare il contenuto nascosto del plug-in modale -

• Via data attributes - Imposta attributo data-toggle = "modal" su un elemento del controller, come un pulsante o un collegamento, insieme a un file data-target = "#identifier" o href = "#identifier" per scegliere come target un modale specifico (con id = "identificatore") da attivare.

• Via JavaScript - Usando questa tecnica puoi chiamare un modale con id = "identificatore" con una singola riga di JavaScript -

$('#identifier').modal(options)

Esempio

Un esempio di finestra modale statica è mostrato nel seguente esempio:

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

• Per richiamare la finestra modale, è necessario disporre di una sorta di trigger. Puoi utilizzare un pulsante o un collegamento. Qui abbiamo usato un pulsante.

• Se guardi nel codice sopra, vedrai che nel tag <button>, il data-target = "#myModal"è l'obiettivo del modale che desideri caricare nella pagina. Questo codice ti consente di creare più modali sulla pagina e quindi avere diversi trigger per ciascuno di essi. Ora, per essere chiari, non carichi più modali contemporaneamente, ma puoi crearne molti sulle pagine da caricare in momenti diversi.

• Ci sono due classi di cui prendere nota nel modale:

  • Il primo è .modal, che identifica semplicemente il contenuto di <div> come modale.

  • E il secondo è il .fadeclasse. Quando il modale è attivato, il contenuto verrà visualizzato in dissolvenza in entrata e in uscita.

• aria-labelledby = "myModalLabel", attributo fa riferimento al titolo modale.

• L'attributo aria-hidden = "true" viene utilizzato per mantenere invisibile la finestra modale fino a quando non viene attivato un trigger (come un clic sul pulsante associato).

• <div class = "modal-header">, modal-header è la classe per definire lo stile per l'intestazione della finestra modale.

• class = "close", è una chiusura della classe CSS che imposta lo stile per il pulsante Chiudi della finestra modale.

• data-dismiss = "modal", è un attributo di dati HTML5 personalizzato. Qui viene utilizzato per chiudere la finestra modale.

• class = "modal-body", è una classe CSS di Bootstrap CSS per impostare lo stile per il corpo della finestra modale.

• class = "modal-footer", è una classe CSS di Bootstrap CSS per impostare lo stile per il piè di pagina della finestra modale.

• data-toggle = "modal", L'attributo dati personalizzato HTML5 data-toggle viene utilizzato per aprire la finestra modale.

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript per personalizzare l'aspetto della finestra modale. La tabella seguente elenca le opzioni:

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Metodi

Ecco alcuni metodi utili che possono essere usati con modal ().

$('#identifier').modal({
   keyboard: false
})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

Esempio

Il seguente esempio dimostra l'utilizzo dei metodi:

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Basta fare clic sul pulsante Esc e la finestra modale si chiude.

Eventi

La tabella seguente elenca gli eventi su cui lavorare con modal. Questi eventi possono essere utilizzati per agganciarsi alla funzione.

$('#identifier').on('show.bs.modal', function () {
   // do something…
})

$('#identifier').on('shown.bs.modal', function () {
   // do something…
})

$('#identifier').on('hide.bs.modal', function () {
   // do something…
})

$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Esempio

L'esempio seguente mostra l'utilizzo degli eventi:

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Come si vede nella schermata sopra, se si fa clic sul pulsante Chiudi , ovvero nascondi evento, viene visualizzato un messaggio di avviso.

Utilizzando il plug-in Dropdown puoi aggiungere menu a discesa a qualsiasi componente come barre di navigazione, schede, pillole e pulsanti.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di dropdown.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi attivare o disattivare il contenuto nascosto del plug-in a discesa -

• Via data attributes - Aggiungi data-toggle = "dropdown" a un collegamento o pulsante per attivare un menu a discesa come mostrato di seguito -

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Se è necessario mantenere intatti i collegamenti (utile se il browser non abilita JavaScript), utilizzare il file data-target attributo invece di href = "#"-

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
      <span class = "caret"></span>
   </a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Via JavaScript - Per richiamare il menu a discesa tramite JavaScript, utilizza il seguente metodo:

$('.dropdown-toggle').dropdown()

Esempio

Within Navbar

L'esempio seguente mostra l'utilizzo del menu a discesa all'interno di una barra di navigazione:

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Within Tabs

L'esempio seguente mostra l'utilizzo del menu a discesa all'interno delle schede:

<p>Tabs With Dropdown Example</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 = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Opzioni

Non ci sono opzioni.

Metodi

L'interruttore a discesa ha un metodo semplice per mostrare o nascondere il menu a discesa.

$().dropdown('toggle')

Esempio

L'esempio seguente mostra l'utilizzo del metodo del plug-in a discesa.

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
            
            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
			
      </ul>
   </div>
   
</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
</script>

Il plug-in Scroll spia (aggiornamento automatico di navigazione) consente di scegliere come target le sezioni della pagina in base alla posizione di scorrimento. Nella sua implementazione di base, mentre scorri, puoi aggiungere.active classi alla barra di navigazione in base alla posizione di scorrimento.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di scrollspy.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi aggiungere un comportamento scrollspy alla tua barra di navigazione in alto -

• Via data attributes - aggiungi data-spy = "scroll"all'elemento che vuoi spiare (tipicamente il corpo). Quindi aggiungi l'attributodata-target con l'ID o la classe dell'elemento genitore di qualsiasi Bootstrap .navcomponente. Affinché funzioni, devi avere elementi nel corpo della pagina con ID corrispondenti dei link che stai spiando.

<body data-spy = "scroll" data-target = ".navbar-example">
   ...
   <div class = "navbar-example">
      <ul class = "nav nav-tabs">
         ...
      </ul>
   </div>
   ...
</body>

• Via JavaScript - Puoi richiamare lo scrollspy con JavaScript invece di utilizzare gli attributi dei dati, selezionando l'elemento da spiare e quindi invocando il .scrollspy() funzione -

$('body').scrollspy({ target: '.navbar-example' })

Esempio

Il seguente esempio mostra l'uso del plugin scrollspy tramite attributi di dati -

<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0" 
   style = "height:200px; overflow:auto; position: relative;">
   <h4 id = "ios">iOS</h4>
	
   <p>iOS is a mobile operating system developed and distributed by Apple 
      Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
      TV. iOS is derived from OS X, with which it shares the Darwin 
      foundation. iOS is Apple's mobile version of the OS X operating system 
      used on Apple computers.</p>
   
   <h4 id = "svn">SVN</h4>
   
   <p>Apache Subversion which is often abbreviated as SVN, is a software 
      versioning and revision control system distributed under an open source 
      license. Subversion was created by CollabNet Inc. in 2000, but now it 
      is developed as a project of the Apache Software Foundation, and as 
      such is part of a rich community of developers and users.</p>
   
   <h4 id = "jmeter">jMeter</h4>
   
   <p>jMeter is an Open Source testing software. It is 100% pure Java 
      application for load and performance testing.</p>
   
   <h4 id = "ejb">EJB</h4>
   
   <p>Enterprise Java Beans (EJB) is a development architecture for building 
      highly scalable and robust enterprise level applications to be deployed 
      on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   
   <h4 id = "spring">Spring</h4>
   
   <p>Spring framework is an open source Java platform that provides 
      comprehensive infrastructure support for developing robust Java 
      applications very easily and very rapidly.</p>
   
   <p>Spring framework was initially written by Rod Johnson and was first 
      released under the Apache 2.0 license in June 2003.</p>
   
</div>

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. La tabella seguente elenca le opzioni:

Metodi

.scrollspy('refresh') - Quando si chiama lo scrollspy tramite il metodo JavaScript, è necessario chiamare il file .refreshmetodo per aggiornare il DOM. Questo è utile se qualche elemento del DOM è cambiato, cioè se hai aggiunto o rimosso alcuni elementi. Di seguito sarebbe la sintassi per utilizzare questo metodo.

$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})

Esempio

Il seguente esempio dimostra l'uso di .scrollspy('refresh') metodo -

<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle  = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"  
   style = "height:200px; overflow:auto; position: relative;">
   
   <div class = "section">
      <h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "section">
      <h4 id = "svn">SVN<small></small></h4>
      <p>Apache Subversion which is often abbreviated as SVN, is a software 
         versioning and revision control system distributed under an open source 
         license. Subversion was created by CollabNet Inc. in 2000, but 
         now it is developed as a project of the Apache Software Foundation, 
         and as such is part of a rich community of developers and users.</p>
   </div>
   
   <div class = "section">
      <h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "section">
      <h4 id = "ejb">EJB</h4>
      
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications 
         to be deployed on J2EE compliant Application Server such as 
         JBOSS, Web Logic etc.</p>
   </div>
	
   <div class = "section">
      <h4 id = "spring">Spring</h4>
      
      <p>Spring framework is an open source Java platform that provides 
         comprehensive infrastructure support for developing robust Java 
         applications very easily and very rapidly.</p>
      
      <p>Spring framework was initially written by Rod Johnson and was first 
         released under the Apache 2.0 license in June 2003.</p>
   </div>
   
</div>

<script type = "text/javascript">
   $(function(){
      removeSection = function(e) {
         $(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
         });
      }
      $("#myScrollspy").scrollspy();
   });
</script>

Eventi

La tabella seguente elenca gli eventi su cui lavorare con scrollspy. Questo evento può essere utilizzato per agganciarsi alla funzione.

$('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
})

Esempio

Il seguente esempio dimostra l'uso di activate.bs.scrollspy evento -

<html>
   <head>
      <link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
      <script src = "bootstrap/scripts/jquery.min.js"></script>
      <script src = "bootstrap/js/bootstrap.min.js"></script>
      
      <script>
         $(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
            
               $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
         
            // The event is fired when an item gets actived with the scrollspy
            $("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
               $("#spyevent").html("Current Item being viewed >> " + currentSection);
            })
				
         });
      </script>
   
      <style>
         .scroll-box {
            height: 250px;
            position: relative;
            overflow: auto;
            font-size:2em;
         }
      </style>
   </head>
   
   <body>
      <div class = "container">
         <nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
      
            <!-- Nav Bar -->
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" 
                  data-toggle = "collapse" data-target = "#navbarCollapse">
               
                  <span class = "sr-only">Toggle navigation</span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>
					
               <a class = "navbar-brand" href = "#">Tutorials Point</a>
            </div>
            
            <!-- Links and Sublinks -->
            <div class = "collapse navbar-collapse" id = "navbarCollapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#subject-1">Subject 1</a></li>
                  <li><a href = "#subject-2">Subject 2</a></li>
               
                  <li class = "dropdown"><a href = "#" class = "dropdown-toggle" 
                     data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
                     
                     <ul class = "dropdown-menu">
                        <li><a href = "#subject-3-1">Subject 3.1</a></li>
                        <li><a href = "#subject-3-2">Subject 3.2</a></li>
                        <li><a href = "#subject-3-3">Subject 3.3</a></li>
                     </ul>
                     
                  </li>
						
                  <li><a href = "#subject-4">Subject 4</a></li>
               </ul>
            </div>
            
         </nav>
         
         <div class = "scroll-box" data-spy = "scroll" data-offset = "0">
            <div class = "subject">
            
               <h3 id = "subject-1">Subject 1 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-2">Subject 2 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-3">Subject 3 
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
            </div>
				
            <hr>
            
            <div class = "subject">
               <h4 id = "subject-3-1">Subject 3.1
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-2">Subject 3.2
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-3">Subject 3.3 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
            
            <div class = "subject">
               <h3 id = "subject-4">Subject 4 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
         </div>
         <hr>
         
         <h4 id = "spyevent" class = "text-info"></h4>
      </div>
   </body>
</html>

Le schede sono state introdotte nel capitolo Elementi di navigazione Bootstrap . Combinando alcuni attributi di dati, è possibile creare facilmente un'interfaccia a schede. Con questo plug-in è possibile passare da pannelli di contenuto locale a schede o pillole, anche tramite menu a discesa.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di tab.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi abilitare le schede nei due modi seguenti:

• Via data attributes - devi aggiungere data-toggle = "tab" o data-toggle = "pill" alle ancore.

  Aggiungendo il file nav e nav-tabs classi alla scheda ulapplicherà lo stile della scheda Bootstrap , aggiungendo il filenav e nav-pillsle classi applicheranno lo styling della pillola .

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>

• Via JavaScript - puoi abilitare le schede usando Javscript come sotto -

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

• Ecco un esempio di modi diversi per attivare singole schede:

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

Effetto dissolvenza

Per ottenere un effetto di dissolvenza per le schede, aggiungi .fade a ogni .tab-pane. Anche il primo riquadro a schede deve avere.in per sfumare correttamente nel contenuto iniziale -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Esempio

Un esempio di plug-in di tabulazione che utilizza attributi di dati ed effetto di dissolvenza è come mostrato nell'esempio seguente:

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

Metodi

.$().tab- Questo metodo attiva un elemento scheda e un contenitore di contenuti. La scheda dovrebbe avere un'estensionedata-target o un href targeting di un nodo contenitore nel DOM.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () { $('#myTab a:last').tab('show')
   })
</script>

Esempio

L'esempio seguente mostra l'uso del metodo del plug-in tab .tab. Qui nell'esempio è attivata la seconda scheda iOS -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
	
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () { $('#myTab li:eq(1) a').tab('show');
   });
</script>

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plugin tab. Questo evento può essere utilizzato per agganciarsi alla funzione.

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

Esempio

L'esempio seguente mostra l'uso degli eventi del plug-in della scheda. Qui nell'esempio verranno visualizzate le schede visitate correnti e precedenti -

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
      });
   });
</script>

I suggerimenti sono utili quando è necessario descrivere un collegamento. Il plugin è stato ispirato dal plugin jQuery.tipsy scritto da Jason Frame . Da allora i tooltip sono stati aggiornati per funzionare senza immagini, animati con un'animazione CSS e attributi di dati per l'archiviazione locale dei titoli.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di tooltip.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Il plug-in tooltip genera contenuto e markup su richiesta e, per impostazione predefinita, posiziona i tooltip dopo il loro elemento di attivazione. Puoi aggiungere suggerimenti nei seguenti due modi:

• Via data attributes - Per aggiungere una descrizione comando, aggiungi data-toggle = "tooltip"a un tag di ancoraggio. Il titolo dell'ancora sarà il testo di un suggerimento. Per impostazione predefinita, il suggerimento è impostato in alto dal plug-in.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

• Via JavaScript - Attiva la descrizione comando tramite JavaScript -

$('#identifier').tooltip(options)

Il plug-in Tooltip NON è solo plug-in CSS come il menu a discesa o altri plug-in discussi nei capitoli precedenti. Per usare questo plugin DEVI attivarlo usando jquery (leggi javascript). Per abilitare tutti i suggerimenti sulla tua pagina usa questo script -

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Esempio

Il seguente esempio dimostra l'uso del plugin tooltip tramite attributi di dati.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Opzioni

Ci sono alcune opzioni che possono essere aggiunte tramite Bootstrap Data API o richiamate tramite JavaScript. La tabella seguente elenca le opzioni:

delay: { show: 500, hide: 100 }

Metodi

Di seguito sono riportati alcuni metodi utili per i suggerimenti:

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#element').tooltip('destroy')

Esempio

Il seguente esempio dimostra l'uso del plugin tooltip tramite attributi di dati.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plugin tooltip. Questo evento può essere utilizzato per agganciarsi alla funzione.

$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Esempio

Il seguente esempio dimostra l'uso del plugin tooltip tramite attributi di dati.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>

Il popover è simile al tooltip, offrendo una vista estesa completa di un'intestazione. Affinché il popover si attivi, un utente deve solo posizionare il cursore sull'elemento. Il contenuto del popover può essere popolato interamente utilizzando Bootstrap Data API. Questo metodo richiede una descrizione comando.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file popover.jse ha una dipendenza dal plugin tooltip . Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Il plug-in popover genera contenuto e markup su richiesta e per impostazione predefinita inserisce il popover dopo il loro elemento di attivazione. Puoi aggiungere popover nei seguenti due modi:

• Via data attributes - Per aggiungere un popover, aggiungi data-toggle = "popover"a un tag di ancoraggio / pulsante. Il titolo dell'ancora sarà il testo di un popover. Per impostazione predefinita, il popover è impostato in alto dal plug-in.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

• Via JavaScript - Abilita i popover tramite JavaScript utilizzando la seguente sintassi -

$('#identifier').popover(options)

Il plug-in popover NON è solo plug-in CSS come il menu a discesa o altri plug-in discussi nei capitoli precedenti. Per usare questo plugin DEVI attivarlo usando jquery (leggi javascript). Per abilitare tutti i popover sulla tua pagina usa questo script -

$(function () { $("[data-toggle = 'popover']").popover(); });

Esempio

Il seguente esempio dimostra l'uso del plugin popover tramite attributi di dati.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Opzioni

Ci sono alcune opzioni che possono essere aggiunte tramite Bootstrap Data API o richiamate tramite JavaScript. La tabella seguente elenca le opzioni:

delay: { show: 500, hide: 100 }

Metodi

Di seguito sono riportati alcuni metodi utili per il popover:

$().popover(options)

$('#element').popover('toggle')

$('#element').popover('show')

$('#element').popover('hide')

$('#element').popover('destroy')

Esempio

L'esempio seguente mostra i metodi del plugin popover:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plugin popover. Questo evento può essere utilizzato per agganciarsi alla funzione.

$('#mypopover').on('show.bs.popover', function () {
   // do something
})

$('#mypopover').on('shown.bs.popover', function () {
   // do something
})

$('#mypopover').on('hide.bs.popover', function () {
   // do something
})

$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Esempio

L'esempio seguente mostra gli eventi del plug-in Popover:

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

I messaggi di avviso vengono utilizzati principalmente per visualizzare informazioni come messaggi di avviso o di conferma agli utenti finali. Utilizzando il plug-in dei messaggi di avviso è possibile aggiungere la funzionalità di eliminazione a tutti i messaggi di avviso.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file alert.js. Altrimenti, come menzionato nel capitolo Panoramica dei plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi abilitare l'eliminazione di un avviso nei due modi seguenti:

• Via data attributes - Per ignorare tramite Data API basta aggiungere data-dismiss = "alert" al pulsante di chiusura per fornire automaticamente una funzionalità di chiusura dell'avviso.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

• Via JavaScript - Per ignorare tramite JavaScript usa la seguente sintassi -

$(".alert").alert()

Esempio

L'esempio seguente mostra l'uso del plug-in di avviso tramite attributi di dati.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Opzioni

Non ci sono opzioni qui.

Metodi

Di seguito sono riportati alcuni metodi utili per il plug-in di avviso:

$('#identifier').alert();

$('#identifier').alert('close');

Per abilitare l'animazione degli avvisi quando sono chiusi, assicurati che abbiano l'estensione .fade e .in classe già applicata a loro.

Esempio

Il seguente esempio dimostra l'uso di .alert() metodo -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){ $("#myAlert").alert();
      });
   });  
</script>

Il seguente esempio dimostra l'uso di .alert('close') metodo -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){ $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Prova questo codice usando il Try iteditore. Puoi vedere che la funzionalità di chiusura viene applicata a tutti i messaggi di avviso, ad esempio chiudi qualsiasi messaggio di avviso, anche il resto dei messaggi di avviso viene chiuso.

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plugin di avviso. Questo evento può essere utilizzato per collegarsi alla funzione di avviso.

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Esempio

L'esempio seguente mostra gli eventi del plug-in di avviso:

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>

I pulsanti sono stati spiegati nel capitolo Pulsanti Bootstrap . Con questo plugin puoi aggiungere alcune interazioni come gli stati dei pulsanti di controllo o creare gruppi di pulsanti per più componenti come le barre degli strumenti.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file button.js. Altrimenti, come accennato nel capitolo Bootstrap Plugin Panoramica , è possibile includere le bootstrap.js oi minified i bootstrap.min.js .

Stato di caricamento

Per aggiungere uno stato di caricamento a un pulsante, è sufficiente aggiungere il file data-loading-text = "Loading..." come attributo dell'elemento button come mostrato nel seguente esempio:

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Quando si fa clic sul pulsante, l'output sarà come mostrato nell'immagine seguente:

Interruttore singolo

Per attivare la commutazione (ovvero modificare lo stato normale di un pulsante in uno stato di pressione e viceversa) su un singolo pulsante, aggiungere il data-toggle = "button" come attributo dell'elemento button come mostrato nel seguente esempio:

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

Casella di controllo

È possibile creare un gruppo di caselle di controllo e aggiungere la commutazione ad esso semplicemente aggiungendo l'attributo dei dati data-toggle = "buttons" al btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Radio

Allo stesso modo è possibile creare un gruppo di ingressi radio e aggiungere la commutazione ad esso semplicemente aggiungendo l'attributo data data-toggle = "buttons" al btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>

Utilizzo

Puoi abilitare il plugin dei pulsanti via JavaScript come mostrato di seguito -

$('.btn').button()

Opzioni

Non ci sono opzioni.

Metodi

Di seguito sono riportati alcuni dei metodi utili per il plug-in dei pulsanti:

$().button('toggle')

$().button('loading')

$().button('reset')

$().button(string)

Esempio

Il seguente esempio dimostra l'uso dei metodi precedenti:

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () { $("#myButtons1 .btn").click(function(){
         $(this).button('toggle'); }); }); $(function() { 
      $("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
         });        
      });
   });  
   
   $(function() { $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
         });        
      });
   }); 
</script>

Il plug-in di compressione semplifica la compressione delle divisioni della pagina. Sia che tu lo usi per costruire una navigazione a fisarmonica o scatole di contenuti, consente molte opzioni di contenuto.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file collapse.js. Ciò richiede anche che il plug-in di transizione sia incluso nella tua versione di Bootstrap. Altrimenti, come menzionato nel capitolo Panoramica dei plugin Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Puoi utilizzare il plug-in di compressione:

• To create collapsible groups or accordion. Questo può essere creato come nell'esempio di esempio di seguito:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

• data-toggle = "collapse" viene aggiunto al collegamento su cui si fa clic per espandere o comprimere il componente.

• href o a data-targetl'attributo viene aggiunto al componente genitore, il cui valore è id del componente figlio.

• data-parent viene aggiunto l'attributo per creare l'effetto simile a una fisarmonica.

• Per creare un semplice pieghevole senza il markup della fisarmonica - Questo può essere creato come nell'esempio di esempio sotto -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Come puoi vedere nell'esempio abbiamo creato un semplice componente pieghevole, a differenza della fisarmonica, non abbiamo aggiunto l'attributo data-parent.

Utilizzo

La tabella seguente elenca le classi che il plug-in di compressione utilizza per gestire il sollevamento di carichi pesanti:

Puoi utilizzare il plug-in di compressione in due modi:

• Via data attributes - Aggiungi data-toggle = "collapse" e a data-targetall'elemento per assegnare automaticamente il controllo di un elemento comprimibile. Ildata-targetl'attributo accetterà un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe.collapseall'elemento pieghevole. Se desideri che sia aperto per impostazione predefinita, includi la classe aggiuntiva.in.

  Per aggiungere la gestione del gruppo simile a una fisarmonica a un controllo comprimibile, aggiungi l'attributo data data-parent = "#selector".

• Via JavaScript - Il metodo di compressione può essere attivato con JavaScript come mostrato di seguito -

$('.collapse').collapse()

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript sono elencate nella seguente tabella:

Metodi

Di seguito è riportato un elenco di alcuni metodi utili utilizzati con elementi comprimibili.

$('#identifier').collapse({
   toggle: false
})

$('#identifier').collapse('toggle')

$('#identifier').collapse('show')

$('#identifier').collapse('hide')

Esempio

Il seguente esempio dimostra l'utilizzo dei metodi:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>

Eventi

La tabella seguente elenca alcuni eventi che possono essere utilizzati con la funzionalità di compressione.

$('#identifier').on('show.bs.collapse', function () {
   // do something
})

$('#identifier').on('shown.bs.collapse', function () {
   // do something
})

$('#identifier').on('hide.bs.collapse', function () {
   // do something
})

$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Esempio

L'esempio seguente mostra l'utilizzo degli eventi:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

Il carosello Bootstrap è un modo flessibile e reattivo per aggiungere uno slider al tuo sito. Oltre ad essere reattivo, il contenuto è abbastanza flessibile da consentire immagini, iframe, video o qualsiasi tipo di contenuto che potresti desiderare.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file carousel.js. Altrimenti, come menzionato nel capitolo Panoramica dei plugin Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Esempio

Una semplice presentazione di seguito mostra un componente generico per scorrere gli elementi come un carosello, utilizzando il plug-in carosello Bootstrap. Per implementare il carousel, è sufficiente aggiungere il codice con il markup. Non sono necessari attributi di dati, solo un semplice sviluppo basato su classi.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Didascalie opzionali

Puoi aggiungere facilmente didascalie alle diapositive con il .carousel-caption elemento all'interno di qualsiasi .item. Posiziona praticamente qualsiasi codice HTML opzionale al suo interno e verrà automaticamente allineato e formattato. Il seguente esempio lo dimostra:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Utilizzo

• Via data attributes - Utilizza gli attributi dei dati per controllare facilmente la posizione del carosello.

  • Attributo data-slideaccetta le parole chiave prev o next , che alterano la posizione della diapositiva rispetto alla sua posizione corrente.

  • Uso data-slide-to per passare un indice di diapositiva grezzo alla giostra data-slide-to = "2", che sposta la posizione della diapositiva su un particolare indice che inizia con 0.

  • Il data-ride = "carousel" l'attributo viene utilizzato per contrassegnare un carosello come animazione a partire dal caricamento della pagina.

• Via JavaScript - Il carosello può essere chiamato manualmente con JavaScript come di seguito -

$('.carousel').carousel()

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript sono elencate nella seguente tabella:

Metodi

Di seguito è riportato un elenco di metodi utili che possono essere utilizzati con il codice del carosello.

$('#identifier').carousel({
   interval: 2000
})

$('#identifier').carousel('cycle')

$('#identifier')..carousel('pause')

$('#identifier').carousel(number)

$('#identifier').carousel('prev')

$('#identifier').carousel('next')

Esempio

Il seguente esempio dimostra l'utilizzo dei metodi:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() { // Cycles to the previous item $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
         $("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
         $("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
         $("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Eventi

La classe carousel di Bootstrap espone due eventi per l'aggancio alla funzionalità carousel elencati nella tabella seguente.

$('#identifier').on('slide.bs.carousel', function () {
   // do something
})

$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

Esempio

L'esempio seguente mostra l'utilizzo degli eventi:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

Il plugin affix consente a un <div> di essere apposto in una posizione sulla pagina. Puoi anche attivare e disattivare il blocco utilizzando questo plugin. Un esempio comune di questo sono le icone sociali. Cominceranno in una posizione, ma quando la pagina raggiunge un certo segno, il <div> verrà bloccato e smetterà di scorrere con il resto della pagina.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file affix.js. Altrimenti, come menzionato nel capitolo Panoramica dei plugin Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

È possibile utilizzare il plug-in affix tramite attributi di dati o manualmente con il proprio JavaScript come discusso di seguito.

• Via data attributes - Per aggiungere facilmente un comportamento di affisso a qualsiasi elemento, basta aggiungere data-spy = "affix"all'elemento che vuoi spiare. Utilizza gli offset per definire quando attivare o disattivare il blocco di un elemento.

Esempio

L'esempio seguente dimostra l'utilizzo tramite attributi di dati:

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
            id interdum neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus velit blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
            amet mauris. </p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

• Via JavaScript - Puoi apporre un elemento manualmente con JavaScript come mostrato di seguito

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

Esempio

L'esempio seguente dimostra l'utilizzo tramite attributi di dati:

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div>
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
			
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
            eget risus. Integer aliquet quam ut elit suscipit, id interdum 
            neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
            ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. 
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
            tincidunt sit amet mauris.</p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis 
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
</script>

Posizionamento tramite CSS

In entrambe le situazioni precedenti, devi fornire CSS per il posizionamento dei tuoi contenuti. Il plugin affix alterna tra tre classi, ognuna delle quali rappresenta uno stato particolare: .affix, .affix-top e .affix-bottom . Segui i passaggi seguenti per impostare il tuo CSS per una delle opzioni di utilizzo sopra.

• Per iniziare, il plugin aggiunge .affix-topper indicare che l'elemento è nella sua posizione più alta. A questo punto non è richiesto alcun posizionamento CSS.

• Lo scorrimento oltre l'elemento che si desidera apporre dovrebbe attivare l'apposizione effettiva. Qui è dove.affix sostituisce .affix-top e set position: fixed; (fornito dal codice CSS di Bootstrap).

• Se viene definito un offset inferiore, lo scorrimento oltre dovrebbe sostituire .affix con .affix-bottom. Poiché gli offset sono opzionali, impostarne uno richiede l'impostazione del CSS appropriato. In questo caso, aggiungiposition: absolute; quando necessario.

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript come elencato nella seguente tabella:

Cos'è una griglia?

Nella progettazione grafica, una griglia è una struttura (solitamente bidimensionale) composta da una serie di linee rette (verticali, orizzontali) intersecanti utilizzate per strutturare il contenuto. È ampiamente utilizzato per progettare il layout e la struttura del contenuto nella progettazione di stampa. Nel web design, è un metodo molto efficace per creare un layout coerente in modo rapido ed efficace utilizzando HTML e CSS.

Funzionamento del sistema Bootstrap Grid

I sistemi a griglia vengono utilizzati per creare layout di pagina attraverso una serie di righe e colonne che ospitano il contenuto. Ecco come funziona il sistema di griglia Bootstrap:

• Le righe devono essere inserite in un file .container classe per un corretto allineamento e riempimento.

• Usa le righe per creare gruppi di colonne orizzontali.

• Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere le figlie immediate delle righe.

• Classi di griglia predefinite come .row and .col-xs-4sono disponibili per creare rapidamente layout di griglia. LESS mixin possono essere utilizzati anche per layout più semantici.

• Le colonne creano margini interni (spazi vuoti tra il contenuto delle colonne) tramite imbottitura. Tale riempimento viene spostato nelle righe per la prima e l'ultima colonna tramite il margine negativo attivato.rows.

• Le colonne della griglia vengono create specificando il numero di dodici colonne disponibili che si desidera estendere. Ad esempio, tre colonne uguali ne userebbero tre.col-xs-4.

Bootstrap fornisce un layout pulito per la creazione di tabelle. Alcuni degli elementi della tabella supportati da Bootstrap sono:

Layout del modulo

Bootstrap ti fornisce i seguenti tipi di layout di modulo:

• Forma verticale (predefinita)
• Modulo in linea
• Forma orizzontale

Forma verticale o di base

La struttura di base del modulo viene fornita con Bootstrap; i singoli controlli del modulo ricevono automaticamente uno stile globale. Per creare un modulo di base, procedi come segue:

• Aggiungi un modulo di ruolo all'elemento <form> padre.

• Avvolgi etichette e controlli in un <div> con class .form-group . Ciò è necessario per una spaziatura ottimale.

• Aggiungi una classe di .form-control a tutti gli elementi <input>, <textarea> e <select> testuali.

Modulo in linea

Per creare un modulo in cui tutti gli elementi sono in linea, allineati a sinistra e le etichette sono accanto, aggiungi la classe .form-inline al tag <form>.

Forma orizzontale

I moduli orizzontali si distinguono dagli altri non solo nella quantità di markup, ma anche nella presentazione del modulo. Per creare un modulo che utilizza il layout orizzontale, procedi come segue:

• Aggiungi una classe di .form-horizontal all'elemento genitore <form>.

• Avvolgi etichette e controlli in un <div> con class .form-group .

• Aggiungi una classe di .control-label alle etichette.

Bootstrap fornisce alcune opzioni per lo stile dei pulsanti, che sono riassunte nella seguente tabella:

Bootstrap fornisce tre classi che possono essere utilizzate per applicare alcuni stili semplici alle immagini:

• .img-round - aggiunge border-radius: 6px per dare all'immagine angoli arrotondati.

• .img-circle : circonda l'intera immagine aggiungendo border-radius: 500px .

• .img-thumbnail - aggiunge un po 'di padding e un bordo grigio:

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.

Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share mark up and states. Swap modifier classes to switch between each style.

Bootstrap fornisce alcune diverse opzioni per lo styling dei blog. Alcuni elementi del blog sono come casella dei commenti, post del blog, piè di pagina del blog, ecc.

Cos'è un Material Design

Il material design è una guida completa per il design visivo, dinamico e interattivo tra piattaforme

Bootstrap fornisce alcune opzioni diverse per lo stile del cursore di navigazione. Alcuni esempi sono come mostrato di seguito:

Bootstrap fornisce alcune opzioni diverse per lo styling della linea temporale, alcuni esempi come mostrato di seguito:

Gli avvisi forniscono un modo per definire lo stile dei messaggi per l'utente. Forniscono messaggi di feedback contestuali per le azioni tipiche degli utenti. Alcuni esempi di allerta come mostrato di seguito:

Bootstrap fornisce alcune diverse opzioni per lo styling dell'interfaccia di amministrazione. Alcune delle interfacce di amministrazione come mostrato di seguito -

Ajax viene utilizzato per comunicare con pagine Web e server Web. Alcuni esempi basati su ajax e bootstrap come mostrato di seguito:

Bootstrap fornisce alcune diverse opzioni per lo slider. Cursore a schede come mostrato di seguito -

Bootstrap fornisce alcune opzioni diverse per i sottotitoli. Effetto al passaggio della didascalia della miniatura come mostrato di seguito -

Bootstrap fornisce alcune diverse opzioni per la mappa. esempio di mappa è come mostrato di seguito -

Bootstrap fornisce alcune opzioni diverse per i calendari. esempio di calendario è come mostrato di seguito -

Bootstrap fornisce alcune diverse opzioni per le icone social. esempi di icone social sono come mostrato di seguito:

Bootstrap fornisce alcune diverse opzioni per le icone come caratteri. esempi di icone sono come mostrato di seguito:

Bootstrap fornisce alcune diverse opzioni per lo styling degli elementi Bootstrap Alcuni elementi bootstrap come mostrato di seguito