Quels sont les avantages et les inconvénients de Bootstrap ?

Quels sont les avantages et les inconvénients de Bootstrap ?
Bootstrap est un framework front-end pour le développement rapide d'applications Web et de sites Web, basé sur HTML, CSS et Javascript.
Les avantages sont : les appareils mobiles d'abord, prend en charge les navigateurs grand public, facile à utiliser, design réactif.
Inconvénients : ne prend pas en charge IE6, utilisation intensive de classes qui ne sont pas assez sémantiques et les sites Web développés avec bootstrap sont sérieusement homogénéisés.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Bootstrap fournit un système de grille fluide réactif et axé sur les mobiles, en fonction de la taille de l'écran ou de la fenêtre. augmente, le système le divise automatiquement en 12 colonnes maximum.

Stratégie axée sur le mobile

• Contenu

• Déterminez ce qui est le plus important.

• Mise en page

• Priorisez les largeurs plus petites.

• Le CSS de base est avant tout mobile, et les requêtes multimédias sont destinées aux tablettes et aux ordinateurs de bureau.

• Amélioration progressive

• Ajoutez des éléments à mesure que la taille de l'écran augmente.

Système de grille réactif À mesure que la taille de l'écran ou de la fenêtre d'affichage augmente, le système le divise automatiquement en 12 colonnes maximum.

Fonctionnement du système de grille Bootstrap

Le système de grille crée des mises en page à travers une série de lignes et de colonnes contenant du contenu. Voici comment fonctionne le système de grille Bootstrap : La ligne

• doit être placée à l'intérieur de la classe .container afin d'obtenir un alignement et des marges de contenu (rembourrage) appropriés.

• Utilisez des lignes pour créer des groupes horizontaux de colonnes.

• Le contenu doit être placé à l'intérieur des colonnes, et seules les colonnes peuvent être des éléments enfants directs des lignes.

• Classes de grille prédéfinies, telles que .row et .col-xs-4, peuvent être utilisées pour créer rapidement des dispositions de grille. Les classes LESS mixin peuvent être utilisées pour des mises en page plus sémantiques.

• Les colonnes utilisent un remplissage pour créer des espaces entre le contenu des colonnes. Le remplissage est obtenu en prenant le négatif de la marge sur .rows, qui représente le décalage de ligne de la première et de la dernière colonne.

• Le système de grille est créé en spécifiant les douze colonnes disponibles que vous souhaitez étendre. Par exemple, pour créer trois colonnes égales, utilisez trois .col-xs-4.

• Requêtes multimédias

  Les requêtes multimédias sont des "règles CSS conditionnelles" très sophistiquées. Cela ne fonctionne qu'avec certains CSS en fonction de certaines conditions spécifiées. Si ces conditions sont remplies, le style correspondant est appliqué.

  Les requêtes multimédias dans Bootstrap vous permettent de déplacer, afficher et masquer le contenu en fonction de la taille de la fenêtre d'affichage. La requête multimédia suivante est utilisée dans le fichier LESS pour créer des seuils de points d'arrêt clés dans le système de grille Bootstrap.

  /* 超小设备（手机，小于 768px） */
  /* Bootstrap 中默认情况下没有媒体查询 */
  
  /* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
  
  /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
  
  /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

• Nous incluons parfois également max-width dans le code de requête multimédia pour limiter l'impact du CSS à une plus petite plage de tailles d'écran.

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }

• Une requête multimédia comporte deux parties, d'abord une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, les règles suivantes sont définies :

  Regardons la ligne de code suivante :

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

• Structure de base de la grille

  Voici la structure de base de la grille Bootstrap :

  <div class="container">
     <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>      
     </div>
     <div class="row">...</div></div><div class="container">....

Merci de me donner quelques conseils si vous ne la trouvez pas dans cette première mise à jour

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!