Table des matières
Center (conteneur)
Ligne (ligne)
colonne
Décalages (décalages)
Maison interface Web tutoriel CSS Analyse raster bootstrap

Analyse raster bootstrap

Oct 18, 2017 am 09:33 AM
bootstrap grille 解析

Center (conteneur)

  1. Center : Un conteneur avec le nom de classe .container La largeur du conteneur a des valeurs différentes sur chaque périphérique d'écran. Laissez-le vide.
    La largeur centrale de chaque taille est la suivante :

    屏幕设备 版心宽度
    max-width:768px xs 继承父元素宽度(即width:100%)
    min-width:768px sm 750px
    min-width:992px md 970px
    min-width:1200px lg 1170px

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}@media (min-width: 768px) {
  .container {
    width: 750px;
  }}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
Copier après la connexion

  1. Quelle que soit la largeur de l'écran, le conteneur.container aura toujours un remplissage de 15px à gauche et à droite pour éviter que le contenu ne touche directement le bord du navigateur. N'imbriquez jamais un autre conteneur dans un conteneur. Le conteneur de mise en page de

  2. .container-fluid est le même que le conteneur de mise en page pour les écrans inférieurs à 768 pixels. Il ne définit pas de valeur de largeur fixe et en hérite. . La largeur de l'élément parent. Le conteneur

  3. .container est utilisé pour fournir des contraintes de largeur sur la largeur réactive. En réponse aux changements de taille, le conteneur est réellement modifié. Les lignes et les colonnes sont basées sur des pourcentages, elles n'ont donc pas besoin d'être modifiées.

Ligne (ligne)

  1. Ligne : Un conteneur avec le nom de classe .row ; Il y a un espace total et il est divisé en 12 colonnes.

  2. Il y aura deux valeurs de marge négatives de 15px aux deux extrémités de la ligne, afin de décaler les valeurs de remplissage des deux côtés du conteneur. .row n'est pas valide lorsqu'il est utilisé en dehors du conteneur.

.row {
    margin-right: -15px;
    margin-left: -15px;
}
Copier après la connexion

colonne

  1. Chaque colonne a des côtés avec une valeur de remplissage de 15 px. N'utilisez jamais col en dehors d'un conteneur .row, sinon col ne sera pas valide.

  2. La valeur de remplissage de chaque colonne col fournit une marge pour son contenu afin que le contenu ne colle pas au bord du navigateur et que les colonnes ne collent pas ensemble.

  3. == Les colonnes sont allouées selon des pourcentages (par rapport au pourcentage de la largeur du centre de la page, donc plus le centre de la page est large, plus la largeur de chaque colonne est grande)== .

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为:.col-sm-1
//       大屏幕   类名为:.col-lg-1
@media (min-width:768px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width:1200px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
}
Copier après la connexion
栅格嵌套
Copier après la connexion

  1. Après avoir défini le conteneur/ligne/colonne, vous pouvez créer une nouvelle grille système et ajoutez simplement des lignes directement à la colonne. Il n'est pas nécessaire d'ajouter un conteneur, car les valeurs de remplissage des deux côtés de la colonne peuvent compenser les valeurs de marge négatives des deux côtés de la ligne, et la colonne est équivalent à un conteneur.

Décalages (décalages)

  1. Les décalages de décalage sont principalement les marges des colonnes - la valeur gauche détermine . S'il est décalé d'une colonne, il est en marge gauche : 8,3333333 % (1/12). S'il est décalé de deux colonnes, il est en marge gauche : 16,66666667 % (soit 2/12) ;

.col-xs-offset-0 {
    margin-left: 0;
}.col-xs-offset-1 {
    margin-left: 8.33333333%;
}...
@median (min-width:768px) {
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    ...
}
...
Copier après la connexion

Tri des colonnes (Push and Pull)

  1. Dans les applications pratiques, c'est plus à propos de l'appel de la position et du tri, vous permettant de rompre la disposition fixe de p de haut en bas et de gauche à droite en HTML.

  2. pull et push sont implémentés via les valeurs droite et gauche de la position. Pull est implémenté via la valeur droite La valeur pull-1 right:8.33333333% (1/. 12); valeur push-1 => gauche :8,33333333%(1/12);

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment introduire le bootstrap dans Eclipse Comment introduire le bootstrap dans Eclipse Apr 05, 2024 am 02:30 AM

Introduisez Bootstrap dans Eclipse en cinq étapes : Téléchargez le fichier Bootstrap et décompressez-le. Importez le dossier Bootstrap dans le projet. Ajoutez une dépendance Bootstrap. Chargez Bootstrap CSS et JS dans des fichiers HTML. Commencez à utiliser Bootstrap pour améliorer votre interface utilisateur.

Comment introduire une idée dans bootstrap Comment introduire une idée dans bootstrap Apr 05, 2024 am 02:33 AM

