Bootstrap - Présentation CSS

Ce chapitre donne un aperçu des éléments clés de l'infrastructure de Bootstrap, y compris l'approche de Bootstrap pour un développement Web meilleur, plus rapide et plus solide.

Doctype HTML5

Bootstrap utilise certains éléments HTML et propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Incluez donc le code ci-dessous pour le doctype HTML5 au début de tous vos projets utilisant Bootstrap.

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

Mobile d'abord

Depuis le lancement de Bootstrap 3, Bootstrap est devenu mobile first. Cela signifie que les styles «mobile first» peuvent être trouvés dans toute la bibliothèque au lieu d'eux dans des fichiers séparés. Vous devez ajouter leviewport meta tag à la <head> élément, pour assurer un bon rendu et un zoom tactile sur les appareils mobiles.

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

La propriété width contrôle la largeur de l'appareil. Le définir sur la largeur de l' appareil garantira qu'il est correctement rendu sur différents appareils (mobiles, ordinateurs de bureau, tablettes ...).
initial-scale = 1.0 garantit que, une fois chargée, votre page Web sera rendue à une échelle de 1: 1, et aucun zoom ne sera appliqué hors de la boîte.

Ajouter user-scalable = no à la contentattribut pour désactiver les capacités de zoom sur les appareils mobiles, comme indiqué ci-dessous. Les utilisateurs ne peuvent que faire défiler et ne pas zoomer avec ce changement, et votre site ressemble un peu plus à une application native.

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

Normalement, maximum-scale = 1.0 est utilisé avec user-scalable = no . Comme mentionné ci-dessususer-scalable = no peut donner aux utilisateurs une expérience plus proche d'une application native, par conséquent Bootstrap ne recommande pas l'utilisation de cet attribut.

Images réactives

Bootstrap 3 vous permet de rendre les images réactives en ajoutant une classe .img-responsive à la <img>marque. Cette classe s'appliquemax-width: 100%; et height: auto; à l'image afin qu'elle s'adapte parfaitement à l'élément parent.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Typographie et liens

Bootstrap définit un affichage global de base (arrière-plan), une typographie et des styles de lien -

Basic Global display- Définit la couleur de fond: #fff; sur l' élément <body> .
Typography- Utilise les attributs @ font-family-base , @ font-size-base et @ line-height-base comme base typographique.
Link styles- Définit la couleur du lien global via l'attribut @ link-color et n'applique les soulignements de lien que sur : hover .

Si vous avez l'intention d'utiliser du code LESS, vous pouvez trouver tout cela dans scaffolding.less .

Normaliser

Bootstrap utilise Normaliser pour établir la cohérence entre les navigateurs.

Normalize.css est une alternative moderne et compatible HTML5 aux réinitialisations CSS. Il s'agit d'un petit fichier CSS qui offre une meilleure cohérence entre les navigateurs dans le style par défaut des éléments HTML.

Conteneurs

Utiliser la classe .container pour envelopper le contenu d'une page et centrer facilement le contenu comme indiqué ci-dessous.

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

Jetez un œil au .containerclasse dans le fichier bootstrap.css -

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

Notez qu'en raison du remplissage et des largeurs fixes, les conteneurs ne sont pas imbriqués par défaut.

Jetez un œil au fichier bootstrap.css -

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

Ici, vous pouvez voir que CSS a des requêtes multimédias pour les conteneurs avec width. Cela aide à appliquer la réactivité et au sein de ceux-ci, la classe de conteneur est modifiée en conséquence pour rendre le système de grille correctement.