Share
Finora hai già visto alcune delle nuove funzionalità CSS disponibili nella versione 3 di Bootstrap. In questo tutorial entreremo un po 'più in dettaglio su ciò che è considerato nuovo e ciò che non lo è.
In molti casi queste nuove classi sono solo rinomate di quelle vecchie, ma le trattiamo come nuove qui in modo da poter facilmente fare la distinzione.
Le varie classi che compongono la sezione tipografica di BS3 non sono cambiate tanto quanto alcuni degli altri elementi. tag H1attraverso H6sono ancora trattati allo stesso modo in cui erano nella v2, con l'aggiunta che ora puoi usare in linea con qualsiasi elemento di intestazione senza che prima debba essere avvolto in a divusando il intestazione di paginaclasse. Questo significa nessun markup extra adesso, a meno che tu non voglia che la tua intestazione di blocco sia sottolineata con un margine di paragrafo differente.
Questa è la mia super pagina web È il migliore che ci sia
In v2 non avevi altra scelta che avvolgere il tuo H1 in un div di intestazione di pagina, in quanto questo era l'unico modo in cui l'output dei tag piccoli sarebbe stato allineato in modo ordinato. Questo è stato ora rettificato e applicato anche a tutti i livelli di intestazione, anziché solo ai primi tre.
Questa è la mia super pagina web è il migliore che ci sia
Proseguendo, la classe di copia del corpo standard non ha modifiche e rimane a una dimensione predefinita di 14 pixel con un'altezza della linea di circa 1,4.
La copia del corpo viene applicata automaticamente a tutto il testo all'interno di un tag di paragrafo, quindi non sono necessarie classi se non si desidera utilizzare alcune delle funzioni speciali (come vedremo presto).
Copia del corpo principale (paragrafi con il nome della classe di condurre) inoltre non hanno modifiche al loro nome o stile, e come con v2, sono progettati per dare al paragrafo iniziale un po 'più di enfasi rispetto all'altra copia regolare del corpo. Combinando queste tre regole CSS, potresti avere qualcosa di simile al seguente:
Questa è la mia super pagina web È il migliore che ci sia
Benvenuti nella mia pagina web super-duper, non c'è altra pagina web come quella in tutto il mondo, la mia pagina è la cosa migliore su Internet che dovresti visitare
In questa fantastica pagina ho testo e un po 'di testo, e c'è anche del testo da leggere, oltre a un titolo di pagina dall'aspetto piacevole
Quando viene visualizzato nel browser, dovrebbe essere simile al seguente:
Il il tag può ora essere utilizzato anche da solo, poiché il suo stile viene ora gestito e applicato correttamente nel contesto in cui viene utilizzato, quindi lo stile seguirà la sua posizione nel documento indipendentemente dal tag principale.
Allo stesso modo, il testo in grassetto viene ancora creato usando il tag e corsivo usando il etichetta; come con molte delle classi di tipografia, questo non è diverso dal framework v2.
Le classi di allineamento mantengono anche i loro stessi nomi di classe text-sinistra, text-center, text-destra, e text-giustificare, e continuano a svolgere le stesse funzioni descritte nel libro BS2 che precede questa serie.
Allo stesso modo, le abbreviazioni sono ancora create usando il tag con il titoloattributo che funge da descrizione completa dell'abbreviazione. C'è una nuova classe, initialism, che può essere aggiunto a un tag di abbreviazione e dà all'output di rendering un aspetto leggermente più piccolo rispetto al testo circostante.
Indirizzi (usando il tag) e block-quotes (usando il tag) inoltre non hanno modifiche nel CSS o regole di base tra v2 e v3 del framework.
Gli ultimi tag che rimangono nella categoria tipografica includono , utilizzato per creare un esempio di codice inline. Anche in questo caso, questo non è cambiato in alcun modo, con la sua destinazione d'uso ancora per i campioni di codice che siedono in linea con il corpo del testo normale.
Per gli esempi di codice (o qualsiasi cosa che sia testo normale) che devono rimanere formattati come rientri e ritorni a capo, è comunque necessario utilizzare il etichetta; ancora lo stile qui non è cambiato dalla v2, e il layout usando questo tag dovrebbe comunque comportarsi come previsto.
L'elemento tipografico finale è l'aggiunta di un nuovo elemento chiamato .
Lo scopo di questo nuovo tag è di visualizzare il testo in un modo che indichi che l'utente dovrebbe inserire le informazioni nel computer in qualche modo, generalmente digitandolo.
Per esempio:
Aprire un prompt dei comandi digitando cmd nella casella e facendo clic sul pulsante del mercato 'Esegui', quando si apre digita myprogram e premi invio, a quel punto l'app dovrebbe essere eseguita
Che, se sottoposto a rendering in un documento HTML, dovrebbe avere un aspetto simile al seguente:
In generale, gli elementi dell'elenco normale sono costituiti da list-unstyled, list-Inlineinsieme con il dl-orizzontaleanche le classi per gli elenchi di definizioni rimangono invariate in BS3 e hanno lo stesso comportamento di BS2.
Tuttavia, ci sono alcuni cambiamenti negli elementi della lista, ma dal momento che questi si verificano con le classi specialistiche utilizzate per creare menu e liste di navigazione, copriremo quelli quando indirizzeremo le modifiche agli elementi di navigazione nel prossimo tutorial della serie.
Le tabelle sono ancora in stile proprio come erano in BS2 creando uno standard Questo codice dovrebbe darti il seguente: Come con BS2, le classi per aggiungere gli stili opzionali a una tabella- Questo codice, per esempio, ti darà una tabella che ha un bordo esterno e colori alternati su ogni riga della tabella. Una cosa da notare tuttavia è che lo striping della tabella ora utilizza il Il resto delle classi della tabella per colorare le righe della tabella sono leggermente cambiate. Innanzitutto c'è una nuova classe chiamata Le restanti classi contestuali, come in BS2, sono progettate per evidenziare le righe della tabella per mostrare condizioni diverse e sono uguali, tranne una piccola modifica. Il nome della classe che rappresenta un'azione pericolosa o negativa è stato rinominato Quando renderizzato, dovrebbe assomigliare a questo: Ci sono due nuove aggiunte alle classi usate per supportare le tabelle. Innanzitutto, è disponibile una nuova classe reattiva che tiene conto delle dimensioni del sistema di rete e fornisce sia barre di scorrimento verticali o una tabella riallineata per adattarsi a display di dimensioni diverse. In secondo luogo, c'è la possibilità di utilizzare le suddette classi di righe colorate su singole celle, anziché solo intere righe, come nel caso di BS2. Per utilizzare le classi di colorazione a livello di cella, devi solo aggiungere le classi ai singoli Questo codice dovrebbe comportare quanto segue: L'aggiunta al tavolo finale è una classe chiamata Quando questa nuova classe viene utilizzata su un display superiore a 768 pixel (ovvero, qualsiasi visualizzazione utilizza una classe di dimensionamento diversa da Come con BS2, tutti i normali elementi del modulo di default hanno un livello minimo di markup che dà loro uno stile di base. Ciò significa che il semplice contrassegno di un normale tag form e dei controlli associati darà al modulo il look and feel predefinito di Bootstrap. Prendi il seguente esempio: Se rendiamo questo esempio in un browser, vedremo che otterremo un risultato abbastanza buono senza aggiungere classi extra, come puoi vedere nell'immagine seguente: Nota: Poiché è stato scritto l'esempio precedente, è stato apportato un aggiornamento minore al codice BS3. Se si prova l'esempio come è scritto qui, l'output probabilmente non apparirà come previsto. Il cambiamento che è stato fatto in BS3 sembra ora significare che solo marcando un modulo senza classi BS3 non avrà l'effetto di dare al modulo un aspetto coerente. Ho lasciato l'esempio qui, in quanto è d'accordo con le informazioni che sono ancora presenti sul sito di documentazione, e come tale sembra ancora essere il consiglio ufficiale degli autori del framework. Come ho accennato nella sezione migrazione, le classi e i componenti attorno ai moduli HTML sono stati alcuni dei più grandi incidenti in termini di modifiche ai nomi delle classi, ma questo è per una buona ragione. Prima di BS3, molte delle classi utilizzate per le forme erano molto ristrette: vi erano classi individuali per molti scopi individuali, piuttosto che una singola classe che copriva molte basi. Ad esempio, esistevano classi separate per gestire gli allineamenti delle caselle di controllo e dei pulsanti di opzione e c'erano classi separate per gestire caselle di input e aree di testo rispetto al loro allineamento di riga. In BS3 molte di queste classi sono state cancellate e ora sono tutte raggruppate in un numero minore di classi ed elementi. Prendendo il nostro esempio precedente e aggiungendo il markup raccomandato come mostrato nella documentazione di BS3, ci dà il seguente: Esternamente, se si esegue il rendering di questo codice, non si noterà alcuna differenza per l'output generato per il campione 18. Internamente, tuttavia, Bootstrap può ora trovare e lavorare con i singoli elementi molto più facilmente di quanto non potesse in precedenza. In BS2 non era necessario raggruppare i controlli a meno che non si intendesse lavorare con le classi di convalida automatiche. Non c'è ancora alcun requisito assoluto per usarli, ma farlo permette a BS di ridimensionare e riposizionare le cose correttamente quando si usa la sua griglia (tra molte altre cose). Noterai anche che ogni controllo ora ha solo un singolo Si noti inoltre che il tag del modulo stesso ora ha un Infine, se guardi il Sfortunatamente c'è ancora un'area nel supporto per i moduli che mancano: il controllo del caricamento dei file. Come BS2, questo è dovuto al fatto che la sicurezza in tutto il flusso di browser corrente limita la possibilità di definire i controlli di input dei file in modo che corrispondano al resto dei controlli di input disponibili. Come accennato nel libro precedente, tuttavia, ci sono ancora aggiunte di terze parti che hanno quest'area coperta, e poiché ora puoi produrre il tuo sistema di upload usando le classi HTML5, in senso stretto non hai bisogno del caricamento del file controllo: puoi fabbricartelo tu. In BS2 c'erano un certo numero di tipi di moduli specifici come il Il Nell'esempio del precedente codice di esempio, aggiungendo Il Nota: Nel coraggioso nuovo mondo di oggi di HTML 5, è più importante che mai contrassegnare gli elementi di input correttamente con un'etichetta associata. Poiché gli utenti svantaggiati potrebbero utilizzare gli ausili per assisterli, non fornire i pezzi necessari per consentire a questi aiuti di funzionare correttamente, andando avanti, potrebbe essere considerato come una cosa negativa, e le aziende che li abbandonano potrebbero essere evitati per farlo. Non ti preoccupare però, BS3 ha coperto. Se decidi di non volere etichette nei moduli, puoi contrassegnarli con una classe facoltativa, Se si esegue il rendering del codice da questo esempio nel browser, dovrebbe essere simile al seguente: Come puoi vedere dal codice nell'esempio 20, il markup extra non è molto di più, e la maggior parte di esso esiste solo per allineare correttamente le colonne in modo che tutto sia ben posizionato. I principali punti a cui prestare attenzione nell'esempio 20 sono: Per il resto delle classi e delle parti associate nella sezione moduli di BS3, non è cambiato nient'altro oltre le classi menzionate finora. Tuttavia, da un punto di vista applicativo reale, i controlli di input ora dovere avere un tipo corretto su di loro per essere stile. Questo significa come minimo devi avere almeno Si consiglia vivamente di utilizzare i tipi corretti, tuttavia. Come vedrai presto quando arriveremo ai gruppi di convalida, il tipo corretto consentirà a gran parte delle informazioni di validazione di funzionare correttamente senza apportare modifiche al markup. Le caselle di controllo e i pulsanti di opzione, come in BS2, sono impilati per impostazione predefinita. Se si desidera renderli in verticale sullo schermo, è necessario utilizzare il L'esempio di rendering 21 nel tuo browser dovrebbe essere simile al seguente: Le caselle di selezione e selezione multipla sono contrassegnate con stili standard solo utilizzando gli elementi così come sono; questo non è un cambiamento da BS2, dove il markup e lo stile di questi elementi sono identici. Uno stile nuovo che è stato introdotto in BS3 è lo stile di controllo statico. In BS2, dovevi spesso utilizzare un controllo di modulo disabilitato per rappresentare dati di moduli statici che non potevano essere modificati. BS3 cambia questo fornendo a Quando viene eseguito il rendering nel browser, questo produce un layout di modulo regolare, con il controllo statico chiaramente contrassegnato come non modificabile o simile a un controllo di input, come mostrato nell'immagine seguente: Lo stile disabilitato dei controlli del modulo è ancora marcato e utilizzato allo stesso modo di BS2, semplicemente aggiungendo l'attributo "disabled" all'elemento di input come mostrato di seguito: Ciò produrrà il classico aspetto di controllo disabilitato e ombreggiato, qualcosa del tipo: Se aggiungi il L'ultima cosa che voglio menzionare quando si parla di moduli è la validazione e le classi di focus. Come ho notato in precedenza, aggiungere i tipi di input corretti negli elementi HTML5 ti aiuta davvero quando si tratta di utilizzare le classi di validazione. Perché? Oltre ad avere nomi di classi e stili dedicati da usare, le classi di validazione agganciano anche i nuovi pseudo-elementi HTML5 come Ciò significa che se si contrassegna una casella di testo come Se non lo fa, o hai qualche altro modo per far funzionare la tua validazione, allora puoi semplicemente usare il Se si esegue il rendering di questo codice nel browser, si dovrebbe vedere qualcosa di simile al seguente: Punti da notare sono che ho aggiunto le classi ai gruppi di moduli per produrre una visualizzazione statica; tuttavia, dovresti provare anche a contrassegnare il modulo con i tipi di input corretti. Ho trovato che il supporto del browser sulle pseudo-classi è ancora un po 'irregolare, anche se non c'è menzione nei documenti BS3, quindi raccomando di usare anche i nomi delle classi quando si manipolano gli elementi usando JavaScript. Si noti inoltre che l'etichetta e il testo di aiuto a livello di blocco assumono anche il colore corretto del gruppo, quindi non è necessario aggiungere colori o stili a questi separatamente al gruppo di controllo del modulo. Ricorda che il L'ultima cosa da menzionare per i gruppi di validazione è che puoi anche fornire icone di feedback opzionali direttamente nei controlli del modulo per aiutare lo stato. Lo fai fornendo un elemento span subito dopo l'elemento di input con il quale dovrebbe essere usato. Questo elemento span ha le normali classi di icone applicate (che vedremo nel prossimo tutorial), insieme a una classe di Se espandiamo il codice precedente per prendere questo in considerazione e aggiungere icone di feedback, questo è come dovrebbe apparire: Una volta eseguito il re-rendering con queste modifiche, dovresti vedere quanto segue: Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion.accordo, quindi aggiungendo a
tavoloclasse al markup. Come in BS2, le tabelle dovrebbero sempre essere costruite usando l'intera gamma di ,
, e Gli elementi HTML come nell'esempio seguente mostrano:
Coca Cola Col B Col C Val A Val B Val C Val A Val B Val C 
tavolo a righe, table-delimitato, table-hover, e table-condensato-funziona esattamente come in BS2; queste classi extra vengono aggiunte come classi secondarie alla classe della tabella principale sull'elemento della tabella stessa. : Nth-child pseudo-selettore, il che significa che non funzionerà più in IE8 o precedenti senza un poly-fill o altra correzione per aiutare. attivo. Prima di BS3, il attivola classe non era disponibile su tutti gli elementi, ma principalmente solo sulla navigazione e sugli elementi dei pulsanti. Da BS3 in poi ora può essere applicato a elemento per mostrare quella riga come una riga evidenziata, che per impostazione predefinita è un grigio chiaro. Pericolo. In BS2 è stata nominata la classe rossa errore. Oltre a questo, le classi vengono applicate allo stesso modo a elemento come mostra il seguente codice:
Classe Col B Col C Attivo Val B Val C Successo Val B Val C Informazioni Val B Val C avvertimento Val B Val C Pericolo Val B Val C 
o elementi come segue:
Classe Col B Col C Val A Val B Val C 
tavolo-responsive, che puoi usare applicandolo a a come segue:
Coca Cola Col B Col C Val A Val B Val C * * -Xs-), quindi il display della tabella si comporterà come una normale tabella di risposta al bootstrap. Tuttavia, se la tabella viene visualizzata su un dispositivo che ha come obiettivo un * * -Xs-classe ed è inferiore a 768 pixel, il contenitore verrà modificato in modo che sia disponibile una pergamena verticale, consentendo di spostare l'intera tabella a sinistra e a destra senza influire sul resto della pagina. 
Uscita da codice di esempio su un dispositivo con larghezza superiore a 768 pixel
Uscita da un esempio di codice su un dispositivo con larghezza inferiore a 768 pixelModifiche al modulo
modulo di controlloclasse assegnata ad essa, piuttosto che molti diversi che si rivolgono a diversi aspetti. ruoloassegnato ad esso. Questo, oltre ad essere buone pratiche tutt'intorno, è ora applicato da BS3 per aiutare con i ruoli di aria e gli standard che guidano l'uso di app web da parte di persone con disabilità. etichetta con a help-block, noterete che ora è usato anche per il testo in linea in tutti i casi, mentre in BS2 avevamo un certo numero di classi diverse, come modulo-info. Formulario di ricerca; sotto BS3 tutti questi sono stati raggruppati in tre tipi principali di moduli. Innanzitutto, hai il modulo standard; come abbiamo visto, questo è un modulo normale senza aggiunte di classi aggiuntive al tag form. Gli altri due tipi di forma sono form-lineae forma orizzontale. form-lineala classe è progettata per le forme in spazi di altezza ridotta, come menu e barre di navigazione. Una parola di avvertimento però: tutti gli elementi di input in questa classe e gli altri tipi di modulo sono dimensionati al 100% per impostazione predefinita, quindi se è necessario il modulo per occupare solo una piccola quantità di spazio (in particolare nella barra di navigazionemoduli), sarà necessario inserire dimensioni manuali sui singoli controlli. form-lineao forma orizzontalea sua volta dovrebbe cambiare il layout del modulo di base per assomigliare al seguente: 
Modulo prodotto dal precedente codice di esempio con la classe form-inline aggiunta al tag form.forma orizzontale class è usato per creare forme top-down regolari con controlli di input che hanno le etichette associate a sinistra di esse, piuttosto che sopra di loro come fa il modulo predefinito. Si noti, tuttavia, che affinché il formato orizzontale funzioni correttamente, è necessario aggiungere un piccolo extra al modulo in generale, come mostrato nel seguente esempio di codice. SR-only. L'aggiunta di questa classe impedirà visivamente che l'etichetta o il testo di aiuto associato appaia nel tuo documento, ma garantirà che sia contrassegnato in modo tale da essere visibile da screen reader e altri dispositivi o software simili.
Uscita visualizzata dal precedente codice di esempio che mostra il nostro modulo contrassegnato come orizzontale.
Controllo-labelaggiunto. Questo non è richiesto per gli altri tipi di moduli e BS2 semplicemente lo ignorerà. forma orizzontaleviene applicato al tag del modulo più esterno. type = "text"per BS3 a fare la sua magia. casella-Inlinee Radio-Inlineclassi come segue: 
modulo di controllo staticoclasse che può essere applicata ai singoli controlli al posto del normale modulo di controllo, come mostra il codice seguente: 
Disabilitatoattributo a un set di campi che circonda un modulo, tutti i controlli di quel gruppo saranno disabilitati allo stesso tempo, usando lo stesso stile. Questo è qualcosa che non è accaduto in BS2: è stato invece necessario contrassegnare ogni singolo controllo. messa a fuoco:, errore:, e altri. type = "email", e quindi non inserire un indirizzo email al momento dell'invio, il browser dovrebbe evidenziare automaticamente il campo rosso per te. ha-successo, ha-warning, e ha errorile classi nei gruppi di moduli come mostra il seguente codice: 
forma-gruppole sezioni possono anche utilizzare tutto ciò che abbiamo menzionato finora per disattivare, ombreggiare e ridimensionare gli elementi del modulo come richiesto su una base raggruppata. modulo di controllo di retroazione. Questo dovere essere inserito dopo il controllo di input e prima di qualsiasi altro markup nel gruppo di input, a causa del modo in cui il controllo viene riposizionato per farlo comparire nel controllo. Dopo aver aggiunto lo span, devi anche aggiungere una classe di ha-feedbacknella lista delle classi del gruppo di moduli accanto all'altra ha-xxxxxclassi utilizzate per mostrare lo stato di convalida. 
Accentsconagua