Étapes pour introduire Bootstrap dans IntelliJ IDEA : Créez un nouveau projet et sélectionnez « Application Web ». Ajoutez la dépendance Maven "Bootstrap". Créez un fichier HTML et ajoutez des références Bootstrap. Remplacez par le chemin réel du fichier CSS Bootstrap. Exécutez le fichier HTML pour utiliser les styles Bootstrap. Astuce : Vous pouvez utiliser un CDN pour importer Bootstrap ou personnaliser des modèles de fichiers HTML.

Comment lire les résultats du test d'effet de médiation bootstrap dans stata Comment lire les résultats du test d'effet de médiation bootstrap dans stata Apr 05, 2024 am 01:48 AM

Étapes d'interprétation du test d'effet de médiation Bootstrap dans Stata : Vérifier le signe du coefficient : Déterminer le sens positif ou négatif de l'effet de médiation. Valeur p du test : inférieure à 0,05 indique que l'effet médiateur est significatif. Vérifiez l'intervalle de confiance : ne pas contenir de zéro indique que l'effet de médiation est significatif. La comparaison de la valeur p médiane : inférieure à 0,05 confirme en outre l’importance de l’effet de médiation.

750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième 750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième Apr 23, 2024 pm 03:28 PM

Concernant Llama3, de nouveaux résultats de tests ont été publiés - la grande communauté d'évaluation de modèles LMSYS a publié une liste de classement des grands modèles, Llama3 s'est classé cinquième et à égalité pour la première place avec GPT-4 dans la catégorie anglaise. Le tableau est différent des autres benchmarks. Cette liste est basée sur des batailles individuelles entre modèles, et les évaluateurs de tout le réseau font leurs propres propositions et scores. Au final, Llama3 s'est classé cinquième sur la liste, suivi de trois versions différentes de GPT-4 et Claude3 Super Cup Opus. Dans la liste simple anglaise, Llama3 a dépassé Claude et est à égalité avec GPT-4. Concernant ce résultat, LeCun, scientifique en chef de Meta, était très heureux et a transmis le tweet et

Comment lire les résultats du test de médiation bootstrap Comment lire les résultats du test de médiation bootstrap Apr 05, 2024 am 03:30 AM

Le test de médiation Bootstrap évalue l'effet de médiation en rééchantillonnant les données plusieurs fois : Intervalle de confiance de l'effet indirect : indique la plage estimée de l'effet de médiation. Si l'intervalle ne contient pas zéro, l'effet est significatif. Valeur p : évalue la probabilité que l'intervalle de confiance ne contienne pas zéro, les valeurs inférieures à 0,05 indiquant une valeur significative. Taille de l'échantillon : nombre d'échantillons de données utilisés pour l'analyse. Temps de sous-échantillonnage bootstrap : le nombre d'échantillonnages répétés (500 à 2 000 fois). Si l'intervalle de confiance ne contient pas zéro et que la valeur p est inférieure à 0,05, l'effet de médiation est significatif, indiquant que la variable médiatrice explique la relation entre les variables indépendantes et dépendantes.

Comment utiliser bootstrap pour tester l'effet de la médiation Comment utiliser bootstrap pour tester l'effet de la médiation Apr 05, 2024 am 03:57 AM

Le test Bootstrap utilise la technologie de rééchantillonnage pour évaluer la fiabilité du test statistique et est utilisé pour prouver la signification de l'effet de médiation : premièrement, calculer l'intervalle de confiance de l'effet direct, de l'effet indirect et de l'effet de médiation, deuxièmement, calculer la signification de l'effet de médiation ; type de médiation selon la méthode de Baron et Kenny ou Sobel et enfin estimer l'intervalle de confiance pour l'effet indirect naturel.

Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion au compte Microsoft Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion au compte Microsoft Mar 27, 2024 pm 05:24 PM

Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion à un compte Microsoft Avec la sortie de Windows 11, de nombreux utilisateurs ont constaté qu'il apportait plus de commodité et de nouvelles fonctionnalités. Cependant, certains utilisateurs n'aiment pas que leur système soit lié à un compte Microsoft et souhaitent ignorer cette étape. Cet article présentera quelques méthodes pour aider les utilisateurs à ne pas se connecter à un compte Microsoft dans Windows 11 afin d'obtenir une expérience plus privée et autonome. Tout d’abord, comprenons pourquoi certains utilisateurs hésitent à se connecter à leur compte Microsoft. D'une part, certains utilisateurs craignent

Quelle est la différence entre bootstrap et springboot Quelle est la différence entre bootstrap et springboot Apr 05, 2024 am 04:00 AM

La principale différence entre Bootstrap et Spring Boot est que Bootstrap est un framework CSS léger pour le style de sites Web, tandis que Spring Boot est un framework backend puissant et prêt à l'emploi pour le développement d'applications Web Java. Bootstrap est basé sur CSS et HTML, tandis que Spring Boot est basé sur Java et le framework Spring. Bootstrap se concentre sur la création de l'apparence et de la convivialité d'un site Web, tandis que Spring Boot se concentre sur les fonctionnalités back-end. Spring Boot peut être intégré à Bootstrap pour créer des applications entièrement fonctionnelles et esthétiques.

See all articles