Présentation du CSS d'amorçage


Dans ce chapitre, nous aborderons les éléments clés de la structure sous-jacente de Bootstrap, y compris nos meilleures pratiques pour rendre le développement Web meilleur, plus rapide et plus fort.

Type de document HTML 5 (Doctype)

Bootstrap utilise certains éléments HTML5 et propriétés CSS. Pour que ceux-ci fonctionnent correctement, vous devez utiliser le type de document HTML5 (Doctype). Par conséquent, incluez l'extrait de code suivant au début de votre projet à l'aide de Bootstrap. 

<!DOCTYPE html>
<html>
....
</html>

Si vous n'utilisez pas le type de document HTML5 (Doctype) au début de la page Web créée par Bootstrap, vous risquez de rencontrer des incohérences d'affichage du navigateur, et même d'être confronté à des incohérences dans certaines situations spécifiques, de sorte que votre Le code ne peut pas passer la validation par rapport aux normes du W3C.

Mobile-first

Mobile-first est le changement le plus important de Bootstrap 3.

Dans les versions précédentes de Bootstrap (jusqu'à la version 2.x), vous deviez référencer manuellement un autre CSS pour rendre l'ensemble du projet adapté aux mobiles.

C'est différent maintenant, le CSS par défaut de Bootstrap 3 lui-même est adapté aux mobiles.

Bootstrap 3 est conçu pour le mobile d'abord, puis pour le bureau. Il s’agit en fait d’un changement très opportun, car de plus en plus d’utilisateurs utilisent désormais des appareils mobiles.

Afin de rendre le site Web développé par Bootstrap adapté aux mobiles et de garantir une mise à l'échelle appropriée de l'écran tactile et du dessin, vous devez ajouter la balise viewport meta à l'en-tête de la page Web, comme illustré ci-dessous : <🎜 La propriété >

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width contrôle la largeur de l'appareil. En supposant que votre site Web sera consulté par des appareils avec des résolutions d'écran différentes, le définir sur device-width garantit qu'il s'affichera correctement sur différents appareils.

initial-scale=1.0 Assurez-vous que lorsque la page Web est chargée, elle sera rendue dans un rapport 1:1 sans aucune mise à l'échelle.

Sur les navigateurs mobiles, le zoom peut être désactivé en ajoutant

user-scalable=no à la balise viewport meta.

Normalement,

maximum-scale=1.0 est utilisé avec user-scalable=no. En désactivant le zoom, les utilisateurs peuvent uniquement faire défiler, ce qui donne à votre site Web l'apparence d'une application native.

Notez que nous ne recommandons pas cette méthode pour tous les sites web, cela dépend quand même de votre propre situation ! 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Images réactives

<img src="..." class="img-responsive" alt="响应式图像">

En ajoutant la classe

img-responsive, les images dans Bootstrap 3 peuvent être rendues plus réactives à la prise en charge de la mise en page réactive.

Voyons ensuite quels attributs CSS cette classe contient.

Dans le code ci-dessous, vous pouvez voir que la classe

img-responsive attribue les attributs max-width: 100%; être mis à l'échelle proportionnellement. Ne dépasse pas les dimensions de son élément parent. 

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

Cela indique que l'image associée est rendue sous forme de

bloc en ligne. Lorsque vous définissez la propriété display d'un élément sur inline-block, l'élément est rendu en ligne par rapport à son contenu environnant, mais contrairement à inline, nous pouvons définir la largeur et la hauteur dans ce cas.

Définissez height:auto, la hauteur de l'élément associé dépend du navigateur.

Le réglage de max-width sur 100 % remplacera toute largeur spécifiée via l'attribut width. Cela rend les images plus conviviales pour prendre en charge les mises en page réactives.

Affichage global, mise en page et liens

Affichage global de base

Bootstrap 3 Utilisez body {margin: 0;> pour supprimer les bords du corps distance.

Veuillez consulter 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éfinit le style de police par défaut du corps sur "Helvetica Neue", Helvetica, Arial, sans-serif .

La deuxième règle définit la taille de police par défaut du texte à 14 pixels.

La troisième règle définit la hauteur de ligne par défaut à 1,428571429.

La quatrième règle définit la couleur du texte par défaut sur #333333.

La dernière règle définit la couleur d'arrière-plan par défaut sur le blanc.

Typographie

Utilisez les propriétés @font-family-base, @font-size-base et @line-height-base comme styles de typographie.

Style de lien

Définissez la couleur des liens globaux via l'attribut @link-color.

Pour le style par défaut des liens, définissez-le comme suit : 

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Ainsi, lorsque la souris survole le lien, ou lorsque le lien est cliqué, la couleur sera définie sur #2a6496 . En même temps, un soulignement apparaîtra.

De plus, les liens cliqués auront un fin contour en pointillés avec le code couleur #333. Une autre règle consiste à définir le contour sur 5 pixels de large, et pour les navigateurs basés sur webkit, il existe une extension de navigateur -webkit-focus-ring-color. Le décalage du contour est défini sur -2 pixels.

Tous ces styles ci-dessus peuvent être trouvés dans scaffolding.less.

Évitez les incohérences entre navigateurs

Bootstrap utilise Normalize pour établir une cohérence entre navigateurs.

Normalize.css est un petit fichier CSS qui offre une meilleure cohérence entre navigateurs dans le style par défaut des éléments HTML.

Container (Container) 

<div class="container">
  ...
</div>

La classe container de Bootstrap 3 est utilisée pour envelopper le contenu de la page. Jetons un coup d'œil à cette classe .container dans le fichier bootstrap.css. 

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Grâce au code ci-dessus, les marges gauche et droite (marge-droite, marge-gauche) du conteneur sont déterminées par le navigateur.

Veuillez noter que le rembourrage ayant une largeur fixe, les conteneurs ne sont pas emboîtables par défaut. 

.container:before,
.container:after {
  display: table;
  content: " ";
}

Cela produit des pseudo-éléments. La définition de display sur table crée une cellule de tableau anonyme et un nouveau contexte de formatage de bloc. Le pseudo-élément :before empêche la marge supérieure de s'effondrer, et le pseudo-élément :after efface le flottant.

Si l'attribut conteneditable apparaît en HTML, en raison d'un bug d'Opera, un espace est créé autour de l'élément ci-dessus. Cela peut être résolu en utilisant content: " ". 

.container:after {
  clear: both;
}

Il crée un pseudo-élément et garantit que tous les conteneurs contiennent tous les éléments flottants.

Bootstrap 3 CSS a une requête multimédia qui s'applique à la réponse, et la largeur maximale est définie pour le conteneur dans différents seuils de requête multimédia pour correspondre au système de grille. 

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Support du navigateur/périphérique Bootstrap

Bootstrap fonctionne bien dans les derniers systèmes de bureau et navigateurs mobiles.

Les anciens navigateurs peuvent ne pas bien le prendre en charge.

Le tableau suivant présente les dernières versions des navigateurs et des plates-formes prises en charge par Bootstrap :

 ChromeFirefoxIEOperaSafari
AndroidYESYES不适用NO不适用
iOSYES不适用不适用NOYES
Mac OS XYESYES不适用YESYES
WindowsYESYESYES*YESNO

* Bootstrap prend en charge Internet Explorer 8 et les versions supérieures des navigateurs IE.