Share
Nel precedente tutorial della nostra serie su Bootstrap 3, hai appreso alcune delle funzionalità CSS che sono state modificate nella versione 3. In questo tutorial finiremo per esaminare altre funzionalità modificate, come immagini e pulsanti.
Il cambiamento più importante nelle classi utilizzate per assegnare uno stile ai pulsanti in BS3 è lo stile predefinito. Sotto BS2, semplicemente aggiungendo il btnla classe di un elemento di input del pulsante di tipo, o di un tag di ancoraggio, darebbe al controllo l'aspetto del pulsante predefinito.
Da BS3 in poi, ora devi esplicitamente aggiungere btn-default; aggiungendo semplicemente btnda solo ora non avrà più alcun effetto.
Il secondo cambiamento principale riguarda la ridenominazione di alcune classi base. In particolare, btn-errorè stato rinominato in btn-pericoloin modo che lo schema di denominazione corrisponda alle altre modifiche di classe con nome simile e porti uniformità alla libreria di base Bootstrap.
Oltre a ciò, le classi dei pulsanti di base rimangono invariate, come mostra il seguente esempio di codice:
Quando viene eseguito il rendering nel browser, vedrai il normale aspetto del pulsante piatto che ora la BS3 ha per i controlli:
Ci sono alcune nuove classi per l'elemento button, aggiunte per portare uniformità alle classi di dimensionamento della griglia. Queste classi sono btn-lg, btn-sm, e btn-XS; Non c'è btn-md, come il pulsante di dimensioni medie è la dimensione standard utilizzata quando non viene specificata alcuna classe.
Il seguente esempio di codice mostra tutti gli stili dei pulsanti di diverse dimensioni:
Quando viene eseguito il rendering nel browser, questo esempio di codice dovrebbe fornire il seguente output:
Quando aggiungi la classe btn-blocka un pulsante o elemento di ancoraggio in stile usando una delle precedenti classi di pulsanti, quel pulsante si allungherà per riempire il 100 percento dello spazio disponibile. Ciò è utile quando si producono finestre di dialogo e controlli di dimensionamento con il sistema di griglia BS3, in quanto consente di regolare in modo specifico i pulsanti (e altri elementi) per mantenere un buon equilibrio nei progetti di moduli.
Nella maggior parte dei casi, non è necessario impostare lo stato attivo di un pulsante, ma se lo si fa, è possibile aggiungere facilmente attivoclasse a qualsiasi elemento contrassegnato utilizzando le classi di pulsanti. Attivoin generale (sul almeno un elemento) di solito usa il :attivopseudo-selettore per cambiare lo stile del pulsante. Aggiungere il attivola classe, tuttavia, costringerà il pulsante a visualizzare il suo stato attivo.
Nota: Se stai pensando di utilizzare lo stato attivo per creare pulsanti permanenti, tieni presente che nei seguenti tutorial, discuteremo degli stati dei pulsanti utilizzando il componente e le funzionalità JavaScript disponibili. BS3 fornisce solo un pulsante appiccicoso che utilizza le funzionalità aggiuntive disponibili in queste strutture, quindi non sarà necessario creare i propri pulsanti permanenti utilizzando la maggior parte delle circostanze attive.
Puoi anche disabilitare i tuoi pulsanti e contrassegnarli come inattivi usando le stesse classi "disabilitate" e gli attributi che abbiamo discusso in precedenza con le modifiche negli elementi del modulo.
Il codice seguente mostra i pulsanti marcati per apparire attivi e negli stati disabilitati:
Essere consapevoli, tuttavia, che nel caso di pulsanti di ancoraggio, il Disabilitatoelemento / classe fa non disabilitare il collegamento; per assicurarti che un link di stato stato disabilitato non si attivi, dovrai usare il codice JavaScript personalizzato.
Per questo motivo, il team di BS3 consiglia di utilizzare il elemento dove possibile per contrassegnare i pulsanti e utilizzare solo i tag di ancoraggio in circostanze specifiche.
Non dimentichiamo inoltre l'argomento "idempotence" e l'importanza dell'uso dei pulsanti sulle ancore. In generale, un collegamento di ancoraggio è appropriato se la destinazione è una richiesta di ottenere e il collegamento più volte non causerà problemi con l'attivazione ripetuta; in caso contrario, utilizzare un pulsante.
Le modifiche CSS, in cui è interessato l'umile tag immagine, non sono state di così ampia portata come in altri posti in BS3. In precedenza, le immagini non erano reattive per impostazione predefinita, e come per molte cose in BS2, dovevi aggiungere le classi responsive opzionali per essere vicino ad essere reattivo con loro.
Sfortunatamente, anche dopo aver aggiunto le classi responsive opzionali, le cose non erano ancora perfette; molte persone hanno citato problemi con le pagine in cui sono state utilizzate le mappe di Google, tra le altre cose.
BS3 cambia tutto questo. Ora, per impostazione predefinita, le immagini sono pienamente reattive con l'uso di a img-reattivaa nessuno
Oltre a questo, l'unica altra modifica apportata alla sezione immagini è il nome del img-polaroidclasse (usata per generare miniature) a img-miniature, in modo che rientri in linea con altre ridenominazioni simili in tutta la biblioteca.
Le classi BS2 sono in castigoe img-cerchiofunzionano ancora come prima, dando un effetto di miniatura circolare e arrotondato a rettangolo.
Infine, arriviamo ai cambiamenti che riguardano quelle cose che non si adattano veramente a categorie specifiche.
Sotto le classi di tipografia in BS2, in origine sei stato introdotto a un insieme di classi di colore utilizzate per impostare il colore di un elemento di testo sugli stessi colori di branding utilizzati in altri elementi nel framework.
BS3 fa un ulteriore passo avanti e introduce il concetto di avere gli stessi colori usati anche per gli sfondi contestuali.
In questo caso, gli sfondi sono una variazione più leggera, utilizzata in altri riquadri e caselle di avviso. C'è un ulteriore vantaggio: se utilizzi queste classi di colori contestuali sui tag di ancoraggio e su qualsiasi altra cosa che abbia un set di passaggio del mouse per impostazione predefinita, i colori si oscurano leggermente per mostrare che sono stati posizionati sopra.
Come con la denominazione in altre classi basate sul colore, le classi disponibili qui sono text-silenziato, text-primaria, text-successo, text-info, text-warning, e text-pericoloper paragrafo, span e altri elementi di testo in linea o basati su blocchi.
Per i colori di sfondo, i nomi delle classi sono bg-primaria, bg-successo, bg-info, bg-warning, e bg-pericolo.
Il codice seguente mostra un esempio di utilizzo:
Questo paragrafo utilizza la classe di testo disattivata, tipicamente riservato a qualcosa di non molto importante o meno importante.
Questo paragrafo utilizza la classe di testo principale, tipicamente riservato a qualcosa di importante o predefinito e visibile.
Questo paragrafo sta usando la classe del testo di successo, tipicamente riservato per un'azione che ha appena avuto successo o qualcosa di buono e di congratulazioni.
Questo paragrafo sta usando la classe del testo informativo, tipicamente riservato a messaggi informali, come un lavoro in background appena finito o un nuovo file disponibile.
Questo paragrafo utilizza la classe del testo di avviso, tipicamente riservato a qualcosa che potrebbe essere pericoloso o che richiede attenzione ma può aspettare un po '.
Questo paragrafo sta usando la classe di testo di pericolo, tipicamente riservato a qualcosa di molto importante, o qualcosa che ha davvero bisogno di attirare attenzione ad esso.
Questo paragrafo usa un testo normale ma con un colore di sfondo primario per dirti che quello che stai vedendo è lo stato predefinito.
Questo paragrafo usa un testo normale ma con un colore di sfondo di successo per dirti che quello che stai vedendo è tutto buono.
Questo paragrafo usa un testo normale ma con un colore di sfondo informativo per dirti che quello che stai vedendo è informativo e dovrebbe essere letto, ma non sempre agisce.
Questo paragrafo utilizza un testo normale ma con un colore di sfondo di avviso per dirti che ciò che stai vedendo potrebbe causare problemi di cui dovresti essere a conoscenza.
Questo paragrafo usa un testo normale ma con un colore di sfondo pericoloso per dirvi che ciò che state vedendo ha bisogno che voi prestiate attenzione ad esso ora.
Una cosa che è stata notificata come necessaria in BS3 e non presente in BS2 è dedicata segno di omissioneclasse per indicatori a discesa su pulsanti e altri mobili per schermi.
Ora puoi utilizzare questo sui tuoi elementi aggiungendo un nome di classe di Un'altra nuova aggiunta in BS3, anche se non è in realtà una classe, merita comunque una menzione: la finestra di dialogo si chiude a croce. Proprio come il Il seguente esempio di codice mostra un esempio di entrambi Questo testo appare in un div a cui è associata un'icona di chiusura. Proprio come in BS2, le classi di utilità quick float Altre nuove classi includono il Abbiamo già visto una nuova classe chiamata Se si definisce un titolo di pagina utilizzando un banner immagine, un tipico screen reader non sarà in grado di dire cosa dice il testo nell'immagine. Per molto tempo, molti autori hanno usato un hack chiamato image replacement per aggirare questo problema. La sostituzione dell'immagine funziona avvolgendo il banner dell'immagine in un Quello che poi accade è che in termini di visualizzazione, il banner dell'immagine è visto da chi ha una buona vista, ma quelli che usano uno screen reader sentono il lettore dire il vero testo nel banner dell'immagine. BS3 ora fornisce una classe chiamata Finalmente, arriviamo all'ultimo degli ultimi nella sezione delle modifiche CSS. A cosa serve un framework di progettazione web reattivo senza classi di utilità per aiutarti a gestire i tuoi layout reattivi? "Ma resisti, l'abbiamo coperto con le griglie", ti sento dire, e sì, abbiamo. Ma BS3 ha un altro asso nella manica, che in tutta onestà era presente in BS2, ma non ha funzionato molto bene. Allora, cos'è questa magia extra? Permettetemi di presentarvi le classi di visibilità reattiva. In sostanza, ciò che queste gemme fanno è consentire di scambiare e modificare parti dell'interfaccia utente a seconda della griglia e delle dimensioni del display. Immaginiamo, ad esempio, che tu abbia un elenco di elementi della posta in arrivo e che, quando viene visualizzato su un PC desktop, ogni elemento abbia un'anteprima accanto, proprio come in una classica applicazione di lettura e-mail. Qualcosa forse come il seguente: Ora questo è fantastico finché non provi ad adattarlo a un dispositivo mobile, in cui desideri assolutamente nascondere il riquadro di anteprima e lasciare solo l'elenco di email. Normalmente un'attività come questa viene eseguita utilizzando un po 'di JavaScript per modificare la visibilità dell'elemento modificando le impostazioni visibili dell'elemento. BS3 ha una soluzione integrata che utilizza classi CSS che ti aiutano a gestire situazioni come questa con estrema facilità. Prendi il seguente bit di codice: Cara persona, Blah blah blah blah blah blah blah Se lo fai nel tuo browser dovresti ottenere qualcosa che assomigli al seguente: Se, tuttavia, ridimensionate il vostro browser alle dimensioni dello schermo mobile, le cose iniziano a sembrare un po 'strane: Questo potrebbe funzionare per alcuni, ma in generale è una cattiva idea. Cosa succede quando hai 100 e-mail non lette e devi scorrere fino alla fine della vista ogni volta per leggere l'anteprima? Prendi l'anteprima principale Quindi, se aggiorni il browser e provi a ridimensionarlo, dovresti vedere l'anteprima Proprio come con il sistema a griglia, ci sono quattro diverse dimensioni, e ci sono classi da nascondere e rendere visibili. Le classi visibili renderanno visibile l'elemento in questione solo alle dimensioni dello schermo specificate e le classi nascoste rendono nascosto l'elemento in questione solo alla dimensione dello schermo specificata. I nomi delle classi sono i seguenti: Le larghezze dei dispositivi e i relativi punti di innesco sono gli stessi di quelli utilizzati nel sistema di griglia in generale, con Esistono due classi finali utilizzate in questa categoria per assistere l'utente nella gestione dei layout di visualizzazione rispetto a quelli basati su stampa. Puoi usare Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion.segno di omissioneal tuo contenitore esterno-a o segno di omissione, questo era presente in BS2, ma non era disponibile per l'uso separato dal suo uso previsto in finestre di dialogo modali e barre di avviso. Tuttavia, da BS3 in poi, puoi usarlo bene da solo. segno di omissioneclass e close cross in markup generico: 
pull-sinistrae pull-destraesistono ancora, ma ora sono uniti Centro-block, che semplicemente rende automatici entrambi i margini e centra l'elemento nel suo genitore, e clearfix, che cancella qualsiasi oggetto mobile che si sta utilizzando, ripristinando il normale flusso di documenti. mostrare, nascosto, e invisibileclassi. Mostrarepraticamente parla da solo, ma qual è la differenza tra gli ultimi due? Nascostocrolla fisicamente lo spazio utilizzato dall'elemento, quindi se lo hai in un div di altezza completa, ad esempio, quel div collasserà fino alla sua altezza più piccola. Comunque se usi invisibile, l'elemento conserva il suo spazio (e occupa anche il suo posto nel flusso di elementi), ma svanisce dalla vista. SR-onlyè stato introdotto per contrassegnare un blocco come visibile agli screen reader e nient'altro. C'è ora un'altra classe come questa che viene usata per le intestazioni grafiche. H1o qualche altro tag di tipo standard, inserendo il nome come testo in chiaro accanto al banner dell'immagine, quindi usando CSS per spostare il testo fuori dallo schermo. text-pelleper facilitare questo. Segue un semplice esempio:
Un titolo basato sull'immagine grafica
Output generato da un esempio di codice in un normale browser per PC
Esempio di layout dell'applicazione di posta elettronica
Email 1 (1/1/11) Email 2 (1/1/11) Email 3 (1/1/11) Email 4 (1/1/11) Email 5 (1/1/11) Email 6 (1/1/11) Email 2: Ricevuto (1/1/11)
A: una persona
Mock-up dell'applicazione email prodotto dal precedente codice di esempio
Mock-up dell'applicazione Email su una vista ridimensionatanascosto-sm, come segue: 
Mock-up dell'applicazione Email, ridimensionato, ma con aggiunta di classi nascoste
visibili-xs: Rendi visibile su schermi extra-piccoli visibile-sm: Rendi visibile su schermi piccoli visibile-md: Rendi visibile su schermi medi visibile-lg: Rendi visibile su schermi molto grandi
hidden-xs: Nascondi su schermi extra-piccoli nascosto-sm: Nascondi su schermi piccoli nascosto-md: Nascondi su schermi medi nascosto-lg: Nascondi su schermi di grandi dimensioni -xscopre i telefoni tablet palmare e più piccoli, -smche copre compresse medio-grandi, -mdche copre la maggior parte dei computer desktop e -lgche copre i desktop a schermo ampio. visibile-printe nascosto-printesattamente nello stesso modo delle classi basate sulla dimensione sopra, ma questa volta rendendo un elemento visibile e invisibile quando una pagina viene inviata alla stampante. 
Accentsconagua