Maison >interface Web >Tutoriel d'amorçage >Quel est le principe de la rastérisation bootstrap ?
Dans bootstrap, le principe de la rastérisation est de segmenter en fonction de la taille de l'appareil, chaque segment ayant une largeur fixe, et de mettre en œuvre une mise en page réactive via des pourcentages et des requêtes multimédias, ce qui permet au même ensemble de pages de s'adapter aux appareils avec ; différentes résolutions.
L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3
Bootstrap adopte un système de grille à 12 colonnes, divisées selon ? la taille des segments des appareils grand public, chaque segment a une largeur fixe et une mise en page réactive est obtenue grâce à des pourcentages et des requêtes multimédias.
Si vous entrez en contact avec bootstrap pour la première fois, vous serez certainement impressionné par sa disposition en grille. Il nous fournit un ensemble de solutions de mise en page réactives.
Pour faire simple :
1. Bootstrap dispose d'un système de grille fluide intégré 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 le divisera automatiquement. en 12 colonnes maximum.
2. Le principe de mise en œuvre du système de grille est très simple. Il suffit de définir la taille du conteneur, de le diviser en 12 parties égales (il peut aussi ê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 système de grille du framework Bootstrap divise le conteneur en 12 parties égales.
Dans le système raster, nous utilisons la requête média suivante dans le fichier Less pour créer des seuils de points d'arrêt clés.
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
Nous incluons également occasionnellement max-width dans le code de requête multimédia pour limiter l'impact du CSS à une plus petite plage de tailles d'écran.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
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!