qu'est-ce que la rastérisation bootstrap

En bootstrap, la rastérisation consiste à diviser une ligne du navigateur en 12 colonnes, puis à attribuer la largeur de colonne occupée par les éléments correspondants en fonction des besoins de la page développée ; chaque segment Largeur fixe, mise en page réactive via des pourcentages et des requêtes multimédias.

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

Qu'est-ce que la rastérisation bootstrap

En bootstrap, le principe de la rastérisation est de segmenter chaque segment en fonction de la taille du appareil. Largeur fixe, mise en page réactive via des pourcentages et des requêtes multimédias ; cela permet au même ensemble de pages de s'adapter à des appareils avec des résolutions différentes.

Principe de base de la disposition en grille : la grille divise la page en un certain nombre (supposé être n) de colonnes de largeur de base dans le sens horizontal

Ensuite, le développeur peut définir l'élément correspondant dans la page pour occuper m selon ses besoins. largeur. (m

Ma compréhension : la rastérisation consiste à diviser une ligne du navigateur en 12 colonnes et à attribuer les colonnes vous-même.

Présentation du système de grille

Les systèmes de grille (systèmes de grille) sont un style de conception clair et soigné qui utilise une grille fixe pour la mise en page des pages Web. Le système de grille a été utilisé pour la première fois dans les supports d'impression. Une mise en page d'impression est divisée en plusieurs grilles, ce qui est très pratique pour la composition.

Plus tard, le système de grille a été appliqué à la mise en page des pages Web. Lors de l'utilisation du système de grille réactive pour la mise en page, la page Web peut afficher différentes structures de page en fonction des différents terminaux d'affichage. Par exemple, certains modules seront disposés différemment ou masqués sur les appareils à petit écran.

Utilisation de base du système de grille Bootstrap.

1. Le système de grille Bootstrap définit différentes classes pour différentes largeurs d'écran. Ajoutez simplement le nom de la classe à l'élément.

2. Les lignes doivent être contenues dans un conteneur de mise en page afin qu'elles puissent être correctement disposées et complétées.

3. Un groupe de colonnes peut être créé dans le sens horizontal à travers les lignes, et seules les colonnes peuvent être utilisées comme éléments enfants directs des lignes.

4. Utilisez le style .row pour les lignes et .col-*-* pour les colonnes. Lorsque le nombre de colonnes est supérieur à 12, une nouvelle ligne sera disposée.

Cas du formulaire d'information sur l'étudiant

Idées d'implémentation de cas :
1. Tout d'abord, vous devez créer un élément p avec la ligne du nom de la classe comme ligne dans le conteneur de mise en page
2. Créez ensuite des colonnes à l'intérieur du conteneur de lignes. Les lignes et les colonnes d'un conteneur de mise en page forment un système de grille.
3. Les lignes et les colonnes du système de grille sont similaires aux lignes et aux colonnes du tableau.

1. Écrivez du code HTML

    <p>
        </p><p>
            </p><p>姓名</p>
            <p>年龄</p>
            <p>性别</p>
        
        <p>
            </p><p>张三</p>
            <p>25</p>
            <p>男</p>
        
    

2. Écrivez le style CSS

    .row {
        background-color: #eee;
        font-size: 30px;
    }
    .col-md-4 {
        border: 1px solid #fff;
        text-align: center;
    }

Lorsque la largeur d'affichage du navigateur est supérieure à 992 pixels, l'effet est le suivant :

Lorsque la largeur du navigateur est supérieure à 768 px, l'effet est le suivant. suit :

Lorsque le navigateur Lorsque la largeur est inférieure à 768px, l'effet est le suivant :

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!