Accentsconagua

Mobile prima con Bootstrap 3

Codice
Share

Ok, un paio di settimane fa, nel suo stesso biennio, Mark Otto e il resto dei ragazzi responsabili dello sviluppo e della manutenzione di Bootstrap hanno annunciato il rilascio ufficiale della terza versione del framework e sono arrivati ​​agli steroidi. Vediamo cosa stiamo ottenendo.

Cosa c'è di nuovo?

Prima di tutto, le modifiche più importanti che troverai nella nuova versione di Bootstrap sono il supporto per i siti Web reattivi, infatti il ​​modulo reattivo è stato rimosso. Ora, dal suo nucleo, Bootstrap è più reattivo, più di questo, questa nuova versione arriva con l'approccio di "Mobile First", il che significa che quasi tutto è stato ridisegnato per iniziare da una dimensione dello schermo inferiore e scalare (più su questo in un po ').

Quasi tutto è stato ridisegnato e ricostruito per iniziare dai dispositivi palmari e scalare.

Nel look and feel vedrete anche molti cambiamenti, in primo piano il fatto che l'intero stile sia diventato piatto, e c'è un tema opzionale per un look 2.0-er. Inoltre, le icone sono passate dalle immagini a un font, che è davvero utile da usare quando si richiedono dimensioni e colori diversi.

Sistema di griglia

Cominciamo a parlare del Grid System, oh the Grid, in effetti, ci sono quattro Grid Systems in questa nuova versione di Bootstrap, ognuno dei quali funziona esattamente allo stesso modo, essendo differenziati dalla larghezza della dimensione dello schermo a cui operano.

Abilitazione della griglia

Affinché il Grid System funzioni correttamente e anche per garantire il corretto rendering e il touch zoom, aggiungi il meta tag viewport al tuo documento:

Griglie a larghezza diversa

In questa nuova versione del framework ci sono quattro Grid Systems, con la larghezza del viewport che è il parametro che li differenzia. Le larghezze che definiscono le frontiere tra l'una e l'altra sono le seguenti:

  • Piccoli dispositivi extra ~ Cellulari (< 768px)
  • Piccoli dispositivi ~ compresse (> = 768px)
  • Dispositivi medi ~ Desktops (> = 992px)
  • Grandi dispositivi ~ Desktops (> = 1200px)

E ognuna delle diverse finestre supportate ha una classe particolare per affrontarla, come segue:

  • col-xs- ~ Piccoli dispositivi extra
  • col-sm- ~ Piccoli dispositivi
  • col-md- ~ Dispositivi medi
  • col-lg- ~ Grandi dispositivi

Per utilizzare il sistema della griglia è necessario un elemento contenitore, con una classe "contenitore", e dentro un secondo contenitore con una classe "riga". Nota come in entrambi i casi il suffisso "fluido" è scomparso, questo in contrasto con Bootstrap 2. E all'interno del secondo contenitore dovresti posizionare le tue colonne.

 
 
Col-xs-6
 
Col-xs-6

Come ho detto prima, questa nuova versione di Bootstrap viene fornita con un approccio Mobile First, ciò significa che le colonne con una classe hanno un suffisso "xs" siamo sempre verrà fluttuato orizzontalmente, indipendentemente dalla dimensione della finestra. Se dovessi dire, usa le colonne precedute da un "Md" e il viewport è inferiore a 992 px (anche 991 px), quelle colonne si impilano una sotto l'altra con una larghezza del 100%, come nel prossimo esempio.

 
 
col-md-4
 
col-md-4
 
col-md-4

Quando questa pagina viene visualizzata in una finestra di 992 px o più, sarà simile a questa:


Se ti capita di vedere quel documento in una finestra di 991px o meno, sembrerebbe il seguente:


Puoi anche combinare le classi per indirizzare i tuoi elementi a una determinata dimensione del viewport. Ad esempio, se nel seguente esempio avresti bisogno delle prime due colonne flottate l'una accanto all'altra in piccoli dispositivi (sm) e impilati sui telefoni, è possibile aggiungere il col-sm-6 in aggiunta a col-md-4 classe.

 
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4

