Comment implémenter une mise en page réactive dans bootstrap

Concept de mise en page adaptative :

La mise en page Web réactive est celle qui permet aux utilisateurs d'obtenir une bonne vision grâce à des navigateurs de différentes tailles. Il s’agit actuellement d’une méthode de mise en page populaire.

Principe de mise en œuvre de la mise en page réactive Bootstrap :

Grâce aux requêtes multimédia CSS3 (requête média (appareil)), les requêtes média permettent au contenu de la page de s'exécuter dans différents environnements multimédias. Différents styles peuvent être affiché (bien sûr, ce style est écrit et spécifié par nos soins).

@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 (pour les écrans d'ordinateur, les tablettes, les smartphones, etc.), la parole (application ) (pour les lecteurs d'écran et autres appareils générateurs de son) ; la fonctionnalité multimédia est utilisée pour spécifier la largeur maximale ou 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.

Comme suit

固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>

Dans le document CSS bootstrap, l'attribut @media

1591~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 se rend compte que la largeur du conteneur conteneur change à mesure que le navigateur la largeur change.

Recommandé : Tutoriel d'introduction à Bootstrap

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!