1 module uim.bootstrap.bs5.demos.examples.cheatsheet; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/cheatsheet", 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": "Album Page - Bootstrap 5 Demo"]) 14 .styles(` 15 body { 16 scroll-behavior: smooth; 17 } 18 19 /** 20 * Bootstrap "Journal code" icon 21 * @link https://icons.getbootstrap.com/icons/journal-code/ 22 */ 23 .bd-heading a::before { 24 display: inline-block; 25 width: 1em; 26 height: 1em; 27 margin-right: .25rem; 28 content: ""; 29 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); 30 background-size: 1em; 31 } 32 33 /* stylelint-disable-next-line selector-max-universal */ 34 .bd-heading + div > * + * { 35 margin-top: 3rem; 36 } 37 38 /* Table of contents */ 39 .bd-aside a { 40 padding: .1875rem .5rem; 41 margin-top: .125rem; 42 margin-left: .3125rem; 43 color: rgba(0, 0, 0, .65); 44 text-decoration: none; 45 } 46 47 .bd-aside a:hover, 48 .bd-aside a:focus { 49 color: rgba(0, 0, 0, .85); 50 background-color: rgba(121, 82, 179, .1); 51 } 52 53 .bd-aside .active { 54 font-weight: 600; 55 color: rgba(0, 0, 0, .85); 56 } 57 58 .bd-aside .btn { 59 padding: .25rem .5rem; 60 font-weight: 600; 61 color: rgba(0, 0, 0, .65); 62 border: 0; 63 } 64 65 .bd-aside .btn:hover, 66 .bd-aside .btn:focus { 67 color: rgba(0, 0, 0, .85); 68 background-color: rgba(121, 82, 179, .1); 69 } 70 71 .bd-aside .btn:focus { 72 box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); 73 } 74 75 .bd-aside .btn::before { 76 width: 1.25em; 77 line-height: 0; 78 content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); 79 transition: transform .35s ease; 80 transform-origin: .5em 50%; 81 } 82 83 .bd-aside .btn[aria-expanded="true"]::before { 84 transform: rotate(90deg)/* rtl:ignore */; 85 } 86 87 88 /* Examples */ 89 .scrollspy-example { 90 position: relative; 91 height: 200px; 92 margin-top: .5rem; 93 overflow: auto; 94 } 95 96 [id="modal"] .bd-example .btn, 97 [id="buttons"] .bd-example .btn, 98 [id="tooltips"] .bd-example .btn, 99 [id="popovers"] .bd-example .btn, 100 [id="dropdowns"] .bd-example .btn-group, 101 [id="dropdowns"] .bd-example .dropdown, 102 [id="dropdowns"] .bd-example .dropup, 103 [id="dropdowns"] .bd-example .dropend, 104 [id="dropdowns"] .bd-example .dropstart { 105 margin: 0 1rem 1rem 0; 106 } 107 108 /* Layout */ 109 @media (min-width: 1200px) { 110 body { 111 display: grid; 112 gap: 1rem; 113 grid-template-columns: 1fr 4fr 1fr; 114 grid-template-rows: auto; 115 } 116 117 .bd-header { 118 position: fixed; 119 top: 0; 120 /* rtl:begin:ignore */ 121 right: 0; 122 left: 0; 123 /* rtl:end:ignore */ 124 z-index: 1030; 125 grid-column: 1 / span 3; 126 } 127 128 .bd-aside, 129 .bd-cheatsheet { 130 padding-top: 4rem; 131 } 132 133 /** 134 * 1. Too bad only Firefox supports subgrids ATM 135 */ 136 .bd-cheatsheet, 137 .bd-cheatsheet section, 138 .bd-cheatsheet article { 139 display: inherit; /* 1 */ 140 gap: inherit; /* 1 */ 141 grid-template-columns: 1fr 4fr; 142 grid-column: 1 / span 2; 143 grid-template-rows: auto; 144 } 145 146 .bd-aside { 147 grid-area: 1 / 3; 148 scroll-margin-top: 4rem; 149 } 150 151 .bd-cheatsheet section, 152 .bd-cheatsheet section > h2 { 153 top: 2rem; 154 scroll-margin-top: 2rem; 155 } 156 157 .bd-cheatsheet section > h2::before { 158 position: absolute; 159 /* rtl:begin:ignore */ 160 top: 0; 161 right: 0; 162 bottom: -2rem; 163 left: 0; 164 /* rtl:end:ignore */ 165 z-index: -1; 166 content: ""; 167 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); 168 } 169 170 .bd-cheatsheet article, 171 .bd-cheatsheet .bd-heading { 172 top: 8rem; 173 scroll-margin-top: 8rem; 174 } 175 176 .bd-cheatsheet .bd-heading { 177 z-index: 1; 178 } 179 } 180 181 .bd-placeholder-img { 182 font-size: 1.125rem; 183 text-anchor: middle; 184 -webkit-user-select: none; 185 -moz-user-select: none; 186 user-select: none; 187 } 188 189 @media (min-width: 768px) { 190 .bd-placeholder-img-lg { 191 font-size: 3.5rem; 192 } 193 }`); 194 } 195 196 override string content() { 197 /* !-- Custom styles for this template --> 198 <link href="cheatsheet.css" rel="stylesheet"> 199 <body class="bg-light"> */ 200 return 201 ` 202 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark"> 203 H5Div(["container-fluid d-flex align-items-center"> 204 H5H1(["d-flex align-items-center fs-4 text-white mb-0"> 205 <img src="../assets/brand/bootstrap-logo-white.svg" "width":"38" "height":"30" class="me-3" alt="Bootstrap"> 206 Cheatsheet 207 "), 208 H5A(["../examples/cheatsheet-rtl/" class="ms-auto link-light" hreflang="ar">RTL cheatsheet"), 209 ) 210 ).toString 211 <aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"], 212 H5H2(["h6 pt-4 pb-3 mb-4 border-bottom">On this page") 213 H5Nav("toc", ["small"], 214 H5Ul(["list-unstyled"], 215 <li class="my-2"], 216 H5Button(["btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents) 217 H5Ul(["list-unstyled ps-3 collapse" id="contents-collapse"], 218 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#typography">Typography")), 219 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#images">Images")), 220 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#tables">Tables")), 221 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#figures">Figures")), 222 ), 223 ), 224 <li class="my-2"], 225 H5Button(["btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms) 226 H5Ul(["list-unstyled ps-3 collapse" id="forms-collapse"> 227 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#overview">Overview")), 228 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms")), 229 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#sizing">Sizing")), 230 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#input-group">Input group")), 231 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels")), 232 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#validation">Validation")), 233 ), 234 ), 235 <li class="my-2"], 236 H5Button(["btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components) 237 H5Ul(["list-unstyled ps-3 collapse" id="components-collapse"], 238 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#accordion">Accordion")), 239 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#alerts">Alerts")), 240 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#badge">Badge")), 241 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb")), 242 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#buttons">Buttons")), 243 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#button-group">Button group")), 244 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#card">Card")), 245 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#carousel">Carousel")), 246 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns")), 247 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#list-group">List group")), 248 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#modal">Modal")), 249 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#navs">Navs")), 250 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#navbar">Navbar")), 251 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#pagination">Pagination")), 252 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#popovers">Popovers")), 253 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#progress">Progress")), 254 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy")), 255 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#spinners">Spinners")), 256 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#toasts">Toasts")), 257 H5Li("H5A(["d-inline-flex align-items-center rounded" href="#tooltips">Tooltips")), 258 ), 259 ), 260 ), 261 ), 262 </aside> 263 H5Div(["bd-cheatsheet container-fluid bg-white"], 264 <section id="content"], 265 H5H2(["sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents") 266 267 H5A(["my-3" id="typography"], 268 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"], 269 H5H3("Typography"), 270 H5A(["d-flex align-items-center" href="../content/typography/">Documentation"), 271 ), 272 273 H5Div( 274 H5Div(["bd-example"], 275 H5P(["display-1">Display 1") 276 H5P(["display-2">Display 2") 277 H5P(["display-3 ">Display 3") 278 H5P(["display-4">Display 4") 279 H5P(["display-5">Display 5") 280 H5P(["display-6">Display 6") 281 ), 282 283 H5Div(["bd-example"], 284 H5P(["h1">Heading 1") 285 H5P(["h2">Heading 2") 286 H5P(["h3">Heading 3") 287 H5P(["h4">Heading 4") 288 H5P(["h5">Heading 5") 289 H5P(["h6">Heading 6") 290 ), 291 292 H5Div(["bd-example"], 293 H5P(["lead"], 294 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 295 ") 296 ), 297 298 H5Div(["bd-example"], 299 H5P("You can use the mark tag to <mark>highlight</mark> text.") 300 H5P("<del>This line of text is meant to be treated as deleted text.</del>") 301 H5P("<s>This line of text is meant to be treated as no longer accurate.</s>") 302 H5P("<ins>This line of text is meant to be treated as an addition to the document.</ins>") 303 H5P("<u>This line of text will render as underlined.</u>") 304 H5P("<small>This line of text is meant to be treated as fine print."),") 305 H5P("<strong>This line rendered as bold text.")") 306 H5P("<em>This line rendered as italicized text.</em>") 307 ), 308 309 H5Div(["bd-example"], 310 BS5Blockquote( 311 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.") 312 H5Footer(["blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>) 313 ) 314 ), 315 316 H5Div(["bd-example"], 317 H5Ul(["list-unstyled"], 318 H5Li("Lorem ipsum dolor sit amet), 319 H5Li("Consectetur adipiscing elit), 320 H5Li("Integer molestie lorem at massa), 321 H5Li("Facilisis in pretium nisl aliquet), 322 H5Li("Nulla volutpat aliquam velit 323 <ul> 324 H5Li("Phasellus iaculis neque), 325 H5Li("Purus sodales ultricies), 326 H5Li("Vestibulum laoreet porttitor sem), 327 H5Li("Ac tristique libero volutpat at), 328 ), 329 ), 330 H5Li("Faucibus porta lacus fringilla vel), 331 H5Li("Aenean sit amet erat nunc), 332 H5Li("Eget porttitor lorem), 333 ), 334 ), 335 336 H5Div(["bd-example"], 337 H5Ul(["list-inline"], 338 <li class="list-inline-item">Lorem ipsum), 339 <li class="list-inline-item">Phasellus iaculis), 340 <li class="list-inline-item">Nulla volutpat), 341 ), 342 ), 343 ), 344 </article> 345 H5A(["my-3" id="images"], 346 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 347 H5H3("Images"), 348 H5A(["d-flex align-items-center" href="../content/images/">Documentation"), 349 ), 350 351 H5Div( 352 H5Div(["bd-example"> 353 H5Svg(["bd-placeholder-img bd-placeholder-img-lg img-fluid" "width":"100%" "height":"250" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg> 354 355 ), 356 357 H5Div(["bd-example"> 358 H5Svg(["bd-placeholder-img img-thumbnail" "width":"200" "height":"200" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg> 359 360 ), 361 ), 362 </article> 363 H5A(["my-3" id="tables"> 364 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 365 H5H3("Tables"), 366 H5A(["d-flex align-items-center" href="../content/tables/">Documentation"), 367 ), 368 369 H5Div( 370 H5Div(["bd-example"> 371 H5Table(["table table-striped"> 372 H5Thead( 373 H5Tr( 374 <th scope="col">#"), 375 <th scope="col">First"), 376 <th scope="col">Last"), 377 <th scope="col">Handle"), 378 ), 379 ), 380 H5Tbody( 381 H5Tr( 382 <th scope="row">1"), 383 H5Td("Mark"), 384 H5Td("Otto"), 385 H5Td("@mdo"), 386 ), 387 H5Tr( 388 <th scope="row">2"), 389 H5Td("Jacob"), 390 H5Td("Thornton"), 391 H5Td("@fat"), 392 ), 393 H5Tr( 394 <th scope="row">3"), 395 <td colspan="2">Larry the Bird"), 396 H5Td("@twitter"), 397 ), 398 ) 399 ) 400 ), 401 402 H5Div(["bd-example"> 403 H5Table(["table table-dark table-borderless"> 404 H5Thead( 405 H5Tr( 406 <th scope="col">#"), 407 <th scope="col">First"), 408 <th scope="col">Last"), 409 <th scope="col">Handle"), 410 ), 411 ), 412 H5Tbody( 413 H5Tr( 414 <th scope="row">1"), 415 H5Td("Mark"), 416 H5Td("Otto"), 417 H5Td("@mdo"), 418 ), 419 H5Tr( 420 <th scope="row">2"), 421 H5Td("Jacob"), 422 H5Td("Thornton"), 423 H5Td("@fat"), 424 ), 425 H5Tr( 426 <th scope="row">3"), 427 <td colspan="2">Larry the Bird"), 428 H5Td("@twitter"), 429 ), 430 ) 431 ) 432 ), 433 434 H5Div(["bd-example"> 435 H5Table(["table table-hover"> 436 H5Thead( 437 H5Tr( 438 <th scope="col">Class"), 439 <th scope="col">Heading"), 440 <th scope="col">Heading"), 441 ), 442 ), 443 H5Tbody( 444 H5Tr( 445 <th scope="row">Default"), 446 H5Td("Cell"), 447 H5Td("Cell"), 448 ), 449 450 <tr class="table-primary"> 451 <th scope="row">Primary"), 452 H5Td("Cell"), 453 H5Td("Cell"), 454 ), 455 <tr class="table-secondary"> 456 <th scope="row">Secondary"), 457 H5Td("Cell"), 458 H5Td("Cell"), 459 ), 460 <tr class="table-success"> 461 <th scope="row">Success"), 462 H5Td("Cell"), 463 H5Td("Cell"), 464 ), 465 <tr class="table-danger"> 466 <th scope="row">Danger"), 467 H5Td("Cell"), 468 H5Td("Cell"), 469 ), 470 <tr class="table-warning"> 471 <th scope="row">Warning"), 472 H5Td("Cell"), 473 H5Td("Cell"), 474 ), 475 <tr class="table-info"> 476 <th scope="row">Info"), 477 H5Td("Cell"), 478 H5Td("Cell"), 479 ), 480 <tr class="table-light"> 481 <th scope="row">Light"), 482 H5Td("Cell"), 483 H5Td("Cell"), 484 ), 485 <tr class="table-dark"> 486 <th scope="row">Dark"), 487 H5Td("Cell"), 488 H5Td("Cell"), 489 ), 490 ) 491 ) 492 ), 493 494 H5Div(["bd-example"> 495 H5Table(["table table-sm table-bordered"> 496 H5Thead( 497 H5Tr( 498 <th scope="col">#"), 499 <th scope="col">First"), 500 <th scope="col">Last"), 501 <th scope="col">Handle"), 502 ), 503 ), 504 H5Tbody( 505 H5Tr( 506 <th scope="row">1"), 507 H5Td("Mark"), 508 H5Td("Otto"), 509 H5Td("@mdo"), 510 ), 511 H5Tr( 512 <th scope="row">2"), 513 H5Td("Jacob"), 514 H5Td("Thornton"), 515 H5Td("@fat"), 516 ), 517 H5Tr( 518 <th scope="row">3"), 519 <td colspan="2">Larry the Bird"), 520 H5Td("@twitter"), 521 ), 522 ) 523 ) 524 ), 525 ), 526 </article> 527 H5A(["my-3" id="figures"> 528 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 529 H5H3("Figures"), 530 H5A(["d-flex align-items-center" href="../content/figures/">Documentation"), 531 ), 532 533 H5Div( 534 H5Div(["bd-example"> 535 <figure class="figure"> 536 H5Svg(["bd-placeholder-img figure-img img-fluid rounded" "width":"400" "height":"300" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg> 537 538 H5Figcaption(["figure-caption">A caption for the above image.</figcaption> 539 </figure> 540 ), 541 ), 542 </article> 543 </section> 544 545 <section id="forms"> 546 H5H2(["sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms") 547 548 H5A(["my-3" id="overview"> 549 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 550 H5H3("Overview"), 551 H5A(["d-flex align-items-center" href="../forms/overview/">Documentation"), 552 ), 553 554 H5Div( 555 H5Div(["bd-example"> 556 <form> 557 H5Div(["mb-3"> 558 <label for="exampleInputEmail1" class="form-label">Email address</label> 559 BS5InputEmail("exampleInputEmail1", ["aria-describedby";"emailHelp"]), 560 <div id="emailHelp" class="form-text">We'll never share your email with anyone else.), 561 ), 562 H5Div(["mb-3"> 563 <label for="exampleInputPassword1" class="form-label">Password</label> 564 <input "type":"password" class="form-control" id="exampleInputPassword1"> 565 ), 566 H5Div(["mb-3 form-check"> 567 <input "type":"checkbox" class="form-check-input" id="exampleCheck1"> 568 <label class="form-check-label" for="exampleCheck1">Check me out</label> 569 ), 570 <fieldset class="mb-3"> 571 <legend>Radios buttons</legend> 572 H5Div(["form-check"> 573 <input "type":"radio" name="radios" class="form-check-input" id="exampleRadio1"> 574 <label class="form-check-label" for="exampleRadio1">Default radio</label> 575 ), 576 H5Div(["mb-3 form-check"> 577 <input "type":"radio" name="radios" class="form-check-input" id="exampleRadio2"> 578 <label class="form-check-label" for="exampleRadio2">Another radio</label> 579 ), 580 </fieldset> 581 H5Div(["mb-3"> 582 <label class="form-label" for="customFile">Upload</label> 583 <input "type":"file" class="form-control" id="customFile"> 584 ), 585 H5Div(["mb-3 form-check form-switch"> 586 <input class="form-check-input" "type":"checkbox" id="flexSwitchCheckChecked" checked> 587 <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> 588 ), 589 H5Div(["mb-3"> 590 <label for="customRange3" class="form-label">Example range</label> 591 <input "type":"range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> 592 ), 593 BS5ButtonSubmit(["btn-primary"], "Submit") 594 ) 595 ), 596 ), 597 </article> 598 H5A(["my-3" id="disabled-forms"> 599 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 600 H5H3("Disabled forms"), 601 H5A(["d-flex align-items-center" href="../forms/overview/#disabled-forms">Documentation"), 602 ), 603 604 H5Div( 605 H5Div(["bd-example"> 606 <form> 607 <fieldset disabled "aria-label":"Disabled fieldset example"> 608 H5Div(["mb-3"> 609 <label for="disabledTextInput" class="form-label">Disabled input</label> 610 <input "type":"text" id="disabledTextInput" class="form-control" "placeholder":"Disabled input"> 611 ), 612 H5Div(["mb-3"> 613 <label for="disabledSelect" class="form-label">Disabled select menu</label> 614 <select id="disabledSelect" class="form-select"> 615 <option>Disabled select</option> 616 </select> 617 ), 618 H5Div(["mb-3"> 619 H5Div(["form-check"> 620 <input class="form-check-input" "type":"checkbox" id="disabledFieldsetCheck" disabled> 621 <label class="form-check-label" for="disabledFieldsetCheck"> 622 Can't check this 623 </label> 624 ), 625 ), 626 <fieldset class="mb-3"> 627 <legend>Disabled radios buttons</legend> 628 H5Div(["form-check"> 629 <input "type":"radio" name="radios" class="form-check-input" id="disabledRadio1" disabled> 630 <label class="form-check-label" for="disabledRadio1">Disabled radio</label> 631 ), 632 H5Div(["mb-3 form-check"> 633 <input "type":"radio" name="radios" class="form-check-input" id="disabledRadio2" disabled> 634 <label class="form-check-label" for="disabledRadio2">Another radio</label> 635 ), 636 </fieldset> 637 H5Div(["mb-3"> 638 <label class="form-label" for="disabledCustomFile">Upload</label> 639 <input "type":"file" class="form-control" id="disabledCustomFile" disabled> 640 ), 641 H5Div(["mb-3 form-check form-switch"> 642 <input class="form-check-input" "type":"checkbox" id="disabledSwitchCheckChecked" checked disabled> 643 <label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label> 644 ), 645 H5Div(["mb-3"> 646 <label for="disabledRange" class="form-label">Disabled range</label> 647 <input "type":"range" class="form-range" min="0" max="5" step="0.5" id="disabledRange"> 648 ), 649 BS5ButtonSubmit(["btn-primary"], "Submit") 650 ) 651 ) 652 ) 653 ) 654 ), 655 H5A(["my-3" id="sizing"> 656 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 657 H5H3("Sizing"), 658 H5A(["d-flex align-items-center" href="../forms/form-control/#sizing">Documentation"), 659 ), 660 661 H5Div( 662 H5Div(["bd-example"> 663 H5Div(["mb-3"> 664 <input class="form-control form-control-lg" "type":"text" "placeholder":".form-control-lg", "aria-label":".form-control-lg example"> 665 ), 666 H5Div(["mb-3"> 667 <select class="form-select form-select-lg mb-3", "aria-label":".form-select-lg example"> 668 <option selected>Open this select menu</option> 669 <option value="1">One</option> 670 <option value="2">Two</option> 671 <option value="3">Three</option> 672 </select> 673 ), 674 H5Div(["mb-3"> 675 <input "type":"file" class="form-control form-control-lg", "aria-label":"Large file input example"> 676 ), 677 ), 678 679 H5Div(["bd-example"> 680 H5Div(["mb-3"> 681 <input class="form-control form-control-sm" "type":"text" "placeholder":".form-control-sm", "aria-label":".form-control-sm example"> 682 ), 683 H5Div(["mb-3"> 684 <select class="form-select form-select-sm", "aria-label":".form-select-sm example"> 685 <option selected>Open this select menu</option> 686 <option value="1">One</option> 687 <option value="2">Two</option> 688 <option value="3">Three</option> 689 </select> 690 ), 691 H5Div(["mb-3"> 692 <input "type":"file" class="form-control form-control-sm", "aria-label":"Small file input example"> 693 ), 694 ), 695 ), 696 </article> 697 H5A(["my-3" id="input-group"> 698 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 699 H5H3("Input group"), 700 H5A(["d-flex align-items-center" href="../forms/input-group/">Documentation"), 701 ), 702 703 H5Div( 704 H5Div(["bd-example"], 705 H5Div(["input-group mb-3"], 706 <span class="input-group-text" id="basic-addon1">@"), 707 <input "type":"text" class="form-control" "placeholder":"Username", "aria-label":"Username" aria-describedby="basic-addon1"> 708 ), 709 H5Div(["input-group mb-3"], 710 <input "type":"text" class="form-control" "placeholder":"Recipient's username", "aria-label":"Recipient's username" aria-describedby="basic-addon2"> 711 <span class="input-group-text" id="basic-addon2">@example.com"), 712 ), 713 <label for="basic-url" class="form-label">Your vanity URL</label> 714 H5Div(["input-group mb-3"], 715 <span class="input-group-text" id="basic-addon3">https://example.com/users/"), 716 <input "type":"text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> 717 ), 718 H5Div(["input-group mb-3"], 719 <span class="input-group-text">$"), 720 <input "type":"text" class="form-control", "aria-label":"Amount (to the nearest dollar)"> 721 <span class="input-group-text">.00"), 722 ), 723 H5Div(["input-group"], 724 <span class="input-group-text">With textarea"), 725 <textarea class="form-control", "aria-label":"With textarea"></textarea> 726 ), 727 ), 728 ), 729 </article], 730 H5A(["my-3" id="floating-labels"> 731 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 732 H5H3("Floating labels"), 733 H5A(["d-flex align-items-center" href="../forms/floating-labels/">Documentation"), 734 ), 735 736 H5Div( 737 H5Div(["bd-example"], 738 <form> 739 H5Div(["form-floating mb-3"], 740 BS5InputEmail("floatingInput", ["placeholder":"name@example.com"]), 741 <label for="floatingInput">Email address</label> 742 ), 743 H5Div(["form-floating"> 744 <input "type":"password" class="form-control" id="floatingPassword" "placeholder":"Password"> 745 <label for="floatingPassword">Password</label> 746 ), 747 ) 748 ), 749 ), 750 </article> 751 H5A(["my-3" id="validation"> 752 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 753 H5H3("Validation"), 754 H5A(["d-flex align-items-center" href="../forms/validation/">Documentation"), 755 ), 756 757 H5Div( 758 H5Div(["bd-example"> 759 H5Form(["row g-3"> 760 H5Div(["col-md-4"> 761 <label for="validationServer01" class="form-label">First name</label> 762 <input "type":"text" class="form-control is-valid" id="validationServer01" value="Mark" required> 763 H5Div(["valid-feedback"> 764 Looks good! 765 ), 766 ), 767 H5Div(["col-md-4"> 768 <label for="validationServer02" class="form-label">Last name</label> 769 <input "type":"text" class="form-control is-valid" id="validationServer02" value="Otto" required> 770 H5Div(["valid-feedback"> 771 Looks good! 772 ), 773 ), 774 H5Div(["col-md-4"> 775 <label for="validationServerUsername" class="form-label">Username</label> 776 H5Div(["input-group has-validation"> 777 <span class="input-group-text" id="inputGroupPrepend3">@"), 778 <input "type":"text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> 779 H5Div(["invalid-feedback"> 780 Please choose a username. 781 ), 782 ), 783 ), 784 H5Div(["col-md-6"> 785 <label for="validationServer03" class="form-label">City</label> 786 <input "type":"text" class="form-control is-invalid" id="validationServer03" required> 787 H5Div(["invalid-feedback"> 788 Please provide a valid city. 789 ), 790 ), 791 H5Div(["col-md-3"> 792 <label for="validationServer04" class="form-label">State</label> 793 <select class="form-select is-invalid" id="validationServer04" required> 794 <option selected disabled value="">Choose...</option> 795 <option>...</option> 796 </select> 797 H5Div(["invalid-feedback"> 798 Please select a valid state. 799 ), 800 ), 801 H5Div(["col-md-3"> 802 <label for="validationServer05" class="form-label">Zip</label> 803 <input "type":"text" class="form-control is-invalid" id="validationServer05" required> 804 H5Div(["invalid-feedback"> 805 Please provide a valid zip. 806 ), 807 ), 808 H5Div(["col-12"> 809 H5Div(["form-check"> 810 <input class="form-check-input is-invalid" "type":"checkbox" value="" id="invalidCheck3" required> 811 <label class="form-check-label" for="invalidCheck3"> 812 Agree to terms and conditions 813 </label> 814 H5Div(["invalid-feedback"> 815 You must agree before submitting. 816 ), 817 ), 818 ), 819 H5Div(["col-12"> 820 H5Button(["btn btn-primary" "type":"submit">Submit form) 821 ), 822 ) 823 ), 824 ), 825 </article> 826 </section> 827 828 <section id="components"> 829 H5H2(["sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Components") 830 831 H5A(["my-3" id="accordion"> 832 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 833 H5H3("Accordion"), 834 H5A(["d-flex align-items-center" href="../components/accordion/">Documentation"), 835 ), 836 837 H5Div( 838 H5Div(["bd-example"> 839 H5Div(["accordion" id="accordionExample"> 840 H5Div(["accordion-item"> 841 H5H4(["accordion-header" id="headingOne"> 842 H5Button(["accordion-button" "type":"button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 843 Accordion Item #1 844 ) 845 </h4> 846 <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> 847 H5Div(["accordion-body"> 848 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 849 ), 850 ), 851 ), 852 H5Div(["accordion-item"> 853 H5H4(["accordion-header" id="headingTwo"> 854 H5Button(["accordion-button collapsed" "type":"button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 855 Accordion Item #2 856 ) 857 </h4> 858 <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> 859 H5Div(["accordion-body"> 860 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 861 ), 862 ), 863 ), 864 H5Div(["accordion-item"> 865 H5H4(["accordion-header" id="headingThree"> 866 H5Button(["accordion-button collapsed" "type":"button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 867 Accordion Item #3 868 ) 869 </h4> 870 <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> 871 H5Div(["accordion-body"> 872 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 873 ), 874 ), 875 ), 876 ), 877 ), 878 ), 879 </article> 880 H5A(["my-3" id="alerts"> 881 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 882 H5H3("Alerts"), 883 H5A(["d-flex align-items-center" href="../components/alerts/">Documentation"), 884 ), 885 886 H5Div( 887 H5Div(["bd-example"> 888 889 H5Div(["alert alert-primary alert-dismissible fade show" "role":"alert"> 890 A simple primary alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 891 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 892 ), 893 H5Div(["alert alert-secondary alert-dismissible fade show" "role":"alert"> 894 A simple secondary alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 895 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 896 ), 897 H5Div(["alert alert-success alert-dismissible fade show" "role":"alert"> 898 A simple success alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 899 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 900 ), 901 H5Div(["alert alert-danger alert-dismissible fade show" "role":"alert"> 902 A simple danger alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 903 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 904 ), 905 H5Div(["alert alert-warning alert-dismissible fade show" "role":"alert"> 906 A simple warning alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 907 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 908 ), 909 H5Div(["alert alert-info alert-dismissible fade show" "role":"alert"> 910 A simple info alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 911 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 912 ), 913 H5Div(["alert alert-light alert-dismissible fade show" "role":"alert"> 914 A simple light alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 915 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 916 ), 917 H5Div(["alert alert-dark alert-dismissible fade show" "role":"alert"> 918 A simple dark alert with <a "href":"#" class="alert-link">an example link"),. Give it a click if you like. 919 <button "type":"button" class="btn-close" data-bs-dismiss="alert", "aria-label":"Close">) 920 ), 921 ), 922 923 H5Div(["bd-example"> 924 H5Div(["alert alert-success" "role":"alert"> 925 H5H4(["alert-heading">Well done!</h4> 926 H5P("Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.") 927 H5Hr, 928 H5P(["mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.") 929 ), 930 ), 931 ), 932 </article> 933 H5A(["my-3" id="badge"> 934 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 935 H5H3("Badge"), 936 H5A(["d-flex align-items-center" href="../components/badge/">Documentation"), 937 ), 938 939 H5Div( 940 H5Div(["bd-example"> 941 H5P(["h1">Example heading <span class="badge bg-primary">New"),") 942 H5P(["h2">Example heading <span class="badge bg-secondary">New"),") 943 H5P(["h3">Example heading <span class="badge bg-success">New"),") 944 H5P(["h4">Example heading <span class="badge bg-danger">New"),") 945 H5P(["h5">Example heading <span class="badge bg-warning text-dark">New"),") 946 H5P(["h6">Example heading <span class="badge bg-info text-dark">New"),") 947 H5P(["h6">Example heading <span class="badge bg-light text-dark">New"),") 948 H5P(["h6">Example heading <span class="badge bg-dark">New"),") 949 ), 950 951 H5Div(["bd-example"> 952 953 <span class="badge rounded-pill bg-primary">Primary"), 954 <span class="badge rounded-pill bg-secondary">Secondary"), 955 <span class="badge rounded-pill bg-success">Success"), 956 <span class="badge rounded-pill bg-danger">Danger"), 957 <span class="badge rounded-pill bg-warning text-dark">Warning"), 958 <span class="badge rounded-pill bg-info text-dark">Info"), 959 <span class="badge rounded-pill bg-light text-dark">Light"), 960 <span class="badge rounded-pill bg-dark">Dark"), 961 ), 962 ), 963 </article> 964 H5A("breadcrumb", ["my-3"], 965 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 966 H5H3("Breadcrumb"), 967 H5A(["d-flex align-items-center" href="../components/breadcrumb/">Documentation"), 968 ), 969 970 H5Div( 971 H5Div(["bd-example"], 972 H5Nav(["aria-label":"breadcrumb"], 973 BS5Breadcrumb( 974 BS5BreadcrumbItem(H5A(["href":"#"], Home")), 975 BS5BreadcrumbItem(H5A(["href":"#"], Library")), 976 BS5BreadcrumbItem(["active"], ["aria-current":"page"], "Data") 977 ) 978 ) 979 ) 980 ) 981 </article> 982 H5A(["my-3" id="buttons"> 983 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 984 H5H3("Buttons"), 985 H5A(["d-flex align-items-center" href="../components/buttons/">Documentation"), 986 ), 987 988 H5Div( 989 H5Div(["bd-example"> 990 991 BS5Button(["btn-primary">Primary) 992 BS5Button(["btn-secondary">Secondary) 993 BS5Button(["btn-success">Success) 994 BS5Button(["btn-danger">Danger) 995 BS5Button(["btn-warning">Warning) 996 BS5Button(["btn-info">Info) 997 BS5Button(["btn-light">Light) 998 BS5Button(["btn-dark">Dark) 999 1000 BS5Button(["btn-link">Link) 1001 ), 1002 1003 H5Div(["bd-example"> 1004 1005 BS5Button(["btn-outline-primary">Primary) 1006 BS5Button(["btn-outline-secondary">Secondary) 1007 BS5Button(["btn-outline-success">Success) 1008 BS5Button(["btn-outline-danger">Danger) 1009 BS5Button(["btn-outline-warning">Warning) 1010 BS5Button(["btn-outline-info">Info) 1011 BS5Button(["btn-outline-light">Light) 1012 BS5Button(["btn-outline-dark">Dark) 1013 ), 1014 1015 H5Div(["bd-example"> 1016 BS5Button(["btn-primary btn-sm">Small button) 1017 BS5Button(["btn-primary">Standard button) 1018 BS5Button(["btn-primary btn-lg">Large button) 1019 ), 1020 ), 1021 </article> 1022 H5A(["my-3" id="button-group"> 1023 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1024 H5H3("Button group"), 1025 H5A(["d-flex align-items-center" href="../components/button-group/">Documentation"), 1026 ), 1027 1028 H5Div( 1029 H5Div(["bd-example"> 1030 H5Div(["btn-toolbar" "role":"toolbar", "aria-label":"Toolbar with button groups"> 1031 H5Div(["btn-group me-2" "role":"group", "aria-label":"First group"> 1032 BS5Button(["btn-secondary">1) 1033 BS5Button(["btn-secondary">2) 1034 BS5Button(["btn-secondary">3) 1035 BS5Button(["btn-secondary">4) 1036 ), 1037 H5Div(["btn-group me-2" "role":"group", "aria-label":"Second group"> 1038 BS5Button(["btn-secondary">5) 1039 BS5Button(["btn-secondary">6) 1040 BS5Button(["btn-secondary">7) 1041 ), 1042 H5Div(["btn-group" "role":"group", "aria-label":"Third group"> 1043 BS5Button(["btn-secondary">8) 1044 ), 1045 ), 1046 ), 1047 ), 1048 </article> 1049 H5A(["my-3" id="card"> 1050 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1051 H5H3("Card"), 1052 H5A(["d-flex align-items-center" href="../components/card/">Documentation"), 1053 ), 1054 1055 H5Div( 1056 H5Div(["bd-example"> 1057 H5Div(["row row-cols-1 row-cols-md-2 g-4"> 1058 H5Div(["col"> 1059 BS5Card( 1060 H5Svg(["bd-placeholder-img card-img-top" "width":"100%" "height":"180" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg> 1061 1062 BS5CardBody( 1063 BS5CardTitle("Card title"), 1064 BS5CardText("Some quick example text to build on the card title and make up the bulk of the card's content.") 1065 <a "href":"#" class="btn btn-primary">Go somewhere"), 1066 ), 1067 ), 1068 ), 1069 H5Div(["col"> 1070 BS5Card( 1071 H5Div(["card-header"> 1072 Featured 1073 ), 1074 BS5CardBody( 1075 BS5CardTitle("Card title"), 1076 BS5CardText("Some quick example text to build on the card title and make up the bulk of the card's content.") 1077 <a "href":"#" class="btn btn-primary">Go somewhere"), 1078 ), 1079 H5Div(["card-footer text-muted"> 1080 2 days ago 1081 ), 1082 ), 1083 ), 1084 H5Div(["col"> 1085 BS5Card( 1086 BS5CardBody( 1087 BS5CardTitle("Card title"), 1088 BS5CardText("Some quick example text to build on the card title and make up the bulk of the card's content.") 1089 ), 1090 H5Ul(["list-group list-group-flush"> 1091 <li class="list-group-item">Cras justo odio), 1092 <li class="list-group-item">Dapibus ac facilisis in), 1093 <li class="list-group-item">Vestibulum at eros), 1094 ), 1095 BS5CardBody( 1096 <a "href":"#" class="card-link">Card link"), 1097 <a "href":"#" class="card-link">Another link"), 1098 ), 1099 ), 1100 ), 1101 H5Div(["col"> 1102 BS5Card( 1103 H5Div(["row g-0"> 1104 H5Div(["col-md-4"> 1105 H5Svg(["bd-placeholder-img" "width":"100%" "height":"250" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg> 1106 1107 ), 1108 H5Div(["col-md-8"> 1109 BS5CardBody( 1110 BS5CardTitle("Card title"), 1111 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.") 1112 BS5CardText("<small class="text-muted">Last updated 3 mins ago"),") 1113 ), 1114 ), 1115 ), 1116 ), 1117 ), 1118 ), 1119 ), 1120 ), 1121 </article> 1122 H5A(["my-3" id="carousel"> 1123 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1124 H5H3("Carousel"), 1125 H5A(["d-flex align-items-center" href="../components/carousel/">Documentation"), 1126 ), 1127 1128 H5Div( 1129 H5Div(["bd-example"> 1130 <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> 1131 <ol class="carousel-indicators"> 1132 <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active">), 1133 <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1">), 1134 <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2">), 1135 ), 1136 H5Div(["carousel-inner"> 1137 H5Div(["carousel-item active"> 1138 H5Svg(["bd-placeholder-img bd-placeholder-img-lg d-block w-100" "width":"800" "height":"400" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg> 1139 1140 H5Div(["carousel-caption d-none d-md-block"> 1141 <h5>First slide label"), 1142 H5P("Nulla vitae elit libero, a pharetra augue mollis interdum.") 1143 ), 1144 ), 1145 H5Div(["carousel-item"> 1146 H5Svg(["bd-placeholder-img bd-placeholder-img-lg d-block w-100" "width":"800" "height":"400" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg> 1147 1148 H5Div(["carousel-caption d-none d-md-block"> 1149 <h5>Second slide label"), 1150 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit.") 1151 ), 1152 ), 1153 H5Div(["carousel-item"> 1154 H5Svg(["bd-placeholder-img bd-placeholder-img-lg d-block w-100" "width":"800" "height":"400" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg> 1155 1156 H5Div(["carousel-caption d-none d-md-block"> 1157 <h5>Third slide label"), 1158 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur.") 1159 ), 1160 ), 1161 ), 1162 H5A(["carousel-control-prev" href="#carouselExampleCaptions" "role":"button" data-bs-slide="prev"> 1163 <span class="carousel-control-prev-icon" aria-hidden="true">"), 1164 <span class="visually-hidden">Previous"), 1165 "), 1166 H5A(["carousel-control-next" href="#carouselExampleCaptions" "role":"button" data-bs-slide="next"> 1167 <span class="carousel-control-next-icon" aria-hidden="true">"), 1168 <span class="visually-hidden">Next"), 1169 "), 1170 ), 1171 ), 1172 ), 1173 </article> 1174 H5A(["my-3" id="dropdowns"> 1175 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1176 H5H3("Dropdowns"), 1177 H5A(["d-flex align-items-center" href="../components/dropdowns/">Documentation"), 1178 ), 1179 1180 H5Div( 1181 H5Div(["bd-example"> 1182 H5Div(["btn-group w-100 align-items-center justify-content-between flex-wrap"> 1183 H5Div(["dropdown"> 1184 H5Button(["btn btn-secondary btn-sm dropdown-toggle" "type":"button" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false"> 1185 Dropdown button 1186 ) 1187 H5Ul(["dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> 1188 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1189 H5Li("BS5DropdownItem(["href":"#"], Action")), 1190 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1191 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1192 H5Li("<hr class="dropdown-divider">), 1193 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1194 ), 1195 ), 1196 H5Div(["dropdown"> 1197 H5Button(["btn btn-secondary dropdown-toggle" "type":"button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> 1198 Dropdown button 1199 ) 1200 H5Ul(["dropdown-menu" aria-labelledby="dropdownMenuButton"> 1201 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1202 H5Li("BS5DropdownItem(["href":"#"], Action")), 1203 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1204 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1205 H5Li("<hr class="dropdown-divider">), 1206 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1207 ), 1208 ), 1209 H5Div(["dropdown"> 1210 H5Button(["btn btn-secondary btn-lg dropdown-toggle" "type":"button" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false"> 1211 Dropdown button 1212 ) 1213 H5Ul(["dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> 1214 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1215 H5Li("BS5DropdownItem(["href":"#"], Action")), 1216 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1217 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1218 H5Li("<hr class="dropdown-divider">), 1219 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1220 ), 1221 ), 1222 ), 1223 ), 1224 1225 H5Div(["bd-example"> 1226 H5Div(["btn-group"> 1227 BS5Button(["btn-primary">Primary) 1228 BS5Button(["btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 1229 <span class="visually-hidden">Toggle Dropdown"), 1230 ) 1231 H5Ul(["dropdown-menu"> 1232 H5Li("BS5DropdownItem(["href":"#"], Action")), 1233 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1234 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1235 ), 1236 ),<!-- /btn-group --> 1237 H5Div(["btn-group"> 1238 BS5Button(["btn-secondary">Secondary) 1239 BS5Button(["btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 1240 <span class="visually-hidden">Toggle Dropdown"), 1241 ) 1242 H5Ul(["dropdown-menu"> 1243 H5Li("BS5DropdownItem(["href":"#"], Action")), 1244 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1245 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1246 ), 1247 ),<!-- /btn-group --> 1248 H5Div(["btn-group"> 1249 BS5Button(["btn-success">Success) 1250 BS5Button(["btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 1251 <span class="visually-hidden">Toggle Dropdown"), 1252 ) 1253 H5Ul(["dropdown-menu"> 1254 H5Li("BS5DropdownItem(["href":"#"], Action")), 1255 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1256 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1257 ), 1258 ),<!-- /btn-group --> 1259 H5Div(["btn-group"> 1260 BS5Button(["btn-info">Info) 1261 BS5Button(["btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 1262 <span class="visually-hidden">Toggle Dropdown"), 1263 ) 1264 H5Ul(["dropdown-menu"> 1265 H5Li("BS5DropdownItem(["href":"#"], Action")), 1266 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1267 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1268 ), 1269 ),<!-- /btn-group --> 1270 H5Div(["btn-group"> 1271 BS5Button(["btn-warning">Warning) 1272 BS5Button(["btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 1273 <span class="visually-hidden">Toggle Dropdown"), 1274 ) 1275 H5Ul(["dropdown-menu"> 1276 H5Li("BS5DropdownItem(["href":"#"], Action")), 1277 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1278 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1279 ), 1280 ),<!-- /btn-group --> 1281 H5Div(["btn-group"> 1282 BS5Button(["btn-danger">Danger) 1283 BS5Button(["btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 1284 <span class="visually-hidden">Toggle Dropdown"), 1285 ) 1286 H5Ul(["dropdown-menu"> 1287 H5Li("BS5DropdownItem(["href":"#"], Action")), 1288 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1289 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1290 ), 1291 ),<!-- /btn-group --> 1292 ), 1293 1294 H5Div(["bd-example"> 1295 H5Div(["btn-group w-100 align-items-center justify-content-between flex-wrap"> 1296 H5Div(["dropend"> 1297 H5Button(["btn btn-secondary dropdown-toggle" "type":"button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> 1298 Dropend button 1299 ) 1300 H5Ul(["dropdown-menu" aria-labelledby="dropendMenuButton"> 1301 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1302 H5Li("BS5DropdownItem(["href":"#"], Action")), 1303 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1304 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1305 H5Li("<hr class="dropdown-divider">), 1306 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1307 ), 1308 ), 1309 H5Div(["dropup"> 1310 H5Button(["btn btn-secondary dropdown-toggle" "type":"button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> 1311 Dropup button 1312 ) 1313 H5Ul(["dropdown-menu" aria-labelledby="dropupMenuButton"> 1314 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1315 H5Li("BS5DropdownItem(["href":"#"], Action")), 1316 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1317 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1318 H5Li("<hr class="dropdown-divider">), 1319 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1320 ), 1321 ), 1322 H5Div(["dropstart"> 1323 H5Button(["btn btn-secondary dropdown-toggle" "type":"button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> 1324 Dropstart button 1325 ) 1326 H5Ul(["dropdown-menu" aria-labelledby="dropstartMenuButton"> 1327 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1328 H5Li("BS5DropdownItem(["href":"#"], Action")), 1329 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1330 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1331 H5Li("<hr class="dropdown-divider">), 1332 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1333 ), 1334 ), 1335 ), 1336 ), 1337 1338 H5Div(["bd-example"> 1339 H5Div(["btn-group"> 1340 H5Div(["dropdown"> 1341 H5Button(["btn btn-secondary dropdown-toggle" "type":"button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> 1342 End-aligned menu 1343 ) 1344 H5Ul(["dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton"> 1345 H5Li("<h6 class="dropdown-header">Dropdown header</h6>), 1346 H5Li("BS5DropdownItem(["href":"#"], Action")), 1347 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1348 H5Li("<hr class="dropdown-divider">), 1349 H5Li("BS5DropdownItem(["href":"#"], Separated link")), 1350 ), 1351 ), 1352 ), 1353 ), 1354 ), 1355 </article> 1356 H5A(["my-3" id="list-group"> 1357 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1358 H5H3("List group"), 1359 H5A(["d-flex align-items-center" href="../components/list-group/">Documentation"), 1360 ), 1361 1362 H5Div( 1363 H5Div(["bd-example"> 1364 H5Ul(["list-group"> 1365 <li class="list-group-item active" aria-current="true">Cras justo odio), 1366 <li class="list-group-item disabled" aria-disabled="true">Dapibus ac facilisis in), 1367 <li class="list-group-item">Morbi leo risus), 1368 <li class="list-group-item">Porta ac consectetur ac), 1369 <li class="list-group-item">Vestibulum at eros), 1370 ), 1371 ), 1372 1373 H5Div(["bd-example"> 1374 H5Ul(["list-group list-group-flush"> 1375 <li class="list-group-item">Cras justo odio), 1376 <li class="list-group-item">Dapibus ac facilisis in), 1377 <li class="list-group-item">Morbi leo risus), 1378 <li class="list-group-item">Porta ac consectetur ac), 1379 <li class="list-group-item">Vestibulum at eros), 1380 ), 1381 ), 1382 1383 H5Div(["bd-example"> 1384 H5Div(["list-group"> 1385 <a "href":"#" class="list-group-item list-group-item-action">Dapibus ac facilisis in"), 1386 1387 <a "href":"#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item"), 1388 <a "href":"#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item"), 1389 <a "href":"#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item"), 1390 <a "href":"#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item"), 1391 <a "href":"#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item"), 1392 <a "href":"#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item"), 1393 <a "href":"#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item"), 1394 <a "href":"#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item"), 1395 ), 1396 ), 1397 ), 1398 </article> 1399 H5A(["my-3" id="modal"> 1400 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1401 H5H3("Modal"), 1402 H5A(["d-flex align-items-center" href="../components/modal/">Documentation"), 1403 ), 1404 1405 H5Div( 1406 H5Div(["bd-example"> 1407 H5Div(["d-flex justify-content-between flex-wrap"> 1408 BS5Button(["btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault"> 1409 Launch demo modal 1410 ) 1411 BS5Button(["btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> 1412 Launch static backdrop modal 1413 ) 1414 BS5Button(["btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable"> 1415 Vertically centered scrollable modal 1416 ) 1417 BS5Button(["btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen"> 1418 Full screen 1419 ) 1420 ), 1421 ), 1422 ), 1423 </article> 1424 H5A(["my-3" id="navs"> 1425 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1426 H5H3("Navs"), 1427 H5A(["d-flex align-items-center" href="../components/navs-tabs/">Documentation"), 1428 ), 1429 1430 H5Div( 1431 H5Div(["bd-example"> 1432 H5Nav(["nav"> 1433 BS5NavLink(["active" aria-current="page"], ["href":"#"], Active"), 1434 BS5NavLink( "href":"#"], Link"), 1435 BS5NavLink( "href":"#"], Link"), 1436 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 1437 ), 1438 ), 1439 1440 H5Div(["bd-example"> 1441 <nav> 1442 H5Div(["nav nav-tabs mb-3" id="nav-tab" "role":"tablist"> 1443 BS5NavLink(["active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" "role":"tab" aria-controls="nav-home" aria-selected="true">Home"), 1444 BS5NavLink( id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" "role":"tab" aria-controls="nav-profile" aria-selected="false">Profile"), 1445 BS5NavLink( id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" "role":"tab" aria-controls="nav-contact" aria-selected="false">Contact"), 1446 ), 1447 ), 1448 H5Div(["tab-content" id="nav-tabContent"> 1449 H5Div(["tab-pane fade show active" id="nav-home" "role":"tabpanel" aria-labelledby="nav-home-tab"> 1450 H5P(["px-3">Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.") 1451 ), 1452 H5Div(["tab-pane fade" id="nav-profile" "role":"tabpanel" aria-labelledby="nav-profile-tab"> 1453 H5P(["px-3">Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.") 1454 ), 1455 H5Div(["tab-pane fade" id="nav-contact" "role":"tabpanel" aria-labelledby="nav-contact-tab"> 1456 H5P(["px-3">Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.") 1457 ), 1458 ), 1459 ), 1460 1461 H5Div(["bd-example"> 1462 H5Ul(["nav nav-pills"> 1463 BS5NavItem( 1464 BS5NavLink(["active" aria-current="page"], ["href":"#"], Active"), 1465 ), 1466 BS5NavItem( 1467 BS5NavLink( "href":"#"], Link"), 1468 ), 1469 BS5NavItem( 1470 BS5NavLink( "href":"#"], Link"), 1471 ), 1472 BS5NavItem( 1473 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 1474 ), 1475 ), 1476 ), 1477 ), 1478 </article> 1479 H5A(["my-3" id="navbar"> 1480 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1481 H5H3("Navbar"), 1482 H5A(["d-flex align-items-center" href="../components/navbar/">Documentation"), 1483 ), 1484 1485 H5Div( 1486 H5Div(["bd-example"> 1487 H5Nav(["navbar navbar-expand-lg navbar-light bg-light"> 1488 H5Div(["container-fluid"> 1489 H5A(["navbar-brand"], ["href":"#"], 1490 <img src="../assets/brand/bootstrap-logo-white.svg" "width":"38" "height":"30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" 1491 style="filter: invert(1) grayscale(100%) brightness(200%);"> 1492 "), 1493 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false", "aria-label":"Toggle navigation"> 1494 H5Span(["navbar-toggler-icon"]) 1495 ) 1496 H5Div(["collapse navbar-collapse" id="navbarSupportedContent"> 1497 BS5NavbarNav(["me-auto mb-2 mb-lg-0"> 1498 BS5NavItem( 1499 BS5NavLink(["active" aria-current="page"], ["href":"#"], Home"), 1500 ), 1501 BS5NavItem( 1502 BS5NavLink( "href":"#"], Link"), 1503 ), 1504 BS5NavItem(["dropdown"> 1505 BS5NavLink(["dropdown-toggle"], ["href":"#" id="navbarDropdown" "role":"button" data-bs-toggle="dropdown" aria-expanded="false"> 1506 Dropdown 1507 "), 1508 H5Ul(["dropdown-menu" aria-labelledby="navbarDropdown"> 1509 H5Li("BS5DropdownItem(["href":"#"], Action")), 1510 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1511 H5Li("<hr class="dropdown-divider">), 1512 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1513 ), 1514 ), 1515 BS5NavItem( 1516 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 1517 ), 1518 ), 1519 H5Form(["d-flex"> 1520 <input class="form-control me-2" "type":"search" "placeholder":"Search", "aria-label":"Search"> 1521 BS5ButtonSubmit(["btn-outline-dark"], "Search") 1522 ) 1523 ), 1524 ), 1525 ), 1526 1527 H5Nav(["navbar navbar-expand-lg navbar-dark bg-primary mt-5"> 1528 H5Div(["container-fluid"> 1529 H5A(["navbar-brand"], ["href":"#"], 1530 <img src="../assets/brand/bootstrap-logo-white.svg" "width":"38" "height":"30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"> 1531 "), 1532 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false", "aria-label":"Toggle navigation"> 1533 H5Span(["navbar-toggler-icon"]) 1534 ) 1535 H5Div(["collapse navbar-collapse" id="navbarSupportedContent2"> 1536 BS5NavbarNav(["me-auto mb-2 mb-lg-0"> 1537 BS5NavItem( 1538 BS5NavLink(["active" aria-current="page"], ["href":"#"], Home"), 1539 ), 1540 BS5NavItem( 1541 BS5NavLink( "href":"#"], Link"), 1542 ), 1543 BS5NavItem(["dropdown"> 1544 BS5NavLink(["dropdown-toggle"], ["href":"#" id="navbarDropdown2" "role":"button" data-bs-toggle="dropdown" aria-expanded="false"> 1545 Dropdown 1546 "), 1547 H5Ul(["dropdown-menu" aria-labelledby="navbarDropdown2"> 1548 H5Li("BS5DropdownItem(["href":"#"], Action")), 1549 H5Li("BS5DropdownItem(["href":"#"], Another action")), 1550 H5Li("<hr class="dropdown-divider">), 1551 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 1552 ), 1553 ), 1554 BS5NavItem( 1555 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 1556 ), 1557 ), 1558 H5Form(["d-flex"> 1559 <input class="form-control me-2" "type":"search" "placeholder":"Search", "aria-label":"Search"> 1560 H5Button(["btn btn-outline-light" "type":"submit">Search) 1561 ) 1562 ), 1563 ), 1564 ), 1565 ), 1566 ), 1567 </article> 1568 H5A(["my-3" id="pagination"> 1569 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1570 H5H3("Pagination"), 1571 H5A(["d-flex align-items-center" href="../components/pagination/">Documentation"), 1572 ), 1573 1574 H5Div( 1575 H5Div(["bd-example"> 1576 <nav "aria-label":"Pagination example"> 1577 H5Ul(["pagination pagination-sm"> 1578 <li class="page-item">H5A(["page-link"], ["href":"#"], 1")), 1579 <li class="page-item active" aria-current="page"> 1580 H5A(["page-link"], ["href":"#"], 2 <span class="visually-hidden">(current)"),"), 1581 ), 1582 <li class="page-item">H5A(["page-link"], ["href":"#"], 3")), 1583 ), 1584 ), 1585 ), 1586 1587 H5Div(["bd-example"> 1588 <nav "aria-label":"Standard pagination example"> 1589 H5Ul(["pagination"> 1590 <li class="page-item"> 1591 H5A(["page-link"], ["href":"#", "aria-label":"Previous"> 1592 <span aria-hidden="true">«"), 1593 "), 1594 ), 1595 <li class="page-item">H5A(["page-link"], ["href":"#"], 1")), 1596 <li class="page-item">H5A(["page-link"], ["href":"#"], 2")), 1597 <li class="page-item">H5A(["page-link"], ["href":"#"], 3")), 1598 <li class="page-item"> 1599 H5A(["page-link"], ["href":"#", "aria-label":"Next"> 1600 <span aria-hidden="true">»"), 1601 "), 1602 ), 1603 ), 1604 ), 1605 ), 1606 1607 H5Div(["bd-example"> 1608 <nav "aria-label":"Another pagination example"> 1609 H5Ul(["pagination pagination-lg flex-wrap"> 1610 <li class="page-item disabled"> 1611 H5A(["page-link"], ["href":"#" tabindex="-1" aria-disabled="true">Previous"), 1612 ), 1613 <li class="page-item">H5A(["page-link"], ["href":"#"], 1")), 1614 <li class="page-item active" aria-current="page"> 1615 H5A(["page-link"], ["href":"#"], 2 <span class="visually-hidden">(current)"),"), 1616 ), 1617 <li class="page-item">H5A(["page-link"], ["href":"#"], 3")), 1618 <li class="page-item"> 1619 H5A(["page-link"], ["href":"#"], Next"), 1620 ), 1621 ), 1622 ), 1623 ), 1624 ), 1625 </article> 1626 H5A(["my-3" id="popovers"> 1627 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1628 H5H3("Popovers"), 1629 H5A(["d-flex align-items-center" href="../components/popovers/">Documentation"), 1630 ), 1631 1632 H5Div( 1633 H5Div(["bd-example"> 1634 BS5Button(["btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover) 1635 ), 1636 1637 H5Div(["bd-example"> 1638 BS5Button(["btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 1639 Popover on top 1640 ) 1641 BS5Button(["btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 1642 Popover on end 1643 ) 1644 BS5Button(["btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 1645 Popover on bottom 1646 ) 1647 BS5Button(["btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 1648 Popover on start 1649 ) 1650 ), 1651 ), 1652 </article> 1653 H5A(["my-3" id="progress"> 1654 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1655 H5H3("Progress"), 1656 H5A(["d-flex align-items-center" href="../components/progress/">Documentation"), 1657 ), 1658 1659 H5Div( 1660 H5Div(["bd-example"> 1661 H5Div(["progress mb-3"> 1662 H5Div(["progress-bar" "role":"progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%), 1663 ), 1664 H5Div(["progress mb-3"> 1665 H5Div(["progress-bar bg-success w-25" "role":"progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%), 1666 ), 1667 H5Div(["progress mb-3"> 1668 H5Div(["progress-bar bg-info text-dark w-50" "role":"progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%), 1669 ), 1670 H5Div(["progress mb-3"> 1671 H5Div(["progress-bar bg-warning text-dark w-75" "role":"progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%), 1672 ), 1673 H5Div(["progress"> 1674 H5Div(["progress-bar bg-danger w-100" "role":"progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%), 1675 ), 1676 ), 1677 1678 H5Div(["bd-example"> 1679 H5Div(["progress"> 1680 H5Div(["progress-bar" "role":"progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">), 1681 H5Div(["progress-bar progress-bar-striped progress-bar-animated bg-success" "role":"progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">), 1682 ), 1683 ), 1684 ), 1685 </article> 1686 H5A(["my-3" id="scrollspy"> 1687 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1688 H5H3("Scrollspy"), 1689 H5A(["d-flex align-items-center" href="../components/scrollspy/">Documentation"), 1690 ), 1691 1692 H5Div( 1693 H5Div(["bd-example"> 1694 <nav id="navbar-example2" class="navbar navbar-light bg-light px-3"> 1695 H5A(["navbar-brand"], ["href":"#"], Navbar"), 1696 H5Ul(["nav nav-pills"> 1697 BS5NavItem( 1698 BS5NavLink( href="#fat">@fat"), 1699 ), 1700 BS5NavItem( 1701 BS5NavLink( href="#mdo">@mdo"), 1702 ), 1703 BS5NavItem(["dropdown"> 1704 BS5NavLink(["dropdown-toggle" data-bs-toggle="dropdown"], ["href":"#" "role":"button" aria-expanded="false">Dropdown"), 1705 H5Ul(["dropdown-menu"> 1706 H5Li("H5A(["dropdown-item" href="#one">one")), 1707 H5Li("H5A(["dropdown-item" href="#two">two")), 1708 H5Li("<hr class="dropdown-divider">), 1709 H5Li("H5A(["dropdown-item" href="#three">three")), 1710 ), 1711 ), 1712 ), 1713 ), 1714 <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"> 1715 <h4 id="fat">@fat</h4> 1716 H5P("Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.") 1717 <h4 id="mdo">@mdo</h4> 1718 H5P("Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.") 1719 <h4 id="one">one</h4> 1720 H5P("Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.") 1721 <h4 id="two">two</h4> 1722 H5P("In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.") 1723 <h4 id="three">three</h4> 1724 H5P("Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.") 1725 H5P("Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. 1726 ") 1727 ), 1728 ), 1729 ), 1730 </article> 1731 H5A(["my-3" id="spinners"> 1732 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1733 H5H3("Spinners"), 1734 H5A(["d-flex align-items-center" href="../components/spinners/">Documentation"), 1735 ), 1736 1737 H5Div( 1738 H5Div(["bd-example"> 1739 1740 H5Div(["spinner-border text-primary" "role":"status"> 1741 <span class="visually-hidden">Loading..."), 1742 ), 1743 H5Div(["spinner-border text-secondary" "role":"status"> 1744 <span class="visually-hidden">Loading..."), 1745 ), 1746 H5Div(["spinner-border text-success" "role":"status"> 1747 <span class="visually-hidden">Loading..."), 1748 ), 1749 H5Div(["spinner-border text-danger" "role":"status"> 1750 <span class="visually-hidden">Loading..."), 1751 ), 1752 H5Div(["spinner-border text-warning" "role":"status"> 1753 <span class="visually-hidden">Loading..."), 1754 ), 1755 H5Div(["spinner-border text-info" "role":"status"> 1756 <span class="visually-hidden">Loading..."), 1757 ), 1758 H5Div(["spinner-border text-light" "role":"status"> 1759 <span class="visually-hidden">Loading..."), 1760 ), 1761 H5Div(["spinner-border text-dark" "role":"status"> 1762 <span class="visually-hidden">Loading..."), 1763 ), 1764 ), 1765 1766 H5Div(["bd-example"> 1767 1768 H5Div(["spinner-grow text-primary" "role":"status"> 1769 <span class="visually-hidden">Loading..."), 1770 ), 1771 H5Div(["spinner-grow text-secondary" "role":"status"> 1772 <span class="visually-hidden">Loading..."), 1773 ), 1774 H5Div(["spinner-grow text-success" "role":"status"> 1775 <span class="visually-hidden">Loading..."), 1776 ), 1777 H5Div(["spinner-grow text-danger" "role":"status"> 1778 <span class="visually-hidden">Loading..."), 1779 ), 1780 H5Div(["spinner-grow text-warning" "role":"status"> 1781 <span class="visually-hidden">Loading..."), 1782 ), 1783 H5Div(["spinner-grow text-info" "role":"status"> 1784 <span class="visually-hidden">Loading..."), 1785 ), 1786 H5Div(["spinner-grow text-light" "role":"status"> 1787 <span class="visually-hidden">Loading..."), 1788 ), 1789 H5Div(["spinner-grow text-dark" "role":"status"> 1790 <span class="visually-hidden">Loading..."), 1791 ), 1792 ), 1793 ), 1794 </article> 1795 H5A(["my-3" id="toasts"> 1796 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1797 H5H3("Toasts"), 1798 H5A(["d-flex align-items-center" href="../components/toasts/">Documentation"), 1799 ), 1800 1801 H5Div( 1802 H5Div(["bd-example bg-dark p-5 align-items-center"> 1803 H5Div(["toast" "role":"alert" aria-live="assertive" aria-atomic="true"> 1804 H5Div(["toast-header"> 1805 H5Svg(["bd-placeholder-img rounded me-2" "width":"20" "height":"20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect "width":"100%" "height":"100%" fill="#007aff"/></svg> 1806 1807 H5Strong(["me-auto">Bootstrap") 1808 <small class="text-muted">11 mins ago"), 1809 <button "type":"button" class="btn-close" data-bs-dismiss="toast", "aria-label":"Close">) 1810 ), 1811 H5Div(["toast-body"> 1812 Hello, world! This is a toast message. 1813 ), 1814 ), 1815 ), 1816 ), 1817 </article> 1818 H5A(["mt-3 mb-5 pb-5" id="tooltips"> 1819 H5Div(["bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> 1820 H5H3("Tooltips"), 1821 H5A(["d-flex align-items-center" href="../components/tooltips/">Documentation"), 1822 ), 1823 1824 H5Div( 1825 H5Div(["bd-example tooltip-demo"> 1826 BS5Button(["btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top) 1827 BS5Button(["btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end) 1828 BS5Button(["btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom) 1829 BS5Button(["btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start) 1830 BS5Button(["btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML) 1831 ), 1832 ), 1833 </article> 1834 </section> 1835 ), 1836 1837 H5Div(["modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1838 H5Div(["modal-dialog"> 1839 H5Div(["modal-content"> 1840 H5Div(["modal-header"> 1841 H5H5(["modal-title" id="exampleModalLabel">Modal title"), 1842 <button "type":"button" class="btn-close" data-bs-dismiss="modal", "aria-label":"Close">) 1843 ), 1844 H5Div(["modal-body"> 1845 ... 1846 ), 1847 H5Div(["modal-footer"> 1848 BS5Button(["btn-secondary" data-bs-dismiss="modal">Close) 1849 BS5Button(["btn-primary">Save changes) 1850 ), 1851 ), 1852 ), 1853 ), 1854 H5Div(["modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> 1855 H5Div(["modal-dialog"> 1856 H5Div(["modal-content"> 1857 H5Div(["modal-header"> 1858 H5H5(["modal-title" id="staticBackdropLiveLabel">Modal title"), 1859 <button "type":"button" class="btn-close" data-bs-dismiss="modal", "aria-label":"Close">) 1860 ), 1861 H5Div(["modal-body"> 1862 H5P("I will not close if you click outside me. Don't even try to press escape key.") 1863 ), 1864 H5Div(["modal-footer"> 1865 BS5Button(["btn-secondary" data-bs-dismiss="modal">Close) 1866 BS5Button(["btn-primary">Understood) 1867 ), 1868 ), 1869 ), 1870 ), 1871 H5Div(["modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true"> 1872 H5Div(["modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable"> 1873 H5Div(["modal-content"> 1874 H5Div(["modal-header"> 1875 H5H5(["modal-title" id="exampleModalCenteredScrollableTitle">Modal title"), 1876 <button "type":"button" class="btn-close" data-bs-dismiss="modal", "aria-label":"Close">) 1877 ), 1878 H5Div(["modal-body"> 1879 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1880 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1881 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1882 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1883 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1884 ), 1885 H5Div(["modal-footer"> 1886 BS5Button(["btn-secondary" data-bs-dismiss="modal">Close) 1887 BS5Button(["btn-primary">Save changes) 1888 ), 1889 ), 1890 ), 1891 ), 1892 H5Div(["modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true"> 1893 H5Div(["modal-dialog modal-fullscreen"> 1894 H5Div(["modal-content"> 1895 H5Div(["modal-header"> 1896 H5H5(["modal-title h4" id="exampleModalFullscreenLabel">Full screen modal"), 1897 <button "type":"button" class="btn-close" data-bs-dismiss="modal", "aria-label":"Close">) 1898 ), 1899 H5Div(["modal-body"> 1900 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1901 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1902 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1903 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1904 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1905 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1906 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1907 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1908 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1909 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1910 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1911 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1912 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1913 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1914 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1915 H5P("Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 1916 H5P("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.") 1917 H5P("Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.") 1918 ), 1919 H5Div(["modal-footer"> 1920 BS5Button(["btn-secondary" data-bs-dismiss="modal">Close) 1921 ), 1922 ), 1923 ), 1924 ), 1925 <script> 1926 /* global bootstrap: false */ 1927 1928 (function () { 1929 'use strict' 1930 1931 // Tooltip and popover demos 1932 document.querySelectorAll('.tooltip-demo') 1933 .forEach(function (tooltip) { 1934 new bootstrap.Tooltip(tooltip, { 1935 selector: '[data-bs-toggle="tooltip"]' 1936 }) 1937 }) 1938 1939 document.querySelectorAll('[data-bs-toggle="popover"]') 1940 .forEach(function (popover) { 1941 new bootstrap.Popover(popover) 1942 }) 1943 1944 document.querySelectorAll('.toast') 1945 .forEach(function (toastNode) { 1946 var toast = new bootstrap.Toast(toastNode, { 1947 autohide: false 1948 }) 1949 1950 toast.show() 1951 }) 1952 1953 // Disable empty links 1954 document.querySelectorAll('["href":"#"]') 1955 .forEach(function (link) { 1956 link.addEventListener('click', function (event) { 1957 event.preventDefault() 1958 }) 1959 }) 1960 1961 function setActiveItem() { 1962 var hash = window.location.hash 1963 1964 if (hash === '') { 1965 return 1966 } 1967 1968 var link = document.querySelector('.bd-aside a[href="' + hash + '"]') 1969 var active = document.querySelector('.bd-aside .active') 1970 var parent = link.parentNode.parentNode.previousElementSibling 1971 1972 link.classList.add('active') 1973 1974 if (parent.classList.contains('collapsed')) { 1975 parent.click() 1976 } 1977 1978 if (!active) { 1979 return 1980 } 1981 1982 var expanded = active.parentNode.parentNode.previousElementSibling 1983 1984 active.classList.remove('active') 1985 1986 if (expanded && parent !== expanded) { 1987 expanded.click() 1988 } 1989 } 1990 1991 setActiveItem() 1992 window.addEventListener('hashchange', setActiveItem) 1993 })() 1994 1995 </script> 1996 `; 1997 1998 } 1999 }); 2000 } 2001