In questo caso, aprendo la pagina in un viewport più grande di 991px vedresti tre colonne uguali, una accanto all'altra, proprio come nell'esempio precedente. Tuttavia, se lo vedessi in una finestra con una larghezza compresa tra 768px e 991px, otterrai il seguente risultato:


Come nell'esempio sopra, puoi combinare e nidificare colonne in molte combinazioni diverse per creare layout molto complessi. C'è molto di più in Grid System in Bootstrap, ma entrare in dettaglio su ogni aspetto di esso richiederebbe un po 'di tempo per essere coperto, quindi per una visione più approfondita suggerisco caldamente di andare avanti e dare un'occhiata alla documentazione.

Bootstrap CSS

La maggior parte delle classi per la parte CSS base di Bootstrap sono rimaste le stesse, tuttavia ci sono alcune modifiche che dobbiamo tenere a mente quando si usa questa nuova versione.

Il codice nel suo complesso è stato riscritto e i nomi delle variabili sono cambiati. Se guardi i file .less, scoprirai che tutte le variabili nel framework sono passate da camelCase usare i trattini per la separazione delle parole, e anche ogni nome di variabile è stato standardizzato in un "stato pseudo stato-elemento"Approccio: ciò significa che gli stili specifici degli elementi come:

    ...

Ora sono preceduti dall'elemento a cui sono applicati, quindi in questa nuova versione di Bootstrap diventerebbe l'elenco precedente.

    ...

Lo stesso vale per gli elenchi con un "in linea"lo stile applicato a loro.Alcune altre modifiche nei nomi delle variabili che riflettono nelle classi che abbiamo conosciuto dai giorni precedenti sono quelle relative alla dimensione, ad esempio con i pulsanti, nella versione 2. * avresti:

I suffissi di questa dimensione sono stati modificati per corrispondere alla convenzione di denominazione generale e questo è lo stesso del sistema Grid, quindi la dichiarazione dei pulsanti precedenti per la versione tre diventa:

Lo stesso vale per le dimensioni degli input e le dichiarazioni di visibilità.

Tabelle reattive

La sintassi e il layout generale delle tabelle rimangono gli stessi in questa versione del framework, ma, fedele all'intero paradigma "Mobile First", ora abbiamo tavoli reattivi in questa iterazione di Bootstrap. Per approfittarne, avvolgi semplicemente l'intero tavolo in un contenitore con una classe di "reattivo-table", ciò che questo farà è far scorrere le tabelle orizzontalmente in piccoli dispositivi (< 768px).

 ... 
E la tabella risultante:

Le forme
Nel reparto CSS, è nei moduli in cui vedresti le principali differenze. Per i principianti, ogni input in un modulo in Bootstrap tre viene ora visualizzato come un elemento "blocco" con una larghezza del 100%. Gli attributi di "dimensione" che puoi modificare con una classe nei controlli dei moduli si riferiscono al padding e alla dimensione del font dell'elemento e non alla larghezza, per controllare che avresti bisogno di metterlo in un contenitore della larghezza desiderata.
Anche il markup per i moduli è cambiato, nella sua forma più semplice, nella versione 2. * un modulo sarebbe simile a questo.
 
 ...    
 
Il markup per lo stesso modulo nella nuova versione aggiunge un elemento extra e una classe all'input stesso e procede come segue.
 
 ...  
   
 
 
Bootstrap è stato creato pensando all'accessibilità, questo è il motivo dell'aggiunta dell'attributo "ruolo", si noti inoltre che l'etichetta / input combo è racchiusa all'interno di un wrapper con una classe di "forma-gruppo"e come ogni altra cosa, questo ha a che fare con la natura reattiva del framework.
Il modulo di ricerca è andato in questa versione, e poiché tutti gli input e le aree di testo sono 100% di larghezza per impostazione predefinita, è necessario prendere in considerazione le forme inline, tuttavia il markup per queste è quasi identico a quello della forma precedente.
 
   
 
   
 
  
  

