Bootstrap prend-il en charge les téléphones mobiles ?

Bootstrap prend en charge les téléphones mobiles ; le CSS réactif de Bootstrap peut s'adapter aux ordinateurs de bureau, aux tablettes et aux téléphones mobiles et depuis Bootstrap 3, le framework inclut des styles axés sur les mobiles dans toute la bibliothèque ;

L'environnement d'exploitation de cet article : système Windows 7, version bootstrap2.3.2, ordinateur Dell G3.

mise en page réactive bootstrap

Bootstrap fournit un système de grille fluide réactif et axé sur les mobiles qui évolue avec l'augmentation de la taille de l'écran ou de la fenêtre d'affichage, le système le divisera automatiquement en jusqu'à 12 colonnes. Il contient des classes prédéfinies faciles à utiliser, ainsi que de puissants mixins pour générer des présentations plus sémantiques.

Tout d'abord, le système de grille est utilisé pour créer la mise en page à travers une série de combinaisons de lignes et de colonnes. Bootstrap sélectionne différentes options de grille en fonction des différentes tailles d'écran. Il existe quatre options de grille : écran ultra-petit (téléphone mobile), petit écran (tablette), écran moyen (ordinateur de bureau) et grand écran (ordinateur de bureau très grand). Le système de grille est divisé en 12 colonnes, c'est-à-dire que chaque ligne peut contenir jusqu'à 12 colonnes. Si le nombre de colonnes contenues dans un .row est supérieur à 12 (c'est-à-dire que les cellules de la grille dans une ligne dépassent 12 cellules), elle sera automatiquement composée. En bref, une ligne ne peut contenir qu'un maximum de 12 colonnes. l’analyse détaillée plus tard.

Principe :

Grâce aux Media Queries CSS3 (requête multimédia (appareil)), les requêtes multimédias permettent au contenu de la page d'afficher différents styles lors de son exécution dans différents environnements multimédias (ce style est bien sûr à décider à nous d'écrire les règles).

@media est un attribut spécifié dans CSS3, qui peut atteindre l'objectif de définir différents styles pour différents appareils multimédias. Et même sur le même appareil, lorsque vous réinitialisez la taille du navigateur, la page sera restituée en fonction de la largeur et de la hauteur du navigateur.

Application :

Bootstrap utilise principalement la largeur minimale, la largeur maximale et la syntaxe pour définir différents styles CSS à différentes résolutions.

La syntaxe de @media

@media mediatype and|not|only (media feature) {
CSS-Code;
}

Le type de média comprend l'impression (appareil d'impression), l'écran (utilisé pour les écrans d'ordinateur, les tablettes, les smartphones, etc.), la parole (utilisée pour les lecteurs d'écran, etc. . pour émettre des sons) la fonction multimédia) est utilisée pour spécifier la largeur maximale ou la largeur minimale.

Jetons un coup d'œil à un exemple de conteneur de mise en page dans bootstrap :

Bootstrap a besoin d'un conteneur .container pour envelopper le contenu de la page et le système de grille.

est le suivant

Mise en page à largeur fixe

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

ou mise en page fluide

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

Attribut @media dans le document CSS bootstrap

1591 ~ Ligne 1605

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

Le code ci-dessus réalise que la largeur du conteneur change à mesure que la largeur du navigateur change.

Recommandé : "Tutoriel vidéo bootstrap" "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!