Bootstrap responsive design
breve introduzione
Questo tutorial mostra come utilizzare responsive design del layout di pagina. Nel corso, imparerete Responsive Web Design. Con la popolarità dei dispositivi mobili, come consentire agli utenti di navigare attraverso dispositivi mobili per il tuo sito per ottenere un buon effetto visivo, già è un problema inevitabile. Responsive Web design è un modo efficace per raggiungere questo scopo.
Qual è Responsive Web Design
Responsive Web design è quello di consentire agli utenti di accedere a una varietà di formati di dispositivi per navigare il sito una buona efficacia visiva. Ad esempio, su un monitor di un computer che si visita un sito Web, e poi navigare su smart phone, le dimensioni dello schermo del telefono intelligente è molto più piccolo di un monitor di un computer, ma non si sentiva alcuna differenza tra l'esperienza dell'utente è quasi la stessa, che indica che il sito nel design risposta fa un buon lavoro.
Noi abbiamo i nostri esempi di layout fluido di applicazione della prestazione di risposta , e vi invita a navigare in diverse dimensioni dello schermo. È possibile utilizzare Chrome o Firefox per regolare l'espansione finestra del browser ridimensionamento.
Clicca qui, è possibile visualizzare Bootstrap esempi di progettazione reattivo .
Responsive Web opere di design
Responsive Web design al fine di applicare, è necessario creare una varietà di dispositivi per adattarsi alle dimensioni del CSS stili includono. Una volta che la pagina viene caricata su un dispositivo specifico, utilizzare una varietà di tipi di carattere sulle tecnologie di pagina e di sviluppo Web, come le media query (Media Queries), questa volta, sarà il primo test della dimensione finestra del dispositivo, e poi carica il dispositivo specifico stile.
studio approfondito di CSS responsive design Web
Ci sara 'bootstrap-responsive.css' imparare ad apprendere "responsive design" è quello di raggiungere sfumatura. Prima di questo, è necessario aggiungere la seguente riga di codice nell'area di intestazione della pagina:
<Meta name = "viewport" content = "width = device-width, iniziale di scala = 1.0">
viewport meta tag, sostituisce il visualizzazione predefinita e aiutare caricare uno stile specifico finestra associata.
la larghezza di proprietà alla larghezza dello schermo. Esso contiene un valore, come ad esempio 320, rappresenta 320 pixel, o un valore di 'device-width', usato per dire al browser di utilizzare la risoluzione originale.
proprietà iniziale scala è il rapporto della finestra iniziale. Quando è impostato su 1.0, il dispositivo mostrerà la larghezza originale.
Naturalmente, è necessario aggiungere il Responsive CSS Bootstrap, come segue:
<Link href = "Attività / css / bootstrap-responsive.css" rel = "stylesheet">
Ora, se si trova il file CSS reattivo, vi accorgerete che in alcune dichiarazioni pubbliche indietro (dal numero di riga 10-22), ad una varietà di zona '@media' iniziato. Questo è come scrivere uno stile adatto per una varietà di dispositivi.
La prima area di '@media (max-width: 480px )' iniziato come una larghezza massima di 480 pixel impostazioni del dispositivo di stile.
La seconda area di '@media (max-width: 767px )' iniziato come una larghezza massima di 767 pixel impostazioni del dispositivo di stile.
La terza area di '@media (min-width: 768px ) e (max-width: 979px)' iniziato come una larghezza minima di 768 pixel e una larghezza massima di 979 pixel impostazioni del dispositivo di stile.
L'area successiva è la larghezza massima dello stile impostazioni del dispositivo 979 pixel. Così è '@media (max-width: 979px )' inizio.
Le ultime due aree, rispettivamente '@media (min-width: 980px )' e '@media (min-width: 1200px )' inizio, prima che un dispositivo è impostato per una larghezza minima di 980 pixel in stile, il secondo è il più piccolo larghezza impostare lo stile per il dispositivo 1200 pixel.
Pertanto, il ruolo fondamentale di questo foglio di stile è usando il 'min-width' e proprietà 'max-width' per determinare lo stile usato in conformità con la larghezza massima e la larghezza minima del dispositivo.
spiegazione
Al fine di rendere il layout più reattivo, Bootstrap fare tre cose:
1. Modificare la larghezza delle colonne della griglia.
2. Finché vi è la necessità, utilizza elementi della pila, anziché elemento flottante. Se non sai cosa è l'elemento pila, le seguenti forme di w3.org possono fornire un aiuto:
elemento radice (HTML) per formare un contesto pila radice, l'altra generazione contesto pila (compresi gli elementi posizionati in modo relativo, c'è una 'z-index' valore invece di 'auto' calcolato) da un posizionamento elemento arbitrario. Contesto pila rispetto al blocco non contiene necessaria.
3. Per rendere correttamente il titolo e il testo delle loro dimensioni.
sviluppo più rapido per i dispositivi mobili di layout amichevole
classe di bootstrap ha diversi utili per lo sviluppo del layout di mobile-friendly. Queste classi possono essere visti in 'responsive.less' su.
.Visible-phone, una larghezza di 767px e meno visibili sul telefono, sul 979px per 768px Tablet nascosto alla vista, nascosto dal desktop, che è il default.
.Visible-tablet, una larghezza di 767px e sotto il telefono cellulare nascosto non è visibile, 979px a 768px visibile sul piatto, non è visibile sul desktop per nascondere, che è il default.
.Visible-desktop, nascosto su una larghezza di 767px e sotto il telefono non è visibile, nascosto sul 979px a 768px Tablet invisibile, visibile sul desktop, che è il default.
.hidden-phone, una larghezza di 767px e nascondere il seguente telefono non è visibile, sulla 979px per 768px Tablet visibile, visibile sul desktop, che è il default.
.hidden-tablet, una larghezza di 767px e meno visibili sul telefono, sul Tablet 979px a 768px nascosto invisibile, visibile sul desktop, che è il default.
.hidden-desktop, con una larghezza di 767px e sotto la visibilità del telefono su 979px a 768px Tablet visibile, nascosto dal desktop, che è il default.
Clicca qui per scaricare il tutorial per utilizzare tutti i file di immagine HTML, CSS, JS e.