j1-template 2021.0.11 → 2021.0.16
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +34 -12
- data/_includes/themes/j1/layouts/content_generator_post.html +7 -5
- data/_includes/themes/j1/modules/navigator/generator.html +6 -6
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +1 -1
- data/_includes/themes/j1/procedures/posts/create_series_header.proc +2 -0
- data/assets/data/authclient.html +1 -1
- data/assets/data/carousel.json +1 -1
- data/assets/data/fam.html +2 -2
- data/assets/data/menu.1.html +505 -0
- data/assets/data/menu.html +15 -17
- data/assets/themes/j1/adapter/js/carousel.js +6 -1
- data/assets/themes/j1/adapter/js/fam.js +8 -0
- data/assets/themes/j1/adapter/js/j1.js +35 -3
- data/assets/themes/j1/adapter/js/mmenu.js +9 -4
- data/assets/themes/j1/adapter/js/navigator.js +14 -6
- data/assets/themes/j1/adapter/js/themer.js +32 -27
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.css +25 -7
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.min.css +1 -1
- data/assets/themes/j1/core/js/template.js +2 -8
- data/assets/themes/j1/core/js/template.js.map +1 -1
- data/assets/themes/j1/core/js/template.min.js +2 -8
- data/assets/themes/j1/core/js/template.min.js.map +1 -0
- data/assets/themes/j1/modules/lightbox/js/lightbox.js +1 -1
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +1 -1
- data/assets/themes/j1/modules/themeSwitcher/js/switcher.js +9 -4
- data/assets/themes/j1/modules/themeSwitcher/js/switcher.min.js +1 -1
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +2 -2
- data/lib/starter_web/_config.yml +2 -2
- data/lib/starter_web/_data/blocks/banner.yml +2 -2
- data/lib/starter_web/_data/blocks/defaults/banner.yml +5 -5
- data/lib/starter_web/_data/builder/blog_navigator.yml +4 -4
- data/lib/starter_web/_data/modules/defaults/quicksearch.yml +3 -24
- data/lib/starter_web/_data/modules/defaults/themer.yml +1 -0
- data/lib/starter_web/_data/modules/fam.yml +13 -2
- data/lib/starter_web/_data/modules/navigator_menu.yml +26 -26
- data/lib/starter_web/_data/modules/quicksearch.yml +3 -3
- data/lib/starter_web/_data/private.yml@localhost +199 -0
- data/lib/starter_web/_includes/attributes.asciidoc +4 -3
- data/lib/starter_web/_plugins/lunr_index.rb +8 -4
- data/lib/starter_web/assets/images/modules/attics/markus-spiske-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/markus-spiske.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/markus-spiske4-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/icons/d1/scalable/d1.svg +1 -1
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb +1 -1
- data/lib/starter_web/collections/posts/public/featured/_posts/2020-05-01-top-site-generators.adoc +1 -1
- data/lib/starter_web/collections/posts/public/featured/_posts/2020-06-01-about-cookies.adoc +1 -1
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-test-series.adoc +8 -5
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-test-series.adoc +7 -4
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-test-series.adoc +7 -4
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-04-post-test-series.adoc +7 -4
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-20-minneapolis.adoc +1 -1
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-24-narcisse-snake-dens.adoc +1 -1
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-26-columbia-river.adoc +1 -1
- data/lib/starter_web/package.json +1 -1
- data/lib/starter_web/pages/public/about/about_site.adoc +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive.html +9 -7
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +9 -7
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +16 -11
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +9 -7
- data/lib/starter_web/pages/public/blog/navigator/index.html +9 -10
- data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/_includes/tables/rouge/300_supported_languages.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +161 -591
- data/lib/starter_web/pages/public/previewer/iframer.adoc +2 -1
- data/lib/starter_web/pages/public/previewer/justified_gallery.html +2 -2
- data/lib/starter_web/pages/public/previewer/md_color_palette.adoc +2450 -0
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +4 -4
- data/lib/starter_web/pages/public/previewer/rouge.adoc +3 -3
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +3 -3
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +9 -2
|
@@ -430,4 +430,4 @@ guides you through all the steps on how to build a website. Your site using
|
|
|
430
430
|
Jekyll and the template system J1. It's really a pleasant journey to learn what
|
|
431
431
|
modern static webs can offer today.
|
|
432
432
|
|
|
433
|
-
|
|
433
|
+
Start your journey from here: link:{url-j1-kickstarter--web-in-a-day}[Web in a day, {browser-window--new}].
|
data/lib/starter_web/pages/public/previewer/_includes/tables/rouge/300_supported_languages.asciidoc
CHANGED
|
@@ -225,7 +225,7 @@ the principal shading language for OpenGL.
|
|
|
225
225
|
|
|
226
226
|
|`go`
|
|
227
227
|
|golang
|
|
228
|
-
|The https://golang.org/[Go, {browser-window--new}]
|
|
228
|
+
|The https://golang.org/[Programming language Go, {browser-window--new}]
|
|
229
229
|
programming language. Go is an open source programming language that makes it
|
|
230
230
|
easy to build simple, reliable, and efficient software.
|
|
231
231
|
|
|
@@ -13,16 +13,16 @@ description: >
|
|
|
13
13
|
of a selected theme. Find base Bootstrap features and styles for
|
|
14
14
|
the current theme selected.
|
|
15
15
|
|
|
16
|
+
categories: [ Previewer ]
|
|
16
17
|
tags: [ Bootstrap, Themes ]
|
|
17
|
-
categories: [ Configuration, Previewer ]
|
|
18
18
|
|
|
19
|
-
scrollbar:
|
|
19
|
+
scrollbar: false
|
|
20
20
|
flowtext: false
|
|
21
21
|
|
|
22
22
|
permalink: /pages/public/previewer/theme/
|
|
23
23
|
regenerate: false
|
|
24
24
|
|
|
25
|
-
resources: [ rouge,
|
|
25
|
+
resources: [ rouge, clipboard ]
|
|
26
26
|
resource_options:
|
|
27
27
|
- attic:
|
|
28
28
|
padding_top: 400
|
|
@@ -41,7 +41,6 @@ resource_options:
|
|
|
41
41
|
// =============================================================================
|
|
42
42
|
// Enable the Liquid Preprocessor
|
|
43
43
|
:page-liquid:
|
|
44
|
-
// :scrollbars:
|
|
45
44
|
|
|
46
45
|
// Set (local) page attributes here
|
|
47
46
|
// -----------------------------------------------------------------------------
|
|
@@ -61,23 +60,6 @@ resource_options:
|
|
|
61
60
|
// Include sub-documents
|
|
62
61
|
// -----------------------------------------------------------------------------
|
|
63
62
|
|
|
64
|
-
Themes for the template system J1 are based on the free and open-source CSS
|
|
65
|
-
front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
|
|
66
|
-
version V4.
|
|
67
|
-
|
|
68
|
-
Bootstrap is a HTML, CSS & JS Library that focuses on simplifying the
|
|
69
|
-
development of modern web pages. The primary purpose to apply the framework
|
|
70
|
-
to J1 is to provide a general standard colors, sizes, fonts and the overall
|
|
71
|
-
layout of a J1-based site. Bootstrap provides basic style definitions for all
|
|
72
|
-
common used HTML elements.
|
|
73
|
-
|
|
74
|
-
This results in a uniform appearance for the content in terms of the overall
|
|
75
|
-
layout, text, tables and form elements across all modern web browsers available
|
|
76
|
-
on the market. In addition, developers can take advantage of CSS classes
|
|
77
|
-
defined in Bootstrap to customize content individually.
|
|
78
|
-
|
|
79
|
-
// Page content
|
|
80
|
-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
81
63
|
++++
|
|
82
64
|
<!-- Prepend H1 tag here -->
|
|
83
65
|
<div id="theme" class="row ml-0 mb-3">
|
|
@@ -95,7 +77,8 @@ defined in Bootstrap to customize content individually.
|
|
|
95
77
|
|
|
96
78
|
var dependencies_met_themer = setInterval(function() {
|
|
97
79
|
interval_count += 1;
|
|
98
|
-
if ( j1.adapter.themer.getState() == 'finished' ) {
|
|
80
|
+
// if ( j1.adapter.themer.getState() == 'finished' ) {
|
|
81
|
+
if (j1.getState() == 'finished') {
|
|
99
82
|
user_state_detected = j1.existsCookie (cookie_names.user_state);
|
|
100
83
|
if ( user_state_detected ) {
|
|
101
84
|
user_state = j1.readCookie(cookie_names.user_state);
|
|
@@ -123,454 +106,6 @@ color scheme, fonts, sizes or the appearance of more complex elements like
|
|
|
123
106
|
forms or tables. Additionally, a theme may add additonal components but in
|
|
124
107
|
the *sense* of Bootstrap's framework rules and philosophy.
|
|
125
108
|
|
|
126
|
-
== J1 Color Palette
|
|
127
|
-
|
|
128
|
-
The color palette used by J1 Template is based on the definitions of Google's
|
|
129
|
-
*Material Design* (MD). The color scheme comprises primary and accent colors
|
|
130
|
-
that can be used for illustration or to develop individual brand colors of a
|
|
131
|
-
website. They’ve been designed to work harmoniously with each other.
|
|
132
|
-
|
|
133
|
-
The color palette starts with primary colors and fills in the spectrum to
|
|
134
|
-
create a complete and usable palette for Desktop Wen and mobile sites based on
|
|
135
|
-
Androi or iOS. Google suggests using the 500 colors as the primary colors for
|
|
136
|
-
your web and the other colors as accents colors to support the content for
|
|
137
|
-
better reading or orientation.
|
|
138
|
-
|
|
139
|
-
=== Red and Pink
|
|
140
|
-
++++
|
|
141
|
-
<div class="row col-list">
|
|
142
|
-
<div class="color-palette col-lg-12">
|
|
143
|
-
<div class="color-group col-lg-6">
|
|
144
|
-
<ul>
|
|
145
|
-
<li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
|
|
146
|
-
<li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
|
|
147
|
-
<li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
|
|
148
|
-
<li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
|
|
149
|
-
<li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
|
|
150
|
-
<li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
|
|
151
|
-
<li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
|
|
152
|
-
<li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
|
|
153
|
-
<li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
|
|
154
|
-
<li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
|
|
155
|
-
<li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
|
|
156
|
-
<li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
|
|
157
|
-
<li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
|
|
158
|
-
<li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
|
|
159
|
-
<li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
|
|
160
|
-
</ul>
|
|
161
|
-
</div>
|
|
162
|
-
<div class="color-group col-lg-6">
|
|
163
|
-
<ul>
|
|
164
|
-
<li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
|
|
165
|
-
<li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
|
|
166
|
-
<li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
|
|
167
|
-
<li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
|
|
168
|
-
<li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
|
|
169
|
-
<li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
|
|
170
|
-
<li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
|
|
171
|
-
<li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
|
|
172
|
-
<li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
|
|
173
|
-
<li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
|
|
174
|
-
<li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
|
|
175
|
-
<li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
|
|
176
|
-
<li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
|
|
177
|
-
<li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
|
|
178
|
-
<li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
|
|
179
|
-
</ul>
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
++++
|
|
184
|
-
|
|
185
|
-
=== Purple and Deep Purple
|
|
186
|
-
++++
|
|
187
|
-
<div class="row col-list">
|
|
188
|
-
<div class="color-palette col-lg-12">
|
|
189
|
-
<div class="color-group col-lg-6">
|
|
190
|
-
<ul>
|
|
191
|
-
<li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
|
|
192
|
-
<li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
|
|
193
|
-
<li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
|
|
194
|
-
<li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
|
|
195
|
-
<li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
|
|
196
|
-
<li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
|
|
197
|
-
<li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
|
|
198
|
-
<li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
|
|
199
|
-
<li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
|
|
200
|
-
<li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
|
|
201
|
-
<li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
|
|
202
|
-
<li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
|
|
203
|
-
<li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
|
|
204
|
-
<li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
|
|
205
|
-
<li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
|
|
206
|
-
</ul>
|
|
207
|
-
</div>
|
|
208
|
-
<div class="color-group col-lg-6">
|
|
209
|
-
<ul>
|
|
210
|
-
<li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
|
|
211
|
-
<li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
|
|
212
|
-
<li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
|
|
213
|
-
<li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
|
|
214
|
-
<li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
|
|
215
|
-
<li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
|
|
216
|
-
<li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
|
|
217
|
-
<li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
|
|
218
|
-
<li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
|
|
219
|
-
<li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
|
|
220
|
-
<li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
|
|
221
|
-
<li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
|
|
222
|
-
<li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
|
|
223
|
-
<li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
|
|
224
|
-
<li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
|
|
225
|
-
</ul>
|
|
226
|
-
</div>
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
++++
|
|
230
|
-
|
|
231
|
-
=== Indigo and Blue
|
|
232
|
-
++++
|
|
233
|
-
<div class="row col-list">
|
|
234
|
-
<div class="color-palette col-lg-12">
|
|
235
|
-
<div class="color-group col-lg-6">
|
|
236
|
-
<ul>
|
|
237
|
-
<li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
|
|
238
|
-
<li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
|
|
239
|
-
<li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
|
|
240
|
-
<li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
|
|
241
|
-
<li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
|
|
242
|
-
<li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
|
|
243
|
-
<li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
|
|
244
|
-
<li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
|
|
245
|
-
<li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
|
|
246
|
-
<li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
|
|
247
|
-
<li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
|
|
248
|
-
<li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
|
|
249
|
-
<li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
|
|
250
|
-
<li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
|
|
251
|
-
<li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
|
|
252
|
-
</ul>
|
|
253
|
-
</div>
|
|
254
|
-
<div class="color-group col-lg-6">
|
|
255
|
-
<ul>
|
|
256
|
-
<li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
|
|
257
|
-
<li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
|
|
258
|
-
<li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
|
|
259
|
-
<li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
|
|
260
|
-
<li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
|
|
261
|
-
<li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
|
|
262
|
-
<li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
|
|
263
|
-
<li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
|
|
264
|
-
<li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
|
|
265
|
-
<li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
|
|
266
|
-
<li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
|
|
267
|
-
<li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
|
|
268
|
-
<li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
|
|
269
|
-
<li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
|
|
270
|
-
<li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
|
|
271
|
-
</ul>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
</div>
|
|
275
|
-
++++
|
|
276
|
-
|
|
277
|
-
=== Light Blue and Cyan
|
|
278
|
-
++++
|
|
279
|
-
<div class="row col-list">
|
|
280
|
-
<div class="color-palette col-lg-12">
|
|
281
|
-
<div class="color-group col-lg-6">
|
|
282
|
-
<ul>
|
|
283
|
-
<li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
|
|
284
|
-
<li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
|
|
285
|
-
<li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
|
|
286
|
-
<li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
|
|
287
|
-
<li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
|
|
288
|
-
<li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
|
|
289
|
-
<li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
|
|
290
|
-
<li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
|
|
291
|
-
<li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
|
|
292
|
-
<li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
|
|
293
|
-
<li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
|
|
294
|
-
<li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
|
|
295
|
-
<li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
|
|
296
|
-
<li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
|
|
297
|
-
<li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
|
|
298
|
-
</ul>
|
|
299
|
-
</div>
|
|
300
|
-
<div class="color-group col-lg-6">
|
|
301
|
-
<ul>
|
|
302
|
-
<li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
|
|
303
|
-
<li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
|
|
304
|
-
<li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
|
|
305
|
-
<li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
|
|
306
|
-
<li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
|
|
307
|
-
<li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
|
|
308
|
-
<li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
|
|
309
|
-
<li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
|
|
310
|
-
<li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
|
|
311
|
-
<li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
|
|
312
|
-
<li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
|
|
313
|
-
<li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
|
|
314
|
-
<li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
|
|
315
|
-
<li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
|
|
316
|
-
<li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
|
|
317
|
-
</ul>
|
|
318
|
-
</div>
|
|
319
|
-
</div>
|
|
320
|
-
</div>
|
|
321
|
-
++++
|
|
322
|
-
|
|
323
|
-
=== Teal and Green
|
|
324
|
-
++++
|
|
325
|
-
<div class="row col-list">
|
|
326
|
-
<div class="color-palette col-lg-12">
|
|
327
|
-
<div class="color-group col-lg-6">
|
|
328
|
-
<ul>
|
|
329
|
-
<li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
|
|
330
|
-
<li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
|
|
331
|
-
<li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
|
|
332
|
-
<li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
|
|
333
|
-
<li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
|
|
334
|
-
<li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
|
|
335
|
-
<li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
|
|
336
|
-
<li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
|
|
337
|
-
<li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
|
|
338
|
-
<li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
|
|
339
|
-
<li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
|
|
340
|
-
<li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
|
|
341
|
-
<li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
|
|
342
|
-
<li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
|
|
343
|
-
<li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
|
|
344
|
-
</ul>
|
|
345
|
-
</div>
|
|
346
|
-
<div class="color-group col-lg-6">
|
|
347
|
-
<ul>
|
|
348
|
-
<li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
|
|
349
|
-
<li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
|
|
350
|
-
<li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
|
|
351
|
-
<li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
|
|
352
|
-
<li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
|
|
353
|
-
<li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
|
|
354
|
-
<li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
|
|
355
|
-
<li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
|
|
356
|
-
<li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
|
|
357
|
-
<li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
|
|
358
|
-
<li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
|
|
359
|
-
<li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
|
|
360
|
-
<li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
|
|
361
|
-
<li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
|
|
362
|
-
<li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
|
|
363
|
-
</ul>
|
|
364
|
-
</div>
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
++++
|
|
368
|
-
|
|
369
|
-
=== Light Green and Lime
|
|
370
|
-
++++
|
|
371
|
-
<div class="row col-list">
|
|
372
|
-
<div class="color-palette col-lg-12">
|
|
373
|
-
<div class="color-group col-lg-6">
|
|
374
|
-
<ul>
|
|
375
|
-
<li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
|
|
376
|
-
<li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
|
|
377
|
-
<li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
|
|
378
|
-
<li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
|
|
379
|
-
<li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
|
|
380
|
-
<li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
|
|
381
|
-
<li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
|
|
382
|
-
<li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
|
|
383
|
-
<li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
|
|
384
|
-
<li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
|
|
385
|
-
<li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
|
|
386
|
-
<li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
|
|
387
|
-
<li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
|
|
388
|
-
<li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
|
|
389
|
-
<li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
|
|
390
|
-
</ul>
|
|
391
|
-
</div>
|
|
392
|
-
<div class="color-group col-lg-6">
|
|
393
|
-
<ul>
|
|
394
|
-
<li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
|
|
395
|
-
<li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
|
|
396
|
-
<li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
|
|
397
|
-
<li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
|
|
398
|
-
<li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
|
|
399
|
-
<li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
|
|
400
|
-
<li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
|
|
401
|
-
<li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
|
|
402
|
-
<li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
|
|
403
|
-
<li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
|
|
404
|
-
<li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
|
|
405
|
-
<li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
|
|
406
|
-
<li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
|
|
407
|
-
<li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
|
|
408
|
-
<li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
|
|
409
|
-
</ul>
|
|
410
|
-
</div>
|
|
411
|
-
</div>
|
|
412
|
-
</div>
|
|
413
|
-
++++
|
|
414
|
-
|
|
415
|
-
=== Yellow and Amber
|
|
416
|
-
++++
|
|
417
|
-
<div class="row col-list">
|
|
418
|
-
<div class="color-palette col-lg-12">
|
|
419
|
-
<div class="color-group col-lg-6">
|
|
420
|
-
<ul>
|
|
421
|
-
<li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
|
|
422
|
-
<li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
|
|
423
|
-
<li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
|
|
424
|
-
<li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
|
|
425
|
-
<li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
|
|
426
|
-
<li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
|
|
427
|
-
<li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
|
|
428
|
-
<li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
|
|
429
|
-
<li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
|
|
430
|
-
<li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
|
|
431
|
-
<li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
|
|
432
|
-
<li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
|
|
433
|
-
<li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
|
|
434
|
-
<li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
|
|
435
|
-
<li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
|
|
436
|
-
</ul>
|
|
437
|
-
</div>
|
|
438
|
-
<div class="color-group col-lg-6">
|
|
439
|
-
<ul>
|
|
440
|
-
<li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
|
|
441
|
-
<li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
|
|
442
|
-
<li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
|
|
443
|
-
<li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
|
|
444
|
-
<li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
|
|
445
|
-
<li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
|
|
446
|
-
<li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
|
|
447
|
-
<li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
|
|
448
|
-
<li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
|
|
449
|
-
<li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
|
|
450
|
-
<li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
|
|
451
|
-
<li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
|
|
452
|
-
<li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
|
|
453
|
-
<li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
|
|
454
|
-
<li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
|
|
455
|
-
</ul>
|
|
456
|
-
</div>
|
|
457
|
-
</div>
|
|
458
|
-
</div>
|
|
459
|
-
++++
|
|
460
|
-
|
|
461
|
-
=== Orange and Deep Orange
|
|
462
|
-
++++
|
|
463
|
-
<div class="row col-list">
|
|
464
|
-
<div class="color-palette col-lg-12">
|
|
465
|
-
<div class="color-group col-lg-6">
|
|
466
|
-
<ul>
|
|
467
|
-
<li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
|
|
468
|
-
<li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
|
|
469
|
-
<li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
|
|
470
|
-
<li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
|
|
471
|
-
<li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
|
|
472
|
-
<li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
|
|
473
|
-
<li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
|
|
474
|
-
<li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
|
|
475
|
-
<li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
|
|
476
|
-
<li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
|
|
477
|
-
<li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
|
|
478
|
-
<li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
|
|
479
|
-
<li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
|
|
480
|
-
<li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
|
|
481
|
-
<li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
|
|
482
|
-
</ul>
|
|
483
|
-
</div>
|
|
484
|
-
<div class="color-group col-lg-6">
|
|
485
|
-
<ul>
|
|
486
|
-
<li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
|
|
487
|
-
<li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
|
|
488
|
-
<li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
|
|
489
|
-
<li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
|
|
490
|
-
<li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
|
|
491
|
-
<li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
|
|
492
|
-
<li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
|
|
493
|
-
<li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
|
|
494
|
-
<li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
|
|
495
|
-
<li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
|
|
496
|
-
<li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
|
|
497
|
-
<li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
|
|
498
|
-
<li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
|
|
499
|
-
<li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
|
|
500
|
-
<li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
|
|
501
|
-
</ul>
|
|
502
|
-
</div>
|
|
503
|
-
</div>
|
|
504
|
-
</div>
|
|
505
|
-
++++
|
|
506
|
-
|
|
507
|
-
=== Brown and Grey
|
|
508
|
-
++++
|
|
509
|
-
<div class="row col-list">
|
|
510
|
-
<div class="color-palette col-lg-12">
|
|
511
|
-
<div class="color-group col-lg-6">
|
|
512
|
-
<ul>
|
|
513
|
-
<li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
|
|
514
|
-
<li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
|
|
515
|
-
<li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
|
|
516
|
-
<li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
|
|
517
|
-
<li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
|
|
518
|
-
<li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
|
|
519
|
-
<li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
|
|
520
|
-
<li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
|
|
521
|
-
<li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
|
|
522
|
-
<li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
|
|
523
|
-
<li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
|
|
524
|
-
</ul>
|
|
525
|
-
</div>
|
|
526
|
-
<div class="color-group col-lg-6">
|
|
527
|
-
<ul>
|
|
528
|
-
<li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
|
|
529
|
-
<li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
|
|
530
|
-
<li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
|
|
531
|
-
<li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
|
|
532
|
-
<li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
|
|
533
|
-
<li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
|
|
534
|
-
<li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
|
|
535
|
-
<li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
|
|
536
|
-
<li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
|
|
537
|
-
<li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
|
|
538
|
-
<li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
|
|
539
|
-
</ul>
|
|
540
|
-
</div>
|
|
541
|
-
</div>
|
|
542
|
-
</div>
|
|
543
|
-
++++
|
|
544
|
-
|
|
545
|
-
=== Blue Grey and BW
|
|
546
|
-
++++
|
|
547
|
-
<div class="row col-list">
|
|
548
|
-
<div class="color-palette col-lg-12">
|
|
549
|
-
<div class="color-group col-lg-6">
|
|
550
|
-
<ul>
|
|
551
|
-
<li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
|
|
552
|
-
<li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
|
|
553
|
-
<li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
|
|
554
|
-
<li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
|
|
555
|
-
<li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
|
|
556
|
-
<li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
|
|
557
|
-
<li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
|
|
558
|
-
<li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
|
|
559
|
-
<li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
|
|
560
|
-
<li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
|
|
561
|
-
<li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
|
|
562
|
-
</ul>
|
|
563
|
-
</div>
|
|
564
|
-
<div class="color-group col-lg-6">
|
|
565
|
-
<ul>
|
|
566
|
-
<li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
|
|
567
|
-
<li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
|
|
568
|
-
</ul>
|
|
569
|
-
</div>
|
|
570
|
-
</div>
|
|
571
|
-
</div>
|
|
572
|
-
++++
|
|
573
|
-
|
|
574
109
|
== Navbars
|
|
575
110
|
|
|
576
111
|
See examples for Bootstrap’s powerful, responsive navigation header, the
|
|
@@ -588,7 +123,7 @@ colors. Then, customize with `.bg-*` utilities.
|
|
|
588
123
|
++++
|
|
589
124
|
<div class="doc-example mb-3">
|
|
590
125
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
|
|
591
|
-
<a class="navbar-brand"
|
|
126
|
+
<a href="#" class="navbar-brand">Navbar<div class="ripple-container"></div></a>
|
|
592
127
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
|
593
128
|
<span class="navbar-toggler-icon"></span>
|
|
594
129
|
</button>
|
|
@@ -596,16 +131,16 @@ colors. Then, customize with `.bg-*` utilities.
|
|
|
596
131
|
<div class="collapse navbar-collapse" id="navbarColor01">
|
|
597
132
|
<ul class="navbar-nav mr-auto">
|
|
598
133
|
<li class="nav-item active">
|
|
599
|
-
<a class="nav-link"
|
|
134
|
+
<a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
|
|
600
135
|
</li>
|
|
601
136
|
<li class="nav-item">
|
|
602
|
-
<a class="nav-link"
|
|
137
|
+
<a href="#" class="nav-link">Features</a>
|
|
603
138
|
</li>
|
|
604
139
|
<li class="nav-item">
|
|
605
|
-
<a class="nav-link"
|
|
140
|
+
<a href="#" class="nav-link">Pricing</a>
|
|
606
141
|
</li>
|
|
607
142
|
<li class="nav-item">
|
|
608
|
-
<a class="nav-link"
|
|
143
|
+
<a href="#" class="nav-link">About</a>
|
|
609
144
|
</li>
|
|
610
145
|
</ul>
|
|
611
146
|
<form class="form-inline">
|
|
@@ -616,7 +151,7 @@ colors. Then, customize with `.bg-*` utilities.
|
|
|
616
151
|
</nav>
|
|
617
152
|
|
|
618
153
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
|
|
619
|
-
<a class="navbar-brand"
|
|
154
|
+
<a href="#" class="navbar-brand">Navbar</a>
|
|
620
155
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
|
621
156
|
<span class="navbar-toggler-icon"></span>
|
|
622
157
|
</button>
|
|
@@ -624,16 +159,16 @@ colors. Then, customize with `.bg-*` utilities.
|
|
|
624
159
|
<div class="collapse navbar-collapse" id="navbarColor02">
|
|
625
160
|
<ul class="navbar-nav mr-auto">
|
|
626
161
|
<li class="nav-item active">
|
|
627
|
-
<a class="nav-link"
|
|
162
|
+
<a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
|
|
628
163
|
</li>
|
|
629
164
|
<li class="nav-item">
|
|
630
|
-
<a class="nav-link"
|
|
165
|
+
<a href="#" class="nav-link">Features</a>
|
|
631
166
|
</li>
|
|
632
167
|
<li class="nav-item">
|
|
633
|
-
<a class="nav-link"
|
|
168
|
+
<a href="#" class="nav-link">Pricing</a>
|
|
634
169
|
</li>
|
|
635
170
|
<li class="nav-item">
|
|
636
|
-
<a class="nav-link"
|
|
171
|
+
<a href="#" class="nav-link">About</a>
|
|
637
172
|
</li>
|
|
638
173
|
</ul>
|
|
639
174
|
<form class="form-inline">
|
|
@@ -644,7 +179,7 @@ colors. Then, customize with `.bg-*` utilities.
|
|
|
644
179
|
</nav>
|
|
645
180
|
|
|
646
181
|
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
|
|
647
|
-
<a class="navbar-brand"
|
|
182
|
+
<a href="#" class="navbar-brand">Navbar</a>
|
|
648
183
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
|
649
184
|
<span class="navbar-toggler-icon"></span>
|
|
650
185
|
</button>
|
|
@@ -652,16 +187,16 @@ colors. Then, customize with `.bg-*` utilities.
|
|
|
652
187
|
<div class="collapse navbar-collapse" id="navbarColor03">
|
|
653
188
|
<ul class="navbar-nav mr-auto">
|
|
654
189
|
<li class="nav-item active">
|
|
655
|
-
<a class="nav-link"
|
|
190
|
+
<a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
|
|
656
191
|
</li>
|
|
657
192
|
<li class="nav-item">
|
|
658
|
-
<a class="nav-link"
|
|
193
|
+
<a href="#" class="nav-link">Features</a>
|
|
659
194
|
</li>
|
|
660
195
|
<li class="nav-item">
|
|
661
|
-
<a class="nav-link"
|
|
196
|
+
<a href="#" class="nav-link">Pricing</a>
|
|
662
197
|
</li>
|
|
663
198
|
<li class="nav-item">
|
|
664
|
-
<a class="nav-link"
|
|
199
|
+
<a href="#" class="nav-link">About</a>
|
|
665
200
|
</li>
|
|
666
201
|
</ul>
|
|
667
202
|
<form class="form-inline">
|
|
@@ -916,12 +451,12 @@ A floating action button represents the primary action in an application,
|
|
|
916
451
|
it is used for a promoted action.
|
|
917
452
|
|
|
918
453
|
mdi:bootstrap[24px, mdi-md-deep-purple]
|
|
919
|
-
https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-
|
|
454
|
+
https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
|
|
920
455
|
|
|
921
456
|
++++
|
|
922
457
|
<div class="doc-example">
|
|
923
458
|
<button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
|
|
924
|
-
<i class="mdi mdi-plus
|
|
459
|
+
<i class="mdi mdi-plus"></i>
|
|
925
460
|
</button>
|
|
926
461
|
</div>
|
|
927
462
|
++++
|
|
@@ -929,7 +464,7 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
|
|
|
929
464
|
[source, html, role="noclip"]
|
|
930
465
|
----
|
|
931
466
|
<button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
|
|
932
|
-
<i class="mdi mdi-plus
|
|
467
|
+
<i class="mdi mdi-plus"></i>
|
|
933
468
|
</button>
|
|
934
469
|
----
|
|
935
470
|
|
|
@@ -938,28 +473,28 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
|
|
|
938
473
|
++++
|
|
939
474
|
<div class="doc-example">
|
|
940
475
|
<button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
|
|
941
|
-
<i class="mdi mdi-plus
|
|
476
|
+
<i class="mdi mdi-plus"></i>
|
|
942
477
|
</button>
|
|
943
478
|
<button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
|
|
944
|
-
<i class="mdi mdi-plus
|
|
479
|
+
<i class="mdi mdi-plus"></i>
|
|
945
480
|
</button>
|
|
946
481
|
<button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
|
|
947
|
-
<i class="mdi mdi-plus
|
|
482
|
+
<i class="mdi mdi-plus"></i>
|
|
948
483
|
</button>
|
|
949
484
|
<button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
|
|
950
|
-
<i class="mdi mdi-plus
|
|
485
|
+
<i class="mdi mdi-plus"></i>
|
|
951
486
|
</button>
|
|
952
487
|
<button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
|
|
953
|
-
<i class="mdi mdi-plus
|
|
488
|
+
<i class="mdi mdi-plus"></i>
|
|
954
489
|
</button>
|
|
955
490
|
<button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
|
|
956
|
-
<i class="mdi mdi-plus
|
|
491
|
+
<i class="mdi mdi-plus"></i>
|
|
957
492
|
</button>
|
|
958
493
|
<button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
|
|
959
|
-
<i class="mdi mdi-plus
|
|
494
|
+
<i class="mdi mdi-plus"></i>
|
|
960
495
|
</button>
|
|
961
496
|
<button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
|
|
962
|
-
<i class="mdi mdi-plus
|
|
497
|
+
<i class="mdi mdi-plus"></i>
|
|
963
498
|
</button>
|
|
964
499
|
</div>
|
|
965
500
|
++++
|
|
@@ -967,17 +502,17 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
|
|
|
967
502
|
[source, html, role="noclip"]
|
|
968
503
|
----
|
|
969
504
|
<button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
|
|
970
|
-
<i class="mdi mdi-plus
|
|
505
|
+
<i class="mdi mdi-plus"></i>
|
|
971
506
|
</button>
|
|
972
507
|
<button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
|
|
973
|
-
<i class="mdi mdi-plus
|
|
508
|
+
<i class="mdi mdi-plus"></i>
|
|
974
509
|
</button>
|
|
975
510
|
...
|
|
976
511
|
<button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
|
|
977
|
-
<i class="mdi mdi-plus
|
|
512
|
+
<i class="mdi mdi-plus"></i>
|
|
978
513
|
</button>
|
|
979
514
|
<button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
|
|
980
|
-
<i class="mdi mdi-plus
|
|
515
|
+
<i class="mdi mdi-plus"></i>
|
|
981
516
|
</button>
|
|
982
517
|
----
|
|
983
518
|
|
|
@@ -988,7 +523,7 @@ A smaller sized, i.e. mini floating action button, is also available.
|
|
|
988
523
|
++++
|
|
989
524
|
<div class="doc-example">
|
|
990
525
|
<button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
|
|
991
|
-
<i class="mdi mdi-plus
|
|
526
|
+
<i class="mdi mdi-plus"></i>
|
|
992
527
|
</button>
|
|
993
528
|
</div>
|
|
994
529
|
++++
|
|
@@ -996,7 +531,7 @@ A smaller sized, i.e. mini floating action button, is also available.
|
|
|
996
531
|
[source, html, role="noclip"]
|
|
997
532
|
----
|
|
998
533
|
<button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
|
|
999
|
-
<i class="mdi mdi-plus
|
|
534
|
+
<i class="mdi mdi-plus"></i>
|
|
1000
535
|
</button>
|
|
1001
536
|
----
|
|
1002
537
|
|
|
@@ -1032,7 +567,7 @@ link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography,
|
|
|
1032
567
|
</div>
|
|
1033
568
|
<div class="col-md-4">
|
|
1034
569
|
<h3 class="notoc">Example body text</h2>
|
|
1035
|
-
<p>Nullam quis risus eget <a href="
|
|
570
|
+
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
|
1036
571
|
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
|
1037
572
|
<p>The following is <strong>rendered as bold text</strong>.</p>
|
|
1038
573
|
<p>The following is <em>rendered as italicized text</em>.</p>
|
|
@@ -1166,14 +701,14 @@ link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browse
|
|
|
1166
701
|
<div class="doc-example mb-3">
|
|
1167
702
|
<form>
|
|
1168
703
|
<div class="form-group">
|
|
1169
|
-
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
|
1170
704
|
<input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
|
|
705
|
+
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
|
1171
706
|
<span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
|
|
1172
707
|
<span class="bmd-help">We'll never share your email with anyone else.</span>
|
|
1173
708
|
</div>
|
|
1174
709
|
<div class="form-group">
|
|
1175
|
-
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
|
|
1176
710
|
<input type="password" class="form-control" id="exampleInputPassword1">
|
|
711
|
+
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
|
|
1177
712
|
<span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
|
|
1178
713
|
</div>
|
|
1179
714
|
<div class="form-group form-check">
|
|
@@ -1193,11 +728,10 @@ state, sizing, and more.
|
|
|
1193
728
|
<div class="doc-example mb-3">
|
|
1194
729
|
<form>
|
|
1195
730
|
<div class="form-group">
|
|
1196
|
-
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
|
1197
731
|
<input type="email" class="form-control" id="exampleFormControlInput1">
|
|
732
|
+
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
|
1198
733
|
</div>
|
|
1199
734
|
<div class="form-group">
|
|
1200
|
-
<label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
|
|
1201
735
|
<select class="form-control" id="exampleFormControlSelect1">
|
|
1202
736
|
<option>1</option>
|
|
1203
737
|
<option>2</option>
|
|
@@ -1205,18 +739,19 @@ state, sizing, and more.
|
|
|
1205
739
|
<option>4</option>
|
|
1206
740
|
<option>5</option>
|
|
1207
741
|
</select>
|
|
742
|
+
<label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
|
|
1208
743
|
</div>
|
|
1209
744
|
<div class="form-group">
|
|
1210
|
-
<label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
|
|
1211
745
|
<select multiple class="form-control" id="exampleFormControlSelect2">
|
|
1212
746
|
<option>option 1</option>
|
|
1213
747
|
<option>option 2</option>
|
|
1214
748
|
<option>option 3</option>
|
|
1215
749
|
</select>
|
|
750
|
+
<label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
|
|
1216
751
|
</div>
|
|
1217
752
|
<div class="form-group">
|
|
1218
|
-
<label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
|
|
1219
753
|
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
|
754
|
+
<label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
|
|
1220
755
|
</div>
|
|
1221
756
|
</form>
|
|
1222
757
|
</div>
|
|
@@ -1228,8 +763,8 @@ For file inputs, swap the .form-control for .form-control-file.
|
|
|
1228
763
|
<div class="doc-example mb-3">
|
|
1229
764
|
<form>
|
|
1230
765
|
<div class="form-group">
|
|
1231
|
-
<label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
|
|
1232
766
|
<input type="file" class="form-control-file" id="exampleFormControlFile1">
|
|
767
|
+
<label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
|
|
1233
768
|
</div>
|
|
1234
769
|
</form>
|
|
1235
770
|
</div>
|
|
@@ -1265,22 +800,21 @@ JavaScript plugin.
|
|
|
1265
800
|
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
|
1266
801
|
</li>
|
|
1267
802
|
<li class="nav-item dropdown">
|
|
1268
|
-
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
|
1269
|
-
href="javascript:(void)"
|
|
803
|
+
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"
|
|
1270
804
|
role="button"
|
|
1271
805
|
aria-haspopup="true" aria-expanded="false">
|
|
1272
806
|
Dropdown
|
|
1273
807
|
</a>
|
|
1274
808
|
<div class="dropdown-menu">
|
|
1275
|
-
<a class="dropdown-item"
|
|
1276
|
-
<a class="dropdown-item"
|
|
1277
|
-
<a class="dropdown-item"
|
|
809
|
+
<a href="#" class="dropdown-item">Action</a>
|
|
810
|
+
<a href="#" class="dropdown-item">Another action</a>
|
|
811
|
+
<a href="#" class="dropdown-item">Something else here</a>
|
|
1278
812
|
<div class="dropdown-divider"></div>
|
|
1279
|
-
<a class="dropdown-item"
|
|
813
|
+
<a href="#" class="dropdown-item">Separated link</a>
|
|
1280
814
|
</div>
|
|
1281
815
|
</li>
|
|
1282
816
|
<li class="nav-item">
|
|
1283
|
-
<a class="nav-link disabled"
|
|
817
|
+
<a href="#" class="nav-link disabled">Disabled</a>
|
|
1284
818
|
</li>
|
|
1285
819
|
</ul>
|
|
1286
820
|
<div id="myTabContent" class="tab-content">
|
|
@@ -1310,26 +844,26 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
|
|
|
1310
844
|
<div class="row mb-5">
|
|
1311
845
|
|
|
1312
846
|
<div class="col-md-6">
|
|
1313
|
-
<
|
|
847
|
+
<h4 class="notoc">Standard Pills</h4>
|
|
1314
848
|
<ul class="nav nav-pills">
|
|
1315
849
|
<li class="nav-item mr-1 mb-2">
|
|
1316
|
-
<a class="nav-link active"
|
|
850
|
+
<a href="#" class="nav-link active">Active</a>
|
|
1317
851
|
</li>
|
|
1318
852
|
<li class="nav-item dropdown mr-1">
|
|
1319
|
-
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
|
853
|
+
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
1320
854
|
<div class="dropdown-menu">
|
|
1321
|
-
<a class="dropdown-item"
|
|
1322
|
-
<a class="dropdown-item"
|
|
1323
|
-
<a class="dropdown-item"
|
|
855
|
+
<a href="#" class="dropdown-item">Action</a>
|
|
856
|
+
<a href="#" class="dropdown-item">Another action</a>
|
|
857
|
+
<a href="#" class="dropdown-item">Something else here</a>
|
|
1324
858
|
<div class="dropdown-divider"></div>
|
|
1325
|
-
<a class="dropdown-item"
|
|
859
|
+
<a href="#" class="dropdown-item">Separated link</a>
|
|
1326
860
|
</div>
|
|
1327
861
|
</li>
|
|
1328
862
|
<li class="nav-item mr-1 mb-2">
|
|
1329
|
-
<a class="nav-link"
|
|
863
|
+
<a href="#" class="nav-link">Link</a>
|
|
1330
864
|
</li>
|
|
1331
865
|
<li class="nav-item mr-1 mb-2">
|
|
1332
|
-
<a class="nav-link disabled"
|
|
866
|
+
<a href="#" class="nav-link disabled">Disabled</a>
|
|
1333
867
|
</li>
|
|
1334
868
|
</ul>
|
|
1335
869
|
</div>
|
|
@@ -1337,23 +871,23 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
|
|
|
1337
871
|
<h5 class="notoc">Stacked Pills (vertical)</h5>
|
|
1338
872
|
<ul class="nav nav-pills flex-column mb-4">
|
|
1339
873
|
<li class="nav-item mb-2">
|
|
1340
|
-
<a class="nav-link active"
|
|
874
|
+
<a href="#" class="nav-link active">Active</a>
|
|
1341
875
|
</li>
|
|
1342
876
|
<li class="nav-item dropdown mb-1">
|
|
1343
|
-
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
|
877
|
+
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
1344
878
|
<div class="dropdown-menu">
|
|
1345
|
-
<a class="dropdown-item"
|
|
1346
|
-
<a class="dropdown-item"
|
|
1347
|
-
<a class="dropdown-item"
|
|
879
|
+
<a href="#" class="dropdown-item">Action</a>
|
|
880
|
+
<a href="#" class="dropdown-item">Another action</a>
|
|
881
|
+
<a href="#" class="dropdown-item">Something else here</a>
|
|
1348
882
|
<div class="dropdown-divider"></div>
|
|
1349
|
-
<a class="dropdown-item"
|
|
883
|
+
<a href="#" class="dropdown-item">Separated link</a>
|
|
1350
884
|
</div>
|
|
1351
885
|
</li>
|
|
1352
886
|
<li class="nav-item mb-2">
|
|
1353
|
-
<a class="nav-link"
|
|
887
|
+
<a href="#" class="nav-link">Link</a>
|
|
1354
888
|
</li>
|
|
1355
889
|
<li class="nav-item mb-2">
|
|
1356
|
-
<a class="nav-link disabled"
|
|
890
|
+
<a href="#" class="nav-link disabled">Disabled</a>
|
|
1357
891
|
</li>
|
|
1358
892
|
</ul>
|
|
1359
893
|
</div>
|
|
@@ -1374,12 +908,12 @@ Separators are automatically added in CSS through ::before and content.
|
|
|
1374
908
|
<li class="breadcrumb-item active">Home</li>
|
|
1375
909
|
</ol>
|
|
1376
910
|
<ol class="breadcrumb">
|
|
1377
|
-
<li class="breadcrumb-item"><a href="
|
|
911
|
+
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
1378
912
|
<li class="breadcrumb-item active">Library</li>
|
|
1379
913
|
</ol>
|
|
1380
914
|
<ol class="breadcrumb">
|
|
1381
|
-
<li class="breadcrumb-item"><a href="
|
|
1382
|
-
<li class="breadcrumb-item"><a href="
|
|
915
|
+
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
916
|
+
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
1383
917
|
<li class="breadcrumb-item active">Data</li>
|
|
1384
918
|
</ol>
|
|
1385
919
|
</div>
|
|
@@ -1398,75 +932,75 @@ it as a navigation section to screen readers and other assistive technologies.
|
|
|
1398
932
|
<div>
|
|
1399
933
|
<ul class="pagination">
|
|
1400
934
|
<li class="page-item disabled">
|
|
1401
|
-
<a class="page-link"
|
|
935
|
+
<a href="#" class="page-link">«</a>
|
|
1402
936
|
</li>
|
|
1403
937
|
<li class="page-item active">
|
|
1404
|
-
<a class="page-link"
|
|
938
|
+
<a href="#" class="page-link">1</a>
|
|
1405
939
|
</li>
|
|
1406
940
|
<li class="page-item">
|
|
1407
|
-
<a class="page-link"
|
|
941
|
+
<a href="#" class="page-link">2</a>
|
|
1408
942
|
</li>
|
|
1409
943
|
<li class="page-item">
|
|
1410
|
-
<a class="page-link"
|
|
944
|
+
<a href="#" class="page-link">3</a>
|
|
1411
945
|
</li>
|
|
1412
946
|
<li class="page-item">
|
|
1413
|
-
<a class="page-link"
|
|
947
|
+
<a href="#" class="page-link">4</a>
|
|
1414
948
|
</li>
|
|
1415
949
|
<li class="page-item">
|
|
1416
|
-
<a class="page-link"
|
|
950
|
+
<a href="#" class="page-link">5</a>
|
|
1417
951
|
</li>
|
|
1418
952
|
<li class="page-item">
|
|
1419
|
-
<a class="page-link"
|
|
953
|
+
<a href="#" class="page-link">»</a>
|
|
1420
954
|
</li>
|
|
1421
955
|
</ul>
|
|
1422
956
|
</div>
|
|
1423
957
|
<div>
|
|
1424
958
|
<ul class="pagination pagination-lg">
|
|
1425
959
|
<li class="page-item disabled">
|
|
1426
|
-
<a class="page-link"
|
|
960
|
+
<a href="#" class="page-link">«</a>
|
|
1427
961
|
</li>
|
|
1428
962
|
<li class="page-item active">
|
|
1429
|
-
<a class="page-link"
|
|
963
|
+
<a href="#" class="page-link">1</a>
|
|
1430
964
|
</li>
|
|
1431
965
|
<li class="page-item">
|
|
1432
|
-
<a class="page-link"
|
|
966
|
+
<a href="#" class="page-link">2</a>
|
|
1433
967
|
</li>
|
|
1434
968
|
<li class="page-item">
|
|
1435
|
-
<a class="page-link"
|
|
969
|
+
<a href="#" class="page-link">3</a>
|
|
1436
970
|
</li>
|
|
1437
971
|
<li class="page-item">
|
|
1438
|
-
<a class="page-link"
|
|
972
|
+
<a href="#" class="page-link">4</a>
|
|
1439
973
|
</li>
|
|
1440
974
|
<li class="page-item">
|
|
1441
|
-
<a class="page-link"
|
|
975
|
+
<a href="#" class="page-link">5</a>
|
|
1442
976
|
</li>
|
|
1443
977
|
<li class="page-item">
|
|
1444
|
-
<a class="page-link"
|
|
978
|
+
<a href="#" class="page-link">»</a>
|
|
1445
979
|
</li>
|
|
1446
980
|
</ul>
|
|
1447
981
|
</div>
|
|
1448
982
|
<div>
|
|
1449
983
|
<ul class="pagination pagination-sm">
|
|
1450
984
|
<li class="page-item disabled">
|
|
1451
|
-
<a class="page-link"
|
|
985
|
+
<a href="#" class="page-link">«</a>
|
|
1452
986
|
</li>
|
|
1453
987
|
<li class="page-item active">
|
|
1454
|
-
<a class="page-link"
|
|
988
|
+
<a href="#" class="page-link">1</a>
|
|
1455
989
|
</li>
|
|
1456
990
|
<li class="page-item">
|
|
1457
|
-
<a class="page-link"
|
|
991
|
+
<a href="#" class="page-link">2</a>
|
|
1458
992
|
</li>
|
|
1459
993
|
<li class="page-item">
|
|
1460
|
-
<a class="page-link"
|
|
994
|
+
<a href="#" class="page-link">3</a>
|
|
1461
995
|
</li>
|
|
1462
996
|
<li class="page-item">
|
|
1463
|
-
<a class="page-link"
|
|
997
|
+
<a href="#" class="page-link">4</a>
|
|
1464
998
|
</li>
|
|
1465
999
|
<li class="page-item">
|
|
1466
|
-
<a class="page-link"
|
|
1000
|
+
<a href="#" class="page-link">5</a>
|
|
1467
1001
|
</li>
|
|
1468
1002
|
<li class="page-item">
|
|
1469
|
-
<a class="page-link"
|
|
1003
|
+
<a href="#" class="page-link">»</a>
|
|
1470
1004
|
</li>
|
|
1471
1005
|
</ul>
|
|
1472
1006
|
</div>
|
|
@@ -1500,7 +1034,7 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
|
|
|
1500
1034
|
<div class="alert alert-dismissible alert-warning">
|
|
1501
1035
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
1502
1036
|
<h4 class="alert-heading notoc">Warning!</h4>
|
|
1503
|
-
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="
|
|
1037
|
+
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
|
|
1504
1038
|
</div>
|
|
1505
1039
|
</div>
|
|
1506
1040
|
</div>
|
|
@@ -1508,19 +1042,19 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
|
|
|
1508
1042
|
<div class="col-md-4">
|
|
1509
1043
|
<div class="alert alert-dismissible alert-danger">
|
|
1510
1044
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
1511
|
-
<strong>Oh snap!</strong> <a href="
|
|
1045
|
+
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
|
1512
1046
|
</div>
|
|
1513
1047
|
</div>
|
|
1514
1048
|
<div class="col-md-4">
|
|
1515
1049
|
<div class="alert alert-dismissible alert-success">
|
|
1516
1050
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
1517
|
-
<strong>Well done!</strong> You successfully read <a href="
|
|
1051
|
+
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
|
1518
1052
|
</div>
|
|
1519
1053
|
</div>
|
|
1520
1054
|
<div class="col-md-4">
|
|
1521
1055
|
<div class="alert alert-dismissible alert-info">
|
|
1522
1056
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
1523
|
-
<strong>Heads up!</strong> This <a href="
|
|
1057
|
+
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
|
1524
1058
|
</div>
|
|
1525
1059
|
</div>
|
|
1526
1060
|
</div>
|
|
@@ -1813,7 +1347,7 @@ link:{url-bs-docs--components-jumbotron}[Bootstrap Docs {char-middot} Jumbotron,
|
|
|
1813
1347
|
<hr class="my-4">
|
|
1814
1348
|
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
|
1815
1349
|
<p class="lead">
|
|
1816
|
-
<a class="btn btn-primary btn-raised btn-lg"
|
|
1350
|
+
<a href="#" class="btn btn-primary btn-raised btn-lg" role="button">Learn more</a>
|
|
1817
1351
|
</p>
|
|
1818
1352
|
</div>
|
|
1819
1353
|
</div>
|
|
@@ -1849,27 +1383,27 @@ link:{url-bs-docs--components-list_group}[Bootstrap Docs {char-middot} List grou
|
|
|
1849
1383
|
|
|
1850
1384
|
<div class="col-md-4">
|
|
1851
1385
|
<div class="list-group">
|
|
1852
|
-
<a href="
|
|
1386
|
+
<a href="#" class="list-group-item list-group-item-action active">
|
|
1853
1387
|
Describe item #1
|
|
1854
1388
|
</a>
|
|
1855
|
-
<a href="
|
|
1389
|
+
<a href="#" class="list-group-item list-group-item-action">Describe item #2
|
|
1856
1390
|
</a>
|
|
1857
|
-
<a href="
|
|
1391
|
+
<a href="#" class="list-group-item list-group-item-action disabled">Describe item #3
|
|
1858
1392
|
</a>
|
|
1859
1393
|
</div>
|
|
1860
1394
|
</div>
|
|
1861
1395
|
|
|
1862
1396
|
<div class="col-md-4">
|
|
1863
1397
|
<div class="list-group">
|
|
1864
|
-
<a href="
|
|
1398
|
+
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
|
|
1865
1399
|
<div class="d-flex w-100 justify-content-between">
|
|
1866
|
-
<
|
|
1400
|
+
<h4 class="mb-1 notoc">List group item heading</h4>
|
|
1867
1401
|
<small>3 days ago</small>
|
|
1868
1402
|
</div>
|
|
1869
1403
|
<p class="mb-1">Some quick example text to build on a list and make up the bulk of the list group's content.</p>
|
|
1870
1404
|
<small>Summarize whats all about.</small>
|
|
1871
1405
|
</a>
|
|
1872
|
-
<a href="
|
|
1406
|
+
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
|
1873
1407
|
<div class="d-flex w-100 justify-content-between">
|
|
1874
1408
|
<h5 class="mb-1 notoc">List group item heading</h5>
|
|
1875
1409
|
<small class="text-muted">3 days ago</small>
|
|
@@ -1904,6 +1438,7 @@ They have no margin by default, so use spacing utilities as needed.
|
|
|
1904
1438
|
mdi:bootstrap[24px, mdi-md-deep-purple]
|
|
1905
1439
|
link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser-window--new}]
|
|
1906
1440
|
|
|
1441
|
+
==== Simple cards
|
|
1907
1442
|
++++
|
|
1908
1443
|
<div class="doc-example mb-3">
|
|
1909
1444
|
|
|
@@ -1912,10 +1447,10 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
1912
1447
|
<div class="card mb-3" style="max-width: 20rem;">
|
|
1913
1448
|
<div class="card-body">
|
|
1914
1449
|
<h4 class="card-title notoc">Card title</h4>
|
|
1915
|
-
<
|
|
1450
|
+
<h5 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h5>
|
|
1916
1451
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
1917
|
-
<a href="
|
|
1918
|
-
<a href="
|
|
1452
|
+
<a href="#" class="card-link">Card link</a>
|
|
1453
|
+
<a href="#" class="card-link">Another link</a>
|
|
1919
1454
|
</div>
|
|
1920
1455
|
</div>
|
|
1921
1456
|
</div>
|
|
@@ -1925,8 +1460,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
1925
1460
|
<h4 class="card-title notoc">Card title</h4>
|
|
1926
1461
|
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
|
1927
1462
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
1928
|
-
<a href="
|
|
1929
|
-
<a href="
|
|
1463
|
+
<a href="#" class="card-link">Card link</a>
|
|
1464
|
+
<a href="#" class="card-link">Another link</a>
|
|
1930
1465
|
</div>
|
|
1931
1466
|
</div>
|
|
1932
1467
|
</div>
|
|
@@ -1936,8 +1471,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
1936
1471
|
<h4 class="card-title notoc">Card title</h4>
|
|
1937
1472
|
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
|
1938
1473
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
1939
|
-
<a href="
|
|
1940
|
-
<a href="
|
|
1474
|
+
<a href="#" class="card-link">Card link</a>
|
|
1475
|
+
<a href="#" class="card-link">Another link</a>
|
|
1941
1476
|
</div>
|
|
1942
1477
|
</div>
|
|
1943
1478
|
</div>
|
|
@@ -1991,7 +1526,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
1991
1526
|
</div>
|
|
1992
1527
|
<div class="card-footer r-text-200">
|
|
1993
1528
|
<a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
|
|
1994
|
-
href="
|
|
1529
|
+
href="#">Action · Footer Link
|
|
1995
1530
|
</a>
|
|
1996
1531
|
</div>
|
|
1997
1532
|
</div>
|
|
@@ -2007,7 +1542,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
2007
1542
|
</div>
|
|
2008
1543
|
<div class="card-footer r-text-200">
|
|
2009
1544
|
<a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
|
|
2010
|
-
href="
|
|
1545
|
+
href="#">Action · Footer Link
|
|
2011
1546
|
</a>
|
|
2012
1547
|
</div>
|
|
2013
1548
|
</div>
|
|
@@ -2022,22 +1557,59 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
2022
1557
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
2023
1558
|
</div>
|
|
2024
1559
|
<div class="card-footer r-text-200">
|
|
2025
|
-
<a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
|
|
2026
|
-
|
|
1560
|
+
<a href="#" class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase">
|
|
1561
|
+
Action · Footer Link
|
|
2027
1562
|
</a>
|
|
2028
1563
|
</div>
|
|
2029
1564
|
</div>
|
|
2030
1565
|
</div>
|
|
2031
1566
|
</div>
|
|
1567
|
+
</div>
|
|
1568
|
+
++++
|
|
1569
|
+
|
|
1570
|
+
==== Image cards
|
|
1571
|
+
++++
|
|
1572
|
+
<div class="doc-example mb-3">
|
|
2032
1573
|
|
|
2033
1574
|
<div class="row">
|
|
1575
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
|
1576
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
|
1577
|
+
<img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
|
|
1578
|
+
<div class="card-body">
|
|
1579
|
+
<h5 class="card-title notoc">Card title</h5>
|
|
1580
|
+
<h6 class="card-subtitle text-muted notoc">Image card subtitle</h6>
|
|
1581
|
+
</div>
|
|
1582
|
+
|
|
1583
|
+
<div class="card-body">
|
|
1584
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
1585
|
+
</div>
|
|
1586
|
+
|
|
1587
|
+
</div>
|
|
1588
|
+
</div>
|
|
1589
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
|
1590
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
|
1591
|
+
<img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
|
|
1592
|
+
<div class="card-body">
|
|
1593
|
+
<h5 class="card-title notoc">Card title</h5>
|
|
1594
|
+
<h6 class="card-subtitle text-muted notoc">Image card subtitle</h6>
|
|
1595
|
+
</div>
|
|
1596
|
+
|
|
1597
|
+
<div class="card-body">
|
|
1598
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
1599
|
+
</div>
|
|
1600
|
+
|
|
1601
|
+
<div class="card-footer text-muted">
|
|
1602
|
+
2 days ago
|
|
1603
|
+
</div>
|
|
1604
|
+
</div>
|
|
1605
|
+
</div>
|
|
2034
1606
|
<div class="col-md-4 col-sm-4 col-xs-12">
|
|
2035
1607
|
<div class="card mb-3" style="max-width: 20rem;">
|
|
2036
1608
|
<h3 class="card-header notoc">Header</h3>
|
|
2037
|
-
<img
|
|
1609
|
+
<img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
|
|
2038
1610
|
<div class="card-body">
|
|
2039
|
-
<h5 class="card-title notoc">
|
|
2040
|
-
<h6 class="card-subtitle text-muted notoc">
|
|
1611
|
+
<h5 class="card-title notoc">Card title</h5>
|
|
1612
|
+
<h6 class="card-subtitle text-muted notoc">Image card subtitle</h6>
|
|
2041
1613
|
</div>
|
|
2042
1614
|
|
|
2043
1615
|
<div class="card-body">
|
|
@@ -2045,8 +1617,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
2045
1617
|
</div>
|
|
2046
1618
|
|
|
2047
1619
|
<div class="card-body">
|
|
2048
|
-
<a href="
|
|
2049
|
-
<a href="
|
|
1620
|
+
<a href="#" class="card-link">Card link</a>
|
|
1621
|
+
<a href="#" class="card-link">Another link</a>
|
|
2050
1622
|
</div>
|
|
2051
1623
|
<div class="card-footer text-muted">
|
|
2052
1624
|
2 days ago
|
|
@@ -2054,7 +1626,6 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
|
|
|
2054
1626
|
</div>
|
|
2055
1627
|
</div>
|
|
2056
1628
|
</div>
|
|
2057
|
-
|
|
2058
1629
|
</div>
|
|
2059
1630
|
++++
|
|
2060
1631
|
|
|
@@ -2379,17 +1950,17 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
|
2379
1950
|
<div class="modal-dialog modal-dialog-centered">
|
|
2380
1951
|
<div class="modal-content">
|
|
2381
1952
|
<div class="modal-header">
|
|
2382
|
-
<
|
|
1953
|
+
<h4 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h4>
|
|
2383
1954
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
2384
1955
|
<span aria-hidden="true">×</span>
|
|
2385
1956
|
</button>
|
|
2386
1957
|
</div>
|
|
2387
1958
|
<div class="modal-body">
|
|
2388
|
-
<
|
|
1959
|
+
<h4 class="notoc">Popover in a modal</h4>
|
|
2389
1960
|
<p>This <a href="#" role="button" class="btn btn-primary btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
|
|
2390
1961
|
<hr>
|
|
2391
|
-
<
|
|
2392
|
-
<p><a href="
|
|
1962
|
+
<h4 class="notoc">Tooltips in a modal</h4>
|
|
1963
|
+
<p><a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
|
|
2393
1964
|
</div>
|
|
2394
1965
|
<div class="modal-footer">
|
|
2395
1966
|
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
|
@@ -2459,7 +2030,6 @@ be included before `bootstrap.js` in order to make popovers and tooltips to work
|
|
|
2459
2030
|
|
|
2460
2031
|
mdi:bootstrap[24px, mdi-md-deep-purple]
|
|
2461
2032
|
link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {browser-window--new}]
|
|
2462
|
-
|
|
2463
2033
|
mdi:bootstrap[24px, mdi-md-deep-purple]
|
|
2464
2034
|
link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {browser-window--new}]
|
|
2465
2035
|
|