Bootstrap ile hızlı layoutlar nasıl yapılır?

02 Tem 02:31

La grille Bootstrap, c'est en réalité une implémentation astucieuse du système Flexbox moderne, mais avec une couche de sucre syntaxique pour qu'on ne se prenne pas la tête avec les propriétés CSS pures. Pour des colonnes équilibrées, utilise la classe `.row` comme conteneur et `.col-*` pour les colonnes. Par défaut, le système divise automatiquement l'espace disponible en parts égales. Par exemple, `.col-md-6` te donne 2 colonnes de 50% sur moyenne taille d'écran et plus, mais elles deviennent empilées sur mobile. Le système repose sur 12 colonnes "virtuelles" qu'on peut fractionner: `.col-4` = 3 colonnes sur 12, `.col-8` = 8 colonnes, etc. Pour les comportements responsives avancés, tu vas jouer avec les préfixes de breakpoint: `.col-sm-*`, `.col-md-*`, `.col-lg-*`, `.col-xl-*`, `.col-xxl-*`. Si tu veux que tes colonnes aient des largeurs différentes selon l'écran, combine les classes: `<div class="col-md-8 col-lg-6">` donnera 8/12 (66%) en md et 6/12 (50%) en lg. N'oublie pas le `.row` qui gère les marges et les gouttières (gutter) automatiquement. Un piège classique: si tu dois avoir des colonnes strictement égales sur toutes les tailles, spécifie explicitement la même classe pour chaque breakpoint. Sinon les colonnes peuvent avoir des comportements de wrapping inattendus sur certains écrans. Et si tu veux vraiment push, utilise les classes utilitaires comme `.offset-*` pour décaler tes colonnes ou les `.order-*` pour réorganiser leur ordre visuel indépendamment du HTML.