interface Web
tutoriel CSS
Parlez de la disposition de la grille en CSS (graphiques et texte)
Parlez de la disposition de la grille en CSS (graphiques et texte)
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
La disposition en grille peut diviser la page Web en lignes et colonnes d'attributs simples, page CSS La technologie de mise en page nous permet de récupérer des éléments dans une page Web et de contrôler leur position par rapport au flux de mise en page normal, aux éléments environnants, aux conteneurs parents ou à la fenêtre/fenêtre principale.
Mise en page du Saint Graal
La mise en page du Saint Graal est une mise en page à trois colonnes avec une largeur fixe des deux côtés et un milieu adaptatif :
css :
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
CSSHTML :
<body>
<div class="container">
<div class="cl main">
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>
Le principe de la mise en page du Saint Graal est que lorsque les éléments enfants sont dans un état flottant, définissez un état négatif margin, et les éléments enfants chevaucheront leurs frères au-dessus des éléments.
Donc, si vous souhaitez à nouveau diviser la zone bleue en trois zones, je pense qu'il existe de nombreuses façons. Mais peut-on y parvenir grâce à l’imbrication ? On peut essayer :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding: 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="cl main">
<div class="container">
<div class="cl main"></div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>
</html>
Principe du système de grille
Hypothèse : Flowline La largeur de est W, la largeur de la colonne est c, la largeur de la gouttière est g, la largeur de la marge est m et le nombre de colonnes de la grille est N
W = c*N + g*(N- 1) + 2m ; La largeur de g est généralement le double de celle de m, donc :
W = (c+g) * N ; Enregistrez c+g comme C, nous obtenons :
W = C * N ;
La plupart des systèmes de grille sont des variantes de cette formule.
Système de grille de Bootstrap
Nous allons maintenant examiner la conception de disposition de grille commune et la mise en œuvre de la conception dans bootstrap. Pour utiliser correctement la disposition en grille dans BootStrap, les colonnes doivent être placées dans des lignes et les lignes doivent être placées dans des conteneurs. La classe conteneur a deux fonctions principales dans la mise en page :
fournit des restrictions de largeur dans différents intervalles de largeur (points d'arrêt réactifs). Lorsque la largeur change, prenez une largeur différente.
Fournit un remplissage pour empêcher le contenu interne de toucher les bordures du navigateur.
Le rembourrage est utilisé dans Bootstrap pour remplacer la marge mentionnée ci-dessus. La taille est de 15 pixels, comme le montre l'image ci-dessous, et la couleur rose correspond à la taille du remplissage.
La ligne est un conteneur de colonnes. La somme des colonnes dans chaque ligne doit être de 12, mais nous pouvons l'étendre par imbrication. Les marges gauche et droite de Row sont de -15px, ce qui est utilisé pour décaler le remplissage dans le conteneur, comme indiqué dans la partie bleue de l'image ci-dessous :
 "161053504639161Parlez de la disposition de la grille en CSS (graphiques et texte)")
Cette conception de rangée est principalement pour la commodité de l'imbrication, sera mentionné plus tard.
La colonne est le protagoniste du système de grille. Le remplissage gauche et droit de chaque colonne est de 15 pixels. La marge négative de la ligne ci-dessus compense le remplissage du conteneur, donc définir le remplissage pour chaque colonne consiste à empêcher le remplissage. le contenu ne touche pas directement la bordure, et il y a des emplacements pour cartes 30px (gouttière) entre les différentes colonnes. Comme le montre la partie jaune de l'image ci-dessous :
 "161053505099187Parlez de la disposition de la grille en CSS (graphiques et texte)")
Réfléchissez maintenant à la formule mentionnée ci-dessus : W = C * N;
ligne mentionnée ci-dessus. la conception à marge négative est principalement destinée à l'imbrication. Si vous souhaitez imbriquer une colonne dans une colonne, vous devez d'abord placer la colonne imbriquée dans la ligne, puis placer la ligne dans la colonne en tant que conteneur, sans placer de conteneur. Comme le montre en bleu la figure ci-dessous, il s'agit de la zone de marge négative de la ligne placée dans la colonne.
 "161053505548471Parlez de la disposition de la grille en CSS (graphiques et texte)")
Maintenant, placez la colonne imbriquée dans la ligne, comme le montre la figure ci-dessous, la colonne supérieure joue le rôle de conteneur.
 "161053506270611Parlez de la disposition de la grille en CSS (graphiques et texte)")
Pour plus de connaissances liées à la programmation, veuillez visiter : Apprentissage en programmation ! !
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
