Skip to content

Commit b3bccec

Browse files
bmarkovbmarkov
committed
update
1 parent e824c5c commit b3bccec

File tree

696 files changed

+124181
-28974
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

696 files changed

+124181
-28974
lines changed

‎ReadMe.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
1. Steps to run a demo:
2+
3+
- npm install http-server -g. Package Usage Information: https://www.npmjs.com/package/http-server
4+
- Run http-server -p 9000
5+
- Open 127.0.0.1:9000 in your browser
6+
- Navigate to a demo and open it.
7+
8+
2. Docs: https://www.htmlelements.com/docs/
9+
3. Pricing: https://www.htmlelements.com/license/
10+
4. Community Forums: https://www.htmlelements.com/forums/
11+
5. Support: [email protected] (Mon-Fri)
12+
6. Sales: [email protected] and +359 88-2223800

‎bootstrap/alert/index.htm‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>Material Bootstrap Alert | https://www.htmlelements.com</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
9+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
12+
<link rel="stylesheet" type="text/css" href="styles.css" />
13+
14+
<script type="text/javascript" src="../source/smart.element.js"></script>
15+
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
16+
<script src="index.js"></script>
17+
18+
</head>
19+
<body class="smart viewport">
20+
<h2 id="buttons">Material Bootstrap alerts</h2><br />
21+
<p>CSS for alert messages</p>
22+
23+
<div class="alert alert-primary" role="alert">
24+
A simple primary alert—check it out!
25+
</div>
26+
<div class="alert alert-secondary" role="alert">
27+
A simple secondary alert—check it out!
28+
</div>
29+
<div class="alert alert-success" role="alert">
30+
A simple success alert—check it out!
31+
</div>
32+
<div class="alert alert-danger" role="alert">
33+
A simple danger alert—check it out!
34+
</div>
35+
<div class="alert alert-warning" role="alert">
36+
A simple warning alert—check it out!
37+
</div>
38+
<div class="alert alert-info" role="alert">
39+
A simple info alert—check it out!
40+
</div>
41+
<div class="alert alert-light" role="alert">
42+
A simple light alert—check it out!
43+
</div>
44+
<div class="alert alert-dark" role="alert">
45+
A simple dark alert—check it out!
46+
</div>
47+
<h2>Colored Anchors</h2>
48+
<div class="alert alert-primary" role="alert">
49+
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
50+
</div>
51+
<div class="alert alert-secondary" role="alert">
52+
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
53+
</div>
54+
<div class="alert alert-success" role="alert">
55+
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
56+
</div>
57+
<div class="alert alert-danger" role="alert">
58+
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
59+
</div>
60+
<div class="alert alert-warning" role="alert">
61+
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
62+
</div>
63+
<div class="alert alert-info" role="alert">
64+
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
65+
</div>
66+
<div class="alert alert-light" role="alert">
67+
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
68+
</div>
69+
<div class="alert alert-dark" role="alert">
70+
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
71+
</div>
72+
<h3>More Content</h3>
73+
<div class="alert alert-dark" role="alert">
74+
<h4 class="alert-heading">Well done!</h4>
75+
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
76+
<hr>
77+
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
78+
</div>
79+
</body>
80+
</html>

‎bootstrap/alert/index.js‎

Whitespace-only changes.

‎bootstrap/alert/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
padding: 10px;
3+
}
4+
5+
.group {
6+
display: flex;
7+
margin: 10px;
8+
}
9+
10+
bootstrap-button, bootstrap-check, bootstrap-toggle-button, bootstrap-radio {
11+
margin-left: 10px;
12+
}

‎bootstrap/badges/index.htm‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>Material Bootstrap Badge | https://www.htmlelements.com</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
9+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
12+
<link rel="stylesheet" type="text/css" href="styles.css" />
13+
14+
<script type="text/javascript" src="../source/smart.element.js"></script>
15+
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
16+
<script src="index.js"></script>
17+
18+
</head>
19+
<body class="smart material viewport">
20+
<h2 id="buttons">Material Bootstrap Badges</h2><br />
21+
<p>CSS for Badges</p>
22+
23+
<h2>Badge on Button</h2>
24+
<div class="group">
25+
<bootstrap-button>
26+
Notifications <span class="badge badge-light">4</span>
27+
</bootstrap-button>
28+
</div>
29+
<h2>Badge on Span</h2>
30+
<div class="group">
31+
<span class="badge badge-primary">Primary</span>
32+
<span class="badge badge-secondary">Secondary</span>
33+
<span class="badge badge-success">Success</span>
34+
<span class="badge badge-danger">Danger</span>
35+
<span class="badge badge-warning">Warning</span>
36+
<span class="badge badge-info">Info</span>
37+
<span class="badge badge-light">Light</span>
38+
<span class="badge badge-dark">Dark</span>
39+
</div>
40+
<h2>Pill Badges</h2>
41+
<div class="group">
42+
<span class="badge badge-pill badge-primary">Primary</span>
43+
<span class="badge badge-pill badge-secondary">Secondary</span>
44+
<span class="badge badge-pill badge-success">Success</span>
45+
<span class="badge badge-pill badge-danger">Danger</span>
46+
<span class="badge badge-pill badge-warning">Warning</span>
47+
<span class="badge badge-pill badge-info">Info</span>
48+
<span class="badge badge-pill badge-light">Light</span>
49+
<span class="badge badge-pill badge-dark">Dark</span>
50+
</div>
51+
<h2>Link Badges</h2>
52+
<div class="group">
53+
<a href="#" class="badge badge-primary">Primary</a>
54+
<a href="#" class="badge badge-secondary">Secondary</a>
55+
<a href="#" class="badge badge-success">Success</a>
56+
<a href="#" class="badge badge-danger">Danger</a>
57+
<a href="#" class="badge badge-warning">Warning</a>
58+
<a href="#" class="badge badge-info">Info</a>
59+
<a href="#" class="badge badge-light">Light</a>
60+
<a href="#" class="badge badge-dark">Dark</a>
61+
</div>
62+
</body>
63+
</html>

