bootsteam-theme 5.3.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/.gitattributes +66 -0
- package/README.md +5 -0
- package/dist/bootsteam-theme.css +12319 -0
- package/dist/bootsteam-theme.min.css +5 -0
- package/docs/alerts.html +118 -0
- package/docs/badges.html +140 -0
- package/docs/buttons.html +194 -0
- package/docs/carousel.html +109 -0
- package/docs/collapse.html +105 -0
- package/docs/containers.html +307 -0
- package/docs/css/bootsteam-theme.min.css +5 -0
- package/docs/dialogs.html +154 -0
- package/docs/forms.html +335 -0
- package/docs/index.html +108 -0
- package/docs/navs.html +250 -0
- package/docs/offcanvas.html +92 -0
- package/docs/plugins.html +99 -0
- package/docs/scripts/scripts.js +70 -0
- package/docs/scripts/themeHandler.js +57 -0
- package/docs/spinners.html +145 -0
- package/docs/tables.html +613 -0
- package/docs/themes.html +166 -0
- package/docs/toasts.html +119 -0
- package/docs/typography.html +176 -0
- package/docs-templates/alerts.html +76 -0
- package/docs-templates/badges.html +98 -0
- package/docs-templates/buttons.html +152 -0
- package/docs-templates/carousel.html +67 -0
- package/docs-templates/collapse.html +63 -0
- package/docs-templates/containers.html +265 -0
- package/docs-templates/dialogs.html +112 -0
- package/docs-templates/forms.html +293 -0
- package/docs-templates/index.html +66 -0
- package/docs-templates/navs.html +208 -0
- package/docs-templates/offcanvas.html +50 -0
- package/docs-templates/partials/_footer.html +4 -0
- package/docs-templates/partials/_head.html +7 -0
- package/docs-templates/partials/_nav.html +29 -0
- package/docs-templates/partials/_scripts.html +5 -0
- package/docs-templates/plugins.html +57 -0
- package/docs-templates/spinners.html +103 -0
- package/docs-templates/tables.html +571 -0
- package/docs-templates/themes.html +68 -0
- package/docs-templates/toasts.html +77 -0
- package/docs-templates/typography.html +134 -0
- package/gulpfile.js +51 -0
- package/package.json +17 -0
- package/src/_alerts.scss +65 -0
- package/src/_darkThemeOverrides.scss +74 -0
- package/src/_fieldset.scss +27 -0
- package/src/_forms.scss +134 -0
- package/src/_tables.scss +77 -0
- package/src/_twr-variables-dark.scss +23 -0
- package/src/_twr-variables.scss +71 -0
- package/src/bootsteam.scss +25 -0
- package/src/plugins/_allPlugins.scss +2 -0
- package/src/plugins/_slimSelect.scss +106 -0
- package/src/plugins/_summernote.scss +45 -0
|
@@ -0,0 +1,571 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
@@include('./partials/_head.html', {
|
|
5
|
+
"title": "Tables | Tower Bootstrap Theme"
|
|
6
|
+
})
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
@@include('./partials/_nav.html')
|
|
10
|
+
|
|
11
|
+
<main class="container mt-5 pt-2">
|
|
12
|
+
<ol class="breadcrumb">
|
|
13
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
14
|
+
<li class="breadcrumb-item active">Tables</li>
|
|
15
|
+
</ol>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<h2 class="display-4">Tables</h2>
|
|
19
|
+
<hr />
|
|
20
|
+
|
|
21
|
+
<h4>Basic</h4>
|
|
22
|
+
<table class="table">
|
|
23
|
+
<thead>
|
|
24
|
+
<tr>
|
|
25
|
+
<th scope="col">#</th>
|
|
26
|
+
<th scope="col">First</th>
|
|
27
|
+
<th scope="col">Last</th>
|
|
28
|
+
<th scope="col">Handle</th>
|
|
29
|
+
</tr>
|
|
30
|
+
</thead>
|
|
31
|
+
<tbody>
|
|
32
|
+
<tr>
|
|
33
|
+
<th scope="row">1</th>
|
|
34
|
+
<td>Mark</td>
|
|
35
|
+
<td>Otto</td>
|
|
36
|
+
<td>@mdo</td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr>
|
|
39
|
+
<th scope="row">2</th>
|
|
40
|
+
<td>Jacob</td>
|
|
41
|
+
<td>Thornton</td>
|
|
42
|
+
<td>@fat</td>
|
|
43
|
+
</tr>
|
|
44
|
+
<tr>
|
|
45
|
+
<th scope="row">3</th>
|
|
46
|
+
<td>Larry</td>
|
|
47
|
+
<td>the Bird</td>
|
|
48
|
+
<td>@twitter</td>
|
|
49
|
+
</tr>
|
|
50
|
+
</tbody>
|
|
51
|
+
</table>
|
|
52
|
+
<h4>Dark</h4>
|
|
53
|
+
<table class="table table-dark">
|
|
54
|
+
<thead>
|
|
55
|
+
<tr>
|
|
56
|
+
<th scope="col">#</th>
|
|
57
|
+
<th scope="col">First</th>
|
|
58
|
+
<th scope="col">Last</th>
|
|
59
|
+
<th scope="col">Handle</th>
|
|
60
|
+
</tr>
|
|
61
|
+
</thead>
|
|
62
|
+
<tbody>
|
|
63
|
+
<tr>
|
|
64
|
+
<th scope="row">1</th>
|
|
65
|
+
<td>Mark</td>
|
|
66
|
+
<td>Otto</td>
|
|
67
|
+
<td>@mdo</td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<th scope="row">2</th>
|
|
71
|
+
<td>Jacob</td>
|
|
72
|
+
<td>Thornton</td>
|
|
73
|
+
<td>@fat</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<th scope="row">3</th>
|
|
77
|
+
<td>Larry</td>
|
|
78
|
+
<td>the Bird</td>
|
|
79
|
+
<td>@twitter</td>
|
|
80
|
+
</tr>
|
|
81
|
+
</tbody>
|
|
82
|
+
</table>
|
|
83
|
+
<h4>Header Options</h4>
|
|
84
|
+
<table class="table">
|
|
85
|
+
<thead class="thead-dark">
|
|
86
|
+
<tr>
|
|
87
|
+
<th scope="col">#</th>
|
|
88
|
+
<th scope="col">First</th>
|
|
89
|
+
<th scope="col">Last</th>
|
|
90
|
+
<th scope="col">Handle</th>
|
|
91
|
+
</tr>
|
|
92
|
+
</thead>
|
|
93
|
+
<tbody>
|
|
94
|
+
<tr>
|
|
95
|
+
<th scope="row">1</th>
|
|
96
|
+
<td>Mark</td>
|
|
97
|
+
<td>Otto</td>
|
|
98
|
+
<td>@mdo</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<th scope="row">2</th>
|
|
102
|
+
<td>Jacob</td>
|
|
103
|
+
<td>Thornton</td>
|
|
104
|
+
<td>@fat</td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<th scope="row">3</th>
|
|
108
|
+
<td>Larry</td>
|
|
109
|
+
<td>the Bird</td>
|
|
110
|
+
<td>@twitter</td>
|
|
111
|
+
</tr>
|
|
112
|
+
</tbody>
|
|
113
|
+
</table>
|
|
114
|
+
|
|
115
|
+
<table class="table">
|
|
116
|
+
<thead class="thead-light">
|
|
117
|
+
<tr>
|
|
118
|
+
<th scope="col">#</th>
|
|
119
|
+
<th scope="col">First</th>
|
|
120
|
+
<th scope="col">Last</th>
|
|
121
|
+
<th scope="col">Handle</th>
|
|
122
|
+
</tr>
|
|
123
|
+
</thead>
|
|
124
|
+
<tbody>
|
|
125
|
+
<tr>
|
|
126
|
+
<th scope="row">1</th>
|
|
127
|
+
<td>Mark</td>
|
|
128
|
+
<td>Otto</td>
|
|
129
|
+
<td>@mdo</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<th scope="row">2</th>
|
|
133
|
+
<td>Jacob</td>
|
|
134
|
+
<td>Thornton</td>
|
|
135
|
+
<td>@fat</td>
|
|
136
|
+
</tr>
|
|
137
|
+
<tr>
|
|
138
|
+
<th scope="row">3</th>
|
|
139
|
+
<td>Larry</td>
|
|
140
|
+
<td>the Bird</td>
|
|
141
|
+
<td>@twitter</td>
|
|
142
|
+
</tr>
|
|
143
|
+
</tbody>
|
|
144
|
+
</table>
|
|
145
|
+
<h4>Striped Light</h4>
|
|
146
|
+
<table class="table table-striped">
|
|
147
|
+
<thead>
|
|
148
|
+
<tr>
|
|
149
|
+
<th scope="col">#</th>
|
|
150
|
+
<th scope="col">First</th>
|
|
151
|
+
<th scope="col">Last</th>
|
|
152
|
+
<th scope="col">Handle</th>
|
|
153
|
+
</tr>
|
|
154
|
+
</thead>
|
|
155
|
+
<tbody>
|
|
156
|
+
<tr>
|
|
157
|
+
<th scope="row">1</th>
|
|
158
|
+
<td>Mark</td>
|
|
159
|
+
<td>Otto</td>
|
|
160
|
+
<td>@mdo</td>
|
|
161
|
+
</tr>
|
|
162
|
+
<tr>
|
|
163
|
+
<th scope="row">2</th>
|
|
164
|
+
<td>Jacob</td>
|
|
165
|
+
<td>Thornton</td>
|
|
166
|
+
<td>@fat</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<th scope="row">3</th>
|
|
170
|
+
<td>Larry</td>
|
|
171
|
+
<td>the Bird</td>
|
|
172
|
+
<td>@twitter</td>
|
|
173
|
+
</tr>
|
|
174
|
+
</tbody>
|
|
175
|
+
</table>
|
|
176
|
+
<h4>Striped Dark</h4>
|
|
177
|
+
<table class="table table-striped table-dark">
|
|
178
|
+
<thead>
|
|
179
|
+
<tr>
|
|
180
|
+
<th scope="col">#</th>
|
|
181
|
+
<th scope="col">First</th>
|
|
182
|
+
<th scope="col">Last</th>
|
|
183
|
+
<th scope="col">Handle</th>
|
|
184
|
+
</tr>
|
|
185
|
+
</thead>
|
|
186
|
+
<tbody>
|
|
187
|
+
<tr>
|
|
188
|
+
<th scope="row">1</th>
|
|
189
|
+
<td>Mark</td>
|
|
190
|
+
<td>Otto</td>
|
|
191
|
+
<td>@mdo</td>
|
|
192
|
+
</tr>
|
|
193
|
+
<tr>
|
|
194
|
+
<th scope="row">2</th>
|
|
195
|
+
<td>Jacob</td>
|
|
196
|
+
<td>Thornton</td>
|
|
197
|
+
<td>@fat</td>
|
|
198
|
+
</tr>
|
|
199
|
+
<tr>
|
|
200
|
+
<th scope="row">3</th>
|
|
201
|
+
<td>Larry</td>
|
|
202
|
+
<td>the Bird</td>
|
|
203
|
+
<td>@twitter</td>
|
|
204
|
+
</tr>
|
|
205
|
+
</tbody>
|
|
206
|
+
</table>
|
|
207
|
+
<h4>Bordered</h4>
|
|
208
|
+
<table class="table table-bordered">
|
|
209
|
+
<thead>
|
|
210
|
+
<tr>
|
|
211
|
+
<th scope="col">#</th>
|
|
212
|
+
<th scope="col">First</th>
|
|
213
|
+
<th scope="col">Last</th>
|
|
214
|
+
<th scope="col">Handle</th>
|
|
215
|
+
</tr>
|
|
216
|
+
</thead>
|
|
217
|
+
<tbody>
|
|
218
|
+
<tr>
|
|
219
|
+
<th scope="row">1</th>
|
|
220
|
+
<td>Mark</td>
|
|
221
|
+
<td>Otto</td>
|
|
222
|
+
<td>@mdo</td>
|
|
223
|
+
</tr>
|
|
224
|
+
<tr>
|
|
225
|
+
<th scope="row">2</th>
|
|
226
|
+
<td>Jacob</td>
|
|
227
|
+
<td>Thornton</td>
|
|
228
|
+
<td>@fat</td>
|
|
229
|
+
</tr>
|
|
230
|
+
<tr>
|
|
231
|
+
<th scope="row">3</th>
|
|
232
|
+
<td colspan="2">Larry the Bird</td>
|
|
233
|
+
<td>@twitter</td>
|
|
234
|
+
</tr>
|
|
235
|
+
</tbody>
|
|
236
|
+
</table>
|
|
237
|
+
|
|
238
|
+
<table class="table table-bordered table-dark">
|
|
239
|
+
<thead>
|
|
240
|
+
<tr>
|
|
241
|
+
<th scope="col">#</th>
|
|
242
|
+
<th scope="col">First</th>
|
|
243
|
+
<th scope="col">Last</th>
|
|
244
|
+
<th scope="col">Handle</th>
|
|
245
|
+
</tr>
|
|
246
|
+
</thead>
|
|
247
|
+
<tbody>
|
|
248
|
+
<tr>
|
|
249
|
+
<th scope="row">1</th>
|
|
250
|
+
<td>Mark</td>
|
|
251
|
+
<td>Otto</td>
|
|
252
|
+
<td>@mdo</td>
|
|
253
|
+
</tr>
|
|
254
|
+
<tr>
|
|
255
|
+
<th scope="row">2</th>
|
|
256
|
+
<td>Jacob</td>
|
|
257
|
+
<td>Thornton</td>
|
|
258
|
+
<td>@fat</td>
|
|
259
|
+
</tr>
|
|
260
|
+
<tr>
|
|
261
|
+
<th scope="row">3</th>
|
|
262
|
+
<td colspan="2">Larry the Bird</td>
|
|
263
|
+
<td>@twitter</td>
|
|
264
|
+
</tr>
|
|
265
|
+
</tbody>
|
|
266
|
+
</table>
|
|
267
|
+
<h4>Hover Rows</h4>
|
|
268
|
+
<table class="table table-hover">
|
|
269
|
+
<thead>
|
|
270
|
+
<tr>
|
|
271
|
+
<th scope="col">#</th>
|
|
272
|
+
<th scope="col">First</th>
|
|
273
|
+
<th scope="col">Last</th>
|
|
274
|
+
<th scope="col">Handle</th>
|
|
275
|
+
</tr>
|
|
276
|
+
</thead>
|
|
277
|
+
<tbody>
|
|
278
|
+
<tr>
|
|
279
|
+
<th scope="row">1</th>
|
|
280
|
+
<td>Mark</td>
|
|
281
|
+
<td>Otto</td>
|
|
282
|
+
<td>@mdo</td>
|
|
283
|
+
</tr>
|
|
284
|
+
<tr>
|
|
285
|
+
<th scope="row">2</th>
|
|
286
|
+
<td>Jacob</td>
|
|
287
|
+
<td>Thornton</td>
|
|
288
|
+
<td>@fat</td>
|
|
289
|
+
</tr>
|
|
290
|
+
<tr>
|
|
291
|
+
<th scope="row">3</th>
|
|
292
|
+
<td colspan="2">Larry the Bird</td>
|
|
293
|
+
<td>@twitter</td>
|
|
294
|
+
</tr>
|
|
295
|
+
</tbody>
|
|
296
|
+
</table>
|
|
297
|
+
<table class="table table-hover table-dark">
|
|
298
|
+
<thead>
|
|
299
|
+
<tr>
|
|
300
|
+
<th scope="col">#</th>
|
|
301
|
+
<th scope="col">First</th>
|
|
302
|
+
<th scope="col">Last</th>
|
|
303
|
+
<th scope="col">Handle</th>
|
|
304
|
+
</tr>
|
|
305
|
+
</thead>
|
|
306
|
+
<tbody>
|
|
307
|
+
<tr>
|
|
308
|
+
<th scope="row">1</th>
|
|
309
|
+
<td>Mark</td>
|
|
310
|
+
<td>Otto</td>
|
|
311
|
+
<td>@mdo</td>
|
|
312
|
+
</tr>
|
|
313
|
+
<tr>
|
|
314
|
+
<th scope="row">2</th>
|
|
315
|
+
<td>Jacob</td>
|
|
316
|
+
<td>Thornton</td>
|
|
317
|
+
<td>@fat</td>
|
|
318
|
+
</tr>
|
|
319
|
+
<tr>
|
|
320
|
+
<th scope="row">3</th>
|
|
321
|
+
<td colspan="2">Larry the Bird</td>
|
|
322
|
+
<td>@twitter</td>
|
|
323
|
+
</tr>
|
|
324
|
+
</tbody>
|
|
325
|
+
</table>
|
|
326
|
+
<h4>Theme Colors</h4>
|
|
327
|
+
<table class="table table-hover table-bordered">
|
|
328
|
+
<thead>
|
|
329
|
+
<tr>
|
|
330
|
+
<th scope="col">Type</th>
|
|
331
|
+
<th scope="col">Column heading</th>
|
|
332
|
+
<th scope="col">Column heading</th>
|
|
333
|
+
</tr>
|
|
334
|
+
</thead>
|
|
335
|
+
<tbody>
|
|
336
|
+
<tr class="table-active">
|
|
337
|
+
<th scope="row">Active</th>
|
|
338
|
+
<td>Cell</td>
|
|
339
|
+
<td>Cell</td>
|
|
340
|
+
</tr>
|
|
341
|
+
<tr>
|
|
342
|
+
<th scope="row">Default</th>
|
|
343
|
+
<td>Cell</td>
|
|
344
|
+
<td>Cell</td>
|
|
345
|
+
</tr>
|
|
346
|
+
<tr class="table-primary">
|
|
347
|
+
<th scope="row">Primary</th>
|
|
348
|
+
<td>Cell</td>
|
|
349
|
+
<td>Cell</td>
|
|
350
|
+
</tr>
|
|
351
|
+
<tr class="table-secondary">
|
|
352
|
+
<th scope="row">Secondary</th>
|
|
353
|
+
<td>Cell</td>
|
|
354
|
+
<td>Cell</td>
|
|
355
|
+
</tr>
|
|
356
|
+
<tr class="table-success">
|
|
357
|
+
<th scope="row">Success</th>
|
|
358
|
+
<td>Cell</td>
|
|
359
|
+
<td>Cell</td>
|
|
360
|
+
</tr>
|
|
361
|
+
<tr class="table-danger">
|
|
362
|
+
<th scope="row">Danger</th>
|
|
363
|
+
<td>Cell</td>
|
|
364
|
+
<td>Cell</td>
|
|
365
|
+
</tr>
|
|
366
|
+
<tr class="table-warning">
|
|
367
|
+
<th scope="row">Warning</th>
|
|
368
|
+
<td>Cell</td>
|
|
369
|
+
<td>Cell</td>
|
|
370
|
+
</tr>
|
|
371
|
+
<tr class="table-info">
|
|
372
|
+
<th scope="row">Info</th>
|
|
373
|
+
<td>Cell</td>
|
|
374
|
+
<td>Cell</td>
|
|
375
|
+
</tr>
|
|
376
|
+
<tr class="table-light">
|
|
377
|
+
<th scope="row">Light</th>
|
|
378
|
+
<td>Cell</td>
|
|
379
|
+
<td>Cell</td>
|
|
380
|
+
</tr>
|
|
381
|
+
<tr class="table-dark">
|
|
382
|
+
<th scope="row">Dark</th>
|
|
383
|
+
<td>Cell</td>
|
|
384
|
+
<td>Cell</td>
|
|
385
|
+
</tr>
|
|
386
|
+
</tbody>
|
|
387
|
+
</table>
|
|
388
|
+
<table class="table table-hover table-bordered table-striped">
|
|
389
|
+
<thead>
|
|
390
|
+
<tr>
|
|
391
|
+
<th scope="col">Type</th>
|
|
392
|
+
<th scope="col">Column heading</th>
|
|
393
|
+
<th scope="col">Column heading</th>
|
|
394
|
+
</tr>
|
|
395
|
+
</thead>
|
|
396
|
+
<tbody>
|
|
397
|
+
<tr class="table-active">
|
|
398
|
+
<th scope="row">Active</th>
|
|
399
|
+
<td>Cell</td>
|
|
400
|
+
<td>Cell</td>
|
|
401
|
+
</tr>
|
|
402
|
+
<tr class="table-active">
|
|
403
|
+
<th scope="row">Active</th>
|
|
404
|
+
<td>Cell</td>
|
|
405
|
+
<td>Cell</td>
|
|
406
|
+
</tr>
|
|
407
|
+
<tr>
|
|
408
|
+
<th scope="row">Default</th>
|
|
409
|
+
<td>Cell</td>
|
|
410
|
+
<td>Cell</td>
|
|
411
|
+
</tr>
|
|
412
|
+
<tr>
|
|
413
|
+
<th scope="row">Default</th>
|
|
414
|
+
<td>Cell</td>
|
|
415
|
+
<td>Cell</td>
|
|
416
|
+
</tr>
|
|
417
|
+
<tr class="table-primary">
|
|
418
|
+
<th scope="row">Primary</th>
|
|
419
|
+
<td>Cell</td>
|
|
420
|
+
<td>Cell</td>
|
|
421
|
+
</tr>
|
|
422
|
+
<tr class="table-primary">
|
|
423
|
+
<th scope="row">Primary</th>
|
|
424
|
+
<td>Cell</td>
|
|
425
|
+
<td>Cell</td>
|
|
426
|
+
</tr>
|
|
427
|
+
<tr class="table-primary table-active">
|
|
428
|
+
<th scope="row">Primary</th>
|
|
429
|
+
<td>Cell</td>
|
|
430
|
+
<td>Cell</td>
|
|
431
|
+
</tr>
|
|
432
|
+
<tr class="table-secondary">
|
|
433
|
+
<th scope="row">Secondary</th>
|
|
434
|
+
<td>Cell</td>
|
|
435
|
+
<td>Cell</td>
|
|
436
|
+
</tr>
|
|
437
|
+
<tr class="table-secondary">
|
|
438
|
+
<th scope="row">Secondary</th>
|
|
439
|
+
<td>Cell</td>
|
|
440
|
+
<td>Cell</td>
|
|
441
|
+
</tr>
|
|
442
|
+
<tr class="table-secondary table-active">
|
|
443
|
+
<th scope="row">Secondary</th>
|
|
444
|
+
<td>Cell</td>
|
|
445
|
+
<td>Cell</td>
|
|
446
|
+
</tr>
|
|
447
|
+
<tr class="table-success">
|
|
448
|
+
<th scope="row">Success</th>
|
|
449
|
+
<td>Cell</td>
|
|
450
|
+
<td>Cell</td>
|
|
451
|
+
</tr>
|
|
452
|
+
<tr class="table-success">
|
|
453
|
+
<th scope="row">Success</th>
|
|
454
|
+
<td>Cell</td>
|
|
455
|
+
<td>Cell</td>
|
|
456
|
+
</tr>
|
|
457
|
+
<tr class="table-success table-active">
|
|
458
|
+
<th scope="row">Success</th>
|
|
459
|
+
<td>Cell</td>
|
|
460
|
+
<td>Cell</td>
|
|
461
|
+
</tr>
|
|
462
|
+
<tr class="table-danger">
|
|
463
|
+
<th scope="row">Danger</th>
|
|
464
|
+
<td>Cell</td>
|
|
465
|
+
<td>Cell</td>
|
|
466
|
+
</tr>
|
|
467
|
+
<tr class="table-danger">
|
|
468
|
+
<th scope="row">Danger</th>
|
|
469
|
+
<td>Cell</td>
|
|
470
|
+
<td>Cell</td>
|
|
471
|
+
</tr>
|
|
472
|
+
<tr class="table-danger table-active">
|
|
473
|
+
<th scope="row">Danger</th>
|
|
474
|
+
<td>Cell</td>
|
|
475
|
+
<td>Cell</td>
|
|
476
|
+
</tr>
|
|
477
|
+
<tr class="table-warning">
|
|
478
|
+
<th scope="row">Warning</th>
|
|
479
|
+
<td>Cell</td>
|
|
480
|
+
<td>Cell</td>
|
|
481
|
+
</tr>
|
|
482
|
+
<tr class="table-warning">
|
|
483
|
+
<th scope="row">Warning</th>
|
|
484
|
+
<td>Cell</td>
|
|
485
|
+
<td>Cell</td>
|
|
486
|
+
</tr>
|
|
487
|
+
<tr class="table-warning table-active">
|
|
488
|
+
<th scope="row">Warning</th>
|
|
489
|
+
<td>Cell</td>
|
|
490
|
+
<td>Cell</td>
|
|
491
|
+
</tr>
|
|
492
|
+
<tr class="table-info">
|
|
493
|
+
<th scope="row">Info</th>
|
|
494
|
+
<td>Cell</td>
|
|
495
|
+
<td>Cell</td>
|
|
496
|
+
</tr>
|
|
497
|
+
<tr class="table-info">
|
|
498
|
+
<th scope="row">Info</th>
|
|
499
|
+
<td>Cell</td>
|
|
500
|
+
<td>Cell</td>
|
|
501
|
+
</tr>
|
|
502
|
+
<tr class="table-info table-active">
|
|
503
|
+
<th scope="row">Info</th>
|
|
504
|
+
<td>Cell</td>
|
|
505
|
+
<td>Cell</td>
|
|
506
|
+
</tr>
|
|
507
|
+
<tr class="table-light">
|
|
508
|
+
<th scope="row">Light</th>
|
|
509
|
+
<td>Cell</td>
|
|
510
|
+
<td>Cell</td>
|
|
511
|
+
</tr>
|
|
512
|
+
<tr class="table-light">
|
|
513
|
+
<th scope="row">Light</th>
|
|
514
|
+
<td>Cell</td>
|
|
515
|
+
<td>Cell</td>
|
|
516
|
+
</tr>
|
|
517
|
+
<tr class="table-light table-active">
|
|
518
|
+
<th scope="row">Light</th>
|
|
519
|
+
<td>Cell</td>
|
|
520
|
+
<td>Cell</td>
|
|
521
|
+
</tr>
|
|
522
|
+
<tr class="table-dark">
|
|
523
|
+
<th scope="row">Dark</th>
|
|
524
|
+
<td>Cell</td>
|
|
525
|
+
<td>Cell</td>
|
|
526
|
+
</tr>
|
|
527
|
+
<tr class="table-dark">
|
|
528
|
+
<th scope="row">Dark</th>
|
|
529
|
+
<td>Cell</td>
|
|
530
|
+
<td>Cell</td>
|
|
531
|
+
</tr>
|
|
532
|
+
<tr class="table-dark table-active">
|
|
533
|
+
<th scope="row">Dark</th>
|
|
534
|
+
<td>Cell</td>
|
|
535
|
+
<td>Cell</td>
|
|
536
|
+
</tr>
|
|
537
|
+
</tbody>
|
|
538
|
+
</table>
|
|
539
|
+
|
|
540
|
+
<table class="table table-striped table-primary">
|
|
541
|
+
<thead>
|
|
542
|
+
<tr>
|
|
543
|
+
<th scope="col">Type</th>
|
|
544
|
+
<th scope="col">Column heading</th>
|
|
545
|
+
<th scope="col">Column heading</th>
|
|
546
|
+
</tr>
|
|
547
|
+
</thead>
|
|
548
|
+
<tbody>
|
|
549
|
+
<tr>
|
|
550
|
+
<td>1</td>
|
|
551
|
+
<td>2</td>
|
|
552
|
+
<td>3</td>
|
|
553
|
+
</tr>
|
|
554
|
+
<tr>
|
|
555
|
+
<td>1</td>
|
|
556
|
+
<td>2</td>
|
|
557
|
+
<td>3</td>
|
|
558
|
+
</tr>
|
|
559
|
+
<tr>
|
|
560
|
+
<td>1</td>
|
|
561
|
+
<td>2</td>
|
|
562
|
+
<td>3</td>
|
|
563
|
+
</tr>
|
|
564
|
+
</tbody>
|
|
565
|
+
</table>
|
|
566
|
+
</main>
|
|
567
|
+
|
|
568
|
+
@@include('./partials/_footer.html')
|
|
569
|
+
@@include('./partials/_scripts.html')
|
|
570
|
+
</body>
|
|
571
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
@@include('./partials/_head.html', {
|
|
5
|
+
"title": "Theme Switcher | Tower Bootstrap Theme"
|
|
6
|
+
})
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
@@include('./partials/_nav.html')
|
|
10
|
+
|
|
11
|
+
<main class="container mt-5 pt-2">
|
|
12
|
+
<ol class="breadcrumb">
|
|
13
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
14
|
+
<li class="breadcrumb-item active">Theme Switcher</li>
|
|
15
|
+
</ol>
|
|
16
|
+
|
|
17
|
+
<p>
|
|
18
|
+
More info on how Bootstrap's theme switching works can be found here:
|
|
19
|
+
<a href="https://getbootstrap.com/docs/5.3/customize/color-modes/">https://getbootstrap.com/docs/5.3/customize/color-modes/</a>
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
<p>
|
|
23
|
+
This code is similar to the code provided on Bootstraps' website but is set up to work with classes instead of SVGs so you can use a font icon library.
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
<p>
|
|
27
|
+
First create a new JavaScript file with the following code. This should be separate from any bundling, if you are doing that.
|
|
28
|
+
This is because you want to include this code high up on the DOM to prevent the screen from flashing white when it loads.
|
|
29
|
+
</p>
|
|
30
|
+
|
|
31
|
+
<h5>ThemeHandler Javascript</h5>
|
|
32
|
+
<div class="card mb-3">
|
|
33
|
+
<div class="card-body bg-dark text-light">
|
|
34
|
+
<pre><code>@@include('../docs/scripts/themeHandler.js')</code></pre>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<p>
|
|
39
|
+
Add a script tag to the head of the page. It needs to included early on the DOM to prevent the page from flashing white if someone has defaulted to a dark theme.
|
|
40
|
+
</p>
|
|
41
|
+
|
|
42
|
+
<p>
|
|
43
|
+
Add the following to the navbar's menu. This example is using Material Design Icons,
|
|
44
|
+
<a href="https://pictogrammers.com/library/mdi" target="_blank" rel="noopener noreferrer">https://pictogrammers.com/library/mdi</a>
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
<h5>Navbar Theme Selector HTML</h5>
|
|
48
|
+
<div class="card mb-3">
|
|
49
|
+
<div class="card-body bg-dark text-light">
|
|
50
|
+
<pre><code><li class="nav-item dropdown">
|
|
51
|
+
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
52
|
+
<span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
|
|
53
|
+
</button>
|
|
54
|
+
<div class="dropdown-menu">
|
|
55
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
|
|
56
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
|
|
57
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
|
|
58
|
+
</div>
|
|
59
|
+
</li></code></pre>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
</main>
|
|
64
|
+
|
|
65
|
+
@@include('./partials/_footer.html')
|
|
66
|
+
@@include('./partials/_scripts.html')
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|