1 module source.uim.bootstrap.bs5.demos.layouts.gutters; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/layouts/gutters", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Gutters - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/layouts"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Layouts"], "Gutters")), 23 24 BS5Container(["mt-3"]).row( 25 H5Div(["col-12", "col-lg-2"], 26 listLevels("basic"), 27 listAreas("basic", "layouts"), 28 listSections("basic", "layouts", "gutters")), 29 H5Div(["col-12", "col-lg-8"], 30 dateInfo(this), 31 H5H2(["display-4"], "Gutters"), 32 H5Hr, 33 34 demoBs5Example("horizontal", "Horizontal", 35 H5Div( 36 BS5Container( 37 BS5Row(["gx-0"], 38 H5Div(["col-3"], 39 H5Div(["p-3 border bg-light"], "Column")), 40 H5Div(["col-3"], 41 H5Div(["p-3 border bg-light"], "Column")), 42 H5Div(["col-3"], 43 H5Div(["p-3 border bg-light"], "Column")), 44 H5Div(["col-3"], 45 H5Div(["p-3 border bg-light"], "Column")))), 46 H5H5(["text-muted", "mt-3", "container"], "1"), 47 BS5Container( 48 BS5Row(["gx-1"], 49 H5Div(["col-3"], 50 H5Div(["p-3 border bg-light"], "Column")), 51 H5Div(["col-3"], 52 H5Div(["p-3 border bg-light"], "Column")), 53 H5Div(["col-3"], 54 H5Div(["p-3 border bg-light"], "Column")), 55 H5Div(["col-3"], 56 H5Div(["p-3 border bg-light"], "Column")))), 57 H5H5(["text-muted", "mt-3", "container"], "2"), 58 BS5Container( 59 BS5Row(["gx-2"], 60 H5Div(["col-3"], 61 H5Div(["p-3 border bg-light"], "Column")), 62 H5Div(["col-3"], 63 H5Div(["p-3 border bg-light"], "Column")), 64 H5Div(["col-3"], 65 H5Div(["p-3 border bg-light"], "Column")), 66 H5Div(["col-3"], 67 H5Div(["p-3 border bg-light"], "Column")))), 68 H5H5(["text-muted", "mt-3", "container"], "3"), 69 BS5Container( 70 BS5Row(["gx-3"], 71 H5Div(["col-3"], 72 H5Div(["p-3 border bg-light"], "Column")), 73 H5Div(["col-3"], 74 H5Div(["p-3 border bg-light"], "Column")), 75 H5Div(["col-3"], 76 H5Div(["p-3 border bg-light"], "Column")), 77 H5Div(["col-3"], 78 H5Div(["p-3 border bg-light"], "Column")))), 79 H5H5(["text-muted", "mt-3", "container"], "4"), 80 BS5Container( 81 BS5Row(["gx-4"], 82 H5Div(["col-3"], 83 H5Div(["p-3 border bg-light"], "Column")), 84 H5Div(["col-3"], 85 H5Div(["p-3 border bg-light"], "Column")), 86 H5Div(["col-3"], 87 H5Div(["p-3 border bg-light"], "Column")), 88 H5Div(["col-3"], 89 H5Div(["p-3 border bg-light"], "Column")))), 90 H5H5(["text-muted", "mt-3", "container"], "5"), 91 BS5Container( 92 BS5Row(["gx-5"], 93 H5Div(["col-3"], 94 H5Div(["p-3 border bg-light"], "Column")), 95 H5Div(["col-3"], 96 H5Div(["p-3 border bg-light"], "Column")), 97 H5Div(["col-3"], 98 H5Div(["p-3 border bg-light"], "Column")), 99 H5Div(["col-3"], 100 H5Div(["p-3 border bg-light"], "Column")))) 101 ), ``, ``), 102 103 demoBs5Example("responsive", "Responsive", 104 H5Div( 105 BS5Container( 106 BS5Row(["gx-0", "gx-sm-1", "gx-md-2", "gx-lg-3", "gx-xl-4", "gx-xxl-5"], 107 H5Div(["col-3"], 108 H5Div(["p-3 border bg-light"], "Column")), 109 H5Div(["col-3"], 110 H5Div(["p-3 border bg-light"], "Column")), 111 H5Div(["col-3"], 112 H5Div(["p-3 border bg-light"], "Column")), 113 H5Div(["col-3"], 114 H5Div(["p-3 border bg-light"], "Column")))) 115 ), ``, ``), 116 117 demoBs5Example("vertical", "Vertical", 118 H5Div( 119 H5H5(["text-muted", "mt-3", "container"], "0"), 120 BS5Container( 121 BS5Row(["gy-0"], 122 H5Div(["col-12"], 123 H5Div(["p-3 border bg-light"], "Column")), 124 H5Div(["col-12"], 125 H5Div(["p-3 border bg-light"], "Column")), 126 H5Div(["col-12"], 127 H5Div(["p-3 border bg-light"], "Column")), 128 H5Div(["col-12"], 129 H5Div(["p-3 border bg-light"], "Column")))), 130 H5H5(["text-muted", "mt-3", "container"], "1"), 131 BS5Container( 132 BS5Row(["gy-1"], 133 H5Div(["col-12"], 134 H5Div(["p-3 border bg-light"], "Column")), 135 H5Div(["col-12"], 136 H5Div(["p-3 border bg-light"], "Column")), 137 H5Div(["col-12"], 138 H5Div(["p-3 border bg-light"], "Column")), 139 H5Div(["col-12"], 140 H5Div(["p-3 border bg-light"], "Column")))), 141 H5H5(["text-muted", "mt-3", "container"], "2"), 142 BS5Container( 143 BS5Row(["gy-2"], 144 H5Div(["col-12"], 145 H5Div(["p-3 border bg-light"], "Column")), 146 H5Div(["col-12"], 147 H5Div(["p-3 border bg-light"], "Column")), 148 H5Div(["col-12"], 149 H5Div(["p-3 border bg-light"], "Column")), 150 H5Div(["col-12"], 151 H5Div(["p-3 border bg-light"], "Column")))), 152 H5H5(["text-muted", "mt-3", "container"], "3"), 153 BS5Container( 154 BS5Row(["gy-3"], 155 H5Div(["col-12"], 156 H5Div(["p-3 border bg-light"], "Column")), 157 H5Div(["col-12"], 158 H5Div(["p-3 border bg-light"], "Column")), 159 H5Div(["col-12"], 160 H5Div(["p-3 border bg-light"], "Column")), 161 H5Div(["col-12"], 162 H5Div(["p-3 border bg-light"], "Column")))), 163 H5H5(["text-muted", "mt-3", "container"], "4"), 164 BS5Container( 165 BS5Row(["gy-4"], 166 H5Div(["col-12"], 167 H5Div(["p-3 border bg-light"], "Column")), 168 H5Div(["col-12"], 169 H5Div(["p-3 border bg-light"], "Column")), 170 H5Div(["col-12"], 171 H5Div(["p-3 border bg-light"], "Column")), 172 H5Div(["col-12"], 173 H5Div(["p-3 border bg-light"], "Column")))), 174 H5H5(["text-muted", "mt-3", "container"], "5"), 175 BS5Container( 176 BS5Row(["gy-5"], 177 H5Div(["col-12"], 178 H5Div(["p-3 border bg-light"], "Column")), 179 H5Div(["col-12"], 180 H5Div(["p-3 border bg-light"], "Column")), 181 H5Div(["col-12"], 182 H5Div(["p-3 border bg-light"], "Column")), 183 H5Div(["col-12"], 184 H5Div(["p-3 border bg-light"], "Column")))), 185 H5H5(["text-muted", "mt-3", "container"], "Responsive"), 186 BS5Container( 187 BS5Row(["gy-0", "gy-sm-1", "gy-md-2", "gy-lg-3", "gy-xl-4", "gy-xxl-5"], 188 H5Div(["col-12"], 189 H5Div(["p-3 border bg-light"], "Column")), 190 H5Div(["col-12"], 191 H5Div(["p-3 border bg-light"], "Column")), 192 H5Div(["col-12"], 193 H5Div(["p-3 border bg-light"], "Column")), 194 H5Div(["col-12"], 195 H5Div(["p-3 border bg-light"], "Column")))), 196 ), ``, ``), 197 198 demoBs5Example("responsive", "Responsive", 199 H5Div( 200 H5H3(["component-variation", "text-muted container"], "Horizontal and vertical"), 201 H5Div( 202 H5H5(["text-muted", "mt-3", "container"], "0"), 203 BS5Container( 204 BS5Row(["g-0"], 205 H5Div(["col-6"], 206 H5Div(["p-3 border bg-light"], "Column")), 207 H5Div(["col-6"], 208 H5Div(["p-3 border bg-light"], "Column")), 209 H5Div(["col-6"], 210 H5Div(["p-3 border bg-light"], "Column")), 211 H5Div(["col-6"], 212 H5Div(["p-3 border bg-light"], "Column")))), 213 H5H5(["text-muted", "mt-3", "container"], "1"), 214 BS5Container( 215 BS5Row(["g-1"], 216 H5Div(["col-6"], 217 H5Div(["p-3 border bg-light"], "Column")), 218 H5Div(["col-6"], 219 H5Div(["p-3 border bg-light"], "Column")), 220 H5Div(["col-6"], 221 H5Div(["p-3 border bg-light"], "Column")), 222 H5Div(["col-6"], 223 H5Div(["p-3 border bg-light"], "Column")))), 224 H5H5(["text-muted", "mt-3", "container"], "2"), 225 BS5Container( 226 BS5Row(["g-2"], 227 H5Div(["col-6"], 228 H5Div(["p-3 border bg-light"], "Column")), 229 H5Div(["col-6"], 230 H5Div(["p-3 border bg-light"], "Column")), 231 H5Div(["col-6"], 232 H5Div(["p-3 border bg-light"], "Column")), 233 H5Div(["col-6"], 234 H5Div(["p-3 border bg-light"], "Column")))), 235 H5H5(["text-muted", "mt-3", "container"], "3"), 236 BS5Container( 237 BS5Row(["g-3"], 238 H5Div(["col-6"], 239 H5Div(["p-3 border bg-light"], "Column")), 240 H5Div(["col-6"], 241 H5Div(["p-3 border bg-light"], "Column")), 242 H5Div(["col-6"], 243 H5Div(["p-3 border bg-light"], "Column")), 244 H5Div(["col-6"], 245 H5Div(["p-3 border bg-light"], "Column")))), 246 H5H5(["text-muted", "mt-3", "container"], "4"), 247 BS5Container( 248 BS5Row(["g-4"], 249 H5Div(["col-6"], 250 H5Div(["p-3 border bg-light"], "Column")), 251 H5Div(["col-6"], 252 H5Div(["p-3 border bg-light"], "Column")), 253 H5Div(["col-6"], 254 H5Div(["p-3 border bg-light"], "Column")), 255 H5Div(["col-6"], 256 H5Div(["p-3 border bg-light"], "Column")))), 257 H5H5(["text-muted", "mt-3", "container"], "5"), 258 BS5Container( 259 BS5Row(["g-5"], 260 H5Div(["col-6"], 261 H5Div(["p-3 border bg-light"], "Column")), 262 H5Div(["col-6"], 263 H5Div(["p-3 border bg-light"], "Column")), 264 H5Div(["col-6"], 265 H5Div(["p-3 border bg-light"], "Column")), 266 H5Div(["col-6"], 267 H5Div(["p-3 border bg-light"], "Column")))), 268 H5H5(["text-muted", "mt-3", "container"], "Responsive"), 269 BS5Container( 270 BS5Row(["g-0", "g-sm-1", "g-md-2", "g-lg-3", "g-xl-4", "g-xxl-5"], 271 H5Div(["col-6"], 272 H5Div(["p-3 border bg-light"], "Column")), 273 H5Div(["col-6"], 274 H5Div(["p-3 border bg-light"], "Column")), 275 H5Div(["col-6"], 276 H5Div(["p-3 border bg-light"], "Column")), 277 H5Div(["col-6"], 278 H5Div(["p-3 border bg-light"], "Column"))))), 279 ), ``, ``), 280 281 demoBs5Example("rowcolumns", "Row columns", 282 H5Div( 283 H5H5(["text-muted", "mt-3", "container"], "2"), 284 BS5Container( 285 BS5Row(["row-cols-2", "g-2"], 286 H5Div(["col"], 287 H5Div(["p-3 border bg-light"], "Column")), 288 H5Div(["col"], 289 H5Div(["p-3 border bg-light"], "Column")), 290 H5Div(["col"], 291 H5Div(["p-3 border bg-light"], "Column")), 292 H5Div(["col"], 293 H5Div(["p-3 border bg-light"], "Column")))), 294 H5H5(["text-muted", "mt-3", "container"], "3"), 295 BS5Container( 296 BS5Row(["row-cols-3", "g-3"], 297 H5Div(["col"], 298 H5Div(["p-3 border bg-light"], "Column")), 299 H5Div(["col"], 300 H5Div(["p-3 border bg-light"], "Column")), 301 H5Div(["col"], 302 H5Div(["p-3 border bg-light"], "Column")), 303 H5Div(["col"], 304 H5Div(["p-3 border bg-light"], "Column")))), 305 H5H5(["text-muted", "mt-3", "container"], "4"), 306 BS5Container( 307 BS5Row(["row-cols-4", "g-4"], 308 H5Div(["col"], 309 H5Div(["p-3 border bg-light"], "Column")), 310 H5Div(["col"], 311 H5Div(["p-3 border bg-light"], "Column")), 312 H5Div(["col"], 313 H5Div(["p-3 border bg-light"], "Column")), 314 H5Div(["col"], 315 H5Div(["p-3 border bg-light"], "Column")))) 316 ), ``, ``) 317 318 ), 319 H5Div(["col-12", "col-lg-2"]))).toString; 320 } 321 }); 322 } 323