Quel est le principe du bootstrap pour implémenter une mise en page responsive ?

Dans bootstrap, la mise en page réactive est implémentée en utilisant le système de grille pour utiliser différents attributs de classe pour différents écrans. Le système sera automatiquement divisé en 12 colonnes. La mise en page réactive utilise le système de grille à travers une série de lignes et de colonnes. une mise en page.

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3

Quel est le principe du bootstrap pour implémenter une mise en page réactive

Le principe de mise en œuvre du système de grille est de définissez la taille du conteneur et divisez-le également en 12 parties (il peut également être divisé en 24 ou 32 parties, mais 12 parties est le plus courant), puis ajustez les marges intérieure et extérieure, et enfin combinez-le avec des requêtes multimédias pour créer un puissant système de grille réactif

Le principe de mise en œuvre du système de grille, en définissant la taille du conteneur, en le divisant en 12 parties égales (il peut aussi être divisé en 24 ou 32 parties, mais 12 parties est le plus courant), puis en ajustant les marges intérieures et extérieures, et enfin en les combinant avec des requêtes multimédias pour créer un système de grille réactif puissant. Le système de grille du framework Bootstrap divise le conteneur en 12 parties égales.

Avantages et inconvénients de bootstrap :

1. bootstrap a récemment publié bootstrap4, qui a une mise en page box-flex et d'autres mises à jour, suivant le développement de la dernière technologie Web

2. utilisé dans un grand nombre de projets et de tests

3. Avec une documentation complète, il est plus pratique à utiliser

4 Il existe un grand nombre de styles de composants qui acceptent la personnalisation

Inconvénients :

1. Si vous avez vos propres besoins particuliers, vous devez re-personnaliser le style. S'il y a beaucoup de styles de "style" non bootstrap dans un site Web, vous devrez alors faire beaucoup de réécriture CSS, d'où l'intérêt d'utiliser un style. le cadre est perdu.

2. Il y aura des problèmes de compatibilité. Bien qu'il existe de nombreuses façons d'être compatible avec IE sur Internet, d'autres fichiers doivent être introduits, dont certains sont assez petits, ce qui entraînera inévitablement un ralentissement et une incidence sur la vitesse de chargement. l’expérience utilisateur.

La mise en page réactive de Bootstrap utilise son système de grille et utilise différents attributs de classe pour différents écrans. Pendant le développement, vous ne pouvez écrire qu'un seul ensemble de codes pouvant être utilisé sur les téléphones mobiles, les tablettes et les PC, sans avoir à envisager d'utiliser des requêtes multimédias (écrire différents codes pour différents appareils). Explication officielle de Bootstrap : Bootstrap fournit un système de grille fluide réactif et axé sur les mobiles. À mesure que la taille de l'écran ou de la fenêtre d'affichage augmente, le système sera automatiquement divisé en 12 colonnes. Le système de grille est utilisé pour créer des mises en page à travers une série de lignes et de colonnes.

Comment fonctionne le système de grille :

1. Les lignes doivent être contenues dans .container (largeur fixe) ou .container-fluid (100 % de largeur) afin de leur donner l'alignement
approprié et le remplissage.
2. Créez un ensemble de colonnes dans le sens horizontal à travers des lignes.
3. Votre contenu doit être placé dans la colonne, et seule la colonne peut être l'élément enfant direct de la ligne.
4. Des classes prédéfinies telles que .row et .col-xs-4 peuvent être utilisées pour créer rapidement des dispositions de grille. Les mixins définis dans le code source Bootstrap peuvent également être utilisés pour créer des dispositions sémantiques.
5. Créez un espace (gouttière) entre les colonnes en définissant l'attribut de remplissage de la colonne. En définissant une marge négative pour l'élément .row afin de compenser le remplissage défini pour l'élément .container, le remplissage est indirectement compensé pour les colonnes contenues dans la ligne.
6. Les colonnes du système de grille représentent la plage qu'elles couvrent en spécifiant des valeurs de 1 à 12. Par exemple, trois colonnes de même largeur peuvent être créées en utilisant trois .col-xs-4.
7. Si le nombre de colonnes contenues dans une ligne (rangée) est supérieur à 12, les éléments des colonnes supplémentaires seront disposés dans leur ensemble dans une autre ligne.
8. La classe de grille convient aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point de division, et la classe de grille est remplacée pour les petits écrans.
Comme le montre la figure ci-dessous, les instructions d'application du système de grille sont affichées sur différents écrans.

Utilisez la mise en page réactive Bootstrap,

Vous devez d'abord introduire la balise méta dans l'en-tête, ajouter l'attribut viewpirt, la largeur dans le contenu est égale à la largeur de l'appareil, échelle initiale : le niveau de zoom de la zone visible lorsque la page est affichée pour la première fois, la valeur est 1 page. Affichage en fonction de la taille réelle sans aucune mise à l'échelle ; le rapport minimum sur lequel l'utilisateur est autorisé à zoomer ; évolutif par l'utilisateur : si l'utilisateur peut zoomer manuellement. Le code est le suivant :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

Ce qui suit est une page (interface du formulaire de connexion) utilisant la disposition bootstrap, ciblant les écrans de téléphones mobiles ultra-petits (iphone5s) et les écrans de PC (>=1200px). col-xs-12 : le petit écran occupe 12 colonnes, col-lg-5 : le grand écran occupe 5 colonnes, col-lg-offset-3 : le grand écran met en retrait 3 colonnes. Il s'agit d'un exemple relativement simple. Si vous souhaitez vous adapter à d'autres écrans tels que les tablettes, vous pouvez ajouter l'attribut col-md-*, et pour les téléphones à grand écran, vous pouvez ajouter l'attribut col-sm-*. Quel attribut est utilisé pour un écran spécifique ? Veuillez vous référer aux différentes utilisations du système de grille Bootstrap pour différents écrans dans l'image ci-dessus.

<p class="container-fluid login">
  <p class="row">
    <p class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 class="form-signin-heading">用户登录</h3>
        <p class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
          <p class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </p>
        </p>
        <p class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
          <p class="col-sm-8 col-xs-8">
            <input type="password" class="form-control" name="password" placeholder="请输入密码">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </p>
        </p>
        <p class="form-group">
          <p class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <p class="checkbox">
              <label>
                <input type="checkbox">记住我 </label>
            </p>
          </p>
          <p class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘记密码？</a>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
          </p>
        </p>
      </form>
    </p>
  </p>

Rendu de code :
Version PC :

Version mobile :

Recommandations associées : Tutoriel 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!