Share
In questa serie su Bootstrap 3, ti porteremo attraverso tutte le nuove funzionalità dell'ultima versione di questo popolare framework. Nell'ultimo tutorial abbiamo esaminato alcune modifiche ai componenti, e questa volta finiremo guardando le modifiche ad altri componenti, come etichette, badge, gruppi di elenchi e pannelli.
Questa sarà una sezione molto breve, perché ci sono state solo due modifiche alle etichette e una grande ai badge.
Per creare un'etichetta in BS2, l'abbiamo semplicemente data a etichetta-xxxx nome della classe, dove xxxx rappresenta lo stato che l'etichetta doveva rappresentare. Sotto BS3, ora abbiamo una definizione di classe in due parti e una rinomina da errore a Pericolo per la classe di colore rosso, in modo che la denominazione ora corrisponda a tutto il resto, e questo è praticamente tutto.
Non ci sono anche classi / opzioni di dimensionamento per questi in BS3, poiché le etichette assumono le dimensioni del contenitore circostante. Quindi, se crei un con una classe di etichetta appropriata, quindi avvolgerla in a , la dimensione di quell'etichetta sarà molto più grande del resto.
Il seguente esempio di codice lo dimostra:
Predefinito
Primario
Successo
Informazioni
avvertimento
Pericolo
Uscita prodotta dal codice di esempioI distintivi, d'altra parte, hanno subito un cambiamento più grande.
In BS3, i badge non hanno più classi di colore contestuali. Cioè, non c'è più un etichetta-successo o label-warning, come esiste con le etichette precedenti e con altri elementi.
Ciò significa che non puoi colorare i badge nello stesso modo in BS2, e qualsiasi etichetta che crei può essere resa solo usando il colore grigio standard. Beh, almeno ufficialmente non puoi.
Se si applica un allarme-xxxxx a fianco di a etichetta classe sul essendo usato per la tua etichetta, l'etichetta assumerà la colorazione di quella classe di avviso e, anche se questo non è un modo supportato di fare le cose, funziona e ti consente di usare le etichette come hai fatto in BS2.
Per contrassegnare un'etichetta standard, tutto ciò che devi fare è aggiungere un etichetta e 'Label-default' classe a a , e tu sei pronto per andare:
Accentsconagua
Questa è un'etichetta
Etichetta prodotta dal codice di esempioSe vuoi incidere le tue etichette per utilizzare i diversi colori, puoi procedere come segue:
Normale Successo Informazioni avvertimento Pericolo
Uscita prodotta dal codice di esempioUna bella caratteristica che il componente distintivo ha ancora, tuttavia, è il suo uso di vuoto: pseudo-selettore, che consente di svanire automaticamente dalla visualizzazione se il suo testo interno è vuoto. Questo aiuta con le modifiche interne progettate per funzionare su gruppi di elenchi e elenchi di pillole, perché ora significa che è estremamente facile creare elementi come gli elenchi di notifiche di posta in arrivo, in cui i valori scompaiono quando i contenuti sono stati rimossi Ecco un esempio:
- 42 Posta in arrivo
- 10000 Spam
- Vincite alla lotteria
Uscita prodotta dal codice di esempioSe esamini il codice, vedrai che l'ultima opzione nella lista non ha valore all'interno del suo tag span, che, a causa del vuoto: pseudo-selettore, impedisce al browser di renderlo. Tuttavia, nel momento in cui mettete qualcosa lì dentro usando JavaScript o qualsiasi metodo che possa manipolare il DOM, quel badge tornerà in vita senza perdere un colpo. Notare anche l'uso del pull-destra classe di allineamento per assicurarsi che l'etichetta si trovi sul lato destro dell'elemento, rendendo tutto bello e allineato.
I gruppi di elenchi sono una novità aggiunta in BS3, progettata per sostituire gli elenchi di navigazione BS2 e hanno molte più possibilità rispetto alla loro controparte BS2.
Una volta che inizi a usarli, ti accorgerai che i gruppi di elenchi sono più simili a scatole di elementi di elenco completamente stilizzabili e, a essere onesti, tutto ciò che sarebbe necessario per creare una casella di riepilogo completamente stilizzata sarebbe in effetti di avvolgerli nella propria div e impostare l'overflow per scorrere in modo appropriato.
Un componente di gruppo elenco di base può essere creato con un markup simile al seguente:
Uscita prodotta dal codice di esempioCome hai visto in precedenza nella sezione badges, puoi aggiungere badge a liste e altri oggetti e, se li aggiungi a un gruppo di liste, si allineano perfettamente:
Uscita da un esempio di codiceIl più attento di voi potrebbe pensare: "Ok, i gruppi di liste sembrano buoni, ma sono ancora solo
Beh, forse hai ragione su questo ... o forse abbiamo bisogno di sperimentare un po 'di più.
I gruppi di elenchi, a differenza delle classi che abbiamo visto nelle sezioni di navigazione, non possono essere applicati solo a una lista non ordinata. Un gruppo di elenchi può essere applicato a qualsiasi contenitore genitore e, una volta fatto, lo styling farà sì che tutti i figli di quel contenitore diventino collegati. Dai un'occhiata al seguente esempio:
Uscita prodotta dal codice di esempioCome mostra questo esempio di codice, possiamo creare una lista di collegamenti usando nient'altro che a Si noti che si ottiene ancora l'effetto completo del passaggio del mouse quando il mouse si posiziona su un collegamento e semplicemente aggiungendo il Ma perché fermarsi qui? Proprio come con qualsiasi altro elemento in BS3, i gruppi di liste hanno anche le loro classi contestuali per dare loro un significato nel set di colori standard: Come puoi vedere, a cosa serve un hamburger senza formaggio e un panino? Pomodoro che posso prendere o lasciare, ma per favore tenga il sottaceto! Abbiamo coperto le modifiche di base della miniatura per lo stile nel tutorial sui CSS, ma ciò a cui non siamo riusciti sono le modifiche nei componenti circostanti. La fusione che ora esiste in BS3 ci consente di combinare le classi di miniature con le classi di griglia per creare elenchi di immagini di facile utilizzo. Il modo più semplice con cui possiamo usarli è usare il Per quelli che si stanno chiedendo, sto usando Questo esempio non è niente di veramente speciale; se hai letto il resto di questa serie, probabilmente avrai già capito quanto sia facile farlo. Tuttavia, se aggiungiamo un po 'più di markup e lavoriamo con la stessa idea, possiamo facilmente produrre qualcosa di simile al seguente: Il pianeta sta irradiando impulsi. Questa vita è a dir poco un'oasi in fiore di potenzialità trasformative al di fuori dell'essere. Piace non piace Questa vita non è altro che una fiorente insurrezione dell'aspirazione di frequenza. Il potenziale è la ricchezza della vita cosciente e di noi. Piace non piace Può essere difficile sapere da dove cominciare. La totalità ti sta chiamando tramite particelle subatomiche. Puoi sentirlo? Piace non piace Attraverso il reiki, le nostre essenze sono nutrite dallo scopo. Presto sarai guidato da un potere nel profondo di te stesso. Piace non piace Creare liste verticali è altrettanto facile, ma invece di usare il Il motivo principale del design qui è negli elenchi di commenti e messaggi con un'immagine di avatar, ma possono essere utilizzati per articoli di notizie, elenchi di prodotti e molte altre cose. Per contrassegnare un oggetto multimediale, usa semplicemente un esterno L'obiettivo dell'energia ultrasonica è piantare i semi della consapevolezza piuttosto che la stagnazione. Tu ed io siamo esseri della matrice quantistica. Lo scopo è una costante. Come probabilmente potete già immaginare, non ci vorrebbe molto per aggiungerli in un gruppo List o in qualche altra struttura creata usando il sistema di griglia BS3. BS3 rende in realtà molto più facile che fornire una classe di elenco di oggetti multimediali dedicati e il markup supportato. Modificando leggermente il tuo markup, puoi generare elenchi completi di oggetti multimediali, come segue: La consapevolezza è la crescita della sincronicità e di noi. Questa vita è a dir poco un'esplosione di verità infinita. Esistiamo come energia sonar. L'umanità non ha nulla da perdere. Siamo a un bivio di rinascita e discontinuità. Siamo nel bel mezzo di una maturazione della guida in grado di espandere la coscienza che chiarirà un percorso verso la zuppa quantistica stessa. Dobbiamo imparare come condurre una vita unificata di fronte all'illusione. Eoni da ora, noi guerrieri rifletteremo come mai prima d'ora, rinascendo dalla zuppa quantistica. Dobbiamo chiamare noi stessi e soddisfare gli altri. Se nidifichi il Come i gruppi di elenchi, i pannelli sono una nuova aggiunta a BS3 e quale aggiunta essi sono! Abbiamo tutti familiarità con cose come i moduli, ad esempio, in scatole di gruppo o sezioni di un sito web che sono logicamente divise l'una dall'altra. I pannelli BS3 consentono di controllare facilmente questa separazione logica. Puoi avere vecchi pannelli, pannelli con intestazioni, pannelli con titoli nelle intestazioni, pannelli con piè di pagina e pannelli con il proprio set di colori contestuali. Un pannello di base è costruito usando solo due Tuttavia, non è molto buono senza un titolo, e così com'è in questo esempio di codice, non è altro che un Se aggiungiamo un terzo L'intestazione del pannello non deve essere solo un semplice Pannello secondario intestazione Il contenuto del pannello va qui Il contenuto del pannello va qui Il contenuto del pannello va qui Puoi anche applicare un riquadro del pannello aggiungendo un Una cosa a cui prestare attenzione, però, se la stai usando I pannelli possono anche funzionare fluidamente con gruppi di elenchi e tabelle. Se ti unisci a un tavolo con un pannello all'interno del genitore Pannello secondario intestazione Il contenuto del pannello va qui Il contenuto del pannello va qui Il contenuto del pannello va qui Se rimuovi il Anche aggiungere un gruppo di elenchi nel pannello è altrettanto semplice ed è eseguito esattamente allo stesso modo. Lo lascerò come un esercizio al lettore con cui giocare, comunque. Prima di lasciare definitivamente il tutorial sui componenti, ci sono alcune altre cose da considerare: il jumbotron, le caselle di avviso, le barre di avanzamento e i pozzi. Il jumbotron non è un nuovo elemento, ma il suo uso in BS2 è stato leggermente più disordinato di quello che ora è in BS3. Creare un jumbotron è molto semplice; usi semplicemente a Non ami questo schema? È elegante, semplice da usare e ti libera da un codice tanto generoso. Diamine si lo faccio E questo è tutto. Puoi rimuovere gli angoli arrotondati e renderlo a tutta larghezza scambiando l'ordine e spostandolo fuori dal suo contenitore, ma non ci sono classi speciali o colori opzionali per questo: è progettato per essere grande e audace e attirare la tua attenzione. Parlando di attenzione, abbiamo anche un certo numero di classi di allerta e l'unico vero cambiamento tra la versione BS2 e BS3 è la ridenominazione del nome della classe Se si desidera aggiungere collegamenti nei propri avvisi utilizzando uno standard È inoltre possibile aggiungere un'icona di croce / abbandono all'avviso, consentendo all'utente di chiuderla e farla sparire dal display. Per fare ciò, dobbiamo aggiungere un Abbiamo aggiunto la classe extra Se gli avvisi forniscono feedback operativi, c'è un altro componente correlato al feedback che è un must-have: la barra di avanzamento. Nessun elemento di feedback ha prodotto così tanto odio o saluto come questa umile, piccola barra colorata. Da BS2 a BS3, le uniche modifiche apportate qui, come con le classi di avviso, sono la ridenominazione dei colori contestuali in modo che corrisponda alle ridenominazioni globali dello schema in altre parti del framework. Il codice HTML di base per produrli rimane esattamente lo stesso: Una cosa a cui dovresti prestare attenzione, comunque (e qualcosa che ho ripetuto in vari punti di questa serie), è il gruppo di attributi ed extra usati per rendere questo elemento amichevole per i lettori di schermo e apparecchiature simili. Poiché una barra di avanzamento tende spesso ad essere di natura puramente grafica, non significa nulla per qualcuno che non è in grado di leggere lo schermo. La maggior parte degli altri elementi ha almeno un testo sufficiente per dare al lettore un'idea di cosa c'è; le barre di progresso hanno bisogno di tutto l'aiuto che possono ottenere. Vedrai dall'esempio precedente che abbiamo aggiunto ulteriori valori di aria per riportare su quale percentuale il valore è, e abbiamo anche segnato una span che è solo per gli screen reader, in particolare per fornire un rapporto udibile. Se rimuoviamo il Inutile dire che puoi anche aggiungere Puoi anche aggiungere L'elemento finale che è rimasto, è l'umile Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion. tag, possiamo andare ancora oltre:
Uscita prodotta dal codice di esempioattivo classe, come abbiamo in altri esempi, possiamo contrassegnare un oggetto come attivo e il tutto mantenendo un singolo insieme di bordi e l'aspetto di ogni elemento che si comporta come un normale 
Uscita prodotta dal codice di esempioOggetti multimediali e modifiche miniatura personalizzate
riga classi e span della griglia, insieme alle classi di miniature di base, per realizzare miniature perfettamente allineate, come mostrato di seguito:
Miniature prodotte dal codice di esempioholder.js per produrre i segnaposti dell'immagine. Ti farò conoscere la posizione di Google (verrà visualizzato come il primo disponibile); è un ottimo strumento per riservare spazio immagine, soprattutto quando si fanno i prototipi per i clienti.
L'estasi richiede esplorazione
Esistiamo come frequenze
Attraversare il mito è diventare uno
Riflettiamo, guariamo, rinasciamo
Uscita prodotta dal codice di esempiominiature classi, ora abbiamo bisogno di usare il media classi di oggetti. Queste classi e il relativo markup creano un layout simile all'esempio precedente, ma invece di apparire sotto la miniatura, il testo è allineato a destra.div con una classe di media. Quindi, all'interno di quello, usa il media-oggetto, media-corpo, e media-rubrica classi per contrassegnare i singoli bit, come mostra il seguente esempio:
Seguire il viaggio è diventare un tutt'uno con esso
Oggetto multimediale prodotto dall'esempio di codice
L'umanità non ha nulla da perdere
È un segno di cose a venire
Solo un viaggiatore della galassia può generare questo baldacchino di vita
Elenco di oggetti multimediali completo generato da un esempio di codices e pull-destra e pull-sinistra dove necessario per posizionare l'immagine sul lato opposto, per esempio. Oppure, per allineare le cose in modo leggermente diverso, puoi combinarle con pannelli (che vedremo tra poco) e altre strutture simili per mettere i bordi e altri suggerimenti contestuali attorno all'intero elenco e avvolgerli in linea per produrre componenti compositi.Modifiche al pannello
div con imbottitura e bordo attorno.Pannello-rubrica, allora iniziamo a ottenere qualcosa di un po 'più interessante:
Pannello prodotto dal codice di esempioIntestazione del pannello
Uscita prodotta dal codice di esempioPannello-footer. Se vuoi dare il significato ai tuoi pannelli, puoi anche usare i colori contestuali che sono usati per tutto il resto. Lo fai semplicemente sostituendo il Pannello-default classe nei precedenti esempi di codice con pannello primario, Pannello-successo, Pannello-info, Pannello di allarme, o Pannello-pericolo.
Output prodotto dall'esempio di codice, con il tipo impostato su pannello primarioPannello-footer e i colori contestuali, il piè di pagina NON adotterà la combinazione di colori del pannello. Questo è deliberato, poiché gli sviluppatori BS3 hanno ritenuto che contestualmente, solo i contenuti del pannello erano importanti. Non è necessario evidenziare allo stesso modo i pulsanti, i comandi o le informazioni del piè di pagina per rispondere a tali informazioni, consentendo così allo sviluppatore la libertà di aggiungere colori contestuali diversi per i diversi controlli richiesti.div, ottieni un pannello come mostrato in precedenza e unisci unisci alla tabella sottostante, come mostrato di seguito:Intestazione del pannello
#ID Nome Gestisci Twitter 1 Peter Shaw @shawty_ds 2 Soluzioni digitali nel Regno Unito @digitalsolut_uk 
Uscita prodotta dal codice di esempioAltre modifiche
jumbotron applicato e quindi aggiungere alcuni markup facoltativi all'interno. Il markup che utilizzi dipende interamente da te, ma per ottenere l'effetto desiderato, il markup raccomandato è:Bootstrap 3
Jumbotron prodotto da un esempio di codice avviso errori a allerta-pericolo. Oltre a questo, il markup per produrre avvisi è ancora semplice come usare uno standard 
Scatole di avviso prodotte dal codice di esempio tag, assicurati di applicare la classe allarme-link al tag di ancoraggio; questo assicurerà che la colorazione del link rimanga coerente con la classe di colori contestuale utilizzata. elemento contrassegnato con una spruzzata di attributi di dati e classi extra come segue:
Allerta non ammissibile prodotta dal codice di esempioallarme-dismissable verso l'esterno respingere attributo dati per connettere l'azione JavaScript con quella dell'avviso respingere metodo, usando un semplice pulsante.
Barra di avanzamento prodotta dal campioneSR-only classe, tuttavia, rende il nostro bar un po 'migliore per quelli che possono vederlo anche:
Barra di avanzamento con il SR-only classe rimossa dall'intervallo interioreprogress-bar-successo, progress-bar-informazioni, progress-bar-warning, e progress-bar-pericolo verso l'interno barra di avanzamento classe, al fine di sfruttare i colori contestuali disponibili.il progresso a righe e / o attivo verso l'esterno progresso classe per ottenere effetti a strisce e animati sulle barre di avanzamento. Un effetto barra di progressione impilata può essere ottenuto posizionando più elementi barra di avanzamento progresso contenitore e impostando i loro valori in modo appropriato.bene. Nessuna modifica è stata apportata a questo da BS3, ma ora ha una classe extra chiamata ben-sm. Non c'è magia implicata qui- se vuoi un'area semplice, incassata con uno sfondo sfumato, crea semplicemente a bene class ad esso, e quindi aggiungere il contenuto all'interno. I pozzi sono utili per barre laterali e / o piè di pagina, o qualsiasi cosa troppo semplice da giustificare per essere inseriti in un pannello intero o in un'altra area recintata. Non ci sono nemmeno colori contestuali o azioni speciali; è semplice, efficace e facile da usare:
Bene esempio prodotto dal campione