Nota l'aggiunta della classe "form-linea"all'elemento modulo e quello di"SR-only"per l'etichetta, questa ultima classe ha a che fare con la parte Accessibilità del framework.L'uso di un'etichetta è facoltativo con moduli in linea, tuttavia è altamente incoraggiato e non fa male a nessuno.E a proposito, il"SR-only" sta per Solo lettore di schermo. Quindi gli screen reader troveranno l'etichetta e "dirlo" all'utente.
Infine, per creare un modulo orizzontale devi semplicemente impostare la larghezza dell'etichetta impostando "col-md-" o "_sm"o qualsiasi altra cosa e il corrispondente"Controllo-label"classe, proprio come con la versione due., quindi avvolgere l'input in un contenitore con la larghezza della colonna specificata.
 
  
  
 
 
E la forma risultante.

Ci sono alcuni altri cambiamenti che sono stati fatti riguardo alle forme, come la rimozione di "input-prepend" e "input-accodamento"classi, a favore di"input-gruppo" e "input-gruppo-addonTuttavia, c'è ancora molto da coprire, quindi per i dettagli su questo, si prega di fare riferimento alla documentazione.
Glyphicons
Un'altra area in cui troverai grandi cambiamenti è nelle icone del framework. La libreria di icone include 40 nuovi glifi, e non solo quello, sono passati dall'uso delle immagini ai font, quindi ora invece di aggiungere le due immagini "glyphicons- *" al tuo "img"cartella, dovrai aggiungere i quattro font" glyphicons "al tuo"font"directory, e sì, quattro di loro. Questo ha a che fare con la compatibilità del browser.
Per motivi di prestazioni, ogni icona richiede una classe base e una classe specifica per l'icona. Quindi, per aggiungere un'icona utente, devi utilizzare:
Passa dalle immagini ai caratteri, dà il controllo all'icona della colorazione e del ridimensionamento e ti consente anche di sostituire le icone predefinite con quelle personalizzate che ti potrebbero piacere. Se ti capita di sapere dove potresti trovare queste icone, Fontello è una grande risorsa.
Componenti JavaScript
Sebbene riprogettati e ricreati, i componenti JavaScript in Bootstrap 3.0 mantengono lo stesso nome e utilizzo. Con un paio di differenze leggermente e non così gentili.
Modals
Forse uno dei plugin più usati in Bootstrap è Modals. Scoprirai che è abbastanza simile, con la differenza che i contenitori "modal-header", "modal-body" e "modal-footer" non sono racchiusi in un "modal-content" all'interno di un "modal-dialog" contenitore. Quindi quello che era:
 
 
 
 
Cambia in:
 
 
 
 
 
 
 
 
Sì, è un po 'più di markup, ma migliora la reattività del componente e consente anche di scorrere l'intera viewport invece di avere un parametro "max-height".
Per attivarli tramite JavaScript, devi utilizzare lo stesso metodo di prima.
$ ('# my-modal') .modal ('show');
Il resto dei plugin rimane per lo più lo stesso. Su una nota speciale, la fisarmonica è andata a favore di pannelli pieghevoli, funzionano praticamente allo stesso modo e hanno una sintassi molto simile. Con alcune classi che cambiano un po ', richiedono ancora il plug-in transizioni e non richiedono alcun contenitore aggiuntivo.
Inoltre, il plug-in Typeahead è scomparso da Bootstrap a favore del plug-in Typeahead di Twitter.
eventi
Gli eventi JavaScript sono ora assegnati ai nomi, ma cosa significa per te? Bene, in Bootstrap two, per ascoltare il momento in cui qualche avviso nel tuo sito era "vicino", dovresti aggiungere:
$ ('# my-alert') .bind ('close', function () );
Ora in questa terza versione, il nome dell'evento è cambiato, è assegnato un nome al framework, quindi lo snippet precedente sarebbe:
$ ('# my-alert') .bind ('close.bs.alert', function () );
Vai avanti e dai un'occhiata al resto dei componenti JavaScript che Bootstrap ha da offrire (che, dipendono ancora da jQuery).
Nuovi componenti
Ci sono un paio di nuovi componenti nella parte CSS del framework, elenca i gruppi e pannelli.
Elenca gruppi
Elenca gruppi, dalla documentazione ufficiale.
 
