Bootstrap è un framework front-end mobile elegante, intuitivo e potente per uno sviluppo web più rapido e semplice. Utilizza HTML, CSS e Javascript.
Bootstrap può essere utilizzato come -
Mobile first approach - A partire da Bootstrap 3, il framework è costituito da 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.
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.
Il pacchetto Bootstrap include:
Scaffolding- Bootstrap fornisce una struttura di base con Grid System, stili di collegamento, sfondo. Questo è trattato in dettaglio nella sezioneBootstrap Basic Structure
CSS- Bootstrap viene fornito con funzionalità di 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, popover 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.
Le classi contestuali ti consentono di modificare il colore di sfondo delle righe della tabella o delle singole celle.
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | .active Applica il colore al passaggio del mouse a una determinata riga o cella |
| 2 | .success Indica un'azione riuscita o positiva |
| 3 | .warning Indica un avviso che potrebbe richiedere attenzione |
| 4 | .danger Indica un'azione pericolosa o potenzialmente negativa |
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.
Le media query in Bootstrap ti consentono di spostare, mostrare e nascondere il contenuto in base alle dimensioni del viewport.
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">....Gli offset sono una funzione utile per layout più specializzati. Possono essere utilizzati per spingere le colonne per una maggiore spaziatura, ad esempio. Le classi .col-xs = * non supportano gli offset, ma possono essere facilmente replicati utilizzando una cella vuota.
Puoi facilmente cambiare l'ordine delle colonne della griglia incorporate con le classi modificatrici .col-md-push- * e .col-md-pull- * dove * va da 1 a 11.
Bootstrap 3 permette di rendere le immagini responsive aggiungendo una classe .img-responsive al tag <img>. Questa classe applica la larghezza massima: 100%; e altezza: auto; all'immagine in modo che si adatti bene all'elemento genitore.
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 .
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.
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
Bootstrap supporta elenchi ordinati, elenchi non ordinati e 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 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 voce di elenco può essere composta 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 .
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.
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 plug-in di transizione fornisce semplici effetti di transizione come lo scorrimento o la dissolvenza in modalità.
Un modale è una finestra figlia che è sovrapposta alla sua finestra genitore. In genere, lo scopo è visualizzare il contenuto da una fonte separata che può avere qualche interazione senza lasciare la finestra principale. Le finestre secondarie possono fornire informazioni, interazioni o altro.
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 / disattivare 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()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.
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.
La classe .btn-group viene utilizzata per un gruppo di pulsanti di base. Avvolgi una serie di pulsanti con la classe .btn in .btn-group.
.btn-toolbar aiuta a combinare set di <div class = "btn-group"> in una <div class = "btn-toolbar"> per componenti più complessi.
Le classi .btn-group-lg, .btn-group-sm, .btn-group-xs possono essere applicate al gruppo di pulsanti invece di ridimensionare ogni pulsante.
.btn-group-vertical class fa apparire un insieme di pulsanti impilati verticalmente anziché orizzontalmente.
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 creare un menu di navigazione a schede:
- Inizia con un elenco di base non ordinato con la classe base di .nav.
- Aggiungi class .nav-tabs.
Per creare un menu di navigazione delle pillole:
- Inizia con un elenco di base non ordinato con la classe base di .nav.
- Aggiungi pillole .nav di classe.
Puoi impilare le pillole verticalmente usando la classe .nav-stacked insieme alle classi: .nav, .nav-pillole.
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.
Per creare una barra di navigazione predefinita:
Aggiungi le classi .navbar, .navbar-default al tag <nav>.
Aggiungi role = "navigation" all'elemento precedente, per aiutare con l'accessibilità.
Aggiungi una classe di intestazione .navbar-header all'elemento <div>. Includi un elemento <a> con class navbar-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 .nav, .navbar-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).
La classe .pagination viene utilizzata per aggiungere l'impaginazione su una pagina.
È possibile personalizzare i collegamenti utilizzando .disabled per i collegamenti non cliccabili e .active per indicare la pagina corrente.
Le etichette Bootstrap sono ottime per offrire conteggi, suggerimenti o altri markup per le pagine. Usa class .label per visualizzare le etichette.
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 utilizzare i badge, aggiungi <span class = "badge"> ai link, ai menu di navigazione Bootstrap e altro ancora.
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 .jumbotron.
- Oltre a un <h1> più grande, lo spessore del carattere è ridotto a 200 px.
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.
Per creare miniature utilizzando Bootstrap -
- Aggiungi un tag <a> con la classe .thumbnail attorno a un'immagine.
- Ciò aggiunge quattro pixel di riempimento e un bordo grigio.
- Al passaggio del mouse, un bagliore animato delinea l'immagine.
è possibile aggiungere qualsiasi tipo di contenuto HTML come titoli, paragrafi o pulsanti nelle miniature. Segui i passaggi seguenti:
Cambia il tag <a> che ha una classe .thumbnail in 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.
Gli avvisi Bootstrap 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.
Puoi aggiungere un avviso di base creando un wrapper <div> e aggiungendo una classe .alert e una delle quattro classi contestuali (ad es. .Alert-success, .alert-info, .alert-warning, .alert-danger) .
Per creare un avviso di licenziamento:
Aggiungi un avviso di base creando un wrapper <div> e aggiungendo una classe .alert e una delle quattro classi contestuali (ad esempio, .alert-success, .alert-info, .alert-warning, .alert-danger).
Aggiungi anche .alert-dismissable opzionale alla classe <div> sopra.
Aggiungi un pulsante di chiusura.
Utilizza l'elemento <button> con l'attributo dati data-dismiss = "alert".
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%.
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 class-progress-bar- * dove * potrebbe essere successo, informazioni, avvertimento, pericolo.
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%.
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 class-progress-bar- * dove * potrebbe essere successo, informazioni, avvertimento, pericolo.
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%.
Per creare una barra di avanzamento animata:
Aggiungi un <div> con una classe di .progress e .progress-striped. Aggiungi anche la classe .active a .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%.
Puoi anche impilare più barre di avanzamento. Posiziona le barre di avanzamento multiple nello stesso .progress per impilarle.
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 oa destra accanto al contenuto testuale. L'obiettivo dell'oggetto media è 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.
Questa classe consente di spostare un oggetto multimediale (immagini, video e audio) a sinistra oa destra di un blocco di contenuto.
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.
I componenti del pannello vengono utilizzati quando si desidera inserire il componente DOM in una scatola. Per ottenere un pannello di base, aggiungi semplicemente class .panel all'elemento <div>. Aggiungi anche class .panel-default a questo elemento.
ecco due modi per aggiungere l'intestazione del pannello:
Usa la classe .panel-header per aggiungere facilmente un contenitore di intestazioni al tuo pannello.
Usa qualsiasi <h1> - <h6> con una classe .panel-title per aggiungere un'intestazione con stile predefinito.
Puoi aggiungere piè di pagina ai pannelli, avvolgendo pulsanti o testo secondario in un <div> contenente class .panel-footer.
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.
Sì! Per ottenere una tabella senza bordi all'interno di un pannello, usa la classe .table all'interno del pannello. Supponiamo che ci sia un <div> contenente .panel-body, aggiungiamo un bordo in più all'inizio della tabella per la separazione. Se non è presente alcun <div> contenente .panel-body, il componente si sposta dall'intestazione del pannello alla tabella senza interruzioni.
Sì! È possibile includere gruppi di elenchi in qualsiasi pannello. Crea un pannello aggiungendo class .panel all'elemento <div>. Aggiungi anche class .panel-default a questo elemento. Ora all'interno di questo pannello includi i tuoi gruppi di elenchi.
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 .well.
Il plug-in Scrollspy (navigazione con aggiornamento automatico) consente di scegliere come target le sezioni della pagina in base alla posizione di scorrimento. Nella sua implementazione di base, mentre scorri, puoi aggiungere classi .active alla barra di navigazione in base alla posizione di scorrimento.
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 determinato segno, il <div> verrà bloccato e smetterà di scorrere con il resto della pagina.