‎bootstrap/badges/index.js‎

Whitespace-only changes.

‎bootstrap/badges/styles.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
padding: 10px;
3+
}
4+
5+
.group {
6+
display: flex;
7+
margin: 1rem;
8+
padding: 1rem;
9+
}
10+
11+
span, a {
12+
margin-left: 0.5rem;
13+
}

‎bootstrap/button/index.htm‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>Material Bootstrap Button | https://www.htmlelements.com</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
9+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
12+
<link rel="stylesheet" type="text/css" href="styles.css" />
13+
14+
<script type="text/javascript" src="../source/smart.element.js"></script>
15+
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
16+
<script src="index.js"></script>
17+
18+
</head>
19+
<body class="smart viewport">
20+
<h2 id="buttons">Material Bootstrap Buttons</h2><br />
21+
<p>Use Material Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple
22+
sizes, states, and more.</p>
23+
</br>
24+
<h3>Buttons</h3>
25+
26+
<p>Material Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a
27+
few extras thrown in for more control.</p>
28+
<div class="group">
29+
<bootstrap-circular></bootstrap-circular>
30+
<bootstrap-button style-mode="primary">Primary</bootstrap-button>
31+
<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
32+
<bootstrap-button style-mode="success">Success</bootstrap-button>
33+
<bootstrap-button style-mode="danger">Danger</bootstrap-button>
34+
<bootstrap-button style-mode="warning">Warning</bootstrap-button>
35+
<bootstrap-button style-mode="info">Info</bootstrap-button>
36+
<bootstrap-button style-mode="light">Light</bootstrap-button>
37+
<bootstrap-button style-mode="dark">Dark</bootstrap-button>
38+
<bootstrap-button style-mode="link">Link</bootstrap-button>
39+
</div>
40+
41+
<p>
42+
<b>StyleMode</b> property allows the user to change the style of the elements.
43+
</p>
44+
45+
<h2>Outlined Buttons</h2><br />
46+
<p>
47+
In need of a button, but not the hefty background colors they bring? Just add the class
48+
<b>outlined</b> to remove all background images and colors on any button.
49+
</p>
50+
<div class="group">
51+
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
52+
<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
53+
<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
54+
<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
55+
<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
56+
<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
57+
<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
58+
<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
59+
<bootstrap-button outlined style-mode="link">Link</bootstrap-button>
60+
</div>
61+
62+
63+
<p>
64+
Setting the <b>outlined</b> property the elements turn into outlined buttons with no filling untill
65+
hovered.
66+
</p>
67+
68+
<h2>Buttons Sizes</h2><br />
69+
<p>
70+
Fancy larger or smaller buttons? Just set the <b>sizeMode</b> property to 'sm' or 'lg' for
71+
additional sizes.
72+
</p>
73+
<div class="group">
74+
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
75+
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
76+
</div>
77+
78+
<div class="group">
79+
<bootstrap-button size-mode="sm">Small Button</bootstrap-button>
80+
<bootstrap-button size-mode="sm">Small Button</bootstrap-button>
81+
</div>
82+
83+
<p>
84+
Buttons can be reset back to normal if <b>SizeMode</b> is set to an empty string.
85+
</p>
86+
87+
<h2>Disabled Buttons</h2><br />
88+
<div class="group">
89+
<bootstrap-button disabled style-mode="primary">Primary</bootstrap-button>
90+
<bootstrap-button disabled style-mode="secondary">Secondary</bootstrap-button>
91+
</div>
92+
93+
<p>
94+
To disable/enable an element just set the <b>disabled</b> property.
95+
</p>
96+
97+
<h2>Material Bootstrap Checkbox</h2><br />
98+
<p>
99+
Checkboxes are buttons that can be toggled. The checked state of these buttons can be updated via
100+
click or by setting the <b>checked</b> property to true.
101+
Checkboxes like the other toggle buttons can be pre-checked.
102+
</p>
103+
<div class="group">
104+
<bootstrap-check type="button" checked>Checked</bootstrap-check>
105+
<bootstrap-check type="button">Unchecked</bootstrap-check>
106+
</div>
107+
108+
<p>
109+
Appling/Removing the <b>checked</b> attribute will toggle the state of the button.
110+
</p>
111+
112+
<h2>Material Bootstrap Toggle Button</h2>
113+
<div class="group">
114+
<bootstrap-toggle type="button" checked> Checked</bootstrap-toggle>
115+
<bootstrap-toggle type="button">Unchecked</bootstrap-toggle>
116+
</div>
117+
118+
119+
<p>
120+
Add the <b>checked</b> attribute to toggle a button’s active state. If you’re pre-toggling a button,
121+
you must manually add the <b>checked</b> attribute to the button.
122+
</p>
123+
124+
<h2>Material Bootstrap Radio Button</h2>
125+
<div class="group">
126+
<bootstrap-radio type="button" checked> Active</bootstrap-radio>
127+
<bootstrap-radio type="button">Radio</bootstrap-radio>
128+
<bootstrap-radio type="button">Radio</bootstrap-radio>
129+
</div>
130+
131+
132+
<p>
133+
Radio buttons are group elements that allow only one of them to be checked. Similar to the other
134+
toggle elements to set a button into checked state the property <b>checked</b> has to be applied to
135+
the element.
136+
All elements that have the same <b>group</b> property are considered to be in the same group.
137+
<b>group</b> can be set on initialization.
138+
</p>
139+
140+
<h2>Material Design</h2>
141+
<div class="smart material">
142+
<div class="group">
143+
<bootstrap-button class="abcbutton" style-mode="primary">Primary</bootstrap-button>
144+
<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
145+
<bootstrap-button style-mode="success">Success</bootstrap-button>
146+
<bootstrap-button style-mode="danger">Danger</bootstrap-button>
147+
<bootstrap-button style-mode="warning">Warning</bootstrap-button>
148+
<bootstrap-button style-mode="info">Info</bootstrap-button>
149+
<bootstrap-button style-mode="light">Light</bootstrap-button>
150+
<bootstrap-button style-mode="dark">Dark</bootstrap-button>
151+
<bootstrap-button style-mode="link">Link</bootstrap-button>
152+
</div>
153+
<h3>Outlined Material Buttons</h3>
154+
<div class="group">
155+
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
156+
<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
157+
<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
158+
<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
159+
<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
160+
<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
161+
<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
162+
<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
163+
<bootstrap-button outlined style-mode="link">Link</bootstrap-button>
164+
</div>
165+
<h3>Outlined Material Checkbox Buttons</h3>
166+
<div class="group">
167+
<bootstrap-check type="button" checked>Checked</bootstrap-check>
168+
<bootstrap-check type="button">Unchecked</bootstrap-check>
169+
</div>
170+
<h3>Outlined Material Radio Buttons</h3>
171+
<div class="group">
172+
<bootstrap-radio type="button" checked> Active</bootstrap-radio>
173+
<bootstrap-radio type="button">Radio</bootstrap-radio>
174+
<bootstrap-radio type="button">Radio</bootstrap-radio>
175+
</div>
176+
</div>
177+
<h2>Button Group</h2>
178+
<div class="smart material group">
179+
<div class="button-group" role="group" aria-label="Basic example">
180+
<bootstrap-button class="item" style-mode="primary">Btn 1</bootstrap-button>
181+
<bootstrap-button class="item" style-mode="primary">Btn 2</bootstrap-button>
182+
<bootstrap-button class="item" style-mode="primary">Btn 3</bootstrap-button>
183+
</div>
184+
</div>
185+
<h2>Vertical Button Group</h2>
186+
<div class="smart material group">
187+
<div class="button-group-vertical" role="group" aria-label="Basic example">
188+
<bootstrap-button class="item" style-mode="success">Btn 1</bootstrap-button>
189+
<bootstrap-button class="item" style-mode="success">Btn 2</bootstrap-button>
190+
<bootstrap-button class="item" style-mode="success">Btn 3</bootstrap-button>
191+
</div>
192+
</div>
193+
<h2>Toggle Button Group</h2>
194+
<div class="smart material group">
195+
<div class="button-group" role="group" aria-label="Basic example">
196+
<bootstrap-toggle-button class="item" style-mode="info">Toggle 1</bootstrap-toggle-button>
197+
<bootstrap-toggle-button class="item" style-mode="info">Toggle 2</bootstrap-toggle-button>
198+
<bootstrap-toggle-button class="item" style-mode="info">Toggle 3</bootstrap-toggle-button>
199+
</div>
200+
</div>
201+
</body>
202+
</html>

‎bootstrap/button/index.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)