Maison > interface Web > Tutoriel H5 > le corps du texte

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

PHPz
Libérer: 2018-10-13 16:02:15
original
6663 Les gens l'ont consulté

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) { ... }
    Copier après la connexion
  • 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) { ... }
    Copier après la connexion
  • 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) { ... }
    Copier après la connexion
  • 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">....
    Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!