... sono un componente flessibile e potente per visualizzare non solo semplici elenchi di elementi, ma complessi con contenuti personalizzati.
 
Per creare un gruppo di elenchi basta creare un elenco non ordinato con un "list-gruppo"classe, e aggiungi il"list-gruppo-item"ad ogni elemento della lista.
     
  • Lorem ipsum ... 
    •  
  • Dolor siediti ... 
    •  

Puoi aggiungere il "attivo"Classificare qualsiasi elemento nell'elenco per evidenziarlo, anche se ti capita di posizionare un badge al suo interno, sarà centrato verticalmente e allineato a destra, all'interno dell'oggetto. Vai avanti e provalo.
pannelli
I pannelli sono un modo per scatola in alcuni contenuti nel tuo sito o applicazione, evidenziarlo e dargli un senso di unità. Il markup del pannello è abbastanza semplice e il suo contenuto può essere combinato con diversi elementi per ottenere un aspetto e un tatto unici.
I pannelli possono avere intestazioni e piè di pagina e ottenere un significato speciale con il ben noto "Successo","errore","avvertimento", ecc. Classi. Per esempio.
 
Intestazione del pannello
 
Alcuni contenuti qui
 
     
  • Lorem ipsum ... 
    •  
  • Dolor siediti ... 
    •  
 

Come puoi vedere, i pannelli funzionano bene con i gruppi di elenchi e anche con le tabelle non bordate.
Customizer
Un'altra novità in questa versione è il Customizer in cui, non solo il look è cambiato, è molto meglio organizzato e ti dà il controllo su cose come la larghezza della viewport a cui un certo Grid System prende il controllo.
Come sempre, puoi impostare tutti gli stili e i colori dei tuoi font. È un argomento enorme da solo, quindi ti incoraggio ad andare avanti da solo e a scherzare con esso.

Supporto del browser
A lungo è stata la sofferenza portata a tutti noi da Internet Explorer, la versione 6 è stata un incubo totale e i suoi predecessori hanno ancora molto da recuperare. Nella versione 2. * Il team di Bootstrap supportava ancora la versione sette del browser di Microsoft. In questa nuova iterazione del framework, il supporto per IE seven è andato, così come per Mozilla Firefox 3.6 e versioni successive.
In particolare, Bootstrap supporta l'ultima versione di tutti i principali browser (Safari, Opera, Chrome, Firefox e IE), sia in Windows che in Mac quando ci sono entrambi.
Per IE, supporta la versione otto e avanti, e sebbene ci siano alcune proprietà che il browser non rende, come "border-radius", il framework è perfettamente funzionante solo con alcune differenze minori di aspetto e sensibilità. Inoltre, IE otto richiede respond.js per il supporto delle query multimediali.
Per ottenere un elenco dettagliato di soluzioni alternative e trucchi per i diversi browser (tosse Internet Explorer tosse) guarda i documenti ufficiali.
Conclusione
Sin dall'inizio, Bootstrap è stato un ottimo strumento per la prototipazione rapida e la creazione di grandi siti e applicazioni web e questa terza versione non è diversa. Se hai bisogno di un solo motivo per usarlo, sceglierei il Grid System, con la crescita della navigazione mobile e le dimensioni sempre maggiori del viewport, la reattività è ora un must, più che mai. E in questa ultima versione, questa è l'area in cui Bootstrap brilla di più. 
Se hai bisogno di aiuto per iniziare, prova uno dei modelli Bootstrap di facile utilizzo disponibili su Envato Market.

	
	
			
	   
	



Codice


	


			

							×