-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathbootstrap.javascript_css.txt
657 lines (592 loc) · 40 KB
/
bootstrap.javascript_css.txt
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
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
┏━━━━━━━━━━━━━━━┓
┃ BOOTSTRAP ┃
┗━━━━━━━━━━━━━━━┛
INSTALLATION ==> #Version 3.2.0
#Installation: web script. Can use CDN.
#Components:
# - bootstrap[.min].css
# - bootstrap-theme[.min].css
## Can get other themes, e.g. with Bootswatch
# - bootstrap[.min].js
# - fonts/glyphicons-halflings-regular.eot|svg|ttf|woff
#Can reduce library size or customize colors, sizes, etc. with custom build online.
#Must also add:
# - HTML tags:
# <meta http-equiv="X-UA-Compatible" content="IE=edge">
# <meta name="viewport" content="width=device-width, initial-scale=1[, maximum-scale=1,
# user-scalable=no"]">: optional part disables mobile zooming
# - jQuery
#Use Normalize.css
#Can install CSS as SASS instead (in order to customize variables):
# - via bower or Compass Ruby module, then @import "bootstrap" [+ @import "bootstrap-compass"]
# - must use Autoprefixer too
GOAL ==> #Add:
# - CSS classes:
# - to create elements ("components")
# - or not
# - JavaScript ("widgets"):
# - CSS class. Can also use JQ.FUNC([OPT_OBJ]) to define this class.
# - Can use options either with JavaScript OBJ.OPT: VAL (see above) (camelcase) or HTML
# attribute data-OPT=VAL
# - OBJ.OPT: OBJ2 -> data-OPT-OBJ2
# - methods are JQ.FUNC2(...), chainable
# - some CSS classes are used for styling, others used by constructors/methods
# - jQuery events. Can all use JQEVENT.preventDefault()
# - can use $.fn.WIDGET.Constructor.DEFAULTS.OPT = VAL to override default OPT values.
# - cannot apply two on same element.
BOOTLINT.lintHtml(HTML_STR, ##Bootstrap linter (Node module).
FUNC(OBJ), NUM_ARR) ##NUM_ARR are lints Ids to disable.
##OBJ: id STR, message STR
##Also available in browser, bookmarklet and command line.
ANGULAR-STRAP ###Uses this notation.
###Makes it possible to use Bootstrap with Angular.
###Installation:
### - must replace Bootstrap JavaScript files by angular-strap[.tpl].js (both files), after
### Angular is loaded
### - then require Angular module "mgcrea.ngStrap"
###Must either:
### - HTML attribute bs-TYPE (directive)
### - fire $TYPE(), returning AJQ (doc indicates "$TYPE() available")
###Params:
### - HTML attribute data-VAR="VAL"
### - bs-TYPE="OBJ_EXPR"
### - $TYPE(AJQ, OBJ) (Angular service)
### - default values: TYPEProvider.defaults.VAR = VAL
### - "dynamic OBJ": data-VAR using Angular data binding, or as AJQ.dataVAR (camelCase)
###Methods AJQ.$FUNC(...) are available too.
###Uses ngAnimation (fires enter|leave events). Can use params "animation" CLASS_STR to add a class
###while animating.
###Version 2.1.6
┌─────────────┐
│ THEMING │
└─────────────┘
THEMES ==> #Theming is in separate bootstrap-theme.css
#Can get other themes at bootswatch.com
LESS/SASS ==> #Built with Less but can use Sass.
#Can use Less/Sass variables $var to personalize about everything (must redefine before @import)
#Colors, width, radius are not written in this doc because too numerous (see online doc, under
#"Customize"), except main ones and others.
$gray[-light|dark[er]]
$brand-primary|success|info|
warning|danger #Main colors
$body-bg
$component-active-color|bg #Other colors
$font-family-[sans-]serif|
monospace #Def: Georgia, Helvetica Neue, Menlo
$font-size-base #Def: 14px
$font-size-large|small|h1-6 #Calculated according to $font-size-base (1.25, 0.85, 2.6, 2.15, 1.7, 1.25, 1, 0.85)
$line-height-base #Def: 1.43
$headings-font-family|weight| #Def: inherit, and line-height 1.1, weight 500
line-height|color
$padding-large|base|small|xs- #Def hor.: 16px, 12px, 10px, 5px
horizontal|vertical #Def vert.: 10px, 6px, 5px, 1px
$line-height-large|small #Def: 1.33, 1.5
$border-radius-small|base|
large #Def: 3px, 4px, 6px
$table-[condensed-]cell-
padding #Def: 8px|5px
$nav-link-padding #Def: 10px 15px
$jumbotron-padding #Def: 30px
┌────────────────┐
│ RESPONSIVE │
└────────────────┘
.row #For a grid of 12 columns, makes element spans 1-12 of them.
.col-xs|sm|md|lg-1-12 #Collapse to full width if below breakpoint according to:
# xs: 0px (never): smartphone, 7" tablets
# sm: 768px (or $screen-sm): 10" tablets
# md: 992px (or $screen-md): netbook
# lg: 1200px (or $screen-lg): laptop/PC
#Can:
# - have several classes starting with the smallest e.g. .col-xs-6 .col-sm-4 etc., which will
# be used according to screen size
# - if number adds up to more than 12 columns (or $grid-columns), it's ok: just continues on
# new row
# - to make sure new row all start at same height (and not "stacked" according to bottom
# border of element above), must separate old row and new row with:
# <div> .clearfix .visible-xs|sm|md|lg-block
# which adds an empty <div> with clear: both only when at the specified breakdown.
#Container margins also change according to it.
#Underlyingly uses @media (max|min-width: $screen-xs|sm|md|lg) [and (...)]
#Must use container wrapper with .container[-fluid] (non-fluid leaves margins for md and sm)
.col-xs|sm|md|lg-offset-1-12#Same but left margin, not content width (unless below breakdown)
.col-xs|sm|md|lg-
push|pull-NUM #Shift to NUM columns right|left unless below breakdown
.visible-xs|sm|md|lg|print-
block|inline[-block] #Only show for this size (or for print), and use display: block|inline[-block]
.hidden-xs|sm|md|lg|print #Hides for this size (or for print) (only)
.row #Nested row (with 12 sub-columns)
$grid-gutter-width #Def: 30px
<img> # .img-responsive: make it responsive
# .img-rounded|circle|thumbnail: changes shapes
.embed-responsive
.embed-responsive-NUMbyNUM2 #Make item resize with screen size according to ratio NUMbyNUM2.
.embed-responsive-item #e.g. on <video>, <iframe>, <object>, etc.
.panel-footer # on .panel: .panel-default|primary|success|info|warning|danger
┌──────────┐
│ TEXT │
└──────────┘
<h1-6> (or .h1-6) #Can use <small> (or .small) inside for subtitle.
#For main title should be wrapped in .page-header
<p> # .lead: first <p> bigger
# .text-left|center|right|justify|nowrap
# .text-lowercase|uppercase|capitalize
# .bg|text-muted|primary|success|info|warning|danger
<mark> <del> <s> <ins> <u>
<small> <bold> <em>
<address> #Should use <br>
<blockquote> # .blockquote-reverse: align on right side
<footer>
<cite title="STR">
<abbr title="STR"> # .initialism: smaller font
<ul> # .list-unstyled: remove list-style for this nesting level (not <ul> children)
# .list-inline: display horizontal
<ol>
<dl> # .dl-horizontal: "tab" the defininition
<code>
<kbd>
<pre> # .pre-scrollable: max-height 350px with scrollbar
<var>
<samp> #Sample program output
┌───────────┐
│ ICONS │
└───────────┘
<span> .glyphicon #Small icon to use in buttons or next to form inputs. See list online.
.glyphicon-ICON #Are fonts, so can use CSS dedicated to fonts.
#Ex: +/-, cloud, mail, pen, search, star, user, ok/not-ok, zoom, settings,
#trash, home, new file, save, inbox, refresh, repeat, lock, flag, sound, tag,
#print, bookmark, camera, fonts/formatting, share, move, music playback.
$icon-font-path
$icon-font-name
$icon-font-svg-id #Customization
OTHER ICON SETS ==> #Check fontello.com
┌──────────┐
│ FORM │
└──────────┘
<form> #Most children gets width: 100%
# .form-inline: display horizontal (if >768px). Must set CSS width of controls.
# .form-horizontal: display .formgroup children <label> and <any_control> aligned with
# next .formgroup
#Wrap group of children in .form-group container:
# - usually children: <label> .control-label, <any_control> .form-control, <span> .help-block
# (line of help)
# .has-success|warning|error: validation color
# .has-feedback: validation icon. Must add <span> glyphicon after <any_control> (dynamically
# changing it according to validation) with extra class .form-control-feedback
# .form-group-lg|sm (if .form-horizontal)
# .checkbox|radio[-inline] [.disabled]: CSS styling
<input type="datetime[-local]|
date|month|week|time|number|
password|email|url|tel|search|
color|text"> #Provides shims
<input> # .input-lg|sm: height
<any_contrl disabled|readonly>
.btn #Toggle button (can e.g. be LABEL wrapping CHECKBOX|RADIO)
JQ.button([OBJ]) #CSS styling:
# .btn-default|primary|success|info|warning|danger
# .btn-[group-]xs|sm|lg: sizes
# .btn-block: spans full container width
# .active
# .btn-group (container of .btn), .btn-group-vertical
# .btn-group-justified: with <button> (not <a>), should wrap each in another .btn-group
# .btn-toolbar (container of .btn-group)
# .close: close button (usually with content ×)
JQ.button("toggle") #Can also make togglable with OPT toggle "button" ("buttons" on container instead if this is the
#case)
JQ.button("loading") #Put loading message according to OPT loadingText STR
JQ.button(STR2) #Swaps to text message OPT STR2Text STR
JQ.button("reset") #Removes all text message
bs-checkbox ###To attach to <button>. Will fill ng-model="EXPR" with BOOL
bs-checkbox|radio-group ###To attach to element with <label><input type="checkbox|radio" value="VAL"></label> children
###Will fill ng-model="EXPR" with OBJ.VAL: BOOL ("checkbox") or OBJ.VAL ("radio")
.input-group #Appends a button-like (<span> content) on left or right of an <input>
<span> .input-group-addon #If <span> content is <button>, should use .input-group-btn instead of
<input> .form-control #.input-group-addon
#CSS styling:
# .input-group-lg|sm
<ul> .pagination #Pagination bar.
<li> #First and last <a> might use « and » for the arrows
<a> #CSS styling:
# on <li>: .disabled, .active
# on <ul>: .pagination-lg|sm
<ul> .pager #Two pagination buttons.
<li> #CSS styling:
<a> # on <li>: .disabled, .previous|next
OPT toggle "dropdown" #Shows next sibling with .dropdown-menu and role="menu".
JQ.dropdown() #Must be on <a> with dummy href="#" or on <any>, and in container with .dropdown
#On buttons:
# - If on <button> part of a .btn-group, this button must be in another nested .btn-group with
# only this button.
# - To create split button, just separate in two <button>, one normal and one with only the
# arrow down and the dropdown menu.
# - Can use .dropup on .btn-group to change orientation
#Can use <span> .caret for the arrow down (can use $caret-width-base|large to change size
#(def: 4px|5px))
#CSS action:
# on .dropdown-menu: .dropdown-menu-right to show dropdown on the right, not the bottom
#CSS styling:
# on .dropdown: .open
# on non-.dropdown: .dropdown-backdrop (when open, on mobile devices, area to tap to close it)
# on element with OPT toggle "dropdown": .dropdown-toggle
# on .dropdown-menu children: .dropdown-header, .divider, .disabled
bs-dropdown ###OBJ:
### - animation|placement|trigger|html|delay|container|template: like bs-popover
JQ.dropdown("toggle") #
JQ.on("show|hide.bs.dropdown",
FUNC()) #
JQ.on
("shown|hidden.bs.dropdown",
FUNC()) #
bs-select ###Dropdown menu with possible multiple selections.
$select(AJQ, CONTROLLER) ###OBJ:
### - animation|placement|trigger|html|delay|container|template: like bs-popover
### - multiple BOOL (def: false)
### - max-length NUM (def: 3)
### - max-length-html STR (def: "Selected")
### - all-none-buttons BOOL (def: false): show deselect all button
### - allText|noneText STR (def: "All"|"None")
### - sort BOOL (def: true)
### - placeholder STR (def: "Choose among the following...")
### - iconCheckmark STR (def: "glyphicon glyphicon-ok")
###Must be attached on a <button> with ng-options, which content with a caret.
.progress #Progress bar. Must use CSS width NUM% on .progress-bar too.
.progress-bar #Use several .progress-bar inside .progress for stacked progress bars.
role="progressbar" #CSS styling:
aria-valuenow|min|max="NUM" # on .progress-bar: .progressbar-success|info|warning|danger,
# .progressbar-striped, .active (animates)
bs-typeahead ###OBJ:
$typeahead(AJQ, OBJ) ### - animation|placement|trigger|html|delay|container|template: like bs-popover
### - limit NUM (def: 6): number of items to show
### - minLength NUM (def: 1): number of chars to type before it pops up
### - comparator FUNC_STR(STR,STR2)->BOOL: determine a match
###Must be attached on an <input> with ng-options
###When used as $typeahead(), must specify OBJ.controller
bs-datepicker ###OBJ:
$datepicker(AJQ, CONTROLLER)### - animation|placement|trigger|html|delay|container|template: like bs-popover
### - dateFormat|modelDateFormat STR (def: "shortDate"|null): uses $filter date().
### First is rendering, second model.
### - dateType: for the model. "date" for DATE (def), "number" for NUM (ms), "unix" for NUM (s),
### iso or string for STR
### - autoclose BOOL (def: false): on select
### - useNative BOOL (def: false): uses iOS/Android component if available
### - minDate|maxDate|startDate VAL (def: -Inf|+Inf|now): fed to Date() constructor
### - startView|minView 0|1|2 (def: 0)
### - startWeek 0-6 (def: 0, i.e. Sunday)
### - iconLeft|iconRight STR (def: "glyphicon glyphicon-chevron-left|right")
### - daysOfWeekDisabled STR (def: ""): e.g. "06" to disable Sunday and Saturday
### - disabledDates OBJ_ARR (def: []): OBJ is start|end DATE
###Must be attached on an <input>
###Uses Angular $locale
bs-timepicker ###Like bs-datepicker but:
$timepicker(AJQ, CONTROLLER)### - no options relative to Date|days
### - iconLeft|iconRight -> iconUp|iconDown (def: "glyphicon glyphicon-chevron-up|down")
### - dateType, dateFormat, modelDateFormat, minDate|maxDate -> same with Time instead
### - length NUM (def: 5): number of items to show
### - hourStep|minuteStep (def: 1|5)
### - arrowBehavior "pager|picker" (def: "pager")
┌────────────────┐
│ CONTAINERS │
└────────────────┘
<span> .label #Tag-like. Hidden if no content.
#CSS styling: .label-default|primary|success|info|warning|danger
<span> .badge #Rounded tag-like (usually with number content). Hidden if no content.
#Works well inside pills navbar or .list-group-item
.jumbotron #Container with grey background color and large padding to catch attention.
.well #Same with lower pagging. CSS styling: .well-lg|sm
<ul> .list-group #Table-like list of items (similar to list that appears in dropdown menus)
<li|a> .list-group-item #CSS styling:
[.list-group-item-heading|# on <a>: .active, .disabled
text] # on <li|a>: .list-group-item-success|info|warning|danger
.panel #Box/panel
.panel-heading #<table> and .list-group must be sibling next .panel-body
<h1-6> .panel-title #<table> must have class .table
.panel-body #CSS styling:
.collapse #Accordion
JQ.collapse([OBJ]) #To toggle:
# - Via UI: OPT toggle "collapse" and either:
# - OPT target "CSS_SELECTOR"
# - (better for <a>) href="CSS_SELECTOR"
# where CSS_SELECTOR points to JQ
# - Manually: OPT toggle BOOL
# - use OPT parent "CSS_SELECTOR" pointing to container (.panel-group), to manage group of
# collapsing (accordion)
#CSS action:
# - .in (on .collapse, meaning not collapsed)
#CSS styling:
# .panel-group
# .panel .panel-default
# .panel-heading
# .panel-title
# .panel-collapse (with .collapse): .collapsing
# .panel-body
bs-collapse ###To put on .panel-group. Also need to put:
### - bs-collapse-toggle on .panel-title child
### - bs-collapse-target on .panel-collapse
###Must use ng-model="EXPR" on .panel-group, which will be NUM[_ARR]
###OBJ:
### - animation CLASS_STR
### - activeClass CLASS_STR (def: "in")
### - allowMultiple BOOL (def: false)
### - startCollapsed BOOL (def: false)
### - disallowToggle BOOL (def: false)
JQ.collapse
("toggle|show|hide") #
JQ.on("show|hide.bs.collapse",
FUNC()) #
JQ.on
("shown|hidden.bs.collapse",
FUNC()) #
.tab-pane #Tabs.
JQ.tab() #Must follow this structure:
# - Tab headers:
# <ul> with .nav .nav-tabs|pills and role="tablist"
# <li>
# <a> with role="tab", OPT toggle "tab|pill" and href="CSS_SELECTOR":
# - where CSS_SELECTOR points to tab
# - can be a .dropdown or a sub-<ul>
# - Tab content:
# .tab-content
# .tab-pane
#JQ is <a>
#"pill" show different style thant "tab"
#CSS action:
# on .tab-pane or <li>: .active (must be set on original tabs opened)
# on <li>: .disabled (make it grey)
#CSS styling:
# on .tab-pane: .fade [.in] (to do on original .active)
# on .nav-pills: .nav-stacked (vertical layout)
# on .nav: .nav-justified (takes full width if width >768px, use .nav-stacked otherwise)
bs-tabs ###Children must have bs-pane, and HTML title attribute is used as header.
###OBJ:
### - animation|template: like bs-popover
### - navClass|activeClass CLASS_STR (def: "nav-tabs"|"active")
###Dynamic OBJ:
### - bs-active-pane NUM: index of currently opened tab
JQ.tab("show") #
JQ.on("show[n].bs.tab",FUNC())#Can use JQEVENT.target (new tab) .relatedTarget (previous tab)
┌────────────┐
│ MODALS │
└────────────┘
OPT toggle "modal" #Open a popup (actually popover). To do on a <a> with href="CSS_SELECTOR" or <any> with
JQ.modal() #OPT target "CSS_SELECTOR", where CSS_SELECTOR points to the popup
#Popup is structured as is:
# .modal [.fade] (animation)
# .modal-dialog [.modal-sm|lg] (size, according to $modal-sm|md|lg, def: 300|600|900px)
# .modal-content
# .modal-header
# <button type="button" class="close" data-dismiss="modal">×</button>
# <h4> with .modal-title
# .modal-body
# .modal-footer
#Use OPT dismiss "CSS_SELECTOR" to close modal (e.g. close button)
#CSS action:
# on body: .model-open (disallow scrolling), .model-backdrop (closes popup by clicking out,
# uses $modal-backdrop-opacity (def: 0.5))
#OPT:
# - backdrop false: does not add .model-backdrop
# - keyboard false: does not close on Escape
# - show false: don't show modal when initialized
bs-modal ###OBJ:
$modal(OBJ) ### - animation|backdropAnimation CLASS_STR (def: "am-fade")
### - placement "top|center|bottom" (def: "top")
### - title STR (def: title HTML attribute)
### - template PATH|URL: uses a file to customize whole modal
### - content STR: can be HTML if html true (requires ngSanitize)
### - contentTemplate PATH|URL: same with file
### - backdrop BOOL (def: true)
### - keyboard BOOL (def: true)
### - show BOOL (def: true)
### - container false|SELECTOR: appends to an element
### -
JQ.modal("show|hide|toggle") #
AJQ.$show|hide|toggle() ###
JQ.on("show|hide.bs.modal",
FUNC()) #
JQ.on("shown|hidden.bs.modal",
FUNC()) #
AJQ.on("modal.show|hide
[.before]", FUNC()) ###
BOOTSTRAP-MODAL ==> ##Version 2.2.6. Adds functionality to JQ.modal()
##Must include bootstrap-modal-bs3patch.css before Bootstrap CSS.
##OPT:
## - width|height STR
## - maxHeight STR[()]: of .modal-body
## - focusOn ELEM|SELECTOR: gives focus right away
## - attentionAnimation STR: animate.css animation. Must include it unless using "shake"
## Done on JQ.attention()
## - loading BOOL: if true:
## - show OPT.spinner "HTML", which can be:
## .loading-spinner(style="width: 200px; margin-left: -100px")
## .progress.progress-striped.active
## .progress-bar(style="width: 100%")
## - show OPT.backdropTemplate "HTML" (def one should be ok)
## - modalOverflow BOOL: if true, add scrollbars even if smaller (for dynamic sized popups)
## - tabindex NUM
##Opening new modal will stack it, unless OPT.replace true
$("body").modalmanager ##MMANAGER
MMANAGER("loading") ##Same as changing OPT.loading
MMANAGER("spinner", "HTML") ##Same as changing OPT.spinner
MMANAGER("backdropTemplate",
"HTML") ##Same as changing OPT.backdropTemplate
MMANAGER("backdropLimit",NUM)##Max number of backdrops
.alert #Element that disappears when child <button> with OPT dismiss "alert" gets clicked on.
JQ.alert([OBJ]) #Should also have role="alert"
#CSS styling:
# for alert: .alert-success|info|warning|danger [.fade .in], .alert-dismissible (to add if
# there is a child close <button>)
# for alert content <a>: .alert-link
bs-alert ###OBJ:
$alert(OBJ) ### - animation CLASS_STR
### - placement "top[-left|right]"
### - title|content|keyboard|show|container|template: like bs-modal
### - type "info|danger|etc." (def: "info")
### - duration NUM|false (def: false)
### - dismissable BOOL (def: true)
AJQ.$show|hide|toggle() ###
JQ.on
("clone[d].bs.alert", FUNC()) #
OPT toggle "popover" #Show popover next to element with OPT content STR|FUNC()->STR
JQ.popover([OBJ]) #OPT:
# - trigger "hover|click|focus ..." (def: "click"): how to toggle
# - title STR|FUNC()->STR: shown first (use normal attribute title=STR otherwise)
# - placement "top|bottom|left|right|auto ..."|FUNC()->STR (def: "auto")
# - html BOOL (def: false): for content
# - animation BOOL (def: true)
# - container CSS_SELECTOR: append to another element. To do on buttons container when there is
# one.
# - selector CSS_SELECTOR: same but got a child element, which might not be existing yet
# - delay NUM or { show|hide NUM } (ms)
# - template STR: def is "<div class="popover" role="tooltip"><div class="arrow"></div>
# <h3 class="popover-title"></h3><div class="popover-content"></div></div>"
# - viewport CSS_SELECTOR or { selector: CSS_SELECTOR, padding NUM }: keep within this element
bs-popover ###OBJ:
$popover(AJQ, OBJ) ### - animation CLASS_STR
### - trigger|title|placement|html|container|delay|template: like normal Bootstrap
### - target SELECTOR: to position against
### - contentTemplate STR
### - autoClose BOOL (def: false): when clicking outside of it
###Dynamic OBJ:
### - bs-show BOOL
### - bs-enabled BOOL
JQ.popover("show|hide|toggle")#
AJQ.$show|hide|toggle() ###
AJQ.$setEnabled(BOOL) ###
JQ.popover("destroy") #
JQ.on("show|hide.bs.popover",
FUNC()) #
JQ.on
("shown|hidden.bs.popover",
FUNC()) #
AJQ.on("popover.show|hide
[.before]",FUNC()) ###
TOOLTIP ==> #All same as popover, but with "tooltip". Is smaller and trigger "hover focus" by def.
#Can use $tooltip-opacity (def: 0.9)
###AngularStrap is also same, but with "tooltip".
┌───────────┐
│ TABLE │
└───────────┘
<table> # .table
# .table-striped: striped colors
# .table-bordered: border on cells
# .table-hover: add hovering effects on rows
# .table-condensed: smaller padding
# .table-responsive: gives horizontal scrolling on smaller devices
<tr> <td> # .active|success|warning|danger|info
┌────────────────┐
│ NAVIGATION │
└────────────────┘
<nav #Navigation bar. Switches to mobile view (vertical) when <768px
class="navbar navbar-default" #<ul>:
role="navigation"> # - like tabs (see above)
.container[-fluid] # - can be put several times
.navbar-header # - can be other elements, replacing .nav .navbar-nav with other class:
<button type="button" # - <form>: .navbar-form (e.g. search bar)
class="navbar-toggle # - <button>: .navbar-btn
collapsed" # - <p>: .navbar-text
data-toggle="collapse" # - <a> inside <p>: .navbar-link
data-target="CSS_SLCTR">#CSS styling:
//Only on mobile # on .navbar:
//CSS_SELECTOR points # .navbar-fixed-top|bottom
//to .navbar-collapse # - need to add body { padding-top|bottom: 50px } (or any $navbar-height)
<span> .icon-bar # .navbar-static-top: make it not fixed
//3 times # .navbar-inverse: inverse colors
<a class="navbar-brand" # on .collapse children: .navbar-left|right: alignment
href="URL">TITLE</a>
.collapse .navbar-collapse
<ul> .nav .navbar-nav
</nav>
bs-navbar ###To put on .navbar
###OBJ:
### - activeClass CLASS_STR (def: "active")
### - routeAttr ATTR_STR (def: "data-match-route"): any element whose value of this attribute
### matches $location.path() will get activeClass
<ol> .breadcrumb
<li> #Breadcrumbs. Uses $breadcrumb-separator (def: "/")
OPT spy "scroll" #Make tab headers highlight according to whether the tab target is displayed ("scrollspy")
JQ.scrollspy() #Must:
# - be on general container (usually <body>), with:
# - CSS position: relative
# - OPT target "CSS_SELECTOR" pointing to container of <ul> with .nav .nav-tabs|pills
# - <a> nav links must not use OPT toggle "tab|pill" (navigation bar makes scroll, not update
# content)
#Can use sub-<ul> to highlight and open sub-sections too.
#OPT:
# - offset NUM (def: 10, in px, from top of targets before it activates)
bs-scrollspy ###Must be on elements with OPT target. Can also set bs-scrollspy-list on container <ul> instead.
###Can have OPT offset NUM too (good when fixed header)
JQ.scrollspy("refresh") #Must be called when dynamically updating DOM
JQ.on("activate.bs.scrollspy",
FUNC()) #When new items becomes highlighted
OPT spy "affix" #Makes a panel on the left|right scroll with the rest of content for the top|bottom of the page,
JQ.affix() #but stay fixed when scrolling in the middle.
#More precisely it adds classes:
# .affix-top: when on top of element position (scrolling < OPT offset-top). Should:
# - let normal position so the element scrolls up naturally (position: absolute)
# - or hide element
# .affix: when in middle of page. Should use position: fixed, and position accordingly
# .affix-bottom (optional): when on bottom page. To give impression of natural scrolling,
# should set position: absolute to shift real position to bottom of page.
#OPT:
# - offset-top|bottom NUM|FUNC()->NUM or offset { top|bottom NUM }
bs-affix ###OBJ:
$affix(AJQ, OBJ) ### - offset-top|bottom|parent|unpin NUM
### - bs-affix-target SELECTOR: attach to custom element
JQ.on("affix[ed][-top|bottom].#On activation.
bs.affix", FUNC()) #affix is before, affixed after.
┌───────────┐
│ MEDIA │
└───────────┘
<a> .thumbnail
<img data-src="URL">
<div> .caption #Thumbnail
.media #Text content with title, with image alongside.
<a> .pull-left|right #For nested list, use .media-list <ul> container of .media <li>
<img> .media-object
.media-body
.media-heading
OPT ride "carousel" #Carousel.
JQ.carousel([OBJ]) #OPT:
# - interval NUM (def: 5000)
# - pause "hover" (def): pause cycling when hovering
# - wrap BOOL (def: true)
# - slide "prev|next" or slide-to NUM:
# - when clicked on (need)
# - need to use OPT target "CSS_SELECTOR" (container .carousel) or (better if <a>)
# href="CSS_SELECTOR"
#CSS styling:
# .carousel .slide
# .carousel-indicators: usually <ol> with <li> using slide[-to]
# .active
# .carousel-inner
# .item [.active]: slide
# .carousel-caption: bottom center. Siblings have the whole slide
# .carousel-control .left|right: should also use role="button". Usually use slide[-to]
# Also uses $carousel-control-opacity|width (def: 0.5, 15%)
JQ.carousel("cycle|pause") #
JQ.carousel("prev|next"|NUM) #NUM is 0-based
JQ.on("slid[e].bs.carousel",
FUNC()) #JQEVENT also has members relatedTarget (item sliding) and direction "left|right"
┌───────────┐
│ OTHER │
└───────────┘
.sr-only #Only show for screen readers
.sr-only-focusable #Same but shows if selected