admin-lte 4.0.0-rc6 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +96 -0
- package/README.md +44 -18
- package/dist/UI/general.html +311 -92
- package/dist/UI/icons.html +311 -92
- package/dist/UI/timeline.html +311 -92
- package/dist/css/adminlte.css +2814 -1138
- package/dist/css/adminlte.css.map +1 -1
- package/dist/css/adminlte.min.css +2 -2
- package/dist/css/adminlte.min.css.map +1 -1
- package/dist/css/adminlte.rtl.css +2814 -1138
- package/dist/css/adminlte.rtl.css.map +1 -1
- package/dist/css/adminlte.rtl.min.css +2 -2
- package/dist/css/adminlte.rtl.min.css.map +1 -1
- package/dist/docs/browser-support.html +291 -385
- package/dist/docs/color-mode.html +283 -381
- package/dist/docs/components/main-header.html +269 -363
- package/dist/docs/components/main-sidebar.html +284 -378
- package/dist/docs/customization.html +1056 -0
- package/dist/docs/deployment.html +1121 -0
- package/dist/docs/faq.html +887 -397
- package/dist/docs/getting-started.html +967 -0
- package/dist/docs/how-to-contribute.html +365 -450
- package/dist/docs/index.html +16 -0
- package/dist/docs/integrations.html +1207 -0
- package/dist/docs/introduction.html +483 -434
- package/dist/docs/javascript/accessibility.html +925 -0
- package/dist/docs/javascript/card-widget.html +995 -0
- package/dist/docs/javascript/direct-chat.html +872 -0
- package/dist/docs/javascript/fullscreen.html +881 -0
- package/dist/docs/javascript/layout.html +884 -0
- package/dist/docs/javascript/plugins-overview.html +1120 -0
- package/dist/docs/javascript/pushmenu.html +522 -377
- package/dist/docs/javascript/treeview.html +498 -390
- package/dist/docs/layout-blueprint.html +1063 -0
- package/dist/docs/layout.html +316 -402
- package/dist/docs/license.html +282 -375
- package/dist/docs/migration.html +1125 -0
- package/dist/docs/recipes.html +1161 -0
- package/dist/docs/rtl.html +933 -0
- package/dist/examples/lockscreen.html +66 -2
- package/dist/examples/login-v2.html +65 -1
- package/dist/examples/login.html +65 -1
- package/dist/examples/register-v2.html +65 -1
- package/dist/examples/register.html +65 -1
- package/dist/forms/elements.html +1381 -0
- package/dist/forms/{general.html → layout.html} +382 -452
- package/dist/forms/validation.html +1251 -0
- package/dist/forms/wizard.html +1386 -0
- package/dist/generate/theme.html +135 -5
- package/dist/index.html +311 -92
- package/dist/index2.html +314 -92
- package/dist/index3.html +311 -92
- package/dist/js/adminlte.js +135 -314
- package/dist/js/adminlte.js.map +1 -1
- package/dist/js/adminlte.min.js +3 -3
- package/dist/js/adminlte.min.js.map +1 -1
- package/dist/layout/collapsed-sidebar-without-hover.html +1120 -0
- package/dist/layout/collapsed-sidebar.html +311 -92
- package/dist/layout/fixed-complete.html +311 -92
- package/dist/layout/fixed-footer.html +311 -92
- package/dist/layout/fixed-header.html +311 -92
- package/dist/layout/fixed-sidebar.html +311 -92
- package/dist/layout/layout-custom-area.html +311 -92
- package/dist/layout/layout-rtl.html +311 -92
- package/dist/layout/logo-switch.html +135 -5
- package/dist/layout/sidebar-mini.html +311 -92
- package/dist/layout/unfixed-sidebar.html +311 -92
- package/dist/mailbox/compose.html +1127 -0
- package/dist/mailbox/inbox.html +1477 -0
- package/dist/mailbox/read.html +1178 -0
- package/dist/pages/404.html +213 -0
- package/dist/pages/500.html +201 -0
- package/dist/pages/calendar.html +1242 -0
- package/dist/pages/chat.html +1403 -0
- package/dist/pages/faq.html +1359 -0
- package/dist/pages/file-manager.html +1811 -0
- package/dist/pages/invoice.html +1175 -0
- package/dist/pages/kanban.html +1415 -0
- package/dist/pages/maintenance.html +204 -0
- package/dist/pages/pricing.html +1255 -0
- package/dist/pages/profile.html +1358 -0
- package/dist/pages/projects.html +1620 -0
- package/dist/pages/settings.html +1363 -0
- package/dist/tables/data.html +1295 -0
- package/dist/tables/simple.html +311 -92
- package/dist/widgets/cards.html +311 -92
- package/dist/widgets/info-box.html +311 -92
- package/dist/widgets/small-box.html +311 -92
- package/netlify.toml +16 -0
- package/package.json +32 -26
- package/src/scss/_accessibility.scss +44 -0
- package/src/scss/_app-footer.scss +9 -0
- package/src/scss/_app-header.scss +27 -0
- package/src/scss/_app-sidebar.scss +73 -74
- package/src/scss/_bootstrap-variables.scss +12 -5
- package/src/scss/_docs.scss +816 -0
- package/src/scss/_table.scss +4 -4
- package/src/scss/adminlte.scss +4 -1
- package/src/scss/pages/_login_and_register.scss +1 -1
- package/src/ts/accessibility.ts +9 -7
- package/src/ts/adminlte.ts +2 -14
- package/src/ts/fullscreen.ts +8 -4
- package/src/ts/layout.ts +34 -16
- package/src/ts/push-menu.ts +257 -104
- package/src/ts/util/index.ts +10 -0
- package/.claude/settings.local.json +0 -33
- package/CLAUDE.md +0 -79
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<!--begin::Head-->
|
|
4
3
|
<head>
|
|
5
4
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
6
|
-
<title>AdminLTE 4 |
|
|
5
|
+
<title>AdminLTE 4 | Form Layout</title>
|
|
7
6
|
|
|
8
7
|
<!--begin::Accessibility Meta Tags-->
|
|
9
8
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
@@ -13,7 +12,7 @@
|
|
|
13
12
|
<!--end::Accessibility Meta Tags-->
|
|
14
13
|
|
|
15
14
|
<!--begin::Primary Meta Tags-->
|
|
16
|
-
<meta name="title" content="AdminLTE 4 |
|
|
15
|
+
<meta name="title" content="AdminLTE 4 | Form Layout" />
|
|
17
16
|
<meta name="author" content="ColorlibHQ" />
|
|
18
17
|
<meta
|
|
19
18
|
name="description"
|
|
@@ -62,10 +61,7 @@
|
|
|
62
61
|
<link rel="stylesheet" href="../css/adminlte.css" />
|
|
63
62
|
<!--end::Required Plugin(AdminLTE)-->
|
|
64
63
|
</head>
|
|
65
|
-
<!--end::Head-->
|
|
66
|
-
<!--begin::Body-->
|
|
67
64
|
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
68
|
-
<!--begin::App Wrapper-->
|
|
69
65
|
<div class="app-wrapper">
|
|
70
66
|
<!--begin::Header-->
|
|
71
67
|
<nav class="app-header navbar navbar-expand bg-body">
|
|
@@ -78,11 +74,18 @@
|
|
|
78
74
|
<i class="bi bi-list"></i>
|
|
79
75
|
</a>
|
|
80
76
|
</li>
|
|
77
|
+
|
|
81
78
|
<li class="nav-item d-none d-md-block">
|
|
82
|
-
<a href="
|
|
79
|
+
<a href="../index.html" class="nav-link">
|
|
80
|
+
<i class="bi bi-grid-1x2 me-1" aria-hidden="true"></i>
|
|
81
|
+
Live preview
|
|
82
|
+
</a>
|
|
83
83
|
</li>
|
|
84
84
|
<li class="nav-item d-none d-md-block">
|
|
85
|
-
<a href="
|
|
85
|
+
<a href="../docs/introduction.html" class="nav-link">
|
|
86
|
+
<i class="bi bi-book me-1" aria-hidden="true"></i>
|
|
87
|
+
Documentation
|
|
88
|
+
</a>
|
|
86
89
|
</li>
|
|
87
90
|
</ul>
|
|
88
91
|
<!--end::Start Navbar Links-->
|
|
@@ -220,11 +223,70 @@
|
|
|
220
223
|
<li class="nav-item">
|
|
221
224
|
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
|
|
222
225
|
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
|
|
223
|
-
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit
|
|
226
|
+
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
|
|
224
227
|
</a>
|
|
225
228
|
</li>
|
|
226
229
|
<!--end::Fullscreen Toggle-->
|
|
227
230
|
|
|
231
|
+
<!--begin::Color Mode Toggle (#6010)-->
|
|
232
|
+
<li class="nav-item dropdown">
|
|
233
|
+
<a
|
|
234
|
+
class="nav-link"
|
|
235
|
+
href="#"
|
|
236
|
+
id="bd-theme"
|
|
237
|
+
aria-label="Toggle color scheme"
|
|
238
|
+
data-bs-toggle="dropdown"
|
|
239
|
+
aria-expanded="false"
|
|
240
|
+
>
|
|
241
|
+
<i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
|
|
242
|
+
<i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
|
|
243
|
+
<i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
|
|
244
|
+
</a>
|
|
245
|
+
<ul
|
|
246
|
+
class="dropdown-menu dropdown-menu-end"
|
|
247
|
+
aria-labelledby="bd-theme"
|
|
248
|
+
style="--bs-dropdown-min-width: 8rem"
|
|
249
|
+
>
|
|
250
|
+
<li>
|
|
251
|
+
<button
|
|
252
|
+
type="button"
|
|
253
|
+
class="dropdown-item d-flex align-items-center"
|
|
254
|
+
data-bs-theme-value="light"
|
|
255
|
+
aria-pressed="false"
|
|
256
|
+
>
|
|
257
|
+
<i class="bi bi-sun-fill me-2"></i>
|
|
258
|
+
Light
|
|
259
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
260
|
+
</button>
|
|
261
|
+
</li>
|
|
262
|
+
<li>
|
|
263
|
+
<button
|
|
264
|
+
type="button"
|
|
265
|
+
class="dropdown-item d-flex align-items-center"
|
|
266
|
+
data-bs-theme-value="dark"
|
|
267
|
+
aria-pressed="false"
|
|
268
|
+
>
|
|
269
|
+
<i class="bi bi-moon-fill me-2"></i>
|
|
270
|
+
Dark
|
|
271
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
272
|
+
</button>
|
|
273
|
+
</li>
|
|
274
|
+
<li>
|
|
275
|
+
<button
|
|
276
|
+
type="button"
|
|
277
|
+
class="dropdown-item d-flex align-items-center active"
|
|
278
|
+
data-bs-theme-value="auto"
|
|
279
|
+
aria-pressed="true"
|
|
280
|
+
>
|
|
281
|
+
<i class="bi bi-circle-half me-2"></i>
|
|
282
|
+
Auto
|
|
283
|
+
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
284
|
+
</button>
|
|
285
|
+
</li>
|
|
286
|
+
</ul>
|
|
287
|
+
</li>
|
|
288
|
+
<!--end::Color Mode Toggle-->
|
|
289
|
+
|
|
228
290
|
<!--begin::User Menu Dropdown-->
|
|
229
291
|
<li class="nav-item dropdown user-menu">
|
|
230
292
|
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
@@ -382,7 +444,7 @@
|
|
|
382
444
|
<i class="nav-icon bi bi-clipboard-fill"></i>
|
|
383
445
|
<p>
|
|
384
446
|
Layout Options
|
|
385
|
-
<span class="nav-badge badge text-bg-secondary me-3">
|
|
447
|
+
<span class="nav-badge badge text-bg-secondary me-3">7</span>
|
|
386
448
|
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
387
449
|
</p>
|
|
388
450
|
</a>
|
|
@@ -435,6 +497,12 @@
|
|
|
435
497
|
<p>Sidebar Mini <small>+ Collapsed</small></p>
|
|
436
498
|
</a>
|
|
437
499
|
</li>
|
|
500
|
+
<li class="nav-item">
|
|
501
|
+
<a href="../layout/collapsed-sidebar-without-hover.html" class="nav-link">
|
|
502
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
503
|
+
<p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
|
|
504
|
+
</a>
|
|
505
|
+
</li>
|
|
438
506
|
<li class="nav-item">
|
|
439
507
|
<a href="../layout/logo-switch.html" class="nav-link">
|
|
440
508
|
<i class="nav-icon bi bi-circle"></i>
|
|
@@ -459,7 +527,7 @@
|
|
|
459
527
|
</a>
|
|
460
528
|
<ul class="nav nav-treeview">
|
|
461
529
|
<li class="nav-item">
|
|
462
|
-
<a href="../UI/general.html" class="nav-link
|
|
530
|
+
<a href="../UI/general.html" class="nav-link">
|
|
463
531
|
<i class="nav-icon bi bi-circle"></i>
|
|
464
532
|
<p>General</p>
|
|
465
533
|
</a>
|
|
@@ -478,6 +546,36 @@
|
|
|
478
546
|
</li>
|
|
479
547
|
</ul>
|
|
480
548
|
</li>
|
|
549
|
+
<li class="nav-item">
|
|
550
|
+
<a href="#" class="nav-link">
|
|
551
|
+
<i class="nav-icon bi bi-envelope"></i>
|
|
552
|
+
<p>
|
|
553
|
+
Mailbox
|
|
554
|
+
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
555
|
+
</p>
|
|
556
|
+
</a>
|
|
557
|
+
<ul class="nav nav-treeview">
|
|
558
|
+
<li class="nav-item">
|
|
559
|
+
<a href="../mailbox/inbox.html" class="nav-link">
|
|
560
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
561
|
+
<p>Inbox</p>
|
|
562
|
+
</a>
|
|
563
|
+
</li>
|
|
564
|
+
<li class="nav-item">
|
|
565
|
+
<a href="../mailbox/read.html" class="nav-link">
|
|
566
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
567
|
+
<p>Read Message</p>
|
|
568
|
+
</a>
|
|
569
|
+
</li>
|
|
570
|
+
<li class="nav-item">
|
|
571
|
+
<a href="../mailbox/compose.html" class="nav-link">
|
|
572
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
573
|
+
<p>Compose</p>
|
|
574
|
+
</a>
|
|
575
|
+
</li>
|
|
576
|
+
</ul>
|
|
577
|
+
</li>
|
|
578
|
+
|
|
481
579
|
<li class="nav-item menu-open">
|
|
482
580
|
<a href="#" class="nav-link active">
|
|
483
581
|
<i class="nav-icon bi bi-pencil-square"></i>
|
|
@@ -488,9 +586,27 @@
|
|
|
488
586
|
</a>
|
|
489
587
|
<ul class="nav nav-treeview">
|
|
490
588
|
<li class="nav-item">
|
|
491
|
-
<a href="../forms/
|
|
589
|
+
<a href="../forms/elements.html" class="nav-link">
|
|
590
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
591
|
+
<p>Elements</p>
|
|
592
|
+
</a>
|
|
593
|
+
</li>
|
|
594
|
+
<li class="nav-item">
|
|
595
|
+
<a href="../forms/layout.html" class="nav-link active">
|
|
596
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
597
|
+
<p>Layout</p>
|
|
598
|
+
</a>
|
|
599
|
+
</li>
|
|
600
|
+
<li class="nav-item">
|
|
601
|
+
<a href="../forms/validation.html" class="nav-link">
|
|
492
602
|
<i class="nav-icon bi bi-circle"></i>
|
|
493
|
-
<p>
|
|
603
|
+
<p>Validation</p>
|
|
604
|
+
</a>
|
|
605
|
+
</li>
|
|
606
|
+
<li class="nav-item">
|
|
607
|
+
<a href="../forms/wizard.html" class="nav-link">
|
|
608
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
609
|
+
<p>Wizard</p>
|
|
494
610
|
</a>
|
|
495
611
|
</li>
|
|
496
612
|
</ul>
|
|
@@ -510,6 +626,114 @@
|
|
|
510
626
|
<p>Simple Tables</p>
|
|
511
627
|
</a>
|
|
512
628
|
</li>
|
|
629
|
+
<li class="nav-item">
|
|
630
|
+
<a href="../tables/data.html" class="nav-link">
|
|
631
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
632
|
+
<p>Data Tables</p>
|
|
633
|
+
</a>
|
|
634
|
+
</li>
|
|
635
|
+
</ul>
|
|
636
|
+
</li>
|
|
637
|
+
|
|
638
|
+
<li class="nav-header">PAGES</li>
|
|
639
|
+
<li class="nav-item">
|
|
640
|
+
<a href="#" class="nav-link">
|
|
641
|
+
<i class="nav-icon bi bi-file-earmark-text"></i>
|
|
642
|
+
<p>
|
|
643
|
+
Pages
|
|
644
|
+
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
645
|
+
</p>
|
|
646
|
+
</a>
|
|
647
|
+
<ul class="nav nav-treeview">
|
|
648
|
+
<li class="nav-item">
|
|
649
|
+
<a href="../pages/profile.html" class="nav-link">
|
|
650
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
651
|
+
<p>Profile</p>
|
|
652
|
+
</a>
|
|
653
|
+
</li>
|
|
654
|
+
<li class="nav-item">
|
|
655
|
+
<a href="../pages/settings.html" class="nav-link">
|
|
656
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
657
|
+
<p>Settings</p>
|
|
658
|
+
</a>
|
|
659
|
+
</li>
|
|
660
|
+
<li class="nav-item">
|
|
661
|
+
<a href="../pages/invoice.html" class="nav-link">
|
|
662
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
663
|
+
<p>Invoice</p>
|
|
664
|
+
</a>
|
|
665
|
+
</li>
|
|
666
|
+
<li class="nav-item">
|
|
667
|
+
<a href="../pages/calendar.html" class="nav-link">
|
|
668
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
669
|
+
<p>Calendar</p>
|
|
670
|
+
</a>
|
|
671
|
+
</li>
|
|
672
|
+
<li class="nav-item">
|
|
673
|
+
<a href="../pages/kanban.html" class="nav-link">
|
|
674
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
675
|
+
<p>Kanban</p>
|
|
676
|
+
</a>
|
|
677
|
+
</li>
|
|
678
|
+
<li class="nav-item">
|
|
679
|
+
<a href="../pages/chat.html" class="nav-link">
|
|
680
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
681
|
+
<p>Chat</p>
|
|
682
|
+
</a>
|
|
683
|
+
</li>
|
|
684
|
+
<li class="nav-item">
|
|
685
|
+
<a href="../pages/file-manager.html" class="nav-link">
|
|
686
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
687
|
+
<p>File Manager</p>
|
|
688
|
+
</a>
|
|
689
|
+
</li>
|
|
690
|
+
<li class="nav-item">
|
|
691
|
+
<a href="../pages/projects.html" class="nav-link">
|
|
692
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
693
|
+
<p>Projects</p>
|
|
694
|
+
</a>
|
|
695
|
+
</li>
|
|
696
|
+
<li class="nav-item">
|
|
697
|
+
<a href="../pages/pricing.html" class="nav-link">
|
|
698
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
699
|
+
<p>Pricing</p>
|
|
700
|
+
</a>
|
|
701
|
+
</li>
|
|
702
|
+
<li class="nav-item">
|
|
703
|
+
<a href="../pages/faq.html" class="nav-link">
|
|
704
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
705
|
+
<p>FAQ</p>
|
|
706
|
+
</a>
|
|
707
|
+
</li>
|
|
708
|
+
<li class="nav-item">
|
|
709
|
+
<a href="#" class="nav-link">
|
|
710
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
711
|
+
<p>
|
|
712
|
+
Error
|
|
713
|
+
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
714
|
+
</p>
|
|
715
|
+
</a>
|
|
716
|
+
<ul class="nav nav-treeview">
|
|
717
|
+
<li class="nav-item">
|
|
718
|
+
<a href="../pages/404.html" class="nav-link">
|
|
719
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
720
|
+
<p>404</p>
|
|
721
|
+
</a>
|
|
722
|
+
</li>
|
|
723
|
+
<li class="nav-item">
|
|
724
|
+
<a href="../pages/500.html" class="nav-link">
|
|
725
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
726
|
+
<p>500</p>
|
|
727
|
+
</a>
|
|
728
|
+
</li>
|
|
729
|
+
<li class="nav-item">
|
|
730
|
+
<a href="../pages/maintenance.html" class="nav-link">
|
|
731
|
+
<i class="nav-icon bi bi-circle"></i>
|
|
732
|
+
<p>Maintenance</p>
|
|
733
|
+
</a>
|
|
734
|
+
</li>
|
|
735
|
+
</ul>
|
|
736
|
+
</li>
|
|
513
737
|
</ul>
|
|
514
738
|
</li>
|
|
515
739
|
|
|
@@ -578,90 +802,6 @@
|
|
|
578
802
|
</ul>
|
|
579
803
|
</li>
|
|
580
804
|
|
|
581
|
-
<li class="nav-header">DOCUMENTATIONS</li>
|
|
582
|
-
<li class="nav-item">
|
|
583
|
-
<a href="../docs/introduction.html" class="nav-link">
|
|
584
|
-
<i class="nav-icon bi bi-download"></i>
|
|
585
|
-
<p>Installation</p>
|
|
586
|
-
</a>
|
|
587
|
-
</li>
|
|
588
|
-
<li class="nav-item">
|
|
589
|
-
<a href="../docs/layout.html" class="nav-link">
|
|
590
|
-
<i class="nav-icon bi bi-grip-horizontal"></i>
|
|
591
|
-
<p>Layout</p>
|
|
592
|
-
</a>
|
|
593
|
-
</li>
|
|
594
|
-
<li class="nav-item">
|
|
595
|
-
<a href="../docs/color-mode.html" class="nav-link">
|
|
596
|
-
<i class="nav-icon bi bi-star-half"></i>
|
|
597
|
-
<p>Color Mode</p>
|
|
598
|
-
</a>
|
|
599
|
-
</li>
|
|
600
|
-
<li class="nav-item">
|
|
601
|
-
<a href="#" class="nav-link">
|
|
602
|
-
<i class="nav-icon bi bi-ui-checks-grid"></i>
|
|
603
|
-
<p>
|
|
604
|
-
Components
|
|
605
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
606
|
-
</p>
|
|
607
|
-
</a>
|
|
608
|
-
<ul class="nav nav-treeview">
|
|
609
|
-
<li class="nav-item">
|
|
610
|
-
<a href="../docs/components/main-header.html" class="nav-link">
|
|
611
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
612
|
-
<p>Main Header</p>
|
|
613
|
-
</a>
|
|
614
|
-
</li>
|
|
615
|
-
<li class="nav-item">
|
|
616
|
-
<a href="../docs/components/main-sidebar.html" class="nav-link">
|
|
617
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
618
|
-
<p>Main Sidebar</p>
|
|
619
|
-
</a>
|
|
620
|
-
</li>
|
|
621
|
-
</ul>
|
|
622
|
-
</li>
|
|
623
|
-
<li class="nav-item">
|
|
624
|
-
<a href="#" class="nav-link">
|
|
625
|
-
<i class="nav-icon bi bi-filetype-js"></i>
|
|
626
|
-
<p>
|
|
627
|
-
Javascript
|
|
628
|
-
<i class="nav-arrow bi bi-chevron-right"></i>
|
|
629
|
-
</p>
|
|
630
|
-
</a>
|
|
631
|
-
<ul class="nav nav-treeview">
|
|
632
|
-
<li class="nav-item">
|
|
633
|
-
<a href="../docs/javascript/treeview.html" class="nav-link">
|
|
634
|
-
<i class="nav-icon bi bi-circle"></i>
|
|
635
|
-
<p>Treeview</p>
|
|
636
|
-
</a>
|
|
637
|
-
</li>
|
|
638
|
-
</ul>
|
|
639
|
-
</li>
|
|
640
|
-
<li class="nav-item">
|
|
641
|
-
<a href="../docs/browser-support.html" class="nav-link">
|
|
642
|
-
<i class="nav-icon bi bi-browser-edge"></i>
|
|
643
|
-
<p>Browser Support</p>
|
|
644
|
-
</a>
|
|
645
|
-
</li>
|
|
646
|
-
<li class="nav-item">
|
|
647
|
-
<a href="../docs/how-to-contribute.html" class="nav-link">
|
|
648
|
-
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
|
|
649
|
-
<p>How To Contribute</p>
|
|
650
|
-
</a>
|
|
651
|
-
</li>
|
|
652
|
-
<li class="nav-item">
|
|
653
|
-
<a href="../docs/faq.html" class="nav-link">
|
|
654
|
-
<i class="nav-icon bi bi-question-circle-fill"></i>
|
|
655
|
-
<p>FAQ</p>
|
|
656
|
-
</a>
|
|
657
|
-
</li>
|
|
658
|
-
<li class="nav-item">
|
|
659
|
-
<a href="../docs/license.html" class="nav-link">
|
|
660
|
-
<i class="nav-icon bi bi-patch-check-fill"></i>
|
|
661
|
-
<p>License</p>
|
|
662
|
-
</a>
|
|
663
|
-
</li>
|
|
664
|
-
|
|
665
805
|
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
|
666
806
|
<li class="nav-item">
|
|
667
807
|
<a href="#" class="nav-link">
|
|
@@ -749,201 +889,63 @@
|
|
|
749
889
|
</li>
|
|
750
890
|
</ul>
|
|
751
891
|
<!--end::Sidebar Menu-->
|
|
892
|
+
|
|
893
|
+
<!-- Docs CTA (bottom of sidebar) -->
|
|
894
|
+
<div class="p-3 mt-3 border-top border-secondary border-opacity-25">
|
|
895
|
+
<a
|
|
896
|
+
href="../docs/introduction.html"
|
|
897
|
+
class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
|
|
898
|
+
>
|
|
899
|
+
<i class="bi bi-book" aria-hidden="true"></i>
|
|
900
|
+
View documentation
|
|
901
|
+
</a>
|
|
902
|
+
</div>
|
|
752
903
|
</nav>
|
|
753
904
|
</div>
|
|
754
905
|
<!--end::Sidebar Wrapper-->
|
|
755
906
|
</aside>
|
|
756
907
|
<!--end::Sidebar-->
|
|
757
|
-
<!--begin::App Main-->
|
|
758
908
|
<main class="app-main">
|
|
759
|
-
<!--begin::App Content Header-->
|
|
760
909
|
<div class="app-content-header">
|
|
761
|
-
<!--begin::Container-->
|
|
762
910
|
<div class="container-fluid">
|
|
763
|
-
<!--begin::Row-->
|
|
764
911
|
<div class="row">
|
|
765
912
|
<div class="col-sm-6">
|
|
766
|
-
<h3 class="mb-0">
|
|
913
|
+
<h3 class="mb-0">Form Layout</h3>
|
|
767
914
|
</div>
|
|
768
915
|
<div class="col-sm-6">
|
|
769
916
|
<ol class="breadcrumb float-sm-end">
|
|
770
917
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
771
|
-
<li class="breadcrumb-item
|
|
918
|
+
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
|
919
|
+
<li class="breadcrumb-item active" aria-current="page">Layout</li>
|
|
772
920
|
</ol>
|
|
773
921
|
</div>
|
|
774
922
|
</div>
|
|
775
|
-
<!--end::Row-->
|
|
776
923
|
</div>
|
|
777
|
-
<!--end::Container-->
|
|
778
924
|
</div>
|
|
779
|
-
<!--end::App Content Header-->
|
|
780
|
-
<!--begin::App Content-->
|
|
781
925
|
<div class="app-content">
|
|
782
|
-
<!--begin::Container-->
|
|
783
926
|
<div class="container-fluid">
|
|
784
|
-
<!--begin::Row-->
|
|
785
927
|
<div class="row g-4">
|
|
786
|
-
<!--begin::Col-->
|
|
787
928
|
<div class="col-12">
|
|
788
929
|
<div class="callout callout-info">
|
|
789
|
-
|
|
930
|
+
Layout patterns built on Bootstrap's grid +
|
|
790
931
|
<a
|
|
791
|
-
href="https://getbootstrap.com/docs/5.3/forms/
|
|
932
|
+
href="https://getbootstrap.com/docs/5.3/forms/layout/"
|
|
792
933
|
target="_blank"
|
|
793
934
|
rel="noopener noreferrer"
|
|
794
935
|
class="callout-link"
|
|
936
|
+
>form layout</a
|
|
795
937
|
>
|
|
796
|
-
|
|
797
|
-
</a>
|
|
938
|
+
utilities.
|
|
798
939
|
</div>
|
|
799
940
|
</div>
|
|
800
|
-
<!--end::Col-->
|
|
801
|
-
<!--begin::Col-->
|
|
802
|
-
<div class="col-md-6">
|
|
803
|
-
<!--begin::Quick Example-->
|
|
804
|
-
<div class="card card-primary card-outline mb-4">
|
|
805
|
-
<!--begin::Header-->
|
|
806
|
-
<div class="card-header">
|
|
807
|
-
<div class="card-title">Quick Example</div>
|
|
808
|
-
</div>
|
|
809
|
-
<!--end::Header-->
|
|
810
|
-
<!--begin::Form-->
|
|
811
|
-
<form>
|
|
812
|
-
<!--begin::Body-->
|
|
813
|
-
<div class="card-body">
|
|
814
|
-
<div class="mb-3">
|
|
815
|
-
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
|
816
|
-
<input
|
|
817
|
-
type="email"
|
|
818
|
-
class="form-control"
|
|
819
|
-
id="exampleInputEmail1"
|
|
820
|
-
aria-describedby="emailHelp"
|
|
821
|
-
/>
|
|
822
|
-
<div id="emailHelp" class="form-text">
|
|
823
|
-
We'll never share your email with anyone else.
|
|
824
|
-
</div>
|
|
825
|
-
</div>
|
|
826
|
-
<div class="mb-3">
|
|
827
|
-
<label for="exampleInputPassword1" class="form-label">Password</label>
|
|
828
|
-
<input type="password" class="form-control" id="exampleInputPassword1" />
|
|
829
|
-
</div>
|
|
830
|
-
<div class="input-group mb-3">
|
|
831
|
-
<input type="file" class="form-control" id="inputGroupFile02" />
|
|
832
|
-
<label class="input-group-text" for="inputGroupFile02">Upload</label>
|
|
833
|
-
</div>
|
|
834
|
-
<div class="mb-3 form-check">
|
|
835
|
-
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
|
|
836
|
-
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
|
837
|
-
</div>
|
|
838
|
-
</div>
|
|
839
|
-
<!--end::Body-->
|
|
840
|
-
<!--begin::Footer-->
|
|
841
|
-
<div class="card-footer">
|
|
842
|
-
<button type="submit" class="btn btn-primary">Submit</button>
|
|
843
|
-
</div>
|
|
844
|
-
<!--end::Footer-->
|
|
845
|
-
</form>
|
|
846
|
-
<!--end::Form-->
|
|
847
|
-
</div>
|
|
848
|
-
<!--end::Quick Example-->
|
|
849
|
-
<!--begin::Input Group-->
|
|
850
|
-
<div class="card card-success card-outline mb-4">
|
|
851
|
-
<!--begin::Header-->
|
|
852
|
-
<div class="card-header">
|
|
853
|
-
<div class="card-title">Input Group</div>
|
|
854
|
-
</div>
|
|
855
|
-
<!--end::Header-->
|
|
856
|
-
<!--begin::Body-->
|
|
857
|
-
<div class="card-body">
|
|
858
|
-
<div class="input-group mb-3">
|
|
859
|
-
<span class="input-group-text" id="basic-addon1">@</span>
|
|
860
|
-
<input
|
|
861
|
-
type="text"
|
|
862
|
-
class="form-control"
|
|
863
|
-
placeholder="Username"
|
|
864
|
-
aria-label="Username"
|
|
865
|
-
aria-describedby="basic-addon1"
|
|
866
|
-
/>
|
|
867
|
-
</div>
|
|
868
|
-
|
|
869
|
-
<div class="input-group mb-3">
|
|
870
|
-
<input
|
|
871
|
-
type="text"
|
|
872
|
-
class="form-control"
|
|
873
|
-
placeholder="Recipient's username"
|
|
874
|
-
aria-label="Recipient's username"
|
|
875
|
-
aria-describedby="basic-addon2"
|
|
876
|
-
/>
|
|
877
|
-
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
|
878
|
-
</div>
|
|
879
|
-
|
|
880
|
-
<div class="mb-3">
|
|
881
|
-
<label for="basic-url" class="form-label">Your vanity URL</label>
|
|
882
|
-
<div class="input-group">
|
|
883
|
-
<span class="input-group-text" id="basic-addon3"
|
|
884
|
-
>https://example.com/users/</span
|
|
885
|
-
>
|
|
886
|
-
<input
|
|
887
|
-
type="text"
|
|
888
|
-
class="form-control"
|
|
889
|
-
id="basic-url"
|
|
890
|
-
aria-describedby="basic-addon3 basic-addon4"
|
|
891
|
-
/>
|
|
892
|
-
</div>
|
|
893
|
-
<div class="form-text" id="basic-addon4">
|
|
894
|
-
Example help text goes outside the input group.
|
|
895
|
-
</div>
|
|
896
|
-
</div>
|
|
897
|
-
|
|
898
|
-
<div class="input-group mb-3">
|
|
899
|
-
<span class="input-group-text">$</span>
|
|
900
|
-
<input
|
|
901
|
-
type="text"
|
|
902
|
-
class="form-control"
|
|
903
|
-
aria-label="Amount (to the nearest dollar)"
|
|
904
|
-
/>
|
|
905
|
-
<span class="input-group-text">.00</span>
|
|
906
|
-
</div>
|
|
907
941
|
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
type="text"
|
|
911
|
-
class="form-control"
|
|
912
|
-
placeholder="Username"
|
|
913
|
-
aria-label="Username"
|
|
914
|
-
/>
|
|
915
|
-
<span class="input-group-text">@</span>
|
|
916
|
-
<input
|
|
917
|
-
type="text"
|
|
918
|
-
class="form-control"
|
|
919
|
-
placeholder="Server"
|
|
920
|
-
aria-label="Server"
|
|
921
|
-
/>
|
|
922
|
-
</div>
|
|
923
|
-
|
|
924
|
-
<div class="input-group">
|
|
925
|
-
<span class="input-group-text">With textarea</span>
|
|
926
|
-
<textarea class="form-control" aria-label="With textarea"></textarea>
|
|
927
|
-
</div>
|
|
928
|
-
</div>
|
|
929
|
-
<!--end::Body-->
|
|
930
|
-
<!--begin::Footer-->
|
|
931
|
-
<div class="card-footer">
|
|
932
|
-
<button type="submit" class="btn btn-success">Submit</button>
|
|
933
|
-
</div>
|
|
934
|
-
<!--end::Footer-->
|
|
935
|
-
</div>
|
|
936
|
-
<!--end::Input Group-->
|
|
937
|
-
<!--begin::Horizontal Form-->
|
|
942
|
+
<!-- Horizontal Form -->
|
|
943
|
+
<div class="col-md-6">
|
|
938
944
|
<div class="card card-warning card-outline mb-4">
|
|
939
|
-
<!--begin::Header-->
|
|
940
945
|
<div class="card-header">
|
|
941
946
|
<div class="card-title">Horizontal Form</div>
|
|
942
947
|
</div>
|
|
943
|
-
<!--end::Header-->
|
|
944
|
-
<!--begin::Form-->
|
|
945
948
|
<form>
|
|
946
|
-
<!--begin::Body-->
|
|
947
949
|
<div class="card-body">
|
|
948
950
|
<div class="row mb-3">
|
|
949
951
|
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
|
@@ -969,7 +971,7 @@
|
|
|
969
971
|
value="option1"
|
|
970
972
|
checked
|
|
971
973
|
/>
|
|
972
|
-
<label class="form-check-label" for="gridRadios1">
|
|
974
|
+
<label class="form-check-label" for="gridRadios1">First radio</label>
|
|
973
975
|
</div>
|
|
974
976
|
<div class="form-check">
|
|
975
977
|
<input
|
|
@@ -979,7 +981,7 @@
|
|
|
979
981
|
id="gridRadios2"
|
|
980
982
|
value="option2"
|
|
981
983
|
/>
|
|
982
|
-
<label class="form-check-label" for="gridRadios2">
|
|
984
|
+
<label class="form-check-label" for="gridRadios2">Second radio</label>
|
|
983
985
|
</div>
|
|
984
986
|
<div class="form-check disabled">
|
|
985
987
|
<input
|
|
@@ -990,9 +992,9 @@
|
|
|
990
992
|
value="option3"
|
|
991
993
|
disabled
|
|
992
994
|
/>
|
|
993
|
-
<label class="form-check-label" for="gridRadios3"
|
|
994
|
-
Third disabled radio
|
|
995
|
-
|
|
995
|
+
<label class="form-check-label" for="gridRadios3"
|
|
996
|
+
>Third disabled radio</label
|
|
997
|
+
>
|
|
996
998
|
</div>
|
|
997
999
|
</div>
|
|
998
1000
|
</fieldset>
|
|
@@ -1000,51 +1002,82 @@
|
|
|
1000
1002
|
<div class="col-sm-10 offset-sm-2">
|
|
1001
1003
|
<div class="form-check">
|
|
1002
1004
|
<input class="form-check-input" type="checkbox" id="gridCheck1" />
|
|
1003
|
-
<label class="form-check-label" for="gridCheck1"
|
|
1004
|
-
Example checkbox
|
|
1005
|
-
|
|
1005
|
+
<label class="form-check-label" for="gridCheck1"
|
|
1006
|
+
>Example checkbox</label
|
|
1007
|
+
>
|
|
1006
1008
|
</div>
|
|
1007
1009
|
</div>
|
|
1008
1010
|
</div>
|
|
1009
1011
|
</div>
|
|
1010
|
-
<!--end::Body-->
|
|
1011
|
-
<!--begin::Footer-->
|
|
1012
1012
|
<div class="card-footer">
|
|
1013
1013
|
<button type="submit" class="btn btn-warning">Sign in</button>
|
|
1014
1014
|
<button type="submit" class="btn float-end">Cancel</button>
|
|
1015
1015
|
</div>
|
|
1016
|
-
<!--end::Footer-->
|
|
1017
1016
|
</form>
|
|
1018
|
-
<!--end::Form-->
|
|
1019
1017
|
</div>
|
|
1020
|
-
<!--end::Horizontal Form-->
|
|
1021
1018
|
</div>
|
|
1022
|
-
|
|
1023
|
-
<!--
|
|
1019
|
+
|
|
1020
|
+
<!-- Inline Form -->
|
|
1021
|
+
<div class="col-md-6">
|
|
1022
|
+
<div class="card card-primary card-outline mb-4">
|
|
1023
|
+
<div class="card-header">
|
|
1024
|
+
<div class="card-title">Inline Form</div>
|
|
1025
|
+
</div>
|
|
1026
|
+
<div class="card-body">
|
|
1027
|
+
<form class="row row-cols-lg-auto g-3 align-items-center">
|
|
1028
|
+
<div class="col-12">
|
|
1029
|
+
<label class="visually-hidden" for="inlineUser">Username</label>
|
|
1030
|
+
<div class="input-group">
|
|
1031
|
+
<div class="input-group-text">@</div>
|
|
1032
|
+
<input
|
|
1033
|
+
type="text"
|
|
1034
|
+
class="form-control"
|
|
1035
|
+
id="inlineUser"
|
|
1036
|
+
placeholder="Username"
|
|
1037
|
+
/>
|
|
1038
|
+
</div>
|
|
1039
|
+
</div>
|
|
1040
|
+
<div class="col-12">
|
|
1041
|
+
<label class="visually-hidden" for="inlineSelect">Preference</label>
|
|
1042
|
+
<select class="form-select" id="inlineSelect">
|
|
1043
|
+
<option selected>Choose…</option>
|
|
1044
|
+
<option>One</option>
|
|
1045
|
+
<option>Two</option>
|
|
1046
|
+
</select>
|
|
1047
|
+
</div>
|
|
1048
|
+
<div class="col-12">
|
|
1049
|
+
<div class="form-check">
|
|
1050
|
+
<input class="form-check-input" type="checkbox" id="inlineCheck" />
|
|
1051
|
+
<label class="form-check-label" for="inlineCheck">Remember me</label>
|
|
1052
|
+
</div>
|
|
1053
|
+
</div>
|
|
1054
|
+
<div class="col-12">
|
|
1055
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
1056
|
+
</div>
|
|
1057
|
+
</form>
|
|
1058
|
+
</div>
|
|
1059
|
+
</div>
|
|
1060
|
+
</div>
|
|
1061
|
+
|
|
1062
|
+
<!-- Different Height -->
|
|
1024
1063
|
<div class="col-md-6">
|
|
1025
|
-
<!--begin::Different Height-->
|
|
1026
1064
|
<div class="card card-secondary card-outline mb-4">
|
|
1027
|
-
<!--begin::Header-->
|
|
1028
1065
|
<div class="card-header">
|
|
1029
1066
|
<div class="card-title">Different Height</div>
|
|
1030
1067
|
</div>
|
|
1031
|
-
<!--end::Header-->
|
|
1032
|
-
<!--begin::Body-->
|
|
1033
1068
|
<div class="card-body">
|
|
1034
1069
|
<input
|
|
1035
|
-
class="form-control form-control-lg"
|
|
1070
|
+
class="form-control form-control-lg mb-3"
|
|
1036
1071
|
type="text"
|
|
1037
1072
|
placeholder=".form-control-lg"
|
|
1038
1073
|
aria-label=".form-control-lg example"
|
|
1039
1074
|
/>
|
|
1040
|
-
<br />
|
|
1041
1075
|
<input
|
|
1042
|
-
class="form-control"
|
|
1076
|
+
class="form-control mb-3"
|
|
1043
1077
|
type="text"
|
|
1044
1078
|
placeholder="Default input"
|
|
1045
1079
|
aria-label="default input example"
|
|
1046
1080
|
/>
|
|
1047
|
-
<br />
|
|
1048
1081
|
<input
|
|
1049
1082
|
class="form-control form-control-sm"
|
|
1050
1083
|
type="text"
|
|
@@ -1052,197 +1085,34 @@
|
|
|
1052
1085
|
aria-label=".form-control-sm example"
|
|
1053
1086
|
/>
|
|
1054
1087
|
</div>
|
|
1055
|
-
<!--end::Body-->
|
|
1056
1088
|
</div>
|
|
1057
|
-
|
|
1058
|
-
|
|
1089
|
+
</div>
|
|
1090
|
+
|
|
1091
|
+
<!-- Different Width -->
|
|
1092
|
+
<div class="col-md-6">
|
|
1059
1093
|
<div class="card card-danger card-outline mb-4">
|
|
1060
|
-
<!--begin::Header-->
|
|
1061
1094
|
<div class="card-header">
|
|
1062
1095
|
<div class="card-title">Different Width</div>
|
|
1063
1096
|
</div>
|
|
1064
|
-
<!--end::Header-->
|
|
1065
|
-
<!--begin::Body-->
|
|
1066
1097
|
<div class="card-body">
|
|
1067
|
-
|
|
1068
|
-
<div class="row">
|
|
1069
|
-
<!--begin::Col-->
|
|
1098
|
+
<div class="row g-2">
|
|
1070
1099
|
<div class="col-3">
|
|
1071
1100
|
<input type="text" class="form-control" placeholder=".col-3" />
|
|
1072
1101
|
</div>
|
|
1073
|
-
<!--end::Col-->
|
|
1074
|
-
<!--begin::Col-->
|
|
1075
1102
|
<div class="col-4">
|
|
1076
1103
|
<input type="text" class="form-control" placeholder=".col-4" />
|
|
1077
1104
|
</div>
|
|
1078
|
-
<!--end::Col-->
|
|
1079
|
-
<!--begin::Col-->
|
|
1080
1105
|
<div class="col-5">
|
|
1081
1106
|
<input type="text" class="form-control" placeholder=".col-5" />
|
|
1082
1107
|
</div>
|
|
1083
|
-
<!--end::Col-->
|
|
1084
1108
|
</div>
|
|
1085
|
-
<!--end::Row-->
|
|
1086
1109
|
</div>
|
|
1087
|
-
<!--end::Body-->
|
|
1088
1110
|
</div>
|
|
1089
|
-
<!--end::Different Width-->
|
|
1090
|
-
<!--begin::Form Validation-->
|
|
1091
|
-
<div class="card card-info card-outline mb-4">
|
|
1092
|
-
<!--begin::Header-->
|
|
1093
|
-
<div class="card-header">
|
|
1094
|
-
<div class="card-title">Form Validation</div>
|
|
1095
|
-
</div>
|
|
1096
|
-
<!--end::Header-->
|
|
1097
|
-
<!--begin::Form-->
|
|
1098
|
-
<form class="needs-validation" novalidate>
|
|
1099
|
-
<!--begin::Body-->
|
|
1100
|
-
<div class="card-body">
|
|
1101
|
-
<!--begin::Row-->
|
|
1102
|
-
<div class="row g-3">
|
|
1103
|
-
<!--begin::Col-->
|
|
1104
|
-
<div class="col-md-6">
|
|
1105
|
-
<label for="validationCustom01" class="form-label">First name</label>
|
|
1106
|
-
<input
|
|
1107
|
-
type="text"
|
|
1108
|
-
class="form-control"
|
|
1109
|
-
id="validationCustom01"
|
|
1110
|
-
value="Mark"
|
|
1111
|
-
required
|
|
1112
|
-
/>
|
|
1113
|
-
<div class="valid-feedback">Looks good!</div>
|
|
1114
|
-
</div>
|
|
1115
|
-
<!--end::Col-->
|
|
1116
|
-
<!--begin::Col-->
|
|
1117
|
-
<div class="col-md-6">
|
|
1118
|
-
<label for="validationCustom02" class="form-label">Last name</label>
|
|
1119
|
-
<input
|
|
1120
|
-
type="text"
|
|
1121
|
-
class="form-control"
|
|
1122
|
-
id="validationCustom02"
|
|
1123
|
-
value="Otto"
|
|
1124
|
-
required
|
|
1125
|
-
/>
|
|
1126
|
-
<div class="valid-feedback">Looks good!</div>
|
|
1127
|
-
</div>
|
|
1128
|
-
<!--end::Col-->
|
|
1129
|
-
<!--begin::Col-->
|
|
1130
|
-
<div class="col-md-6">
|
|
1131
|
-
<label for="validationCustomUsername" class="form-label">Username</label>
|
|
1132
|
-
<div class="input-group has-validation">
|
|
1133
|
-
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
1134
|
-
<input
|
|
1135
|
-
type="text"
|
|
1136
|
-
class="form-control"
|
|
1137
|
-
id="validationCustomUsername"
|
|
1138
|
-
aria-describedby="inputGroupPrepend"
|
|
1139
|
-
required
|
|
1140
|
-
/>
|
|
1141
|
-
<div class="invalid-feedback">Please choose a username.</div>
|
|
1142
|
-
</div>
|
|
1143
|
-
</div>
|
|
1144
|
-
<!--end::Col-->
|
|
1145
|
-
<!--begin::Col-->
|
|
1146
|
-
<div class="col-md-6">
|
|
1147
|
-
<label for="validationCustom03" class="form-label">City</label>
|
|
1148
|
-
<input
|
|
1149
|
-
type="text"
|
|
1150
|
-
class="form-control"
|
|
1151
|
-
id="validationCustom03"
|
|
1152
|
-
required
|
|
1153
|
-
/>
|
|
1154
|
-
<div class="invalid-feedback">Please provide a valid city.</div>
|
|
1155
|
-
</div>
|
|
1156
|
-
<!--end::Col-->
|
|
1157
|
-
<!--begin::Col-->
|
|
1158
|
-
<div class="col-md-6">
|
|
1159
|
-
<label for="validationCustom04" class="form-label">State</label>
|
|
1160
|
-
<select class="form-select" id="validationCustom04" required>
|
|
1161
|
-
<option selected disabled value="">Choose...</option>
|
|
1162
|
-
<option>...</option>
|
|
1163
|
-
</select>
|
|
1164
|
-
<div class="invalid-feedback">Please select a valid state.</div>
|
|
1165
|
-
</div>
|
|
1166
|
-
<!--end::Col-->
|
|
1167
|
-
<!--begin::Col-->
|
|
1168
|
-
<div class="col-md-6">
|
|
1169
|
-
<label for="validationCustom05" class="form-label">Zip</label>
|
|
1170
|
-
<input
|
|
1171
|
-
type="text"
|
|
1172
|
-
class="form-control"
|
|
1173
|
-
id="validationCustom05"
|
|
1174
|
-
required
|
|
1175
|
-
/>
|
|
1176
|
-
<div class="invalid-feedback">Please provide a valid zip.</div>
|
|
1177
|
-
</div>
|
|
1178
|
-
<!--end::Col-->
|
|
1179
|
-
<!--begin::Col-->
|
|
1180
|
-
<div class="col-12">
|
|
1181
|
-
<div class="form-check">
|
|
1182
|
-
<input
|
|
1183
|
-
class="form-check-input"
|
|
1184
|
-
type="checkbox"
|
|
1185
|
-
value=""
|
|
1186
|
-
id="invalidCheck"
|
|
1187
|
-
required
|
|
1188
|
-
/>
|
|
1189
|
-
<label class="form-check-label" for="invalidCheck">
|
|
1190
|
-
Agree to terms and conditions
|
|
1191
|
-
</label>
|
|
1192
|
-
<div class="invalid-feedback">You must agree before submitting.</div>
|
|
1193
|
-
</div>
|
|
1194
|
-
</div>
|
|
1195
|
-
<!--end::Col-->
|
|
1196
|
-
</div>
|
|
1197
|
-
<!--end::Row-->
|
|
1198
|
-
</div>
|
|
1199
|
-
<!--end::Body-->
|
|
1200
|
-
<!--begin::Footer-->
|
|
1201
|
-
<div class="card-footer">
|
|
1202
|
-
<button class="btn btn-info" type="submit">Submit form</button>
|
|
1203
|
-
</div>
|
|
1204
|
-
<!--end::Footer-->
|
|
1205
|
-
</form>
|
|
1206
|
-
<!--end::Form-->
|
|
1207
|
-
<!--begin::JavaScript-->
|
|
1208
|
-
<script>
|
|
1209
|
-
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
1210
|
-
(() => {
|
|
1211
|
-
'use strict';
|
|
1212
|
-
|
|
1213
|
-
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
|
1214
|
-
const forms = document.querySelectorAll('.needs-validation');
|
|
1215
|
-
|
|
1216
|
-
// Loop over them and prevent submission
|
|
1217
|
-
Array.from(forms).forEach((form) => {
|
|
1218
|
-
form.addEventListener(
|
|
1219
|
-
'submit',
|
|
1220
|
-
(event) => {
|
|
1221
|
-
if (!form.checkValidity()) {
|
|
1222
|
-
event.preventDefault();
|
|
1223
|
-
event.stopPropagation();
|
|
1224
|
-
}
|
|
1225
|
-
|
|
1226
|
-
form.classList.add('was-validated');
|
|
1227
|
-
},
|
|
1228
|
-
false,
|
|
1229
|
-
);
|
|
1230
|
-
});
|
|
1231
|
-
})();
|
|
1232
|
-
</script>
|
|
1233
|
-
<!--end::JavaScript-->
|
|
1234
|
-
</div>
|
|
1235
|
-
<!--end::Form Validation-->
|
|
1236
1111
|
</div>
|
|
1237
|
-
<!--end::Col-->
|
|
1238
1112
|
</div>
|
|
1239
|
-
<!--end::Row-->
|
|
1240
1113
|
</div>
|
|
1241
|
-
<!--end::Container-->
|
|
1242
1114
|
</div>
|
|
1243
|
-
<!--end::App Content-->
|
|
1244
1115
|
</main>
|
|
1245
|
-
<!--end::App Main-->
|
|
1246
1116
|
<!--begin::Footer-->
|
|
1247
1117
|
<footer class="app-footer">
|
|
1248
1118
|
<!--begin::To the end-->
|
|
@@ -1250,7 +1120,7 @@
|
|
|
1250
1120
|
<!--end::To the end-->
|
|
1251
1121
|
<!--begin::Copyright-->
|
|
1252
1122
|
<strong>
|
|
1253
|
-
Copyright © 2014-
|
|
1123
|
+
Copyright © 2014-2026
|
|
1254
1124
|
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
|
|
1255
1125
|
</strong>
|
|
1256
1126
|
All rights reserved.
|
|
@@ -1258,8 +1128,6 @@
|
|
|
1258
1128
|
</footer>
|
|
1259
1129
|
<!--end::Footer-->
|
|
1260
1130
|
</div>
|
|
1261
|
-
<!--end::App Wrapper-->
|
|
1262
|
-
<!--begin::Script-->
|
|
1263
1131
|
<!--begin::Third Party Plugin(OverlayScrollbars)-->
|
|
1264
1132
|
<script
|
|
1265
1133
|
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
|
|
@@ -1306,8 +1174,70 @@
|
|
|
1306
1174
|
}
|
|
1307
1175
|
});
|
|
1308
1176
|
</script>
|
|
1309
|
-
<!--end::OverlayScrollbars Configure-->
|
|
1310
|
-
|
|
1177
|
+
<!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
|
|
1178
|
+
<script>
|
|
1179
|
+
(() => {
|
|
1180
|
+
'use strict';
|
|
1181
|
+
|
|
1182
|
+
const STORAGE_KEY = 'lte-theme';
|
|
1183
|
+
|
|
1184
|
+
const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
|
|
1185
|
+
const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
|
|
1186
|
+
|
|
1187
|
+
const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
1188
|
+
|
|
1189
|
+
const getPreferredTheme = () => {
|
|
1190
|
+
const stored = getStoredTheme();
|
|
1191
|
+
if (stored) return stored;
|
|
1192
|
+
return prefersDark() ? 'dark' : 'light';
|
|
1193
|
+
};
|
|
1194
|
+
|
|
1195
|
+
const setTheme = (theme) => {
|
|
1196
|
+
const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
|
|
1197
|
+
document.documentElement.setAttribute('data-bs-theme', resolved);
|
|
1198
|
+
};
|
|
1199
|
+
|
|
1200
|
+
setTheme(getPreferredTheme());
|
|
1201
|
+
|
|
1202
|
+
const showActiveTheme = (theme) => {
|
|
1203
|
+
// Highlight the active dropdown option
|
|
1204
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
|
|
1205
|
+
el.classList.remove('active');
|
|
1206
|
+
el.setAttribute('aria-pressed', 'false');
|
|
1207
|
+
const check = el.querySelector('.bi-check-lg');
|
|
1208
|
+
if (check) check.classList.add('d-none');
|
|
1209
|
+
});
|
|
1210
|
+
const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
|
|
1211
|
+
if (active) {
|
|
1212
|
+
active.classList.add('active');
|
|
1213
|
+
active.setAttribute('aria-pressed', 'true');
|
|
1214
|
+
const check = active.querySelector('.bi-check-lg');
|
|
1215
|
+
if (check) check.classList.remove('d-none');
|
|
1216
|
+
}
|
|
1217
|
+
// Sync the topbar trigger icon
|
|
1218
|
+
document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
|
|
1219
|
+
icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
|
|
1220
|
+
});
|
|
1221
|
+
};
|
|
1222
|
+
|
|
1223
|
+
globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
1224
|
+
const stored = getStoredTheme();
|
|
1225
|
+
if (!stored || stored === 'auto') setTheme(getPreferredTheme());
|
|
1226
|
+
});
|
|
1227
|
+
|
|
1228
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
1229
|
+
showActiveTheme(getPreferredTheme());
|
|
1230
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
|
|
1231
|
+
toggle.addEventListener('click', () => {
|
|
1232
|
+
const theme = toggle.getAttribute('data-bs-theme-value');
|
|
1233
|
+
setStoredTheme(theme);
|
|
1234
|
+
setTheme(theme);
|
|
1235
|
+
showActiveTheme(theme);
|
|
1236
|
+
});
|
|
1237
|
+
});
|
|
1238
|
+
});
|
|
1239
|
+
})();
|
|
1240
|
+
</script>
|
|
1241
|
+
<!--end::Color Mode Toggle-->
|
|
1311
1242
|
</body>
|
|
1312
|
-
<!--end::Body-->
|
|
1313
1243
|
</html>
|