forked from Chalarangelo/bootstrap-extend
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
583 lines (549 loc) · 37.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap-Extend, a set of useful, responsive extensions for the Bootstrap framework.">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-extend.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-extend.min.css"/>
<!-- v1.1 -->
<!-- <script type="text/javascript" src="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/880420ae663f7c539971ded33411cdecffcc2134/js/bootstrap-extend.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/880420ae663f7c539971ded33411cdecffcc2134/css/bootstrap-extend.min.css"/> -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- Used for showing tooltips and activating the scrollspy-->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
$('body').scrollspy({ target: '#navbar-bse' });
</script>
<!-- Github buttons. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<title>Bootstrap-Extend</title>
</head>
<body data-spy="scroll" data-target="#navbar-bse">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-xs hidden-sm" id="navbar-bse">
<!-- Page start, do not modify above this line-->
<br/>
<ul class="nav nav-pills nav-stacked" style="position:fixed;">
<li role="presentation" class="active"><a href="#home">Home</a></li>
<li role="presentation"><a href="#dependencies"> Dependencies & usage</a></li>
<li style="padding:7px 15px;color:#959595;"><strong> COMPONENTS, CSS & JS</strong></li>
<li role="presentation"><a href="#button"> New button style</a></li>
<li role="presentation"><a href="#pwdtoggle"> Password toggle</a></li>
<li role="presentation"><a href="#switches"> Toggle switches</a></li>
<li role="presentation"><a href="#lightbox"> Responsive lightbox</a></li>
<li role="presentation"><a href="#spinner"> Numeric spinner</a></li>
<li role="presentation"><a href="#collapsetoggle"> Collapse toggle box</a></li>
<li role="presentation"><a href="#checkboxes"> Checkbox styles</a></li>
<li role="presentation"><a href="#radiobuttons"> Radio button styles</a></li>
<li role="presentation"><a href="#lists"> List element styles</a></li>
<li role="presentation"><a href="#select"> Alternative select style <span class="label label-danger">New!</span></a></li>
</ul>
</div><div id="content-bse" class="col-md-10">
<!-- Navigation end, content starts -->
<div class="page-header">
<h1 id="home">Bootstrap Extend <small>Easy-to-use components for Bootstrap 3</small></h1>
<a aria-label="Watch chalarangelo/bootstrap-extend on GitHub" data-count-aria-label="# watchers on GitHub" data-count-api="/repos/chalarangelo/bootstrap-extend#subscribers_count" data-count-href="/chalarangelo/bootstrap-extend/watchers" data-icon="octicon-eye" href="https://github.com/chalarangelo/bootstrap-extend" class="github-button">Watch</a>
<a aria-label="Star chalarangelo/bootstrap-extend on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/chalarangelo/bootstrap-extend#stargazers_count" data-count-href="/chalarangelo/bootstrap-extend/stargazers" data-icon="octicon-star" href="https://github.com/chalarangelo/bootstrap-extend" class="github-button">Star</a>
<a aria-label="Fork chalarangelo/bootstrap-extend on GitHub" data-count-aria-label="# forks on GitHub" data-count-api="/repos/chalarangelo/bootstrap-extend#forks_count" data-count-href="/chalarangelo/bootstrap-extend/network" data-icon="octicon-repo-forked" href="https://github.com/chalarangelo/bootstrap-extend/fork" class="github-button">Fork</a>
<a aria-label="Issue chalarangelo/bootstrap-extend on GitHub" data-count-aria-label="# issues on GitHub" data-count-api="/repos/chalarangelo/bootstrap-extend#open_issues_count" data-icon="octicon-issue-opened" href="https://github.com/chalarangelo/bootstrap-extend/issues" class="github-button">Issue</a><br>
<p>A set of useful extensions for the very popular <a href="http://getbootstrap.com/">Bootstrap</a> framework.</p>
</div>
<h2 id="dependencies">Dependencies and usage</h2>
<p>This framework depends heavily on Bootstrap 3 and jQuery. Include the dependencies (jQuery 2.2.4 or newer, Bootstrap 3 js and css files) in your <code><head></code> section and after them insert the following two lines to include Bootstrap-Extend:</p>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><script type="text/javascript" src="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/880420ae663f7c539971ded33411cdecffcc2134/js/bootstrap-extend.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/880420ae663f7c539971ded33411cdecffcc2134/css/bootstrap-extend.min.css"/></code></pre></figure>
<p>Alternatively you can download the files on your local machine from <a href="https://github.com/Chalarangelo/bootstrap-extend">my Github page</a> and include them using a local path.<br><strong>Note:</strong> I know that <a href="https://rawgit.com/">RawGit</a> is not 100% reliable and that sometimes problems can occur, as well as the fact that using a hash might look kinda clumsy, but this is a free project and so far this seems like my best option.</p>
<h2>Components, CSS and Javascript</h2>
<p>This framework is all about custom CSS styles for commonly used elements and responsive and lightweight components. Most of these components complement Bootstrap's aesthetic or aim to deal with its shortcomings in one way or another. More components will be added regularly. Bootstrap-Extend aims to eventually fill the gap left by Bootstrap in certain areas, without the need to include each component individually, but rather provide people with a consistent set of elements all in one place. <br>
If you want to get individual components instead of the whole thing, head over to my <a href="https://github.com/Chalarangelo/bootstrap-extend">Github</a> page, find the components you need and copy paste the corresponding SCSS and Javascript files. You will need to compile the SCSS files locally before you have a working CSS file that you can use.</p>
<h3 id="button">One extra button style <small>Because there can never be enough</small></h3>
<p>Use the <code>.btn-notice</code> class like any other button tag from Bootstrap. Inspired from the Bootstrap website's header colors.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Example</h4>
</div>
<div class="panel-body">
<button class="btn btn-notice">Hello there!</button>
<br/>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><button class="btn btn-notice">Hello there!<button/></code></pre></figure>
</div>
</div>
<h3 id="pwdtoggle">Password field with toggle</h3>
<p>Extend the functionality of your <code><input type="password"></code> fields by adding a button that toggles password display on or off. Simply add the <code>.pwd</code> class to your field and the <code>.pwd-toggle</code> class to a <code><span><span/></code> element in the same <code>.input-group</code> and users can now toggle password viewing on or off. When the form is submitted, the field will revert to <code>type="password"</code> regardless of its current state for security reasons. Just be sure to use an <code><input type="submit"></code> element to submit your form.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Example</h4>
</div>
<div class="panel-body">
<h4>Password:</h4>
<div class="input-group">
<input type="password" class="form-control pwd">
<span class="input-group-addon pwd-toggle"></span>
</div>
<br/>
<input type="submit" class="btn btn-default" value="Submit Form"><br>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><div class="input-group">
<input type="password" class="form-control pwd"/>
<span class="text" class="form-control"></span>
</div></code></pre></figure>
</div>
<p> <strong>Original idea and implementation</strong> by <a href="https://codepen.io/shellbryson/post/toggle-passwords">Shell Bryson</a>.</p>
</div>
<h3 id="switches">Toggle switches <small>Rectangular, round, with text or without, all in pure CSS</small></h3>
<p>Use the <code>.switch</code> class only on <code><input type="checkbox"></code> or <code><input type="radio"></code> elements. Don't forget to add a <code><label></code> after it and link it to the input's <code>id</code>. There are two types of toggle switches, round and rectangular. Both types have seven flavours, similar to the classic Bootstrap buttons:</p>
<ul>
<li><code>.switch-round-default</code> and <code>.switch-rect-default</code></li>
<li><code>.switch-round-primary</code> and <code>.switch-rect-primary</code></li>
<li><code>.switch-round-success</code> and <code>.switch-rect-success</code></li>
<li><code>.switch-round-info</code> and <code>.switch-rect-info</code></li>
<li><code>.switch-round-warning</code> and <code>.switch-rect-warning</code></li>
<li><code>.switch-round-danger</code> and <code>.switch-rect-danger</code></li>
<li><code>.switch-round-notice</code> and <code>.switch-rect-notice</code></li>
</ul>
<p>You can also add optional text labels to your toggle switches. There are three options of toggle switch text labels:</p>
<ul>
<li><code>.switch-on-off</code> (Displays "ON" and "OFF")</li>
<li><code>.switch-io</code> (Displays the on and off symbols)</li>
<li><code>.switch-yes-no</code> (Displays "YES" and "NO")</li>
</ul>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Examples</h4>
</div>
<div class="panel-body">
<h4>Round toggle switches:</h4>
Default <input id="cT1" class="switch switch-round-default" type="checkbox"> <label for="cT1"></label>
Primary <input id="cT2" class="switch switch-round-primary" type="checkbox"> <label for="cT2"></label>
Success <input id="cT3" class="switch switch-round-success" type="checkbox"> <label for="cT3"></label>
Info: <input id="cT4" class="switch switch-round-info" type="checkbox"> <label for="cT4"></label>
<br><strong>Radio button toggle switch group</strong><br>
Warning <input id="cT5" class="switch switch-round-warning" type="radio" name="roundToggle"> <label for="cT5"></label>
Danger <input id="cT6" class="switch switch-round-danger" type="radio" name="roundToggle"> <label for="cT6"></label>
Notice <input id="cT7" class="switch switch-round-notice" type="radio" name="roundToggle"> <label for="cT7"></label>
<br/>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html">Default <input id="cT1" class="switch switch-round-default" type="checkbox"> <label for="cT1"></label>
Primary <input id="cT2" class="switch switch-round-primary" type="checkbox"> <label for="cT2"></label>
Success <input id="cT3" class="switch switch-round-success" type="checkbox"> <label for="cT3"></label>
Info <input id="cT4" class="switch switch-round-info" type="checkbox"> <label for="cT4"></label>
<br>Radio button toggle switch group<br>
Warning <input id="cT5" class="switch switch-round-warning" type="radio" name="roundToggle"> <label for="cT5"></label>
Danger <input id="cT6" class="switch switch-round-danger" type="radio" name="roundToggle"> <label for="cT6"></label>
Notice <input id="cT7" class="switch switch-round-notice" type="radio" name="roundToggle"> <label for="cT7"></label></code></pre></figure>
<br>
<h4>Rectangular toggle switches:</h4>
Default <input id="rT1" class="switch switch-rect-default" type="checkbox"> <label for="rT1"></label>
Primary <input id="rT2" class="switch switch-rect-primary" type="checkbox"> <label for="rT2"></label>
Success <input id="rT3" class="switch switch-rect-success" type="checkbox"> <label for="rT3"></label>
Info <input id="rT4" class="switch switch-rect-info" type="checkbox"> <label for="rT4"></label>
<br><strong>Radio button toggle switch group</strong><br>
Warning <input id="rT5" class="switch switch-rect-warning" type="radio" name="rectToggle"> <label for="rT5"></label>
Danger <input id="rT6" class="switch switch-rect-danger" type="radio" name="rectToggle"> <label for="rT6"></label>
Notice <input id="rT7" class="switch switch-rect-notice" type="radio" name="rectToggle"> <label for="rT7"></label>
<br/>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html">Default <input id="rT1" class="switch switch-rect-default" type="checkbox"> <label for="rT1"></label>
Primary <input id="rT2" class="switch switch-rect-primary" type="checkbox"> <label for="rT2"></label>
Success <input id="rT3" class="switch switch-rect-success" type="checkbox"> <label for="rT3"></label>
Info <input id="rT4" class="switch switch-rect-info" type="checkbox"> <label for="rT4"></label>
<br>Radio button toggle switch group<br>
Warning <input id="rT5" class="switch switch-rect-warning" type="radio" name="rectToggle"> <label for="rT5"></label>
Danger <input id="rT6" class="switch switch-rect-danger" type="radio" name="rectToggle"> <label for="rT6"></label>
Notice <input id="rT7" class="switch switch-rect-notice" type="radio" name="rectToggle"> <label for="rT7"></label></code></pre></figure>
<br>
<h4>Optional text:</h4>
<strong>Round toggle switches</strong><br>
On/Off <input id="o1" class="switch switch-round-primary switch-on-off" type="checkbox"> <label for="o1"></label>
I/O <input id="o2" class="switch switch-round-primary switch-io" type="checkbox"> <label for="o2"></label>
Yes/No <input id="o3" class="switch switch-round-primary switch-yes-no" type="checkbox"> <label for="o3"></label>
<br><strong>Rectangular toggle switches</strong><br>
On/Off <input id="o4" class="switch switch-rect-primary switch-on-off" type="checkbox"> <label for="o4"></label>
I/O <input id="o5" class="switch switch-rect-primary switch-io" type="checkbox"> <label for="o5"></label>
Yes/No <input id="o6" class="switch switch-rect-primary switch-yes-no" type="checkbox"> <label for="o6"></label>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html">Round toggle switches<br>
On/Off <input id="o1" class="switch switch-round-primary switch-on-off" type="checkbox"> <label for="o1"></label>
I/O <input id="o2" class="switch switch-round-primary switch-io" type="checkbox"> <label for="o2"></label>
Yes/No <input id="o3" class="switch switch-round-primary switch-yes-no" type="checkbox"> <label for="o3"></label>
<br>Rectangular toggle switches<br>
On/Off <input id="o4" class="switch switch-rect-primary switch-on-off" type="checkbox"> <label for="o4"></label>
I/O <input id="o5" class="switch switch-rect-primary switch-io" type="checkbox"> <label for="o5"></label>
Yes/No <input id="o6" class="switch switch-rect-primary switch-yes-no" type="checkbox"> <label for="o6"></label></code></pre></figure>
</div>
<p> <strong>Original idea and implementation</strong> by <a href="http://callmenick.com/post/css-toggle-switch-examples">callmenick.com</a>.</p>
</div>
<h3 id="lightbox">Responsive lightbox <small>Simple, light and Javascript-based</small></h3>
<p>Use the <code>.lightbox-toggle</code> class on a link element surrounding an image element to create a lightbox that opens when you click on the image. Be sure to specify a unique <code>id</code> for the image element. The lightbox will automatically resize to properly fit your browser's size and change its size accordingly to the browser when the window is resized. You can use the <code>alt</code> attribute of the image to show a custom title in your lightbox, otherwise you can leave it blank to show the URL of the image. <br><strong>Suggestion:</strong> Use this lightbox with Bootstrap's <code>.thumbnail</code> class and/or in combination with tooltips to show your users that the images can be viewed in a lightbox.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Examples</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="" class="thumbnail lightbox-toggle">
<img alt="This image has an alt attribute specified for the title bar" id="light-img1" src="http://dummyimage.com/hd1080" data-toggle="tooltip" data-placement="top" title="View image">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="" class="thumbnail lightbox-toggle">
<img id="light-img2" src="http://dummyimage.com/vga" data-toggle="tooltip" data-placement="top" title="View image">
</a>
</div>
</div>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><a href="" class="thumbnail lightbox-toggle">
<img alt="This image has an alt attribute specified for the title bar" id="light-img1" src="http://dummyimage.com/hd1080" data-toggle="tooltip" data-placement="top" title="View image">
</a>
<a href="" class="thumbnail lightbox-toggle">
<img id="light-img2" src="http://dummyimage.com/vga" data-toggle="tooltip" data-placement="top" title="View image">
</a></code></pre></figure>
</div>
</div>
<h3 id="spinner">Numeric spinner</h3>
<p>Make your numeric inputs prettier by using the <code>.spinner</code> class on an <code>.input-group</code> with a text input element and two buttons. Comes in two styles: arrows (<code>.spinner-up-down</code> class) and plus/minus (<code>.spinner-plus-minus</code> class).</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Examples</h4>
</div>
<div class="panel-body">
<h4>Arrows:</h4>
<div class="input-group spinner spinner-up-down">
<input type="text" class="form-control" value="25">
<div>
<button class="btn btn-default" type="button"></button>
<button class="btn btn-default" type="button"></button>
</div>
</div>
<h4>Plus/Minus:</h4>
<div class="input-group spinner spinner-plus-minus">
<input type="text" class="form-control" value="40">
<div>
<button class="btn btn-default" type="button"></button>
<button class="btn btn-default" type="button"></button>
</div>
</div>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><div class="input-group spinner spinner-up-down">
<input type="text" class="form-control" value="25">
<div>
<button class="btn btn-default" type="button"></button>
<button class="btn btn-default" type="button"></button>
</div>
</div>
<div class="input-group spinner spinner-plus-minus">
<input type="text" class="form-control" value="40">
<div>
<button class="btn btn-default" type="button"></button>
<button class="btn btn-default" type="button"></button>
</div>
</div></code></pre></figure>
</div>
<p> <strong>Original idea and implementation</strong> by <a href="http://codepen.io/Thomas-Lebeau/pen/csHqx">Thomas Lebeau</a>.</p>
</div>
<h3 id="collapsetoggle">Collapse toggle box</h3>
<p>Bootstrap's <a href="http://getbootstrap.com/javascript/#collapse">Collapse</a> is great. But if you are looking for a different style for your content toggle buttons, you can now use the <code>.btn-toggle</code> class in combintion with a <code><label></code> element to achieve that. All the functionality of the original Bootstrap component remains intact.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Example</h4>
</div>
<div class="panel-body">
<a class="btn btn-primary btn-toggle" role="button" id="btn-toggle-0" data-toggle="collapse" href="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">
</a><label>Collapse using link with href</label>
<div class="collapse" id="collapseLinkExample">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur euismod lobortis. Donec odio justo, eleifend a lacinia quis, tempor vel nisi. Phasellus fermentum iaculis interdum. Nullam nec congue nisl. Donec a nisi velit. Cras eu elit in quam semper auctor ut sed lorem. In ac eleifend ligula. Sed vulputate id tortor in fringilla.
</div>
</div><br>
<button class="btn btn-default btn-toggle" id="btn-toggle-1" type="button" data-toggle="collapse" data-target="#collapseDataTargetExample" aria-expanded="false" aria-controls="collapseDataTargetExample"></button><label>Collapse using button with data-target</label>
<div class="collapse" id="collapseDataTargetExample">
<div class="well">
Etiam posuere luctus lorem, at tempus lectus varius vel. Nullam in elementum mauris. Aenean faucibus sagittis lacus, a viverra ante. Vestibulum a pharetra nibh. Nullam sit amet est a nisi tincidunt blandit in tristique dui. Integer sed viverra risus. Vivamus orci tortor, fermentum ac euismod eu, iaculis bibendum lectus.
</div>
</div><br>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><!-- Link with href -->
<a class="btn btn-primary btn-toggle" role="button" data-toggle="collapse"
href="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">
</a>
<label>Link with href</label>
<div class="collapse" id="collapseLinkExample">
<div class="well">
...
</div>
</div>
<!-- Button with data-target -->
<button class="btn btn-default btn-toggle" type="button" data-toggle="collapse"
data-target="#collapseDataTargetExample" aria-expanded="false" aria-controls="collapseDataTargetExample">
</button>
<label>Button with data-target</label>
<div class="collapse" id="collapseDataTargetExample">
<div class="well">
...
</div>
</div></code></pre></figure>
</div>
</div>
<h3 id="checkboxes">Checkbox styles <small>In 7 pure CSS flavours</small></h3>
<p>Use the <code>.chkbox</code> class only on <code><input type="checkbox"></code> elements. Don't forget to add a <code><label></code> after it and link it to the checkbox's <code>id</code>. There are seven flavours of checkboxes, similar to the classic Bootstrap buttons:</p>
<ul>
<li><code>.chkbox-default</code></li>
<li><code>.chkbox-primary</code></li>
<li><code>.chkbox-success</code></li>
<li><code>.chkbox-info</code></li>
<li><code>.chkbox-warning</code></li>
<li><code>.chkbox-danger</code></li>
<li><code>.chkbox-notice</code></li>
</ul>
<p>You can also use the <code>.chkbox-lg</code>, <code>.chkbox-sm</code> and <code>.chkbox-xs</code> classes to change the size of your checkboxes.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Examples</h4>
</div>
<div class="panel-body">
<h4>Checkbox variants:</h4>
<input id="ch1" class="chkbox chkbox-default" type="checkbox"> <label for="ch1">Default </label>
<input id="ch2" class="chkbox chkbox-primary" type="checkbox"> <label for="ch2">Primary </label>
<input id="ch3" class="chkbox chkbox-success" type="checkbox"> <label for="ch3">Success </label>
<input id="ch4" class="chkbox chkbox-info" type="checkbox"> <label for="ch4">Info </label>
<input id="ch5" class="chkbox chkbox-warning" type="checkbox"> <label for="ch5">Danger </label>
<input id="ch6" class="chkbox chkbox-danger" type="checkbox"> <label for="ch6">Warning </label>
<input id="ch7" class="chkbox chkbox-notice" type="checkbox"> <label for="ch7">Notice </label>
<br/>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><input type="checkbox" class="chkbox chkbox-default" id="chk-default"><label for="chk-default">Default</label>
<input type="checkbox" class="chkbox chkbox-primary" id="chk-primary"><label for="chk-primary">Primary</label>
<input type="checkbox" class="chkbox chkbox-success" id="chk-success"><label for="chk-success">Success</label>
<input type="checkbox" class="chkbox chkbox-info" id="chk-info"><label for="chk-info">Info</label>
<input type="checkbox" class="chkbox chkbox-warning" id="chk-warning"><label for="chk-warning">Warning</label>
<input type="checkbox" class="chkbox chkbox-danger" id="chk-danger"><label for="chk-danger">Danger</label>
<input type="checkbox" class="chkbox chkbox-notice" id="chk-notice"><label for="chk-notice">Notice</label></code></pre></figure><br/>
<h4>Checkbox sizes:</h4>
<input id="chL" class="chkbox chkbox-primary chkbox-lg" type="checkbox"> <label for="chL">Large checkbox </label>
<input id="chN" class="chkbox chkbox-primary" type="checkbox"> <label for="chN">Normal checkbox </label>
<input id="chS" class="chkbox chkbox-primary chkbox-sm" type="checkbox"> <label for="chS">Small checkbox </label>
<input id="chXS" class="chkbox chkbox-primary chkbox-xs" type="checkbox"> <label for="chXS">Extra small checkbox </label>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><input id="chL" class="chkbox chkbox-primary chkbox-lg" type="checkbox"> <label for="chL">Large checkbox</label>
<input id="chN" class="chkbox chkbox-primary" type="checkbox"> <label for="chN">Normal checkbox</label>
<input id="chS" class="chkbox chkbox-primary chkbox-sm" type="checkbox"> <label for="chS">Small checkbox</label>
<input id="chXS" class="chkbox chkbox-primary chkbox-xs" type="checkbox"> <label for="chXS">Extra small checkbox</label></code></pre></figure>
</div>
</div>
<h3 id="radiobuttons">Radio button styles <small>In 7 pure CSS flavours</small></h3>
<p>Use the <code>.rdbtn</code> class only on <code><input type="radio"></code> elements. Don't forget to add a <code><label></code> after it and link it to the radio button's <code>id</code>. There are seven flavours of radio buttons, similar to the classic Bootstrap buttons:</p>
<ul>
<li><code>.rdbtn-default</code></li>
<li><code>.rdbtn-primary</code></li>
<li><code>.rdbtn-success</code></li>
<li><code>.rdbtn-info</code></li>
<li><code>.rdbtn-warning</code></li>
<li><code>.rdbtn-danger</code></li>
<li><code>.rdbtn-notice</code></li>
</ul>
<p>You can also use the <code>.rdbtn-lg</code>, <code>.rdbtn-sm</code> and <code>.rdbtn-xs</code> classes to change the size of your radio buttons.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Examples</h4>
</div>
<div class="panel-body">
<h4>Radio button variants:</h4>
<input id="rd1" class="rdbtn rdbtn-default" name="test" type="radio"> <label for="rd1">Default </label>
<input id="rd2" class="rdbtn rdbtn-primary" name="test" type="radio"> <label for="rd2">Primary </label>
<input id="rd3" class="rdbtn rdbtn-success" name="test" type="radio"> <label for="rd3">Success </label>
<input id="rd4" class="rdbtn rdbtn-info" name="test" type="radio"> <label for="rd4">Info </label>
<input id="rd5" class="rdbtn rdbtn-warning" name="test" type="radio"> <label for="rd5">Danger </label>
<input id="rd6" class="rdbtn rdbtn-danger" name="test" type="radio"> <label for="rd6">Warning </label>
<input id="rd7" class="rdbtn rdbtn-notice" name="test" type="radio"> <label for="rd7">Notice </label>
<br/>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><input type="radio" class="rdbtn rdbtn-default" id="rdb-default"><label for="rdb-default">Default</label>
<input type="radio" class="rdbtn rdbtn-primary" id="rdb-primary" name="rd-group"><label for="rdb-primary">Primary</label>
<input type="radio" class="rdbtn rdbtn-success" id="rdb-success" name="rd-group"><label for="rdb-success">Success</label>
<input type="radio" class="rdbtn rdbtn-info" id="rdb-info" name="rd-group"><label for="rdb-info">Info</label>
<input type="radio" class="rdbtn rdbtn-warning" id="rdb-warning" name="rd-group"><label for="rdb-warning">Warning</label>
<input type="radio" class="rdbtn rdbtn-danger" id="rdb-danger" name="rd-group"><label for="rdb-danger">Danger</label>
<input type="radio" class="rdbtn rdbtn-notice" id="rdb-notice" name="rd-group"><label for="rdb-notice">Notice</label></code></pre></figure><br/>
<h4>Radio button sizes:</h4>
<input id="rdL" class="rdbtn rdbtn-primary rdbtn-lg" name="test" type="radio"> <label for="rdL">Large radio </label>
<input id="rdN" class="rdbtn rdbtn-primary" name="test" type="radio"> <label for="rdN">Normal radio </label>
<input id="rdS" class="rdbtn rdbtn-primary rdbtn-sm" name="test" type="radio"> <label for="rdS">Small radio </label>
<input id="rdXS" class="rdbtn rdbtn-primary rdbtn-xs" name="test" type="radio"> <label for="rdXS">Extra small radio </label>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><input id="rdL" class="rdbtn rdbtn-primary rdbtn-lg" name="test-s" type="radio"> <label for="rdL">Large radio </label>
<input id="rdN" class="rdbtn rdbtn-primary" name="test-s" type="radio"> <label for="rdL">Normal radio </label>
<input id="rdS" class="rdbtn rdbtn-primary rdbtn-sm" name="test-s" type="radio"> <label for="rdL">Small radio </label>
<input id="rdXS" class="rdbtn rdbtn-primary rdbtn-xs" name="test-s" type="radio"> <label for="rdL">Extra small radio </label></code></pre></figure>
</div>
</div>
<h3 id="lists">List element styles <small>Lots of pure CSS options</small></h3>
<p>Use the <code>.urd</code> class for unordered lists or the <code>.ord</code> class for ordered lists in combination with one of the three styles (disc, circle and square). Apart from that, you can use the <code>.urd-big</code> to make your unordered list bullets larger. There are 7 color combinations, along with the above options:</p>
<ul>
<li><code>.urd-disc-default</code>, <code>.urd-circle-default</code> and <code>.urd-square-default</code></li>
<li><code>.urd-disc-primary</code>, <code>.urd-circle-primary</code> and <code>.urd-square-primary</code></li>
<li><code>.urd-disc-success</code>, <code>.urd-circle-success</code> and <code>.urd-square-success</code></li>
<li><code>.urd-disc-info</code>, <code>.urd-circle-info</code> and <code>.urd-square-info</code></li>
<li><code>.urd-disc-warning</code>, <code>.urd-circle-warning</code> and <code>.urd-square-warning</code></li>
<li><code>.urd-disc-danger</code>, <code>.urd-circle-danger</code> and <code>.urd-square-danger</code></li>
<li><code>.urd-disc-notice</code>, <code>.urd-circle-notice</code> and <code>.urd-square-notice</code></li>
</ul>
<p>Similarly, you can use the classes for ordered lists by replacing <code>.urd-</code> with <code>.ord-</code>. Note that ordered lists using these classes only use the <code>decimal</code> value for the <code>list-style</code> attribute and different values will not be taken into account.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Examples</h4>
</div>
<div class="panel-body">
<h4>Unordered lists</h4>
<ul class="urd urd-disc-primary">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-circle-default">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-square-success">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><ul class="urd urd-disc-primary">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-circle-default">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-square-success">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul></code></pre></figure>
<h4>Unordered lists - larger bullets</h4>
<ul class="urd urd-disc-warning urd-big">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-circle-danger urd-big">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-square-notice urd-big">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><ul class="urd urd-disc-warning urd-big">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-circle-danger urd-big">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul>
<ul class="urd urd-square-notice urd-big">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ul></code></pre></figure>
<h4>Ordered lists</h4>
<ol class="ord ord-disc-primary">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ol>
<ol class="ord ord-circle-default">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ol>
<ol class="ord ord-square-info">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ol>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><ol class="ord ord-disc-primary">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ol>
<ol class="ord ord-circle-default">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ol>
<ol class="ord ord-square-info">
<li>This is a list element</li>
<li>This is a list element</li>
<li>This is a list element</li>
</ol></code></pre></figure>
</div>
</div>
<h3 id="select">Alternative select style <small>In pure CSS</small> <span class="label label-danger">New!</span></h3>
<p>Use the <code>.slct</code> class to give a new style to your <code><select></code> elements. <strong>Note:</strong> this particular class might not work in older versions of Internet Explorer.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Example</h4>
</div>
<div class="panel-body">
<select class="slct">
<option>Apples</option>
<option selected>Oranges</option>
<option>Strawberries</option>
<option>Cherries</option>
</select>
<br/>
<h4>Usage:</h4>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><select class="slct">
<option>Apples</option>
<option selected>Oranges</option>
<option>Strawberries</option>
<option>Cherries</option>
</select></code></pre></figure>
</div>
</div>
<footer style="padding: 20px;">Designed and built by <a href="https://github.com/Chalarangelo">@chalarangelo</a> for use with <a href="http://getbootstrap.com">Bootstrap</a> (versions 3.3.6 and 3.3.7).<br>All components are licensed under the <a href="https://raw.githubusercontent.com/Chalarangelo/bootstrap-extend/master/LICENSE">MIT License</a>.</footer>
<!-- Page ending, do not modify below this line -->
</div></div>
</div>
</body>
</html>