Ressources en ligne :
- Twitter Bootstrap custom grids (SASS mais pas Bootstrap)
- bootstrap-5-columns (LESS)
- Bootstrap 5, 7 and 9 columns solution (CSS)
Méthode SASS pour 5 colonnes (concept Bootstrap)
Fonctionne et génère la batterie complète de styles nécessaires :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$grid-columns: 5; // Changer la valeur par défaut pour 5 colonnes [class*="col-five-"],[class^="col-five-"]{ position: relative; min-height: 1px; padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; float: left; } @include make-grid(xs); // Small grid @media (min-width: $screen-sm-min) { @include make-grid(five-sm); } // Medium grid @media (min-width: $screen-md-min) { @include make-grid(five-md); } // Large grid @media (min-width: $screen-lg-min) { @include make-grid(five-lg); } $grid-columns: 12; // Toujours remettre la valeur par défaut qui se trouve dans _variables.scss |
Ne fonctionne pas (génère des classes pour 12 colonnes) :
|
1 2 3 4 |
.columns-5{ $grid-columns: 5; @include make-grid(toto); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.columns-5{ $grid-columns: 5; @include make-grid(xs); @media (min-width: $screen-sm-min) { @include make-grid(sm); } @media (min-width: $screen-md-min) { @include make-grid(md); } @media (min-width: $screen-lg-min) { @include make-grid(lg); } } |
Méthode pré-processeur pour 5 colonnes de largeurs égales
Source : Five equal columns in twitter bootstrap.
Méthode qui génère moins de code, mais uniquement des briques de largeur égale (20%).
SASS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.col-lg-2-4{ @include make-lg-column(2.4) } .col-md-2-4{ @include make-md-column(2.4) } .col-sm-2-4{ @include make-sm-column(2.4) } .col-md-push-2-4{ @include make-md-column-push(2.4) } .col-md-pull-2-4{ @include make-md-column-pull(2.4) } .col-md-offset-2-4{ @include make-md-column-offset(2.4) } |
LESS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.col-lg-2-4{ .make-lg-column(2.4) } .col-md-2-4{ .make-md-column(2.4) } .col-sm-2-4{ .make-sm-column(2.4) } .col-lg-2-4{ .make-lg-column(2.4) } .col-md-2-4{ .make-md-column(2.4) } .col-sm-2-4{ .make-sm-column(2.4) } |
Méthode alternative pour une palette complète sur 5 colonnes (CSS)
Source : Quick tips: 5 columns layout with Twitter Bootstrap, 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
/* 5 columns layout with Twitter Bootstrap 3 */ .col-xs-15, .col-xs-25, .col-xs-35, .col-xs-45, .col-sm-15, .col-sm-25, .col-sm-35, .col-sm-45, .col-md-15, .col-md-25, .col-md-35, .col-md-45, .col-lg-15, .col-lg-25, .col-lg-35, .col-lg-45 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } .col-xs-25 { width: 40%; float: left; } .col-xs-35 { width: 60%; float: left; } .col-xs-45 { width: 80%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } .col-sm-25 { width: 40%; float: left; } .col-sm-35 { width: 60%; float: left; } .col-sm-45 { width: 80%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } .col-md-25 { width: 40%; float: left; } .col-md-35 { width: 60%; float: left; } .col-md-45 { width: 80%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } .col-lg-25 { width: 40%; float: left; } .col-lg-35 { width: 60%; float: left; } .col-lg-45 { width: 80%; float: left; } } |
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="row"> <div class="col-md-15">.col-md-15</div> <div class="col-md-15">.col-md-15</div> <div class="col-md-15">.col-md-15</div> <div class="col-md-15">.col-md-15</div> <div class="col-md-15">.col-md-15</div> </div> </div> |