1 module source.uim.bootstrap.bs5.demos.layouts.grid; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/layouts/grid", 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": "Container - 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( 22 ["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/layouts"], 23 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Layouts"], "Grid")), 24 25 BS5Container(["mt-3"]).row( 26 H5Div(["col-12", "col-lg-2"], 27 listLevels("basic"), 28 listAreas("basic", "layouts"), 29 listSections("basic", "layouts", "grid")), 30 H5Div(["col-12", "col-lg-8"], 31 dateInfo(this), 32 H5H2(["display-4"], "Grid"), 33 H5Hr, 34 35 demoBs5Example("equalwidth", "Equal widthH5Br,<small>Grid with auto-layout and equal width</small>", 36 H5Div( 37 BS5Container( 38 BS5Row( 39 BS5Col(".col"), 40 BS5Col(".col")), 41 BS5Row( 42 BS5Col(".col"), 43 BS5Col(".col"), 44 BS5Col(".col"))) 45 ), ``, ``), 46 47 demoBs5Example("one", "One column widthH5Br,<small>Grid with auto-layout around one column with set width</small>", 48 H5Div( 49 BS5Container( 50 BS5Row( 51 BS5Col(".col"), 52 H5Div(["col-7"], ".col-7"), 53 BS5Col(".col")), 54 BS5Row( 55 H5Div(["col-3"], ".col-3"), 56 BS5Col(".col"), 57 BS5Col(".col"))) 58 ), ``, ``), 59 60 demoBs5Example("one", "Variable width contentH5Br,<small>Grid with auto-layout around columns with set width and natural (auto) width</small>", 61 H5Div( 62 BS5Container( 63 BS5Row( 64 BS5Col(".col"), 65 H5Div(["col-auto"], ".col-auto"), 66 BS5Col(".col")), 67 BS5Row( 68 BS5Col(".col"), 69 H5Div(["col-auto"], ".col-auto"), 70 H5Div(["col-2"], ".col-2"))) 71 ), ``, ``), 72 73 demoBs5Example("responsive", "All breakpointsH5Br,<small>Same grid across all devices: use .col and .col-*</small>", 74 H5Div( 75 BS5Container( 76 BS5Row( 77 BS5Col(".col"), 78 BS5Col(".col"), 79 BS5Col(".col"), 80 BS5Col(".col")), 81 BS5Row( 82 H5Div(["col-6"], ".col-6"), 83 H5Div(["col-3"], ".col-3"), 84 H5Div(["col-3"], ".col-3"))), 85 BS5Container( 86 H5H5(["text-muted", "mt-3"], "Responsive"), 87 H5P("Advanced grid changing layout across different device sizes: use device prefixes")), 88 BS5Container( 89 BS5Row( 90 H5Div(["col-12 col-md-6 col-lg-3"], ".col-12 .col-md-6 .col-lg-3"), 91 H5Div(["col-12 col-md-6 col-lg-3"], ".col-12 .col-md-6 .col-lg-3"), 92 H5Div(["col-6 col-lg-3"], ".col-6 .col-lg-3"), 93 H5Div(["col-6 col-lg-3"], ".col-6 .col-lg-3")), 94 BS5Row( 95 H5Div(["col-6 col-sm-4"], ".col-6 .col-sm-4"), 96 H5Div(["col-6 col-sm-4"], ".col-6 .col-sm-4"), 97 H5Div(["col-6 col-sm-4"], ".col-6 .col-sm-4"))) 98 ), ``, ``), 99 100 demoBs5Example("responsive2", "ResponsiveH5Br,<small>Advanced grid changing layout across different device sizes: use device prefixes</small>", 101 H5Div( 102 BS5Container( 103 BS5Row( 104 H5Div(["col-12 col-md-6 col-lg-3"], ".col-12 .col-md-6 .col-lg-3"), 105 H5Div(["col-12 col-md-6 col-lg-3"], ".col-12 .col-md-6 .col-lg-3"), 106 H5Div(["col-6 col-lg-3"], ".col-6 .col-lg-3"), 107 H5Div(["col-6 col-lg-3"], ".col-6 .col-lg-3")), 108 BS5Row( 109 H5Div(["col-6 col-sm-4"], ".col-6 .col-sm-4"), 110 H5Div(["col-6 col-sm-4"], ".col-6 .col-sm-4"), 111 H5Div(["col-6 col-sm-4"], ".col-6 .col-sm-4"))) 112 ), ``, ``), 113 114 demoBs5Example("row", "Row columns", 115 H5Div( 116 BS5Container( 117 BS5Row(["row-cols-auto"], 118 BS5Col("Column"), 119 BS5Col("Column"), 120 BS5Col("Column"), 121 BS5Col("Column"))), 122 H5H5(["text-muted", "mt-3", "ccontainer"], "2"), 123 BS5Container( 124 BS5Row(["row-cols-2"], 125 BS5Col("Column"), 126 BS5Col("Column"), 127 BS5Col("Column"), 128 BS5Col("Column"))), 129 H5H5(["text-muted", "mt-3", "ccontainer"], "3"), 130 BS5Container( 131 BS5Row(["row-cols-3"], 132 BS5Col("Column"), 133 BS5Col("Column"), 134 BS5Col("Column"), 135 BS5Col("Column"))), 136 H5H5(["text-muted", "mt-3", "ccontainer"], "4"), 137 BS5Container( 138 BS5Row(["row-cols-4"], 139 BS5Col("Column"), 140 BS5Col("Column"), 141 BS5Col("Column"), 142 BS5Col("Column"))), 143 H5H5(["text-muted", "mt-3", "ccontainer"], "Responsive"), 144 H5P("Advanced grid changing layout across different device sizes: use device prefixes"), 145 BS5Container( 146 BS5Row(["row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4"], 147 BS5Col("Column"), 148 BS5Col("Column"), 149 BS5Col("Column"), 150 BS5Col("Column"))) 151 ), ``, ``), 152 153 demoBs5Example("nesting", "Nesting", 154 H5Div( 155 BS5Container( 156 BS5Row( 157 H5Div(["col-md-8"], 158 BS5Row( 159 H5Div(["col-md-12 col-lg-6"], ".col-md-12 .col-lg-6"), 160 H5Div(["col-md-6 col-lg-3"], ".col-md-12 .col-lg-3"), 161 H5Div(["col-md-6 col-lg-3"], ".col-md-12 .col-lg-3"))), 162 H5Div(["col-md-4"], ".col-md-4"))) 163 ), ``, ``) 164 165 ), 166 H5Div(["col-12", "col-lg-2"]))).toString; 167 } 168 }); 169 } 170 171 172