English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Questo capitolo discuterà alcune classi ausiliarie di Bootstrap che potrebbero essere utili.
Diversi tipi di testo mostrano colori diversi. Se il testo è un link, quando il mouse passa sopra il testo diventa più scuro:
| Classe | Descrizione | Esempio |
|---|---|---|
| .text-muted | Stile di testo della classe "text-muted" | Prova a farlo |
| .text-primary | Stile di testo della classe "text-primary" | Prova a farlo |
| .text-success | Stile di testo della classe "text-success" | Prova a farlo |
| .text-info | Stile di testo della classe "text-info" | Prova a farlo |
| .text-warning | Stile di testo della classe "text-warning" | Prova a farlo |
| .text-danger | Stile di testo della classe "text-danger" | Prova a farlo |
Le seguenti classi diverse mostrano colori di sfondo diversi. Se il testo è un link, diventa più scuro quando il mouse si muove sopra di esso:
| Classe | Descrizione | Esempio |
|---|---|---|
| .bg-primary | Le celle della tabella utilizzano la classe "bg-primary" | Prova a farlo |
| .bg-success | Le celle della tabella utilizzano la classe "bg-success" | Prova a farlo |
| .bg-info | Le celle della tabella utilizzano la classe "bg-info" | Prova a farlo |
| .bg-warning | Le celle della tabella utilizzano la classe "bg-warning" | Prova a farlo |
| .bg-danger | Le celle della tabella utilizzano la classe "bg-danger" | Prova a farlo |
| Classe | Descrizione | Esempio |
|---|---|---|
| .pull-left | Fare fluttuare l'elemento a sinistra | Prova a farlo |
| .pull-right | Fare fluttuare l'elemento a destra | Prova a farlo |
| .center-block | Impostare l'elemento come display:block e visualizzarlo al centro | Prova a farlo |
| .clearfix | Rimozione del浮动 | Prova a farlo |
| .show | Forzare l'elemento a essere visibile | Prova a farlo |
| .hidden | Forzare l'elemento a essere nascosto | Prova a farlo |
| .sr-only | Nascondere l'elemento su altri dispositivi oltre ai lettori di schermo | Prova a farlo |
| .sr-only-focusable | Utilizzare insieme a .sr-only per visualizzare l'elemento quando viene focalizzato (ad esempio, utenti che utilizzano la tastiera) | Prova a farlo |
| .text-hide | Sostituire il testo contenuto dell'elemento della pagina con un'immagine di sfondo | Prova a farlo |
| .close | Mostra il pulsante di chiusura | Prova a farlo |
| .caret | Mostra le funzioni a discesa | Prova a farlo |
Utilizzare l'icona di chiusura comune per chiudere moduli e finestre di avviso. Utilizzare la classe close Ottenere l'icona di chiusura.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Icona di chiusura</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p>Esempio di icona di chiusura <button type="button" class="close" aria-hidden="true">×</button> </p> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
aria-hidden="true" è principalmente utile per aiutare le persone con disabilità (come i non vedenti) a utilizzare dispositivi di lettura (che leggono automaticamente il contenuto e lo riproducono automaticamente), saltando automaticamente il contenuto con questa proprietà per evitare che le persone con disabilità si confondano!
Usa il cursore per rappresentare le funzionalità a discesa e la direzione. Usa la class caret l'elemento <span> riceve questa funzione.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Esempio - Cursore</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p>Esempio di cursore <span class="caret"></span> </p> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
Puoi utilizzare la class pull-left o pull-right per far浮动 gli elementi a sinistra o a destra. Ecco degli esempi che dimostrano questo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Esempio - Scorrimento rapido</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="pull-left"> Scorrimento rapido a sinistra </div> <div class="pull-right"> Scorrimento rapido a destra </div> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
Per allineare i componenti nella barra di navigazione, utilizzare .navbar-left o .navbar-right Invece. Vedi Barra di Navigazione Bootstrap.
Utilizzare la class center-block per centrare gli elementi.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Esempio - Centramento del contenuto</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="center-block" style="width:200px;background-color:#ccc;"> Questo è un esempio di center-block </div> </div> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
Per rimuovere il浮动 degli elementi, utilizzare .clearfix class.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Esempio - Rimozione del浮动</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;"> <div class="pull-left" style="background:#58D3F7;"> Scorrimento rapido a sinistra </div> <div class="pull-right" style="background: #DA81F5;"> Scorrimento rapido a destra </div> </div> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
Puoi farlo utilizzando la classe .show e .hidden Per impostare forzatamente la visualizzazione o la nascita degli elementi (inclusi i lettori di schermo).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Esempio - Visualizzazione e nascondimento del contenuto</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row" style="padding: 91px 100px 19px 50px;"> <div class="show" style="margin-left:10px;width:300px;background-color:#ccc;"> Questo è un esempio della classe show </div> <div class="hidden" style="width:200px;background-color:#ccc;"> Questo è un esempio della classe hide </div> </div> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
Puoi farlo utilizzando la classe .sr-only Rendi gli elementi invisibili su tutti i dispositivi, tranne il lettore di schermo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Lettore di schermo</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <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">Indirizzo email</label> <input type="email" class="form-control" placeholder="Inserisci 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> </body> </html>Testa per vedere ‹/›
Il risultato è come segue:
Qui vediamo due etichette del tipo input che hanno la classe sr-onlyDi conseguenza, i tag saranno visibili solo ai lettori di schermo.