Bootstrap Responsive Design
Kurze Einführung
Dieses Tutorial zeigt Ihnen, wie Responsive Design das Seitenlayout zu verwenden. Im Kurs werden Sie Responsive Web Design lernen. Mit der Popularität von mobilen Geräten, wie Anwender über mobile Endgeräte auf Ihre Website durchsuchen zu lassen, eine gute visuelle Effekte zu bekommen, bereits ein unvermeidliches Problem. Responsive Web-Design ist ein effektiver Weg, um dieses Ziel zu erreichen.
Was ist Responsive Web Design
Responsive Web-Design ist, indem die Anwender eine Vielzahl von Größen von Geräten für den Zugriff auf die Website eine gute visuelle Wirksamkeit zu suchen. Zum Beispiel auf einem Computer-Monitor, der Sie eine Website besuchen, und wechseln Sie dann auf Smartphones, Bildschirmgröße des Smartphone ist viel kleiner als ein Computer-Monitor, aber Sie haben das Gefühl, keinen Unterschied zwischen der Benutzererfahrung ist fast das gleiche, was darauf hinweist, dass die Website in Reaktion Design macht einen guten Job.
Wir haben unsere Flüssigkeit Layout Beispiele für die Anwendung der Reaktionsleistung und lädt Sie in verschiedenen Bildschirmgrößen zu suchen. Sie können mit Chrome oder Firefox das Browserfenster Ändern der Größe Erweiterung anzupassen.
Klicken Sie hier, können Sie sehen Bootstrap ansprechende Design - Beispiele .
Responsive Web Design Works
Responsive Web Design, um zu bewerben, müssen Sie eine Vielzahl von Geräten zu schaffen, um die Größe der CSS-Stile umfassen anzupassen. Nachdem die Seite auf einem bestimmten Gerät geladen wird, verwenden eine Vielzahl von Schriftarten auf der Seite und Web-Entwicklungstechnologien wie Medienanfragen (Media Queries), dieser Zeit wird der erste Test des Darstellungsgröße der Vorrichtung sein, und lädt dann der Stil gerätespezifisch.
Tiefe Studie von Responsive Web Design CSS
Wir werden "Bootstrap-responsive.css" Lernen, wie man "Responsive Design" zu lernen, ist Nuance zu erreichen. Vor dieser Zeit müssen Sie die folgende Codezeile im Kopfbereich der Seite hinzu:
<Meta name = "Ansichtsfenster" content = "width = device-width, initial-scale = 1.0"?>
Ansichtsfenster-Meta-Tag, überschreibt die Standard-Ansichtsfenster und helfen, einen bestimmten Stil verbunden Ansichtsfenster laden.
Breite Eigenschaft auf die Bildschirmbreite. Es enthält einen Wert, wie 320, repräsentiert 320 Pixel, oder einen Wert von 'device-width', verwendet, um den Browser zu sagen, die ursprüngliche Auflösung zu verwenden.
initial-Skala Eigenschaft ist das Verhältnis des ursprünglichen Ansichtsfenster. Wenn auf 1,0 gesetzt ist, wird das Gerät die ursprüngliche Breite zeigen.
Natürlich müssen Sie die Bootstrap Responsive CSS hinzufügen, wie folgt:
<Link href = "assets / css / Bootstrap-responsive.css" rel = "stylesheet">
Nun, wenn Sie reagiert , CSS - Datei finden, werden Sie begann , dass in einigen öffentlichen Erklärungen zurück (von der Zeilennummer 10-22), um eine Vielzahl von Flächen "@media 'gefunden. Dies ist, wie ein Stil geeignet für eine Vielzahl von Geräten zu schreiben.
Der erste Bereich zu "@media (max-width: 480px ) ' begann als eine maximale Breite von 480 Pixeln Stil Geräteeinstellungen.
Der zweite Bereich zu "@media (max-width: 767px ) ' begann als eine maximale Breite von 767 Pixeln Stil Geräteeinstellungen.
Der dritte Bereich zu "@media (min-width: 768px ) und (max-width: 979px) 'begann als minimale Breite von 768 Pixel und einer maximalen Breite von 979 Pixeln Stil Geräteeinstellungen.
Der nächste Bereich ist die maximale Breite des Geräteeinstellungen Stil 979 Pixel. So ist es '@media (max-width: 979px )' zu starten.
Die letzten beiden Bereiche jeweils '@media (min-width: 980px )' und '@media (min-width: 1200px )' zu starten, bevor ein Gerät mit einer Mindestbreite von 980 Pixeln im Stil festgelegt, letztere ist die kleinste Breite stellen Sie den Stil für das Gerät 1200 Pixel.
Daher ist die grundlegende Rolle dieses Sheet unter Verwendung der 'min-width' und 'max-width' Eigenschaft die Art in Übereinstimmung mit der maximalen Breite und einer minimalen Breite des Geräts verwendet , um zu bestimmen.
Erklärung
Um das Layout mehr ansprechbar zu machen, Bootstrap drei Dinge tun:
1. Ändern Sie die Breite der Spalten im Raster.
2. Solange es notwendig ist, verwendet er Elemente des Stapels, anstatt Element schwimmt. Wenn Sie nicht wissen, was das Stapelelement ist, werden die folgenden Formen von w3.org kann etwas Hilfe bieten:
Wurzelelement (html) einen Stapel Root-Kontext zu bilden, der andere Stapel Kontexterzeugung (einschließlich relativ positionierten Elementen, gibt es eine "z-index 'berechnete Wert anstelle von' auto ') durch ein beliebiges Element Positionierung. Kontextstapel relativ zum Block enthält nicht erforderlich.
3. Um richtig den Titel und Text ihrer Größe machen.
Schnellere Entwicklung für mobile Geräte freundliches Layout
Bootstrap-Klasse verfügt über mehrere, die für die Entwicklung von mobilen freundliches Layout. Diese Klassen können in 'responsive.less' zu sehen auf.
.visible-Telefon, eine Breite von 767px und weniger sichtbar auf dem Handy, auf dem 979px auf 768px Tablet aus dem Blick verborgen, vom Desktop verborgen, die die Standardeinstellung.
.visible-Tablette, eine Breite von 767px und unterhalb der versteckten Handy ist nicht sichtbar, 979px auf 768px sichtbar auf der Platte, nicht sichtbar auf dem Desktop zu verstecken, was die Standardeinstellung ist.
.visible-Desktop, auf einer Breite von 767px versteckt und unter dem Telefon nicht sichtbar ist , versteckt auf 979px auf 768px Tablet unsichtbar, sichtbar auf dem Desktop, dies ist die Standardeinstellung.
.hidden-Telefon, eine Breite von 767px und verstecken sich auf der folgenden Telefon nicht sichtbar ist , auf die 979px auf 768px Tablet sichtbar, auf dem Desktop sichtbar, was der Standard ist.
.hidden-Tablette, eine Breite von 767px und weniger sichtbar auf dem Handy, auf dem 979px auf 768px Tablet unsichtbar versteckt, auf dem Desktop sichtbar, was der Standard ist.
.hidden-Desktop, mit einer Breite von 767px und unterhalb der Sichtbarkeit des Telefons auf 979px auf 768px Tablet sichtbar, vom Desktop verborgen, die die Standardeinstellung.
Klicken Sie hier , um das Tutorial zum Download alle HTML, CSS, JS und Bilddateien.