bootsteam-theme 5.3.0 → 5.3.2
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/dist/bootsteam-theme.css +12397 -12318
- package/dist/bootsteam-theme.min.css +5 -5
- package/docs/alerts.html +9 -8
- package/docs/badges.html +19 -18
- package/docs/buttons.html +12 -8
- package/docs/carousel.html +8 -7
- package/docs/collapse.html +39 -7
- package/docs/containers.html +103 -53
- package/docs/css/bootsteam-theme.min.css +5 -5
- package/docs/dialogs.html +8 -7
- package/docs/forms.html +54 -30
- package/docs/index.html +8 -7
- package/docs/navs.html +11 -10
- package/docs/offcanvas.html +8 -7
- package/docs/plugins.html +10 -9
- package/docs/scripts/scripts.js +0 -6
- package/docs/spinners.html +8 -7
- package/docs/tables.html +26 -100
- package/docs/themes.html +20 -66
- package/docs/toasts.html +12 -11
- package/docs/typography.html +48 -31
- package/docs-templates/alerts.html +1 -1
- package/docs-templates/badges.html +11 -11
- package/docs-templates/buttons.html +4 -1
- package/docs-templates/collapse.html +31 -0
- package/docs-templates/containers.html +104 -48
- package/docs-templates/forms.html +47 -24
- package/docs-templates/navs.html +3 -3
- package/docs-templates/partials/_nav.html +6 -5
- package/docs-templates/partials/_scripts.html +3 -2
- package/docs-templates/plugins.html +2 -2
- package/docs-templates/tables.html +18 -93
- package/docs-templates/themes.html +12 -3
- package/docs-templates/toasts.html +4 -4
- package/docs-templates/typography.html +38 -22
- package/gulpfile.js +5 -1
- package/package.json +3 -3
- package/src/_alerts.scss +7 -7
- package/src/_buttons.scss +93 -0
- package/src/_darkThemeOverrides.scss +24 -7
- package/src/_detailsElement.scss +44 -0
- package/src/_fieldset.scss +1 -0
- package/src/_forms.scss +1 -112
- package/src/_tables.scss +55 -43
- package/src/_text.scss +48 -0
- package/src/_twr-variables.scss +29 -10
- package/src/bootsteam.scss +6 -3
- package/src/plugins/_slimSelect.scss +1 -1
- package/src/_twr-variables-dark.scss +0 -23
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
<button type="button" class="btn btn-light">Light</button>
|
|
27
27
|
<button type="button" class="btn btn-dark">Dark</button>
|
|
28
28
|
<button type="button" class="btn btn-link">Link</button>
|
|
29
|
+
<button type="button" class="btn btn-accent">Accent</button>
|
|
29
30
|
</p>
|
|
30
31
|
<p>
|
|
31
32
|
<button type="button" class="btn btn-primary disabled">Primary</button>
|
|
@@ -37,6 +38,7 @@
|
|
|
37
38
|
<button type="button" class="btn btn-light disabled">Light</button>
|
|
38
39
|
<button type="button" class="btn btn-dark disabled">Dark</button>
|
|
39
40
|
<button type="button" class="btn btn-link disabled">Link</button>
|
|
41
|
+
<button type="button" class="btn btn-accent disabled">Accent</button>
|
|
40
42
|
</p>
|
|
41
43
|
<p>
|
|
42
44
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
@@ -61,7 +63,7 @@
|
|
|
61
63
|
|
|
62
64
|
<h3 class="display-4">Dropdowns</h3>
|
|
63
65
|
<hr />
|
|
64
|
-
<div
|
|
66
|
+
<div>
|
|
65
67
|
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
66
68
|
Action
|
|
67
69
|
</button>
|
|
@@ -144,6 +146,7 @@
|
|
|
144
146
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
145
147
|
</div>
|
|
146
148
|
</div>
|
|
149
|
+
|
|
147
150
|
</main>
|
|
148
151
|
|
|
149
152
|
@@include('./partials/_footer.html')
|
|
@@ -17,6 +17,8 @@
|
|
|
17
17
|
|
|
18
18
|
<h2 class="display-5">Collapse</h2>
|
|
19
19
|
<hr />
|
|
20
|
+
|
|
21
|
+
<h4>Bootstrap Accordion</h4>
|
|
20
22
|
<div class="accordion" id="accordionExample">
|
|
21
23
|
<div class="accordion-item">
|
|
22
24
|
<h2 class="accordion-header" id="headingOne">
|
|
@@ -55,6 +57,35 @@
|
|
|
55
57
|
</div>
|
|
56
58
|
</div>
|
|
57
59
|
</div>
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
<hr />
|
|
63
|
+
|
|
64
|
+
<h4>HTML Details Element</h4>
|
|
65
|
+
|
|
66
|
+
<details name="detail-test">
|
|
67
|
+
<summary>Details Item 1</summary>
|
|
68
|
+
<div>
|
|
69
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
70
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
71
|
+
</div>
|
|
72
|
+
</details>
|
|
73
|
+
|
|
74
|
+
<details name="detail-test">
|
|
75
|
+
<summary>Details Item 2</summary>
|
|
76
|
+
<div>
|
|
77
|
+
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
|
|
78
|
+
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
|
79
|
+
</div>
|
|
80
|
+
</details>
|
|
81
|
+
|
|
82
|
+
<details name="detail-test">
|
|
83
|
+
<summary>Details Item 3</summary>
|
|
84
|
+
<div>
|
|
85
|
+
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
|
|
86
|
+
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
|
87
|
+
</div>
|
|
88
|
+
</details>
|
|
58
89
|
</main>
|
|
59
90
|
|
|
60
91
|
@@include('./partials/_footer.html')
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
+
|
|
3
4
|
<head>
|
|
4
5
|
@@include('./partials/_head.html', {
|
|
5
6
|
"title": "Containers | Tower Bootstrap Theme"
|
|
6
7
|
})
|
|
7
8
|
</head>
|
|
9
|
+
|
|
8
10
|
<body>
|
|
9
11
|
@@include('./partials/_nav.html')
|
|
10
12
|
|
|
@@ -20,7 +22,7 @@
|
|
|
20
22
|
<h4>List Groups</h4>
|
|
21
23
|
<div class="row">
|
|
22
24
|
<div class="col-12 col-sm-4">
|
|
23
|
-
<ul class="list-group">
|
|
25
|
+
<ul class="list-group mb-3">
|
|
24
26
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
25
27
|
Cras justo odio
|
|
26
28
|
<span class="badge rounded-pill text-bg-primary">14</span>
|
|
@@ -36,7 +38,7 @@
|
|
|
36
38
|
</ul>
|
|
37
39
|
</div>
|
|
38
40
|
<div class="col-12 col-sm-4">
|
|
39
|
-
<div class="list-group">
|
|
41
|
+
<div class="list-group mb-3">
|
|
40
42
|
<a href="#" class="list-group-item list-group-item-action active">
|
|
41
43
|
Cras justo odio
|
|
42
44
|
</a>
|
|
@@ -52,13 +54,14 @@
|
|
|
52
54
|
</div>
|
|
53
55
|
</div>
|
|
54
56
|
<div class="col-12 col-sm-4">
|
|
55
|
-
<div class="list-group">
|
|
57
|
+
<div class="list-group mb-3">
|
|
56
58
|
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
|
|
57
59
|
<div class="d-flex w-100 justify-content-between">
|
|
58
60
|
<h5 class="mb-1">List group item heading</h5>
|
|
59
61
|
<small>3 days ago</small>
|
|
60
62
|
</div>
|
|
61
|
-
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
63
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
64
|
+
varius blandit.</p>
|
|
62
65
|
<small>Donec id elit non mi porta.</small>
|
|
63
66
|
</a>
|
|
64
67
|
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
|
@@ -66,18 +69,50 @@
|
|
|
66
69
|
<h5 class="mb-1">List group item heading</h5>
|
|
67
70
|
<small class="text-muted">3 days ago</small>
|
|
68
71
|
</div>
|
|
69
|
-
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
72
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
73
|
+
varius blandit.</p>
|
|
70
74
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
|
71
75
|
</a>
|
|
72
76
|
</div>
|
|
73
77
|
</div>
|
|
74
|
-
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="row">
|
|
81
|
+
<div class="col-md mb-3">
|
|
75
82
|
<h4>Figures</h4>
|
|
76
83
|
<figure class="figure">
|
|
77
|
-
<img class="figure-img img-fluid rounded"
|
|
84
|
+
<img class="figure-img img-fluid rounded"
|
|
85
|
+
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
|
|
86
|
+
alt="Card image">
|
|
78
87
|
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
|
79
88
|
</figure>
|
|
80
89
|
</div>
|
|
90
|
+
|
|
91
|
+
<div class="col-md mb-3">
|
|
92
|
+
<h4>Backgrounds</h4>
|
|
93
|
+
<div class="row mb-3">
|
|
94
|
+
<div class="col">
|
|
95
|
+
<div class="bg-body-secondary p-3 mb-2">
|
|
96
|
+
bg-body-secondary
|
|
97
|
+
</div>
|
|
98
|
+
<div class="bg-body-tertiary p-3 mb-2">
|
|
99
|
+
bg-body-tertiary
|
|
100
|
+
</div>
|
|
101
|
+
<div class="bg-gradient p-3 mb-2">
|
|
102
|
+
bg-gradient
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="col-md mb-3">
|
|
109
|
+
<h4>Fieldset</h4>
|
|
110
|
+
<fieldset>
|
|
111
|
+
<legend>Legend</legend>
|
|
112
|
+
<p>Content</p>
|
|
113
|
+
<div>More Content</div>
|
|
114
|
+
</fieldset>
|
|
115
|
+
</div>
|
|
81
116
|
</div>
|
|
82
117
|
|
|
83
118
|
<h4>Cards</h4>
|
|
@@ -87,114 +122,130 @@
|
|
|
87
122
|
<div class="card-header">Header</div>
|
|
88
123
|
<div class="card-body">
|
|
89
124
|
<h4 class="card-title">Primary card title</h4>
|
|
90
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
125
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
126
|
+
the card's content.</p>
|
|
91
127
|
</div>
|
|
92
128
|
</div>
|
|
93
129
|
<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
|
|
94
130
|
<div class="card-header">Header</div>
|
|
95
131
|
<div class="card-body">
|
|
96
132
|
<h4 class="card-title">Secondary card title</h4>
|
|
97
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
133
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
134
|
+
the card's content.</p>
|
|
98
135
|
</div>
|
|
99
136
|
</div>
|
|
100
137
|
<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
|
|
101
138
|
<div class="card-header">Header</div>
|
|
102
139
|
<div class="card-body">
|
|
103
140
|
<h4 class="card-title">Success card title</h4>
|
|
104
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
141
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
142
|
+
the card's content.</p>
|
|
105
143
|
</div>
|
|
106
144
|
</div>
|
|
107
145
|
<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
|
|
108
146
|
<div class="card-header">Header</div>
|
|
109
147
|
<div class="card-body">
|
|
110
148
|
<h4 class="card-title">Danger card title</h4>
|
|
111
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
149
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
150
|
+
the card's content.</p>
|
|
112
151
|
</div>
|
|
113
152
|
</div>
|
|
114
153
|
<div class="card text-dark bg-warning mb-3" style="max-width: 20rem;">
|
|
115
154
|
<div class="card-header">Header</div>
|
|
116
155
|
<div class="card-body">
|
|
117
156
|
<h4 class="card-title">Warning card title</h4>
|
|
118
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
157
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
158
|
+
the card's content.</p>
|
|
119
159
|
</div>
|
|
120
160
|
</div>
|
|
121
161
|
<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
|
|
122
162
|
<div class="card-header">Header</div>
|
|
123
163
|
<div class="card-body">
|
|
124
164
|
<h4 class="card-title">Info card title</h4>
|
|
125
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
165
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
166
|
+
the card's content.</p>
|
|
126
167
|
</div>
|
|
127
168
|
</div>
|
|
128
169
|
<div class="card bg-light text-dark mb-3" style="max-width: 20rem;">
|
|
129
170
|
<div class="card-header">Header</div>
|
|
130
171
|
<div class="card-body">
|
|
131
172
|
<h4 class="card-title">Light card title</h4>
|
|
132
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
173
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
174
|
+
the card's content.</p>
|
|
133
175
|
</div>
|
|
134
176
|
</div>
|
|
135
177
|
<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
|
|
136
178
|
<div class="card-header">Header</div>
|
|
137
179
|
<div class="card-body">
|
|
138
180
|
<h4 class="card-title">Dark card title</h4>
|
|
139
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
181
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
182
|
+
the card's content.</p>
|
|
140
183
|
</div>
|
|
141
184
|
</div>
|
|
142
185
|
</div>
|
|
143
186
|
<div class="col-12 col-sm-4">
|
|
144
|
-
<div class="card
|
|
187
|
+
<div class="card bg-primary-subtle mb-3" style="max-width: 20rem;">
|
|
145
188
|
<div class="card-header">Header</div>
|
|
146
|
-
<div class="card-body
|
|
147
|
-
<h4 class="card-title">Primary card
|
|
148
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
189
|
+
<div class="card-body">
|
|
190
|
+
<h4 class="card-title">Primary subtle card</h4>
|
|
191
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
192
|
+
the card's content.</p>
|
|
149
193
|
</div>
|
|
150
194
|
</div>
|
|
151
|
-
<div class="card
|
|
195
|
+
<div class="card bg-secondary-subtle mb-3" style="max-width: 20rem;">
|
|
152
196
|
<div class="card-header">Header</div>
|
|
153
|
-
<div class="card-body
|
|
154
|
-
<h4 class="card-title">Secondary card
|
|
155
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
197
|
+
<div class="card-body">
|
|
198
|
+
<h4 class="card-title">Secondary subtle card</h4>
|
|
199
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
200
|
+
the card's content.</p>
|
|
156
201
|
</div>
|
|
157
202
|
</div>
|
|
158
|
-
<div class="card
|
|
203
|
+
<div class="card bg-success-subtle mb-3" style="max-width: 20rem;">
|
|
159
204
|
<div class="card-header">Header</div>
|
|
160
|
-
<div class="card-body
|
|
161
|
-
<h4 class="card-title">Success card
|
|
162
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
205
|
+
<div class="card-body">
|
|
206
|
+
<h4 class="card-title">Success subtle card</h4>
|
|
207
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
208
|
+
the card's content.</p>
|
|
163
209
|
</div>
|
|
164
210
|
</div>
|
|
165
|
-
<div class="card
|
|
211
|
+
<div class="card bg-danger-subtle mb-3" style="max-width: 20rem;">
|
|
166
212
|
<div class="card-header">Header</div>
|
|
167
|
-
<div class="card-body
|
|
168
|
-
<h4 class="card-title">Danger card
|
|
169
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
213
|
+
<div class="card-body">
|
|
214
|
+
<h4 class="card-title">Danger subtle card</h4>
|
|
215
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
216
|
+
the card's content.</p>
|
|
170
217
|
</div>
|
|
171
218
|
</div>
|
|
172
|
-
<div class="card
|
|
219
|
+
<div class="card bg-warning-subtle mb-3" style="max-width: 20rem;">
|
|
173
220
|
<div class="card-header">Header</div>
|
|
174
|
-
<div class="card-body
|
|
175
|
-
<h4 class="card-title">Warning card
|
|
176
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
221
|
+
<div class="card-body">
|
|
222
|
+
<h4 class="card-title">Warning subtle card</h4>
|
|
223
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
224
|
+
the card's content.</p>
|
|
177
225
|
</div>
|
|
178
226
|
</div>
|
|
179
|
-
<div class="card
|
|
227
|
+
<div class="card bg-info-subtle mb-3" style="max-width: 20rem;">
|
|
180
228
|
<div class="card-header">Header</div>
|
|
181
|
-
<div class="card-body
|
|
182
|
-
<h4 class="card-title">Info card
|
|
183
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
229
|
+
<div class="card-body">
|
|
230
|
+
<h4 class="card-title">Info subtle card</h4>
|
|
231
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
232
|
+
the card's content.</p>
|
|
184
233
|
</div>
|
|
185
234
|
</div>
|
|
186
|
-
<div class="card
|
|
235
|
+
<div class="card bg-light-subtle mb-3" style="max-width: 20rem;">
|
|
187
236
|
<div class="card-header">Header</div>
|
|
188
237
|
<div class="card-body">
|
|
189
|
-
<h4 class="card-title">Light card
|
|
190
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
238
|
+
<h4 class="card-title">Light subtle card</h4>
|
|
239
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
240
|
+
the card's content.</p>
|
|
191
241
|
</div>
|
|
192
242
|
</div>
|
|
193
|
-
<div class="card
|
|
243
|
+
<div class="card bg-dark-subtle mb-3" style="max-width: 20rem;">
|
|
194
244
|
<div class="card-header">Header</div>
|
|
195
245
|
<div class="card-body">
|
|
196
|
-
<h4 class="card-title">Dark card
|
|
197
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
246
|
+
<h4 class="card-title">Dark subtle card</h4>
|
|
247
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
248
|
+
the card's content.</p>
|
|
198
249
|
</div>
|
|
199
250
|
</div>
|
|
200
251
|
</div>
|
|
@@ -205,9 +256,12 @@
|
|
|
205
256
|
<h5 class="card-title">Special title treatment</h5>
|
|
206
257
|
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
|
207
258
|
</div>
|
|
208
|
-
<img style="height: 200px; width: 100%; display: block;"
|
|
259
|
+
<img style="height: 200px; width: 100%; display: block;"
|
|
260
|
+
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
|
|
261
|
+
alt="Card image">
|
|
209
262
|
<div class="card-body">
|
|
210
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
263
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
264
|
+
the card's content.</p>
|
|
211
265
|
</div>
|
|
212
266
|
<ul class="list-group list-group-flush">
|
|
213
267
|
<li class="list-group-item">Cras justo odio</li>
|
|
@@ -226,7 +280,8 @@
|
|
|
226
280
|
<div class="card-body">
|
|
227
281
|
<h4 class="card-title">Card title</h4>
|
|
228
282
|
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
|
229
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
283
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
|
284
|
+
the card's content.</p>
|
|
230
285
|
<a href="#" class="card-link">Card link</a>
|
|
231
286
|
<a href="#" class="card-link">Another link</a>
|
|
232
287
|
</div>
|
|
@@ -262,4 +317,5 @@
|
|
|
262
317
|
@@include('./partials/_footer.html')
|
|
263
318
|
@@include('./partials/_scripts.html')
|
|
264
319
|
</body>
|
|
320
|
+
|
|
265
321
|
</html>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
@@include('./partials/_head.html', {
|
|
5
|
-
|
|
5
|
+
"title": "Forms | Tower Bootstrap Theme"
|
|
6
6
|
})
|
|
7
7
|
</head>
|
|
8
8
|
<body>
|
|
@@ -49,8 +49,18 @@
|
|
|
49
49
|
</select>
|
|
50
50
|
</div>
|
|
51
51
|
<div class="mb-3">
|
|
52
|
-
<label for="exampleSelect2">Example
|
|
53
|
-
<select
|
|
52
|
+
<label for="exampleSelect2">Example Select Auto Width</label>
|
|
53
|
+
<select class="form-select w-auto" id="exampleSelect2">
|
|
54
|
+
<option>Value 1</option>
|
|
55
|
+
<option>Value 2</option>
|
|
56
|
+
<option>Value 3</option>
|
|
57
|
+
<option>Value 4</option>
|
|
58
|
+
<option>Value 5</option>
|
|
59
|
+
</select>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="mb-3">
|
|
62
|
+
<label for="exampleSelect3">Example multiple select</label>
|
|
63
|
+
<select multiple="" class="form-select" id="exampleSelect3">
|
|
54
64
|
<option>1</option>
|
|
55
65
|
<option>2</option>
|
|
56
66
|
<option>3</option>
|
|
@@ -59,23 +69,23 @@
|
|
|
59
69
|
</select>
|
|
60
70
|
</div>
|
|
61
71
|
<div class="mb-3">
|
|
62
|
-
<label for="
|
|
72
|
+
<label for="exampleDate">Date</label>
|
|
63
73
|
<input type="date" class="form-control" id="exampleDate" />
|
|
64
74
|
</div>
|
|
65
75
|
<div class="mb-3">
|
|
66
|
-
<label for="
|
|
76
|
+
<label for="exampleTime">Time</label>
|
|
67
77
|
<input type="time" class="form-control" id="exampleTime" />
|
|
68
78
|
</div>
|
|
69
79
|
<div class="mb-3">
|
|
70
|
-
<label for="
|
|
80
|
+
<label for="exampleDateTime">DateTime</label>
|
|
71
81
|
<input type="datetime-local" class="form-control" id="exampleDateTime" />
|
|
72
82
|
</div>
|
|
73
83
|
<div class="mb-3">
|
|
74
|
-
<label for="
|
|
84
|
+
<label for="exampleWeek">Week</label>
|
|
75
85
|
<input type="week" class="form-control" id="exampleWeek" />
|
|
76
86
|
</div>
|
|
77
87
|
<div class="mb-3">
|
|
78
|
-
<label for="
|
|
88
|
+
<label for="exampleMonth">Month</label>
|
|
79
89
|
<input type="month" class="form-control" id="exampleMonth" />
|
|
80
90
|
</div>
|
|
81
91
|
<div class="mb-3">
|
|
@@ -92,7 +102,7 @@
|
|
|
92
102
|
<label class="control-label" for="disabledInput">Disabled input</label>
|
|
93
103
|
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
|
|
94
104
|
</div>
|
|
95
|
-
<label class="control-label" for="
|
|
105
|
+
<label class="control-label" for="disabledSelect">Disabled select</label>
|
|
96
106
|
<select class="form-select" id="disabledSelect" disabled="">
|
|
97
107
|
<option value="1">Option 1</option>
|
|
98
108
|
</select>
|
|
@@ -102,18 +112,18 @@
|
|
|
102
112
|
<div class="mb-3">
|
|
103
113
|
<fieldset>
|
|
104
114
|
<label class="control-label" for="readOnlyInput">Readonly input</label>
|
|
105
|
-
<input class="form-control" id="readOnlyInput" type="text" value="Readonly input here
|
|
115
|
+
<input class="form-control" id="readOnlyInput" type="text" value="Readonly input here..." readonly="">
|
|
106
116
|
</fieldset>
|
|
107
117
|
</div>
|
|
108
118
|
|
|
109
119
|
<div class="has-success">
|
|
110
|
-
<label class="form-control-label" for="
|
|
120
|
+
<label class="form-control-label" for="inputValid">Valid input</label>
|
|
111
121
|
<input type="text" value="correct value" class="form-control is-valid" id="inputValid">
|
|
112
122
|
<div class="valid-feedback">Success! You've done it.</div>
|
|
113
123
|
</div>
|
|
114
124
|
|
|
115
125
|
<div class="has-danger">
|
|
116
|
-
<label class="form-control-label" for="
|
|
126
|
+
<label class="form-control-label" for="inputInvalid">Invalid input</label>
|
|
117
127
|
<input type="text" value="wrong value" class="form-control is-invalid" id="inputInvalid">
|
|
118
128
|
<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
|
|
119
129
|
</div>
|
|
@@ -134,20 +144,20 @@
|
|
|
134
144
|
</div>
|
|
135
145
|
|
|
136
146
|
<div class="mb-3">
|
|
137
|
-
<label class="control-label">Input addons</label>
|
|
147
|
+
<label class="control-label" for="inputWithAddons">Input addons</label>
|
|
138
148
|
<div class="input-group mb-3">
|
|
139
149
|
<span class="input-group-text">$</span>
|
|
140
|
-
<input type="text" class="form-control"
|
|
150
|
+
<input type="text" class="form-control" id="inputWithAddons">
|
|
141
151
|
<span class="input-group-text">.00</span>
|
|
142
152
|
</div>
|
|
143
153
|
</div>
|
|
144
154
|
|
|
145
155
|
<div class="mb-3">
|
|
146
156
|
<label for="exampleInputFile" class="d-block">Default File Input</label>
|
|
147
|
-
<input type="file" id="exampleInputFile"
|
|
157
|
+
<input type="file" id="exampleInputFile">
|
|
148
158
|
</div>
|
|
149
159
|
<div class="mb-3">
|
|
150
|
-
<label for="
|
|
160
|
+
<label for="customFile">Form Control File Input</label>
|
|
151
161
|
<input type="file" class="form-control" id="customFile">
|
|
152
162
|
</div>
|
|
153
163
|
</div>
|
|
@@ -157,8 +167,8 @@
|
|
|
157
167
|
<h5>Input Group</h5>
|
|
158
168
|
<div class="col">
|
|
159
169
|
<div class="input-group">
|
|
160
|
-
<input type="text" class="form-control" />
|
|
161
|
-
<select class="form-select">
|
|
170
|
+
<input type="text" class="form-control" aria-label="Input Group Input" />
|
|
171
|
+
<select class="form-select" aria-label="Input Group Select">
|
|
162
172
|
<option>Option 1</option>
|
|
163
173
|
<option>Option 2</option>
|
|
164
174
|
<option>Option 3</option>
|
|
@@ -228,8 +238,21 @@
|
|
|
228
238
|
<fieldset>
|
|
229
239
|
<legend>Color Picker</legend>
|
|
230
240
|
<label for="exampleColorInput" class="form-label">Color picker</label>
|
|
231
|
-
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
|
|
241
|
+
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" list="example-color-list" title="Choose your color">
|
|
232
242
|
</fieldset>
|
|
243
|
+
|
|
244
|
+
<datalist id="example-color-list">
|
|
245
|
+
<option value="#f2002b"></option>
|
|
246
|
+
<option value="#f98016"></option>
|
|
247
|
+
<option value="#fcc00b"></option>
|
|
248
|
+
<option value="#ffff00"></option>
|
|
249
|
+
<option value="#00cc66"></option>
|
|
250
|
+
<option value="#1ec9d9"></option>
|
|
251
|
+
<option value="#496ddb"></option>
|
|
252
|
+
<option value="#4309b7"></option>
|
|
253
|
+
<option value="#7209b7"></option>
|
|
254
|
+
<option value="#c22b9a"></option>
|
|
255
|
+
</datalist>
|
|
233
256
|
</div>
|
|
234
257
|
<div class="col-12 col-sm-6 mb-3">
|
|
235
258
|
<fieldset>
|
|
@@ -260,7 +283,7 @@
|
|
|
260
283
|
<hr />
|
|
261
284
|
|
|
262
285
|
<fieldset>
|
|
263
|
-
<legend>ASP
|
|
286
|
+
<legend>ASP and jQuery Validation Classes</legend>
|
|
264
287
|
|
|
265
288
|
<div class="validation-summary-errors">
|
|
266
289
|
<ul>
|
|
@@ -270,13 +293,13 @@
|
|
|
270
293
|
</div>
|
|
271
294
|
|
|
272
295
|
<div class="mb-3">
|
|
273
|
-
<label>test</label>
|
|
274
|
-
<input type="text" class="form-control input-validation-error" />
|
|
296
|
+
<label for="input-error-test">test</label>
|
|
297
|
+
<input type="text" class="form-control input-validation-error" id="input-error-test" />
|
|
275
298
|
<span class="field-validation-error">This field is required</span>
|
|
276
299
|
</div>
|
|
277
300
|
<div class="mb-3">
|
|
278
|
-
<label>test</label>
|
|
279
|
-
<select class="form-select input-validation-error">
|
|
301
|
+
<label for="select-error-test">test</label>
|
|
302
|
+
<select class="form-select input-validation-error" id="select-error-test">
|
|
280
303
|
<option value="">Select an Option</option>
|
|
281
304
|
<option value="1">Option 1</option>
|
|
282
305
|
<option value="2">Option 2</option>
|
package/docs-templates/navs.html
CHANGED
|
@@ -123,13 +123,13 @@
|
|
|
123
123
|
<h4>Tabs</h4>
|
|
124
124
|
<!-- Nav tabs -->
|
|
125
125
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
126
|
-
<li class="nav-item">
|
|
126
|
+
<li class="nav-item" role="presentation">
|
|
127
127
|
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
|
128
128
|
</li>
|
|
129
|
-
<li class="nav-item">
|
|
129
|
+
<li class="nav-item" role="presentation">
|
|
130
130
|
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
|
131
131
|
</li>
|
|
132
|
-
<li class="nav-item">
|
|
132
|
+
<li class="nav-item" role="presentation">
|
|
133
133
|
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
|
|
134
134
|
</li>
|
|
135
135
|
</ul>
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-
|
|
1
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
2
2
|
<div class="container">
|
|
3
|
-
<a href="index.html" class="navbar-brand">
|
|
3
|
+
<a href="index.html" class="navbar-brand">Tower Bootstrap Theme</a>
|
|
4
4
|
|
|
5
|
-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
5
|
+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
6
|
+
data-bs-target="#navbar-collapse-area" aria-label="Toggle Navigation">
|
|
6
7
|
<span class="navbar-toggler-icon"></span>
|
|
7
8
|
</button>
|
|
8
9
|
|
|
9
10
|
<div class="collapse navbar-collapse" id="navbar-collapse-area">
|
|
10
11
|
<ul class="navbar-nav ms-auto">
|
|
11
12
|
<li class="nav-item dropdown">
|
|
12
|
-
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
13
|
+
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-label="Theme Changer">
|
|
13
14
|
<span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
|
|
14
15
|
</button>
|
|
15
|
-
<div class="dropdown-menu
|
|
16
|
+
<div class="dropdown-menu">
|
|
16
17
|
<button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
|
|
17
18
|
<button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
|
|
18
19
|
<button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
3
|
-
|
|
4
|
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script
|
|
3
|
+
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
4
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>-->
|
|
5
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
|
5
6
|
<script src="scripts/scripts.js"></script>
|