Bootstrap 3 CSS Présentation
cible
Dans ce tutoriel, nous avons discuté des points de CSS 3 Bootstrap. Ensuite, nous allons expliquer Bootstrap 3 travailler plusieurs facteurs clés.
HTML 5 doctype (Doctype)
Bootstrap 3 utilisé certains éléments de HTML5 et attributs CSS. Pour ceux-ci à travailler, vous devez utiliser le HTML5 type de document (Doctype).
<! DOCTYPE html> <Html lang = "fr"> ... </ Html>
Si le début de la page en Bootstrap créé ne pas utiliser le HTML5 type de document (Doctype), vous pourriez faire face à certains navigateurs affichent des problèmes d'incohérence qui peuvent même faire face à des situations incohérentes certaines sous qui ne peuvent pas passer la validation standard du W3C dans votre code .
priorité du périphérique mobile
Ceci est probablement le changement le plus significatif dans le Bootstrap 3. Dans les versions précédentes de Bootstrap (jusqu'à 2.x), vous devez vous référer à un autre CSS manuellement, afin de rendre le projet en collaboration avec la principale CSS du périphérique mobile convivial. Pas plus, Bootstrap 3 par défaut CSS lui-même est appareil mobile convivial.
Bootstrap 3 est conçu priorité du périphérique mobile, suivi par le bureau. Ceci est en fait un changement très rapide, car de plus en plus de gens utilisent des appareils mobiles.
Pour rendre le site de développement Bootstrap pour les appareils mobiles amicales pour assurer un rendu correct et le zoom de l'écran tactile, vous devez ajouter des balises viewport meta dans la tête de la page, comme suit:
<Meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1.0">
propriété width équipement de contrôle de largeur. Supposons que votre site sera avec différents dispositifs de résolution de l' écran pour parcourir, puis réglez - le sur dispositif de largeur pour vous assurer qu'il rend correctement sur différents appareils.
initial échelle = 1.0 pour assurer la page se charge, le rapport de 1: 1 présentation, il n'y aura pas mise à l' échelle.
Sur le navigateur de l' appareil mobile, en ajoutant scalable-user = pas pour la balise meta viewport pour désactiver sa fonction de mise à l' échelle (zoom). En règle générale, un maximum échelle = 1.0 et évolutive utilisateur = pas ensemble. Après cette fonction de zoom est désactivé, l'utilisateur peut faire défiler l'écran, vous pouvez rendre votre site ressemble plus à une application native sensation. Notez que, de cette façon, nous ne recommandons pas l'utilisation de tous les sites, ou dépend de votre situation!
Image Responsive
En ajoutant img sensible classe permet Bootstrap 3 photos pour soutenir la mise en page souple qui est plus convivial. Regardons cette classe contient ce Css propriété. Son essence est de donner à l'image un max-width: 100%; et la hauteur: auto; propriété permet échelle de l'image, ne dépasse pas la taille de l'élément parent.
.img sensible {
display: inline-block;
height: auto;
max-width: 100%;
}
Cela indique que l'image associée rendu comme inline-block. Lorsque vous définissez les propriétés d'affichage de l'élément est inline-block, élément en ligne par rapport à la teneur de la forme de présentation autour de lui, mais avec la différence en ligne est que, dans ce cas, nous pouvons définir la largeur et la hauteur.
Hauteur de réglage: hauteur automatique, les éléments connexes dépend du navigateur.
Set max-width est 100% remplace toute la largeur spécifiée par propriété width. Il permet des photos à l'appui de la mise en page souple qui est plus convivial.
Affichage mondial, la mise en page et des liens
Bootstrap 3 en utilisant body {margin: 0;} pour enlever le corps des marges.
Considérons l'ensemble des corps pertinents suivants
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1,428571429;
color: # 333333;
background-color: #ffffff;
}
La première règle à définir le style de police par défaut pour le corps "Helvetica Neue", Helvetica, Arial , sans-serif.
La deuxième règle du texte de la taille de la police par défaut de 14 pixels.
La troisième règle est de définir la hauteur de ligne par défaut est 1,428571429.
La quatrième règle définit la couleur du texte par défaut # 333333.
Règle finale définit la couleur d'arrière-plan par défaut est blanc.
Le style par défaut pour un lien, les paramètres suivants
a: hover,
a: focus {
color: # 2a6496;
text-decoration: underline;
}
a: focus {
préciser: mince en pointillés # 333;
contour: 5px -webkit-focus-ring-couleur automatique;
outline-offset: -2px;
}
Ainsi, lorsque la souris survole le lien ou des liens vous cliquez, la couleur est réglé sur # 2a6496. En même temps, il y aura un trait de soulignement.
En outre, les liens que vous cliquez, il y aura un code de couleur pour le mince contour en pointillé # 333. Une autre règle est de définir les grandes lignes de 5 pixels de large, et pour le navigateur basé sur WebKit a un-focus-ring-couleurs -webkit extensions du navigateur. décalage Contour est réglé sur pixels -2.
Tous ces styles peuvent être trouvés dans le scaffolding.less.
Éviter les incohérences entre les navigateurs
Bootstrap 3, comme sa version précédente, utilisez le Normalize, pour créer la cohérence cross-browser.
récipient
classe Container Bootstrap 3 pour le contenu sur la page de l' emballage. Jetons un coup d'oeil à la classe suivante
.container {
margin-right: auto;
margin-left: auto;
}
À travers le code ci-dessus, les marges de gauche et de droite du conteneur par le navigateur décider.
.container: avant,
.container: après {
display: table;
contenu: "";
}
Cela génère des pseudo-éléments. Réglage de la table d'exposition, il va créer une table-cell anonyme et un nouveau contexte de mise en forme de bloc. : Avant pseudo-élément pour empêcher l'effondrement de la marge ,: après les pseudo-éléments pour effacer float.
Si l' attribut conteneditable apparaît en HTML, puisque certains du bogue Opera, créer un espace autour de ces éléments. Cela peut être fait en utilisant le contenu: "" pour réparer.
.container: après {
clear: both;
}
Elle crée un pseudo-élément, et garantit que tout vaisseau flottant qui contient tous les éléments.
Bootstrap 3 CSS a une application en réponse aux questions des médias, les requêtes des médias dans les différentes valeurs de seuil sont mis max-width pour le conteneur, afin de faire correspondre le système de grille.