Bootstrap responsive design

Brève introduction

Ce tutoriel vous montre comment utiliser une conception adaptée à la mise en page. Au cours, vous apprendrez Responsive Web Design. Avec la popularité des appareils mobiles, comment permettre aux utilisateurs de naviguer à travers les appareils mobiles à votre site pour obtenir un bon effets visuels, est déjà un problème inévitable. Responsive Web Design est un moyen efficace pour atteindre cet objectif.

Quel est Responsive Web Design

Responsive Web Design est en permettant aux utilisateurs d'accéder à une variété de tailles de dispositifs pour parcourir le site une bonne efficacité visuelle. Par exemple, sur un écran d'ordinateur que vous visitez un site Web, puis naviguez sur les téléphones intelligents, la taille de l'écran de téléphone intelligent est beaucoup plus petit qu'un écran d'ordinateur, mais vous ne ressentait aucune différence entre l'expérience utilisateur est presque le même, ce qui indique que le site dans la conception de réponse fait un bon travail.

Nous avons nos exemples de mise en page fluide de l'application de la performance de réponse , et vous invite à parcourir à différentes tailles d'écran. Vous pouvez utiliser Chrome ou FireFox pour ajuster l'expansion fenêtre du navigateur redimensionnement.

Cliquez ici, vous pouvez voir Bootstrap exemples de conception sensibles .

Responsive Web Design Works

Web design réactif afin d'appliquer, vous devez créer une variété de dispositifs pour adapter à la taille de la CSS styles comprennent. Une fois que la page est chargée sur un appareil spécifique, utiliser une variété de polices sur les technologies de page et de développement Web telles que les requêtes des médias (médias Requêtes), cette fois, sera le premier test de la taille de la fenêtre de l'appareil, puis charge le dispositif spécifique de style.

Etude approfondie du Responsive Web design CSS

Nous allons «bootstrap-responsive.css 'apprendre à apprendre" responsive design "est de parvenir à la nuance. Avant cela, vous devez ajouter la ligne de code suivante dans la zone d'en-tête de la page:

 <Meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1.0"> 

balise meta viewport, remplace la fenêtre par défaut et aider à charger un style spécifique viewport associé.

propriété largeur à la largeur de l' écran. Il contient une valeur, tels que 320, représente 320 pixels, ou une valeur de 'device-width', utilisé pour indiquer au navigateur d'utiliser la résolution d'origine.

propriété initiale échelle est le rapport de la fenêtre initiale. Lorsqu'il est réglé à 1,0, l'appareil affiche la largeur d'origine.

Bien sûr, vous devez ajouter le Bootstrap Responsive CSS, comme suit:

 <Link href = "actifs / css / bootstrap-responsive.css" rel = "stylesheet"> 

Maintenant, si vous trouvez fichier CSS réactif, vous trouverez que dans certaines déclarations publiques de retour ( à partir du numéro de la ligne 10-22), à une variété de zone '@media' a commencé. Ceci est la façon d'écrire un style approprié pour une variété de dispositifs.

La première zone à '@media (max-width: 480px )' a commencé comme une largeur maximale de 480 pixels paramètres de l' appareil de style.

La seconde zone de «@media (max-width: 767px ) ' a commencé comme une largeur maximale de 767 pixels paramètres de l' appareil de style.

La troisième zone à '@media (min-width: 768px ) et (max-width: 979px)' a commencé comme une largeur minimale de 768 pixels et une largeur maximale de 979 paramètres de l' appareil pixels de style.

La zone suivante est la largeur maximale de la paramètres de l'appareil de style 979 pixels. Donc , il est '@media (max-width: 979px )' démarre.

Les deux dernières zones, respectivement '@media (min-width: 980px )' et '@media (min-width: 1200px )' démarre, avant qu'un appareil est réglé sur une largeur minimale de 980 pixels dans le style, celui - ci est le plus petit largeur définir le style pour le périphérique 1200 pixels.

Par conséquent, le rôle fondamental de cette feuille de style est en utilisant le 'min-width' et la propriété 'max-width' pour déterminer le style utilisé conformément à la largeur maximale et une largeur minimale de l'appareil.

explication

Afin de rendre la disposition plus réactif, Bootstrap faire trois choses:

1. Modifier la largeur des colonnes de la grille.

2. Dès qu'il est nécessaire, il utilise des éléments de la pile, plutôt que l'élément flottant. Si vous ne savez pas ce qui est l'élément de la pile, les formes suivantes de w3.org peuvent fournir de l'aide:

élément Root (html) pour former un contexte pile racine, l'autre génération de contexte de pile (y compris des éléments relativement positionnés, il y a un 'z-index' valeur au lieu de 'auto' calculé) par un élément de positionnement arbitraire. Contexte pile par rapport au bloc contient pas nécessaire.

3. Pour rendre correctement le titre et le texte de leur taille.

Un développement plus rapide pour les appareils mobiles de mise en page conviviale

classe Bootstrap a plusieurs utiles pour le développement de la mise en page mobile-friendly. Ces classes peuvent être vu dans 'responsive.less' sur.

.visible-phone, une largeur de 767px et moins visible sur le téléphone, sur le 979px à 768px Tablet caché de la vue, caché depuis le bureau, ce qui est la valeur par défaut.

.visible-comprimé, d' une largeur de 767px et en dessous du téléphone cellulaire caché est pas visible, 979px à 768px visible sur la plaque, non visible sur le bureau pour cacher, ce qui est la valeur par défaut.

.visible-desktop, caché sur une largeur de 767px et en dessous du téléphone est pas visible, caché sur 979px à 768px Tablet invisible, visible sur le bureau, ce qui est la valeur par défaut.

.hidden-phone, une largeur de 767px et se cacher sur le téléphone suivant est pas visible, sur le 979px à 768px Tablet visible, visible sur le bureau, ce qui est la valeur par défaut.

.hidden-comprimé, d' une largeur de 767px et moins visible sur le téléphone, sur la tablette 979px à 768px caché invisible, visible sur le bureau, ce qui est la valeur par défaut.

.hidden-bureau, à une largeur de 767px et au- dessous de la visibilité du téléphone sur 979px à 768px Tablet visible, cachée à partir du bureau, qui est la valeur par défaut.

Cliquez ici pour télécharger le tutoriel pour utiliser tout le HTML, CSS, JS et les fichiers d'image.