Bootstrap CSS Présentation
Dans ce chapitre, nous allons expliquer la structure sous-jacente d'un élément clé de Bootstrap, y compris nos développeurs web font de meilleurs, plus rapides, plus forts les meilleures pratiques.
HTML 5 doctype (Doctype)
Bootstrap utilise certains éléments HTML5 et propriétés CSS. Pour ceux-ci à travailler, vous devez utiliser le HTML5 type de document (Doctype). Ainsi, au début de l'utilisation Bootstrap projet contient le segment de code suivant.
<!DOCTYPE html> <html> .... </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
appareils mobiles prioritaires est le changement le plus important dans le Bootstrap 3.
Dans les versions précédentes de Bootstrap (jusqu'à 2.x), vous devez citer manuellement un autre CSS, pour rendre l'ensemble du projet un soutien amical pour les appareils mobiles.
Pas plus, Bootstrap 3 défaut CSS lui-même est le soutien amical pour les appareils mobiles.
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=device-width, initial-scale=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 assurer qu'elle 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, dépendra de votre situation!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
Image Responsive
<img src="..." class="img-responsive" alt="响应式图像">
En ajoutant img sensible classe Bootstrap 3 permet à l'image de soutenir la mise en page souple qui est plus convivial.
Regardons ce que cette classe contient la propriété css.
Dans le code ci - dessous, vous pouvez voir l'image img sensible classe donne max-width: 100%; et la hauteur: auto; propriété peut être mise à l' échelle pour que l'image ne dépasse pas la taille de l'élément parent.
.img-responsive {
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
affichage global de base
Bootstrap 3 en utilisant body {margin: 0;} pour enlever le corps des marges.
Considérez les paramètres suivants pour le corps:
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.
composition
Utilisez @ font-family-base, @ font-size-base et la propriété @ line-height-base comme la typographie.
Lien style
Définissez la couleur via le lien-couleur globale propriété de liaison @.
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 utiliser Normalize pour construire la cohérence cross-browser.
Normalize.css est un fichier CSS petite qui offre une meilleure cohérence cross-browser dans les éléments HTML de style par défaut.
Container (conteneur)
<div class="container"> ... </div>
classe Container Bootstrap 3 pour le contenu sur la page de l' emballage. Jetons un coup d' oeil à ce fichier classe bootstrap.css de .container.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Grâce au code ci-dessus, les marges gauche et droite du conteneur (marge droite, la marge gauche) décidée par le navigateur.
S'il vous plaît noter qu'en raison de rembourrage (padding) sont de largeur fixe, conteneurs par défaut ne peuvent pas être imbriquées.
.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.
@media (min-width: 768px) {
.container {
largeur: 750px;
}
Navigateur Bootstrap / Device Support
Bootstrap peut bien fonctionner dans le dernier bureau et navigateur terminal mobile.
Les navigateurs plus anciens ne peuvent pas être bien pris en charge.
Le tableau suivant bootstrap en charge les dernières versions des navigateurs et plates-formes:
| chrome | Firefox | IE | opéra | safari | |
|---|---|---|---|---|---|
| androïde | OUI | OUI | Non applicable | NO | Non applicable |
| iOS | OUI | Non applicable | Non applicable | NO | OUI |
| Mac OS X | OUI | OUI | Non applicable | OUI | OUI |
| fenêtres | OUI | OUI | OUI * | OUI | NO |
* Prise en charge de Bootstrap pour Internet Explorer 8 et versions ultérieures de IE.