À propos du principe du système de grille de bootstrap3.0-tutoriel CSS-php.cn

Cet article présente principalement les principes du système de grille de bootstrap3.0. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Bootstrap a un intégré. ensemble de réactifs, un système de grille fluide destiné aux mobiles qui se divise automatiquement en 12 colonnes maximum à mesure que la taille de l'écran ou de la fenêtre d'affichage augmente. Ici, j'appelle le système de grille dans Bootstrap la mise en page

Système de grille (mise en page)

Bootstrap possède un système de grille fluide intégré réactif, axé sur les appareils mobiles, en tant que périphérique d'écran ou taille de fenêtre. augmente, le système le divisera automatiquement en 12 colonnes maximum.

J'appelle ici le système de grille dans Bootstrap une mise en page. Il crée une mise en page grâce à une série de combinaisons de lignes et de colonnes, puis votre contenu peut être placé dans la mise en page que vous avez créée. Voici une brève introduction au fonctionnement du système de grille Bootstrap :

les lignes doivent être incluses dans le .container afin de leur donner un alignement et un remplissage appropriés. Créez un ensemble de colonnes (cpumn) horizontalement à l'aide de lignes. Votre contenu doit être placé dans une colonne (cpumn), et seule une colonne (cpumn) peut être un enfant direct d'une ligne (row). Les classes de grille prédéfinies telles que .row et .cp-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. Créez des espaces (gouttière) entre les colonnes (cpumn) en définissant le remplissage. Compensez ensuite l'effet du remplissage en définissant des valeurs négatives pour le premier et le dernier margin. Les colonnes d'un 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 à l'aide de trois .cp-xs-4.

Implémentation de l'encodage DW6

D'accord, commençons à écrire le code. Tout d’abord, regardez l’éditeur que j’utilise dans la dernière image. J’ai utilisé de nombreux outils lorsque j’apprenais le HTML+CSS à l’école.

Créez ensuite un nouveau document HTML, sélectionnez le type HTML5

Après la création, enregistrez-le comme la section précédente Dans le même répertoire des dossiers js et css dans l'explication.

layout.html est le fichier que je viens de créer. Bootstrap.html est également la première page html créée dans la section précédente.

Vous pouvez maintenant copier tout le code de Bootstrap.html vers la page layout.html.

Ensuite, ajoutez le code suivant sous la balise body

<h1>Hello, world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>

Copier après la connexion

Tout le monde devrait pouvoir comprendre ces balises, ce sont les plus basiques et les plus simples.

Après avoir ajouté tous les codes de la page layout.html sont les suivants

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--Bootstrap-->
<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p>
<p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries-->
<!--WARNING:Respond.jsdoesn&#39;tworkifyouviewthepageviafile://-->
<!--[ifltIE9]>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello,world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery-2.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

Copier après la connexion

Bien sûr l'effet est très simple, je mets quand même la capture d'écran pour comparaison.

Optimisation 1 : vous pouvez constater que l'effet de page dans l'image ci-dessus occupe le plein écran. Nous pouvons centrer le contenu ci-dessus via la classe de style Bootstrap.

<p class="container">
 .........之前上面添加在body标签下的代码
</p>

Copier après la connexion

L'effet est le suivant

Vous pouvez constater que la classe conteneur définit la largeur et permet au contenu d'être affiché dans au milieu de la page.

Optimisation 2 : Affichez les trois zones sur la même ligne et divisez-les également en trois colonnes.

Ajoutez d'abord un conteneur pour les trois zones, vous pouvez utiliser p, et ajoutez une classe pour p

Ensuite, nous ajoutons un conteneur pour chacun Ajoutez également un conteneur p à la petite zone et ajoutez une classe pour p

L'implémentation de code simple est la suivante

<p class="container">
<h1>Hello,world!</h1>
<pclass="row">
<pclass="col-xs-4">
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</p>
</p>
</p>

Copier après la connexion

L'effet est le suivant

Il est en effet aligné en rangée, puis divisé en trois colonnes. Combinons les 6 principes du système de grille ci-dessus. Comprenez-vous un peu ? Quoi qu'il en soit, je comprends beaucoup. Des pages de disposition en grille plus complexes peuvent être créées de la même manière. Ajoutez simplement la classe de disposition de grille correspondante au conteneur utilisé par la disposition. Par exemple, si le contenu occupe 6 grilles, ajoutez une classe cp-xs-6. S'il occupe quatre grilles, ajoutez une classe cp-xs-4, puis utilisez la classe row autour du même conteneur de lignes.

Résumé

Cette section étudie principalement le tracé (système de grille) et comprend son principe de fonctionnement à travers des exemples simples.

Les classes utilisées sont :

1..container : utilisez .container pour envelopper le contenu de la page afin d'obtenir un alignement central. max-width est défini pour le conteneur dans différentes requêtes multimédias ou plages de valeurs afin de correspondre au système de grille.

2..cp-xs-4 : Cette classe est divisée en trois parties par "-". Le nombre dans la troisième partie est utilisé comme référence générale, et sa plage est de 1 à 12. Autrement dit, une zone peut être divisée en 12 colonnes. Celle-ci doit être utilisée conjointement avec la classe de lignes.

En fait, cette disposition est très similaire à la disposition Table en HTMl avec des lignes TR et des colonnes TD.

C'est tout pour la compréhension temporaire. Vous pouvez simplement copier et coller le code pour voir l'effet. Bien sûr, vous devez d'abord préparer les fichiers css et js à l'avance.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour conserver les proportions du contenu de la page

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!