1 module uim.bootstrap.bs5.demos.examples.navbartopfixed; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/navbartopfixed", 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": "Starter Page - Bootstrap 5 Demo", 14 ]).styles(` 15 body { 16 min-height: 75rem; 17 padding-top: 4.5rem; 18 } 19 .bd-placeholder-img { 20 font-size: 1.125rem; 21 text-anchor: middle; 22 -webkit-user-select: none; 23 -moz-user-select: none; 24 user-select: none; 25 } 26 27 @media (min-width: 768px) { 28 .bd-placeholder-img-lg { 29 font-size: 3.5rem; 30 } 31 }`).styles(["href":"navbar-top-fixed.css", "rel":"stylesheet"]); 32 } 33 34 override string content() { 35 36 return 37 H5Nav(["navbar navbar-expand-md navbar-dark fixed-top bg-dark"], 38 H5Div(["container-fluid"], 39 H5A(["navbar-brand"], ["href":"#"], "Fixed navbar"), 40 H5Button(["navbar-toggler"], ["type":"button", "data-bs-toggle":"collapse", "data-bs-target":"#navbarCollapse", "aria-controls":"navbarCollapse", "aria-expanded":"false", "aria-label":"Toggle navigation"], 41 H5Span(["navbar-toggler-icon"])), 42 H5Div("navbarCollapse", ["collapse navbar-collapse"], 43 BS5NavbarNav(["me-auto mb-2 mb-md-0"], 44 BS5NavItem(["active"], 45 BS5NavLink(["aria-current":"page", "href":"#"], "Home")), 46 BS5NavItem( 47 BS5NavLink(["href":"#"], "Link")), 48 BS5NavItem( 49 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), 50 H5Form(["d-flex"], 51 BS5InputSearch(["me-2"], ["placeholder":"Search", "aria-label":"Search"]), 52 BS5ButtonSubmit(["btn-outline-success"], "Search")))) 53 ).toString~ 54 55 H5Main(["container"], 56 H5Div(["bg-light p-5 rounded"], 57 H5H1("Navbar example"), 58 H5P(["lead"], "This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport."), 59 H5A(["btn btn-lg btn-primary"], ["href":"../components/navbar/", "role":"button"], "View navbar docs »") 60 )).toString; 61 62 } 63 }); 64 } 65