├── .gitignore
├── .gitmodules
├── README.md
├── ac-html-bootstrap.el
├── ac-html-fa.el
├── bootstrap.yaml
├── fa-html-stuff
    └── html-attributes-complete
    │   └── i-class
├── font-awesome.pl
└── html-stuff
    ├── html-attributes-complete
        ├── a-class
        ├── a-data-dismiss
        ├── a-data-slide
        ├── a-data-target
        ├── a-data-toggle
        ├── abbr-class
        ├── blockquote-class
        ├── button-class
        ├── button-data-dismiss
        ├── button-data-slide
        ├── button-data-target
        ├── button-data-toggle
        ├── div-class
        ├── div-data-backdrop
        ├── div-data-interval
        ├── div-data-keyboard
        ├── div-data-offset-bottom
        ├── div-data-offset-top
        ├── div-data-pause
        ├── div-data-ride
        ├── div-data-show
        ├── div-data-wrap
        ├── dl-class
        ├── embed-class
        ├── form-class
        ├── global-class
        ├── global-data-animation
        ├── global-data-container
        ├── global-data-delay
        ├── global-data-html
        ├── global-data-offset
        ├── global-data-placement
        ├── global-data-selector
        ├── global-data-spy
        ├── global-data-toggle
        ├── global-data-trigger
        ├── global-data-viewport
        ├── h1-class
        ├── h2-class
        ├── h3-class
        ├── h4-class
        ├── h5-class
        ├── h6-class
        ├── i-class
        ├── iframe-class
        ├── img-class
        ├── input-class
        ├── input-data-dismiss
        ├── input-data-slide
        ├── input-data-target
        ├── input-data-toggle
        ├── label-class
        ├── label-data-dismiss
        ├── label-data-slide
        ├── label-data-target
        ├── label-data-toggle
        ├── li-class
        ├── li-data-slide-to
        ├── li-data-toggle
        ├── nav-class
        ├── object-class
        ├── ol-class
        ├── p-class
        ├── select-class
        ├── span-class
        ├── table-class
        ├── td-class
        ├── textarea-class
        ├── tr-class
        ├── ul-class
        └── video-class
    ├── html-attributes-list
        ├── a
        ├── button
        ├── div
        ├── fieldset
        ├── global
        ├── input
        ├── label
        └── li
    ├── html-attributes-short-docs
        ├── div-data-offset-bottom
        ├── div-data-offset-top
        ├── div-data-ride
        ├── fieldset-disabled
        ├── global-data-container
        └── global-data-spy
    ├── html-tag-list
    └── html-tag-short-docs
        ├── abbr
        ├── address
        ├── blockquote
        ├── cite
        ├── del
        ├── em
        ├── footer
        ├── ins
        ├── mark
        ├── s
        ├── small
        ├── strong
        └── u


/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | *#


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "font-awesome"]
2 | 	path = font-awesome
3 | 	url = https://github.com/FortAwesome/Font-Awesome.git
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ac-html-bootstrap.el
 2 | 
 3 | bootstrap3/fontawesome completion data for EMACS `ac-html` and `company-web` modes.
 4 | 
 5 | ## DESCRIPTION
 6 | 
 7 | If  you  ok   that  `glyphicon`  classes  allowed  only   for  `<i>`  or
 8 | `label-default` for `<span>`, `<label>` and so  on, this package may be good for you.
 9 | Alternative you  can use  package [ac-html-csswatcher](https://github.com/osv/ac-html-csswatcher/) that  parse all
10 | css in project.
11 | 
12 | However  this  package  provide   documentation  with  samples  and
13 | additional data-  attributes that `ac-html-csswatcher`  can't provide,
14 | so `ac-html-bootstrap` may be helpful for you.
15 | 
16 | ## SETUP
17 | 
18 | Install `ac-html` if you use `auto-complete` completion framework
19 | or `company-web` if you are using `company` framework.
20 | 
21 | When you edit your .html(.jade, .haml, .slim) file exec `M-x ac-html-bootstrap+`
22 | or `M-x company-web-bootstrap+` to enable twitter bootstrap completion.
23 | If you want Font Awesome: `M-x ac-html-fa+` or `M-x company-web-fa+`
24 | 
25 | Note: Font Awesome completion only available for `<i>` tag
26 | 
27 | ## ISSUES
28 | 
29 | Since `ac-html` 0.4 is alpha stage, and not stable yet. This package works with ac-html 0.3 series,
30 | if you are using ac-html 0.4 series, you may downgrade `ac-html` aka reinstall from melpa-stable.
31 | 
32 | `ac-html` 0.4 will be supported in the future.
33 | 
34 | ## CONTRIBUTE
35 | 
36 | All definition are in `bootstrap.yaml`.
37 | Build script here: https://github.com/osv/h5doc.git
38 | 
39 | Font awesome completion are genereated automatically by script `font-awesome.pl` from css.
40 | 


--------------------------------------------------------------------------------
/ac-html-bootstrap.el:
--------------------------------------------------------------------------------
 1 | ;;; ac-html-bootstrap.el --- auto complete bootstrap3/fontawesome classes for `ac-html' and `company-web'
 2 | 
 3 | ;; Copyright (C) 2014 Olexandr Sydorchuk
 4 | 
 5 | ;; Author: Olexandr Sydorchuk <olexandr.syd@gmail.com>
 6 | ;; Version: 0.9.3
 7 | ;; Keywords: html, auto-complete, bootstrap, cssx
 8 | ;; Package-Requires: ((web-completion-data "0.1"))
 9 | ;; URL: https://github.com/osv/ac-html-bootstrap
10 | 
11 | ;; This program is free software; you can redistribute it and/or modify
12 | ;; it under the terms of the GNU General Public License as published by
13 | ;; the Free Software Foundation, either version 3 of the License, or
14 | ;; (at your option) any later version.
15 | 
16 | ;; This program is distributed in the hope that it will be useful,
17 | ;; but WITHOUT ANY WARRANTY; without even the implied warranty of
18 | ;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
19 | ;; GNU General Public License for more details.
20 | 
21 | ;; You should have received a copy of the GNU General Public License
22 | ;; along with this program.  If not, see <http://www.gnu.org/licenses/>.
23 | 
24 | ;;; Commentary:
25 | 
26 | ;; Bootstrap and Font Awesome
27 | ;;
28 | ;;   If  you ok  that  "glyphicon"  classes allowed  only  for <i>  or
29 | ;; "label-default" for  <span>, <label> and  so on, this may  good for
30 | ;; you.   Alternative you  can use  package `ac-html-csswatcher'  that
31 | ;; parse all css in project.
32 | 
33 | ;;   However  this  package  provide documentation  with  samples  and
34 | ;; additional   data-  attributes   that  `ac-html-csswatcher'   can't
35 | ;; provide, so ac-html-bootstrap may be helpful for you.
36 | ;;
37 | ;; Install `ac-html' for `auto-complete' completion framework
38 | ;; or `company-web' if you are using `company' framework.
39 | ;;
40 | ;; For  `ac-html' users:  Since ac-html  0.4 is  alpha stage,  and not
41 | ;; stable yet. This package works with  ac-html 0.3 series, if you are
42 | ;; using ac-html 0.4  series, you may downgrade  ac-html aka reinstall
43 | ;; from melpa-stable. `ac-html' 0.4 will be supported in the future.
44 | ;;
45 | ;; Usage:
46 | ;;
47 | ;; Use `ac-html-bootstrap+' or `company-web-bootstrap+'
48 | ;; and if you want Font Awesome: `ac-html-fa+' or `company-web-fa+'
49 | ;;
50 | ;; Note: Font Awesome completion only available for <i> tag
51 | ;;
52 | ;; Contribute:
53 | ;;
54 | ;; All definition are in bootstrap.yaml
55 | ;; Build script here: https://github.com/osv/h5doc.git
56 | 
57 | ;;; Code:
58 | 
59 | (require 'web-completion-data)
60 | 
61 | (defconst ac-html-bootstrap-source-dir
62 |   (expand-file-name "html-stuff" (file-name-directory load-file-name))
63 |   "The directory where source of `ac-html-bootstrap' exists.")
64 | 
65 | ;;;###autoload
66 | (defun ac-html-bootstrap+ ()
67 |   "Enable bootstrap ac-html completion"
68 |   (interactive)
69 |   (make-local-variable 'web-completion-data-sources)
70 |   (unless (assoc "Bootstrap" web-completion-data-sources)
71 |     (push (cons "Bootstrap" 'ac-html-bootstrap-source-dir) web-completion-data-sources)))
72 | 
73 | ;;;###autoload
74 | (defalias 'company-web-bootstrap+ 'ac-html-bootstrap+)
75 | 
76 | (provide 'ac-html-bootstrap)
77 | ;;; ac-html-bootstrap.el ends here
78 | 


--------------------------------------------------------------------------------
/ac-html-fa.el:
--------------------------------------------------------------------------------
 1 | ;;; ac-html-fa.el --- auto complete CSS font-awesome classes
 2 | 
 3 | ;; Copyright (C) 2015 Olexandr Sydorchuk
 4 | 
 5 | ;; Author: Olexandr Sydorchuk <olexandr.syd@gmail.com>
 6 | ;; Keywords: html, auto-complete, font-awesome
 7 | 
 8 | ;; This program is free software; you can redistribute it and/or modify
 9 | ;; it under the terms of the GNU General Public License as published by
10 | ;; the Free Software Foundation, either version 3 of the License, or
11 | ;; (at your option) any later version.
12 | 
13 | ;; This program is distributed in the hope that it will be useful,
14 | ;; but WITHOUT ANY WARRANTY; without even the implied warranty of
15 | ;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16 | ;; GNU General Public License for more details.
17 | 
18 | ;; You should have received a copy of the GNU General Public License
19 | ;; along with this program.  If not, see <http://www.gnu.org/licenses/>.
20 | 
21 | ;; Usage:
22 | ;;
23 | ;; Use `ac-html-fa+' or `company-web-fa+'
24 | ;;
25 | ;; Contribute:
26 | ;;
27 | ;; Here is ./font-awesome.pl script for updating, git submodule must be initialized
28 | 
29 | ;;; Code:
30 | 
31 | (require 'web-completion-data)
32 | 
33 | (defconst ac-html-fa-source-dir
34 |   (expand-file-name "fa-html-stuff" (file-name-directory load-file-name))
35 |   "The directory where source of `ac-html-fa' exists.")
36 | 
37 | ;;;###autoload
38 | (defun ac-html-fa+ ()
39 |   "Enable Font Awesome completion for `ac-html' or `company-web'"
40 |   (interactive)
41 |   (make-local-variable 'web-completion-data-sources)
42 |   (unless (assoc "Font Aws" web-completion-data-sources)
43 |     (push (cons "Font Aws" 'ac-html-fa-source-dir) web-completion-data-sources)))
44 | 
45 | ;;;###autoload
46 | (defalias 'company-web-fa+ 'ac-html-fa+)
47 | 
48 | (provide 'ac-html-fa)
49 | ;;; ac-html-fa.el ends here
50 | 


--------------------------------------------------------------------------------
/bootstrap.yaml:
--------------------------------------------------------------------------------
   1 | types:
   2 |   tooltiptags: &TOOLTIPTAGS global
   3 |   # label - because of "<input radio"
   4 |   buttons: &BUTTONS [button, a, input, label]
   5 |   headers: &H1H6 [h1, h2, h3, h4, h5, h6]
   6 |   # GRID SYSTEM
   7 |   grid: &GRID
   8 |     col-xs-1: Horizontal at all times
   9 |     col-xs-2: Horizontal at all times
  10 |     col-xs-3: Horizontal at all times
  11 |     col-xs-4: Horizontal at all times
  12 |     col-xs-5: Horizontal at all times
  13 |     col-xs-6: Horizontal at all times
  14 |     col-xs-7: Horizontal at all times
  15 |     col-xs-8: Horizontal at all times
  16 |     col-xs-9: Horizontal at all times
  17 |     col-xs-10: Horizontal at all times
  18 |     col-xs-11: Horizontal at all times
  19 |     col-xs-12: Horizontal at all times
  20 | 
  21 |     col-sm-1: 750px.\nColumn width ~62px
  22 |     col-sm-2: 750px.\nColumn width ~62px
  23 |     col-sm-3: 750px.\nColumn width ~62px
  24 |     col-sm-4: 750px.\nColumn width ~62px
  25 |     col-sm-5: 750px.\nColumn width ~62px
  26 |     col-sm-6: 750px.\nColumn width ~62px
  27 |     col-sm-7: 750px.\nColumn width ~62px
  28 |     col-sm-8: 750px.\nColumn width ~62px
  29 |     col-sm-9: 750px.\nColumn width ~62px
  30 |     col-sm-10: 750px.\nColumn width ~62px
  31 |     col-sm-11: 750px.\nColumn width ~62px
  32 |     col-sm-12: 750px.\nColumn width ~62px
  33 | 
  34 |     col-md-1: 970px.\nColumn width ~81px
  35 |     col-md-2: 970px.\nColumn width ~81px
  36 |     col-md-3: 970px.\nColumn width ~81px
  37 |     col-md-4: 970px.\nColumn width ~81px
  38 |     col-md-5: 970px.\nColumn width ~81px
  39 |     col-md-6: 970px.\nColumn width ~81px
  40 |     col-md-7: 970px.\nColumn width ~81px
  41 |     col-md-8: 970px.\nColumn width ~81px
  42 |     col-md-9: 970px.\nColumn width ~81px
  43 |     col-md-10: 970px.\nColumn width ~81px
  44 |     col-md-11: 970px.\nColumn width ~81px
  45 |     col-md-12: 970px.\nColumn width ~81px
  46 | 
  47 |     col-lg-1: 1170px.\nColumn width ~97px
  48 |     col-lg-2: 1170px.\nColumn width ~97px
  49 |     col-lg-3: 1170px.\nColumn width ~97px
  50 |     col-lg-4: 1170px.\nColumn width ~97px
  51 |     col-lg-5: 1170px.\nColumn width ~97px
  52 |     col-lg-6: 1170px.\nColumn width ~97px
  53 |     col-lg-7: 1170px.\nColumn width ~97px
  54 |     col-lg-8: 1170px.\nColumn width ~97px
  55 |     col-lg-9: 1170px.\nColumn width ~97px
  56 |     col-lg-10: 1170px.\nColumn width ~97px
  57 |     col-lg-11: 1170px.\nColumn width ~97px
  58 |     col-lg-12: 1170px.\nColumn width ~97px
  59 | 
  60 |     col-xs-offset-1: Increase the left margin of a column 
  61 |     col-xs-offset-2: Increase the left margin of a column
  62 |     col-xs-offset-3: Increase the left margin of a column
  63 |     col-xs-offset-4: Increase the left margin of a column
  64 |     col-xs-offset-5: Increase the left margin of a column
  65 |     col-xs-offset-6: Increase the left margin of a column
  66 |     col-xs-offset-7: Increase the left margin of a column
  67 |     col-xs-offset-8: Increase the left margin of a column
  68 |     col-xs-offset-9: Increase the left margin of a column
  69 |     col-xs-offset-10: Increase the left margin of a column
  70 |     col-xs-offset-11: Increase the left margin of a column
  71 |     col-xs-offset-12: Increase the left margin of a column
  72 | 
  73 |     col-sm-offset-1: Increase the left margin of a column 
  74 |     col-sm-offset-2: Increase the left margin of a column
  75 |     col-sm-offset-3: Increase the left margin of a column
  76 |     col-sm-offset-4: Increase the left margin of a column
  77 |     col-sm-offset-5: Increase the left margin of a column
  78 |     col-sm-offset-6: Increase the left margin of a column
  79 |     col-sm-offset-7: Increase the left margin of a column
  80 |     col-sm-offset-8: Increase the left margin of a column
  81 |     col-sm-offset-9: Increase the left margin of a column
  82 |     col-sm-offset-10: Increase the left margin of a column
  83 |     col-sm-offset-11: Increase the left margin of a column
  84 |     col-sm-offset-12: Increase the left margin of a column
  85 | 
  86 |     col-md-offset-1: Increase the left margin of a column 
  87 |     col-md-offset-2: Increase the left margin of a column
  88 |     col-md-offset-3: Increase the left margin of a column
  89 |     col-md-offset-4: Increase the left margin of a column
  90 |     col-md-offset-5: Increase the left margin of a column
  91 |     col-md-offset-6: Increase the left margin of a column
  92 |     col-md-offset-7: Increase the left margin of a column
  93 |     col-md-offset-8: Increase the left margin of a column
  94 |     col-md-offset-9: Increase the left margin of a column
  95 |     col-md-offset-10: Increase the left margin of a column
  96 |     col-md-offset-11: Increase the left margin of a column
  97 |     col-md-offset-12: Increase the left margin of a column
  98 | 
  99 |     col-lg-offset-1: Increase the left margin of a column 
 100 |     col-lg-offset-2: Increase the left margin of a column
 101 |     col-lg-offset-3: Increase the left margin of a column
 102 |     col-lg-offset-4: Increase the left margin of a column
 103 |     col-lg-offset-5: Increase the left margin of a column
 104 |     col-lg-offset-6: Increase the left margin of a column
 105 |     col-lg-offset-7: Increase the left margin of a column
 106 |     col-lg-offset-8: Increase the left margin of a column
 107 |     col-lg-offset-9: Increase the left margin of a column
 108 |     col-lg-offset-10: Increase the left margin of a column
 109 |     col-lg-offset-11: Increase the left margin of a column
 110 |     col-lg-offset-12: Increase the left margin of a column
 111 | 
 112 |     col-xs-push-1:
 113 |     col-xs-push-2:
 114 |     col-xs-push-3:
 115 |     col-xs-push-4:
 116 |     col-xs-push-5:
 117 |     col-xs-push-6:
 118 |     col-xs-push-7:
 119 |     col-xs-push-8:
 120 |     col-xs-push-9:
 121 |     col-xs-push-10:
 122 |     col-xs-push-11:
 123 |     col-xs-push-12:
 124 | 
 125 |     col-sm-push-1:
 126 |     col-sm-push-2:
 127 |     col-sm-push-3:
 128 |     col-sm-push-4:
 129 |     col-sm-push-5:
 130 |     col-sm-push-6:
 131 |     col-sm-push-7:
 132 |     col-sm-push-8:
 133 |     col-sm-push-9:
 134 |     col-sm-push-10:
 135 |     col-sm-push-11:
 136 |     col-sm-push-12:
 137 | 
 138 |     col-md-push-1:
 139 |     col-md-push-2:
 140 |     col-md-push-3:
 141 |     col-md-push-4:
 142 |     col-md-push-5:
 143 |     col-md-push-6:
 144 |     col-md-push-7:
 145 |     col-md-push-8:
 146 |     col-md-push-9:
 147 |     col-md-push-10:
 148 |     col-md-push-11:
 149 |     col-md-push-12:
 150 | 
 151 |     col-lg-push-1:
 152 |     col-lg-push-2:
 153 |     col-lg-push-3:
 154 |     col-lg-push-4:
 155 |     col-lg-push-5:
 156 |     col-lg-push-6:
 157 |     col-lg-push-7:
 158 |     col-lg-push-8:
 159 |     col-lg-push-9:
 160 |     col-lg-push-10:
 161 |     col-lg-push-11:
 162 |     col-lg-push-12:
 163 | 
 164 |     col-xs-pull-1:
 165 |     col-xs-pull-2:
 166 |     col-xs-pull-3:
 167 |     col-xs-pull-4:
 168 |     col-xs-pull-5:
 169 |     col-xs-pull-6:
 170 |     col-xs-pull-7:
 171 |     col-xs-pull-8:
 172 |     col-xs-pull-9:
 173 |     col-xs-pull-10:
 174 |     col-xs-pull-11:
 175 |     col-xs-pull-12:
 176 | 
 177 |     col-sm-pull-1:
 178 |     col-sm-pull-2:
 179 |     col-sm-pull-3:
 180 |     col-sm-pull-4:
 181 |     col-sm-pull-5:
 182 |     col-sm-pull-6:
 183 |     col-sm-pull-7:
 184 |     col-sm-pull-8:
 185 |     col-sm-pull-9:
 186 |     col-sm-pull-10:
 187 |     col-sm-pull-11:
 188 |     col-sm-pull-12:
 189 | 
 190 |     col-md-pull-1:
 191 |     col-md-pull-2:
 192 |     col-md-pull-3:
 193 |     col-md-pull-4:
 194 |     col-md-pull-5:
 195 |     col-md-pull-6:
 196 |     col-md-pull-7:
 197 |     col-md-pull-8:
 198 |     col-md-pull-9:
 199 |     col-md-pull-10:
 200 |     col-md-pull-11:
 201 |     col-md-pull-12:
 202 | 
 203 |     col-lg-pull-1:
 204 |     col-lg-pull-2:
 205 |     col-lg-pull-3:
 206 |     col-lg-pull-4:
 207 |     col-lg-pull-5:
 208 |     col-lg-pull-6:
 209 |     col-lg-pull-7:
 210 |     col-lg-pull-8:
 211 |     col-lg-pull-9:
 212 |     col-lg-pull-10:
 213 |     col-lg-pull-11:
 214 |     col-lg-pull-12:
 215 | 
 216 |   responsive: &RESPONSIVE
 217 |     visible-xs-block: Extra small devices (<768px).\nSet Visible of component
 218 |     visible-sm-block: Small devices (>768px).\nSet Visible of component
 219 |     visible-md-block: Medium devices (>992px).\nSet Visible of component
 220 |     visible-lg-block: Large devices (>1200px).\nSet Visible of component
 221 | 
 222 |     visible-xs-inline: Extra small devices (<768px).\nSet Visible of component
 223 |     visible-sm-inline: Small devices (>768px).\nSet Visible of component
 224 |     visible-md-inline: Medium devices (>992px).\nSet Visible of component
 225 |     visible-lg-inline: Large devices (>1200px).\nSet Visible of component
 226 | 
 227 |     visible-xs-inline-block: Extra small devices (<768px).\nSet Visible of component
 228 |     visible-sm-inline-block: Small devices (>768px).\nSet Visible of component
 229 |     visible-md-inline-block: Medium devices (>992px).\nSet Visible of component
 230 |     visible-lg-inline-block: Large devices (>1200px).\nSet Visible of component
 231 | 
 232 |     hidden-xs: Hidden for extra small devices (<768px)
 233 |     hidden-sm: Hidden for small devices (>768px)
 234 |     hidden-md: Hidden for medium devices (>992px)
 235 |     hidden-lg: Hidden for large devices (>1200px)
 236 | 
 237 |     visible-print-block: &TGLPRNCNT Toggling content for print
 238 |     visible-print-inline: *TGLPRNCNT
 239 |     visible-print-inline-block: *TGLPRNCNT
 240 |     hidden-print: *TGLPRNCNT
 241 | 
 242 |   icons: &GLYPHICONS
 243 |     glyphicon: |
 244 |       Base class
 245 |       Be sure to leave a space between the icon and text for proper padding.
 246 |     glyphicon-asterisk:
 247 |     glyphicon-plus:
 248 |     glyphicon-euro:
 249 |     glyphicon-minus:
 250 |     glyphicon-cloud:
 251 |     glyphicon-envelope:
 252 |     glyphicon-pencil:
 253 |     glyphicon-glass:
 254 |     glyphicon-music:
 255 |     glyphicon-search:
 256 |     glyphicon-heart:
 257 |     glyphicon-star:
 258 |     glyphicon-star-empty:
 259 |     glyphicon-user:
 260 |     glyphicon-film:
 261 |     glyphicon-th-large:
 262 |     glyphicon-th:
 263 |     glyphicon-th-list:
 264 |     glyphicon-ok:
 265 |     glyphicon-remove:
 266 |     glyphicon-zoom-in:
 267 |     glyphicon-zoom-out:
 268 |     glyphicon-off:
 269 |     glyphicon-signal:
 270 |     glyphicon-cog:
 271 |     glyphicon-trash:
 272 |     glyphicon-home:
 273 |     glyphicon-file:
 274 |     glyphicon-time:
 275 |     glyphicon-road:
 276 |     glyphicon-download-alt:
 277 |     glyphicon-download:
 278 |     glyphicon-upload:
 279 |     glyphicon-inbox:
 280 |     glyphicon-play-circle:
 281 |     glyphicon-repeat:
 282 |     glyphicon-refresh:
 283 |     glyphicon-list-alt:
 284 |     glyphicon-lock:
 285 |     glyphicon-flag:
 286 |     glyphicon-headphones:
 287 |     glyphicon-volume-off:
 288 |     glyphicon-volume-down:
 289 |     glyphicon-volume-up:
 290 |     glyphicon-qrcode:
 291 |     glyphicon-barcode:
 292 |     glyphicon-tag:
 293 |     glyphicon-tags:
 294 |     glyphicon-book:
 295 |     glyphicon-bookmark:
 296 |     glyphicon-print:
 297 |     glyphicon-camera:
 298 |     glyphicon-font:
 299 |     glyphicon-bold:
 300 |     glyphicon-italic:
 301 |     glyphicon-text-height:
 302 |     glyphicon-text-width:
 303 |     glyphicon-align-left:
 304 |     glyphicon-align-center:
 305 |     glyphicon-align-right:
 306 |     glyphicon-align-justify:
 307 |     glyphicon-list:
 308 |     glyphicon-indent-left:
 309 |     glyphicon-indent-right:
 310 |     glyphicon-facetime-video:
 311 |     glyphicon-picture:
 312 |     glyphicon-map-marker:
 313 |     glyphicon-adjust:
 314 |     glyphicon-tint:
 315 |     glyphicon-edit:
 316 |     glyphicon-share:
 317 |     glyphicon-check:
 318 |     glyphicon-move:
 319 |     glyphicon-step-backward:
 320 |     glyphicon-fast-backward:
 321 |     glyphicon-backward:
 322 |     glyphicon-play:
 323 |     glyphicon-pause:
 324 |     glyphicon-stop:
 325 |     glyphicon-forward:
 326 |     glyphicon-fast-forward:
 327 |     glyphicon-step-forward:
 328 |     glyphicon-eject:
 329 |     glyphicon-chevron-left:
 330 |     glyphicon-chevron-right:
 331 |     glyphicon-plus-sign:
 332 |     glyphicon-minus-sign:
 333 |     glyphicon-remove-sign:
 334 |     glyphicon-ok-sign:
 335 |     glyphicon-question-sign:
 336 |     glyphicon-info-sign:
 337 |     glyphicon-screenshot:
 338 |     glyphicon-remove-circle:
 339 |     glyphicon-ok-circle:
 340 |     glyphicon-ban-circle:
 341 |     glyphicon-arrow-left:
 342 |     glyphicon-arrow-right:
 343 |     glyphicon-arrow-up:
 344 |     glyphicon-arrow-down:
 345 |     glyphicon-share-alt:
 346 |     glyphicon-resize-full:
 347 |     glyphicon-resize-small:
 348 |     glyphicon-exclamation-sign:
 349 |     glyphicon-gift:
 350 |     glyphicon-leaf:
 351 |     glyphicon-fire:
 352 |     glyphicon-eye-open:
 353 |     glyphicon-eye-close:
 354 |     glyphicon-warning-sign:
 355 |     glyphicon-plane:
 356 |     glyphicon-calendar:
 357 |     glyphicon-random:
 358 |     glyphicon-comment:
 359 |     glyphicon-magnet:
 360 |     glyphicon-chevron-up:
 361 |     glyphicon-chevron-down:
 362 |     glyphicon-retweet:
 363 |     glyphicon-shopping-cart:
 364 |     glyphicon-folder-close:
 365 |     glyphicon-folder-open:
 366 |     glyphicon-resize-vertical:
 367 |     glyphicon-resize-horizontal:
 368 |     glyphicon-hdd:
 369 |     glyphicon-bullhorn:
 370 |     glyphicon-bell:
 371 |     glyphicon-certificate:
 372 |     glyphicon-thumbs-up:
 373 |     glyphicon-thumbs-down:
 374 |     glyphicon-hand-right:
 375 |     glyphicon-hand-left:
 376 |     glyphicon-hand-up:
 377 |     glyphicon-hand-down:
 378 |     glyphicon-circle-arrow-right:
 379 |     glyphicon-circle-arrow-left:
 380 |     glyphicon-circle-arrow-up:
 381 |     glyphicon-circle-arrow-down:
 382 |     glyphicon-globe:
 383 |     glyphicon-wrench:
 384 |     glyphicon-tasks:
 385 |     glyphicon-filter:
 386 |     glyphicon-briefcase:
 387 |     glyphicon-fullscreen:
 388 |     glyphicon-dashboard:
 389 |     glyphicon-paperclip:
 390 |     glyphicon-heart-empty:
 391 |     glyphicon-link:
 392 |     glyphicon-phone:
 393 |     glyphicon-pushpin:
 394 |     glyphicon-usd:
 395 |     glyphicon-gbp:
 396 |     glyphicon-sort:
 397 |     glyphicon-sort-by-alphabet:
 398 |     glyphicon-sort-by-alphabet-alt:
 399 |     glyphicon-sort-by-order:
 400 |     glyphicon-sort-by-order-alt:
 401 |     glyphicon-sort-by-attributes:
 402 |     glyphicon-sort-by-attributes-alt:
 403 |     glyphicon-unchecked:
 404 |     glyphicon-expand:
 405 |     glyphicon-collapse-down:
 406 |     glyphicon-collapse-up:
 407 |     glyphicon-log-in:
 408 |     glyphicon-flash:
 409 |     glyphicon-log-out:
 410 |     glyphicon-new-window:
 411 |     glyphicon-record:
 412 |     glyphicon-save:
 413 |     glyphicon-open:
 414 |     glyphicon-saved:
 415 |     glyphicon-import:
 416 |     glyphicon-export:
 417 |     glyphicon-send:
 418 |     glyphicon-floppy-disk:
 419 |     glyphicon-floppy-saved:
 420 |     glyphicon-floppy-remove:
 421 |     glyphicon-floppy-save:
 422 |     glyphicon-floppy-open:
 423 |     glyphicon-credit-card:
 424 |     glyphicon-transfer:
 425 |     glyphicon-cutlery:
 426 |     glyphicon-header:
 427 |     glyphicon-compressed:
 428 |     glyphicon-earphone:
 429 |     glyphicon-phone-alt:
 430 |     glyphicon-tower:
 431 |     glyphicon-stats:
 432 |     glyphicon-sd-video:
 433 |     glyphicon-hd-video:
 434 |     glyphicon-subtitles:
 435 |     glyphicon-sound-stereo:
 436 |     glyphicon-sound-dolby:
 437 |     glyphicon-sound-5-1:
 438 |     glyphicon-sound-6-1:
 439 |     glyphicon-sound-7-1:
 440 |     glyphicon-copyright-mark:
 441 |     glyphicon-registration-mark:
 442 |     glyphicon-cloud-download:
 443 |     glyphicon-cloud-upload:
 444 |     glyphicon-tree-conifer:
 445 |     glyphicon-tree-deciduous:
 446 | 
 447 |   container: &CONTAINER
 448 |     container-fluid: Create the fluid layouts in order to utilize the 100% width of the viewport.
 449 |     container: Fixed-width layout
 450 | 
 451 | attributes:
 452 | 
 453 |   - class:
 454 |       t: global
 455 |       v: *GRID
 456 |   - class:
 457 |       t: div
 458 |       v:
 459 |         row: Predefined grid class
 460 |   - class:
 461 |       t: div
 462 |       v: *CONTAINER
 463 | 
 464 |   - class:
 465 |       t: div
 466 |       v:
 467 |         clearfix: |
 468 |           Add the extra clearfix for only the required viewport
 469 |           “micro clearfix” generates pseudo-elements and sets their display to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.
 470 |   - class:
 471 |       t: *H1H6
 472 |       v:
 473 |         small: Create lighter, secondary text in any heading
 474 | 
 475 |   # text:
 476 |   - class:
 477 |       t: global
 478 |       v:
 479 |         text-left: Left aligned text.
 480 |         text-center: Center aligned text.
 481 |         text-right: Right aligned text.
 482 |         text-justify: Justified text.
 483 |         text-nowrap: No wrap text.
 484 |         small: |
 485 |           For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent.
 486 |           Heading elements receive their own font-size for nested <small> elements.
 487 |         text-lowercase: Lowercased text.
 488 |         text-uppercase: Uppercased text.
 489 |         text-capitalize: Capitalized text.
 490 | 
 491 |   - class:
 492 |       t: abbr
 493 |       v: 
 494 |         initialism: Add .initialism to an abbreviation for a slightly smaller font-size.
 495 | 
 496 |   - class:
 497 |       t: blockquote
 498 |       v:
 499 |         blockquote-reverse: A blockquote with right-aligned content
 500 |   - class:
 501 |       t: [ul, ol]
 502 |       v:
 503 |         list-unstyled: |
 504 |           Remove the default list-style and left margin on list items (immediate children only).
 505 |           This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
 506 |         list-inline: "Place all list items on a single line with display: inline-block; and some light padding."
 507 |   - class:
 508 |       t: dl
 509 |       v: Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.
 510 | 
 511 |   # tables
 512 |   - class:
 513 |       t: table
 514 |       v:
 515 |         table: |
 516 |           For basic styling—light padding and only horizontal dividers.
 517 |           It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
 518 |         table-striped: Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.
 519 |         table-bordered: Bordered version
 520 |         table-hover: Enable a hover state on table rows within a <tbody>
 521 |         table-condensed: Make tables more compact by cutting cell padding in half.
 522 |         table-responsive: |
 523 |           Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
 524 |           When viewing on anything larger than 768px wide, you will not see any difference in these tables.
 525 | 
 526 |   - class:
 527 |       t: [tr, td]
 528 |       v: [active, success, warning, danger, info]
 529 | 
 530 |   # - class:
 531 |   #     t: [table, th, td, tr, thead, tbody, tfoot ]    
 532 | 
 533 |   # forms
 534 |   - class:
 535 |       t: form
 536 |       v:
 537 |         form-inline: |
 538 |           Left-aligned and inline-block controls.
 539 |           This only applies to forms within viewports that are at least 768px wide.
 540 |         form-horizontal: |
 541 |           Predefined grid classes to align labels and groups of form controls in a horizontal layout.
 542 |           NO NEED FOR .row
 543 | 
 544 |   - class:
 545 |       t: [input, textarea, select]
 546 |       v:
 547 |         form-control: "Set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing."
 548 |         input-lg: &FMMOD modifier classes to decrease or increase the height and font-size of form controls
 549 |         input-sm: *FMMOD
 550 |   - class:
 551 |       t: [label]
 552 |       v:
 553 |         sr-only: |
 554 |           Screen readers will have trouble with your forms if you don't include a label for every input.
 555 |           For these inline forms, you can hide the labels using the .sr-only class. 
 556 |             <div class="form-group">
 557 |               <label class="sr-only" for="pwf">Password</label>
 558 |               <input type="password" class="form-control" id="pwd" placeholder="Password">
 559 |             </div>
 560 |   - class:
 561 |       t: [label]
 562 |       v:
 563 |         control-label: |
 564 |           <div class="form-group">
 565 |             <label class="control-label" for="myInput">Input with success</label>
 566 |             <input type="text" class="form-control" id="myInput">
 567 |           </div>
 568 | 
 569 |   - class:
 570 |       t: span
 571 |       v:
 572 |         sr-only: |
 573 |           Screen readers
 574 |           <span id="err" class="sr-only">(error)</span>          
 575 |   - class:
 576 |       t: div
 577 |       v: 
 578 |         form-group: |
 579 |           Wrap labels and controls in .form-group for optimum spacing.
 580 |           Don't mix form groups with input groups
 581 |         form-group-lg: &FMGRMOD Styles to the inputs and labels within a .form-group.
 582 |         form-group-sm: *FMGRMOD
 583 |         has-warning: &HASTEXT Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
 584 |         has-error: *HASTEXT
 585 |         has-success: *HASTEXT
 586 |         has-feedback: |
 587 |           Add right feedback icon.
 588 |           Feedback icons only work with textual <input class="form-control"> elements
 589 |            (error)
 590 |           Ex.
 591 |            <div class="form-group has-success has-feedback">
 592 |             <label class="control-label" for="success">Input with success</label>
 593 |             <input type="text" class="form-control" id="success" aria-describedby="successStatus">
 594 |             <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
 595 |             <span id="successStatus" class="sr-only">(success)</span>
 596 |            </div>
 597 | 
 598 |   - class:
 599 |       t: div
 600 |       v:
 601 |         disabled: |
 602 |           To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your:
 603 |           .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.
 604 | 
 605 |           For <a>  Opera <18, IE11 use JS to disable such link.
 606 |   - class:
 607 |       t: [div, label]
 608 |       v:
 609 |         radio:
 610 |         radio-inline:
 611 |         checkbox:
 612 |         checkbox-inline:
 613 |         fieldset:
 614 |   - class:
 615 |       t: p
 616 |       v:
 617 |         form-control-static: |
 618 |           Place plain text next to a form label within a form
 619 |            <form class="form-horizontal" role="form">
 620 |              <div class="form-group">
 621 |              <label class="col-sm-2 control-label">Email</label>
 622 |               <div class="col-sm-10">
 623 |                 <p class="form-control-static">email@example.com</p>
 624 |               </div>
 625 |             </div>
 626 | 
 627 |   # button
 628 |   - class:
 629 |       t: *BUTTONS
 630 |       v:
 631 |         btn: Highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
 632 |         btn-default:
 633 |         btn-primary:
 634 |         btn-success:
 635 |         btn-info:
 636 |         btn-warning:
 637 |         btn-danger:
 638 |         btn-link: Deemphasize a button by making it look like a link while maintaining button behavior
 639 | 
 640 |   - class:
 641 |       t: *BUTTONS
 642 |       v:
 643 |         btn-lg: &BTNSIZE Button sizing
 644 |         btn-sm: *BTNSIZE
 645 |         btn-xs: *BTNSIZE
 646 |         btn-block: Create block level buttons—those that span the full width of a parent
 647 |         active: Pressed button
 648 |         disabled: |
 649 |           Disabled state.
 650 | 
 651 |           For <a>  Opera <18, IE11 use JS to disable such link.
 652 | 
 653 |   # labels
 654 |   - class:
 655 |       t: [label, span]
 656 |       v:
 657 |         label:
 658 |         label-default:
 659 |         label-primary:
 660 |         label-success:
 661 |         label-info:
 662 |         label-warning:
 663 |         label-danger:
 664 | 
 665 |   # images
 666 |   - class:
 667 |       t: img
 668 |       v:
 669 |         img-responsive: |
 670 |           This applies
 671 |            { max-width: 100%; height: auto; }
 672 |           to the image so that it scales nicely to the parent element.
 673 |         img-rounded: Adds border-radius:6px to give the image rounded corners.
 674 |         img-circle: Makes the entire image round by adding border-radius:500px.
 675 |         img-thumbnail: Adds a bit of padding and a gray border
 676 | 
 677 |   # helpers
 678 | 
 679 |   - class:
 680 |       t: [p, span, div, a]
 681 |       v:
 682 |         text-muted: &TXTHELPER |
 683 |           Contextual colors
 684 |           Convey meaning through color with a handful of emphasis utility classes.
 685 |           These may also be applied to links and will darken on hover just like our default link styles.
 686 |         text-primary: *TXTHELPER
 687 |         text-success: *TXTHELPER
 688 |         text-info: *TXTHELPER
 689 |         text-warning: *TXTHELPER
 690 |         text-danger: *TXTHELPER
 691 |         bg-primary: &TXTHELPERBG Contextual backgrounds
 692 |         bg-success: *TXTHELPERBG
 693 |         bg-info: *TXTHELPERBG
 694 |         bg-warning: *TXTHELPERBG
 695 |         bg-danger: *TXTHELPERBG
 696 | 
 697 |   - class:
 698 |       t: [button, a]
 699 |       v:
 700 |         close: Generic close icon for dismissing content like modals and alerts.
 701 |         
 702 |   - class:
 703 |       t: [p, div, span, a]
 704 |       v: 
 705 |         pull-left: Float an element to the left with a class
 706 |         pull-right: Float an element to the right with a class
 707 |         center-block: Center content blocks
 708 |         show: Force an element to be shown including for screen readers 
 709 |         hidden: Force an element to be hidden including for screen readers 
 710 | 
 711 |   - class:
 712 |       t: global
 713 |       v: *RESPONSIVE
 714 | 
 715 |   # Accessibility
 716 |   - class:
 717 |       t: global
 718 |       v:
 719 |         sr-only: Hides an element to all devices except screen readers
 720 |         sr-only-focusable: Combine with .sr-only to show the element again when it is focused e.g. by a keyboard-only user
 721 |         text-hide: "Replace an element's text content with a background image."
 722 | 
 723 |   - class:
 724 |       t: i
 725 |       v: *GLYPHICONS
 726 | 
 727 |   # dropdowns and button group
 728 |   - class:
 729 |       t: span
 730 |       v: 
 731 |         caret: Use carets to indicate dropdown functionality and direction
 732 |         icon-bar: |
 733 |           May be used in ".navbar-toggle .collapsed" as collapse toggle button
 734 |           <span class="icon-bar"></span>
 735 |           <span class="icon-bar"></span>
 736 |           <span class="icon-bar"></span>      
 737 |   - class:
 738 |       t: div
 739 |       v:
 740 |         dropdown: |
 741 |           <div class="dropdown">
 742 |               <button class="btn btn-default dropdown-toggle"
 743 |               data-toggle="dropdown" aria-expanded="true" id="drMenu1">
 744 |                 Dropdown
 745 |                   <span class="caret"></span>
 746 |               </button>
 747 |               <ul class="dropdown-menu" role="menu" aria-labelledby="drMenu1">
 748 |                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 749 |                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 750 |               </ul>
 751 |           </div>
 752 |         dropup: <div class="btn-group dropup">
 753 |   - data-toggle:
 754 |       t: *BUTTONS
 755 |       v:
 756 |         dropdown: |
 757 |           <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
 758 |       d: Toggle facility
 759 |   - class:
 760 |       t: *BUTTONS
 761 |       v: 
 762 |         dropdown-toggle:
 763 | 
 764 |   - class:
 765 |       t: ul
 766 |       v:
 767 |         dropdown-menu: |
 768 |           <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
 769 |            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
 770 |            <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
 771 |            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
 772 |           </ul>
 773 |         dropdown-menu-right:
 774 |         dropdown-menu-left:
 775 | 
 776 |   - class:
 777 |       t: li
 778 |       v:
 779 |         dropdown-header: Add a header to label sections of actions in any dropdown menu.
 780 |         divider: Add a divider to separate series of links in a dropdown menu.
 781 |         disabled:
 782 | 
 783 |   - data-toggle:
 784 |       t: *BUTTONS
 785 |       v: collapse
 786 | 
 787 |   - data-target:
 788 |       t: *BUTTONS
 789 |       v: 
 790 |         "#bs-": d
 791 |       d: |
 792 |         1. Link to collected nav links, forms, and other content for toggling
 793 |         2. Activate a modal 
 794 |         <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
 795 | 
 796 |   - class:
 797 |       t: div
 798 |       v:
 799 |         btn-group: |
 800 |           Group a series of buttons together on a single line with the button group.
 801 |           Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
 802 |           
 803 |           <div class="btn-group" role="group" aria-label="...">
 804 |             <button type="button" class="btn btn-default">Left</button>
 805 |             <button type="button" class="btn btn-default">Middle</button>
 806 |             <button type="button" class="btn btn-default">Right</button>
 807 |           </div>
 808 |         btn-toolbar: |
 809 |           <div class="btn-toolbar">
 810 |             <div class="btn-group">
 811 |         btn-group-lg:
 812 |         btn-group-sm:
 813 |         btn-group-xs:
 814 |         btn-group-vertical: Make a set of buttons appear vertically stacked rather than horizontally
 815 |         btn-group-justified: |
 816 |           Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
 817 |             <div class="btn-group btn-group-justified" role="group"..
 818 | 
 819 |   # input groups
 820 |   - class:
 821 |       t: [ div, span, p ]
 822 |       v:
 823 |         input-group: |
 824 |           Place one add-on or button on either side of an input
 825 |            <div class="input-group">
 826 |              <span class="input-group-addon">@</span>
 827 |              <input type="text" class="form-control" placeholder="Username">
 828 |            </div>
 829 |         input-group-lg:
 830 |         input-group-sm:
 831 |         input-group-btn: |
 832 |           Segmented buttons
 833 |            <div class="input-group">
 834 |             <div class="input-group-btn">
 835 |                Button and dropdown menu here
 836 |             </div>
 837 |             <input type="text" class="form-control">
 838 |           </div>
 839 |   - class:
 840 |       t: span
 841 |       v: 
 842 |         input-group-addon: |
 843 |           <div class="input-group">
 844 |              <span class="input-group-addon">@</span>
 845 |              <input type="text" class="form-control" placeholder="Username">
 846 | 
 847 |   # Nav
 848 |   - class:
 849 |       t: [ul, ol]
 850 |       v:
 851 |         nav:
 852 |         nav-tabs: |
 853 |           Example with data-toggle
 854 |           <div role="tabpanel">
 855 | 
 856 |           <!-- Nav tabs -->
 857 |           <ul class="nav nav-tabs" role="tablist">
 858 |            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
 859 |            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
 860 |           </ul>
 861 |           <!-- Tab panes -->
 862 |           <div class="tab-content">
 863 |            <div role="tabpanel" class="tab-pane active" id="home">...</div>
 864 |            <div role="tabpanel" class="tab-pane" id="profile">...</div>
 865 |           </div>
 866 | 
 867 |           </div>
 868 |         nav-pills:
 869 |         nav-stacked: |
 870 |           Vertically stackable pills
 871 |           <ul class="nav nav-pills nav-stacked">
 872 |             ..
 873 |           </ul>
 874 |         nav-justified:
 875 |         navbar-nav:
 876 | 
 877 |   - class:
 878 |       t: [button, a, div]
 879 |       v: 
 880 |         navbar-brand: |
 881 |           Replace the navbar brand with your own image by swapping the text for an <img>.
 882 |           Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.
 883 |           <div class="navbar-header">
 884 |            <a class="navbar-brand"..
 885 | 
 886 |   - class:
 887 |       t: li
 888 |       v: 
 889 |         active: |
 890 |           <ul class="nav nav-tabs">
 891 |             <li class="active"><a href=..
 892 |             <li>..
 893 |         disabled: |
 894 |           This class will only change the <a>'s appearance, not its functionality.
 895 |           Use custom JavaScript to disable links here.
 896 | 
 897 |   - class:
 898 |       t: [nav, div]
 899 |       v:
 900 |         navbar: |
 901 |           <nav class="navbar navbar-default"
 902 |         navbar-default: Opposite to .navbar-inverse
 903 |         navbar-inverse: Modify the look of the navbar Opposite to .navbar-default
 904 |         navbar-fixed-top: |
 905 |           Fixed to top.
 906 |           Include a .container or .container-fluid to center and pad navbar content.
 907 |           Also add padding! "body { padding-top: 70px; }" (after bs css)
 908 |         navbar-fixed-bottom: |
 909 |           Fixed bottom.
 910 |           Also add padding! "body { padding-bottom: 70px; }" (after bs css)
 911 |         navbar-static-top: Create a full-width navbar that scrolls away with the page by adding
 912 |   - class:
 913 |       t: form
 914 |       v:
 915 |         navbar-form: |
 916 |           Use the alignment options to decide where it resides within the navbar content.
 917 | 
 918 |           <form class="navbar-form navbar-left" role="search">
 919 |           <div class="form-group">
 920 |             <input type="text" class="form-control" placeholder="Search">
 921 |           </div>
 922 | 
 923 |   - class:
 924 |       t: [button, input]
 925 |       v: 
 926 |         navbar-btn: Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar
 927 |   - class:
 928 |       t: [nav, form, a, div, button]
 929 |       v: 
 930 |         navbar-left: These classes are mixin-ed version of .pull-left
 931 |         navbar-right: These classes are mixin-ed version of .pull-right
 932 |   - class:
 933 |       t: [span, p]
 934 |       v: 
 935 |         navbar-text: Text inside navbad
 936 |   - class:
 937 |       t: div
 938 |       v:
 939 |         navbar-header: Header of navbar
 940 |         navbar-collapse: |
 941 |           <div class="navbar-header">
 942 |            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#FOO"
 943 |   - class:
 944 |       t: a
 945 |       v:
 946 |         navbar-link: |
 947 |           Links that are not within the regular navbar navigation component,
 948 |           use the .navbar-link class to add the proper colors for the default and inverse navbar options.
 949 | 
 950 |   # breadcrumb
 951 |   - class:
 952 |       t: [ul, ol]
 953 |       v:
 954 |         breadcrumb: |
 955 |           Indicate the current page's location within a navigational hierarchy.
 956 |           Separators are automatically added in CSS through :before and content.
 957 | 
 958 |           Home / Links / Data
 959 |           <ol class="breadcrumb">
 960 |             <li><a href="#">Home</a></li>
 961 |             <li><a href="#">Library</a></li>
 962 |             <li class="active">Data</li>
 963 |           </ol>
 964 | 
 965 |   # pagination / pager
 966 |   - class:
 967 |       t: [ul, ol]
 968 |       v:
 969 |         pager: |
 970 |           By default, the pager centers links.
 971 |            <nav>
 972 |              <ul class="pager">
 973 |                <li><a href="#">Previous</a></li>
 974 |                <li><a href="#">Next</a></li>
 975 |              </ul>
 976 |            </nav>
 977 |         pagination-lg:
 978 |         pagination-sm:
 979 |         pagination: |
 980 |           Provide pagination links
 981 | 
 982 |            <nav>
 983 |              <ul class="pagination">
 984 |                <li>
 985 |                  <a href="#" aria-label="Previous">
 986 |                    <span aria-hidden="true">&laquo;</span>
 987 |                  </a>
 988 |                </li>
 989 |                <li><a href="#">1</a></li>
 990 |                <li><a href="#">2</a></li>
 991 |                ..etc..
 992 |   - class:
 993 |       t: li
 994 |       v:
 995 |         previous: &PAGERALIGN |
 996 |           You can align each link to the sides .pager
 997 |           <nav>
 998 |             <ul class="pager">
 999 |               <li class="previous"><a href="#">Older</a></li>
1000 |               <li class="next"><a href="#">Newer</a></li>
1001 |             </ul>
1002 |           </nav>
1003 |         next: *PAGERALIGN
1004 | 
1005 |   # badge
1006 |   - class:
1007 |       t: span
1008 |       v:
1009 |         badge: Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
1010 | 
1011 |   # jambotron
1012 |   - class:
1013 |       t: div
1014 |       v:
1015 |         jumbotron: |
1016 |           A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
1017 |           To make the jumbotron full width, and without rounded corners,
1018 |           place it outside all .containers and instead add a .container within
1019 | 
1020 |   # misc, page-header
1021 |   - class:
1022 |       t: div
1023 |       v:
1024 |         page-header: A simple shell for an h1.
1025 | 
1026 |   # thumb
1027 |   - class:
1028 |       t: [div, a, span]
1029 |       v:
1030 |         thumbnail:
1031 |         caption: caption of thumb
1032 |   # alert
1033 |   - class:
1034 |       t: [div, span]
1035 |       v:
1036 |         alert:
1037 |         alert-success:
1038 |         alert-info:
1039 |         alert-warning:
1040 |         alert-danger:
1041 |         alert-dismissible: |
1042 |           Build on any alert by adding an optional .alert-dismissible and close button.
1043 |           Be sure to use the <button> element with the data attribut
1044 | 
1045 |           data-dismiss="alert"
1046 | 
1047 |           <div class="alert alert-warning alert-dismissible" role="alert">
1048 |             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1049 |               <span aria-hidden="true">&times;</span>
1050 |             </button>
1051 |             <strong>Warning!</strong> Better check yourself, you're not looking too good.
1052 |           </div>
1053 |   - data-dismiss:
1054 |       t: *BUTTONS
1055 |       v:
1056 |         alert:
1057 |       d: .alert-dismissible. Close alert
1058 |   - class:
1059 |       t: a
1060 |       v:
1061 |         alert-link: Use the .alert-link utility class to quickly provide matching colored links within any alert.
1062 | 
1063 |   # progressbar
1064 |   - class:
1065 |       t: div
1066 |       v:
1067 |         progress:
1068 |         progress-bar: |
1069 |           Show filled bar
1070 |           <div class="progress">
1071 |             <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
1072 |               60%
1073 |             </div>
1074 |           </div>
1075 |         progress-bar-success:
1076 |         progress-bar-info:
1077 |         progress-bar-warning:
1078 |         progress-bar-danger:
1079 |         progress-bar-striped:
1080 |         active: Animate progress-bar
1081 | 
1082 |   # media
1083 |   - class:
1084 |       t: div
1085 |       v:
1086 |         media: |
1087 |           Abstract object styles for building various types of components.
1088 |           (like blog comments, Tweets, etc)
1089 |           that feature a left- or right-aligned image alongside textual content.
1090 |         media-body:
1091 |   - class:
1092 |       t: [div, a, span]
1093 |       v:
1094 |         media-left:
1095 |         media-right:
1096 |         media-middle:
1097 |         media-bottom:
1098 |   - class:
1099 |       t: *H1H6
1100 |       v:
1101 |         media-heading: Media heading, h4
1102 | 
1103 |   # list group
1104 |   - class:
1105 |       t: [ul, ol, div]
1106 |       v:
1107 |         list-group: &LISTGROUPEXAMPLE |
1108 |           <div class="list-group">
1109 |            <a href="#" class="list-group-item active">
1110 |             <h4 class="list-group-item-heading">List group item heading</h4>
1111 |             <p class="list-group-item-text">...</p>
1112 |            </a>
1113 |           </div>
1114 | 
1115 |           or
1116 | 
1117 |           <ul class="list-group">
1118 |             <li class="list-group-item"...
1119 |   - class:
1120 |       t: [li, a]
1121 |       v:
1122 |         list-group-item: *LISTGROUPEXAMPLE
1123 |         active:
1124 |   - class:
1125 |       t: *H1H6
1126 |       v:
1127 |         list-group-item-heading: *LISTGROUPEXAMPLE
1128 |   - class:
1129 |       t: p
1130 |       v:
1131 |         list-group-item-text: *LISTGROUPEXAMPLE
1132 | 
1133 |   # panel
1134 |   - class:
1135 |       t: div
1136 |       v:
1137 |         panel: |
1138 |           While not always necessary, sometimes you need to put your DOM in a box.
1139 |           For those situations, try the panel component.
1140 | 
1141 |           <div class="panel panel-default">
1142 |            <div class="panel-body">
1143 |             Basic panel example
1144 |            </div>
1145 |           </div>
1146 |         panel-heading: Container for heading and h1-h6 .panel-title
1147 |         panel-default:
1148 | 
1149 |         panel-primary: &PANELCONTEXT Opposite to .panel-default
1150 |         panel-success:
1151 |         panel-info:
1152 |         panel-warning:
1153 |         panel-danger:
1154 | 
1155 |         panel-body:
1156 |         panel-footer: |
1157 |           Wrap buttons or secondary text in .panel-footer.
1158 |           Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
1159 |         panel-group: |
1160 |           <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
1161 |            <div class="panel panel-default">
1162 |              <div class="panel-heading" role="tab" id="headingOne">
1163 |   - class:
1164 |       t: *H1H6
1165 |       v:
1166 |         panel-title:
1167 | 
1168 |   # Responsive embed
1169 |   - class:
1170 |       t: div
1171 |       v:
1172 |         embed-responsive: |
1173 |           Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
1174 |         embed-responsive-16by9:
1175 |         embed-responsive-4by3:
1176 |   - class:
1177 |       t: [iframe, embed, video, object]
1178 |       v:
1179 |         embed-responsive-item: |
1180 |           Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.
1181 | 
1182 |   - class:
1183 |       t: div
1184 |       v:
1185 |         well: Use the well as a simple effect on an element to give it an inset effect.
1186 |         well-lg:
1187 |         well-sm:
1188 |   ########################################
1189 |   # some js
1190 |   ########################################
1191 |   # modal
1192 |   - class:
1193 |       t: div
1194 |       v: 
1195 |         modal: |
1196 |           <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1197 |           <div class="modal-dialog">
1198 |            <div class="modal-content">
1199 |             <div class="modal-header">
1200 |             ..
1201 |             <div class="modal-body">
1202 |             ..
1203 |             <div class="modal-footer">
1204 |             
1205 |         fade: |
1206 |           1. Modal animation. Slide it down.
1207 |           2. Fade effect for .tab-pane
1208 |         in: |
1209 |           1. .fade .in animation for modal, (first .tab-pane .fade), etc
1210 |           2. .panel-collapse .collapse .in - default open panel
1211 |         modal-dialog:
1212 |         modal-content:
1213 |         modal-header: Top section of the modal w/ title and dismiss
1214 |         modal-body: Where all modal content resides (sibling of .modal-header and .modal-footer)
1215 |         modal-footer: |
1216 |           Footer (for actions)
1217 |           <div class="modal-footer">
1218 |            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1219 |            <button type="button" class="btn btn-primary">Save changes</button>
1220 |           </div>
1221 |   - class:
1222 |       t: *H1H6
1223 |       v:
1224 |         modal-title:
1225 |   - data-toggle:
1226 |       t: *BUTTONS
1227 |       v:
1228 |         modal: |
1229 |           Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
1230 | 
1231 |           <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
1232 |   - data-target:
1233 |       t: *BUTTONS
1234 |       v:
1235 |         "#myModal": Activate modal, example.
1236 |   - data-backdrop:
1237 |       t: div
1238 |       d: |
1239 |         Includes a modal-backdrop element.
1240 |         Default true
1241 |         Alternatively, specify static for a backdrop which doesn't close the modal on click.
1242 |         <div id="myModal" class="modal fade" role="dialog" data-backdrop="true">
1243 |       v: [true, false, static]
1244 |   - data-keyboard: 
1245 |       d: Closes the modal when escape key is pressed. Default true. Carousel - react for keyboard
1246 |       t: div
1247 |       v: [true, false]
1248 |   - data-show:
1249 |       d: Shows the modal when initialized. Default true
1250 |       t: div
1251 |       v: [true, false]
1252 |   - data-dismiss:
1253 |       t: *BUTTONS
1254 |       v:
1255 |         modal: |
1256 |           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1257 |             <span aria-hidden="true">&times;</span></button>
1258 | 
1259 |   # scrollspy
1260 |   - data-spy:
1261 |       d: |
1262 |         Automatically updating nav targets based on scroll position.
1263 |         CSS
1264 |           body { position: relative; }
1265 |         HTML
1266 |           <body data-spy="scroll" data-target=".navbar-example">
1267 |           ..
1268 |            <div class="navbar-example">
1269 |             <ul class="nav nav-tabs" role="tablist">
1270 |             ..
1271 |             </ul>
1272 |            </div>
1273 |           ..
1274 |           </body>
1275 |       t: global
1276 |       v: scroll
1277 |   - data-target:
1278 |       d: |
1279 |         For scrollspy.
1280 |         <body data-spy="scroll" data-target=".navbar-example">
1281 |         ..
1282 |           <div class="navbar-example">
1283 |            <ul class="nav nav-tabs" role="tablist">
1284 |         ..
1285 |            </ul>
1286 |           </div>
1287 |         ..
1288 |         </body>
1289 |       t: global
1290 |   - data-offset:
1291 |       d: Pixels to offset from top when calculating position of scroll.
1292 |       t: global
1293 |       v: 
1294 |         10: Default
1295 |         16:
1296 |         20:
1297 |   # tab.js
1298 |   - data-toggle:
1299 |       t: li
1300 |       v:
1301 |         tab: |
1302 |           <ul class="nav nav-tabs">
1303 |            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
1304 |           ..
1305 |           <div class="tab-content">
1306 |             <div class="tab-pane active" id="home">...</div>
1307 |         pill: |
1308 |           <ul class="nav nav-pills">
1309 |            <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>
1310 |            <li><a href="#tab_b" data-toggle="pill">Pill B</a></li>
1311 |            <li><a href="#tab_c" data-toggle="pill">Pill C</a></li>
1312 |            <li><a href="#tab_d" data-toggle="pill">Pill D</a></li>
1313 |           </ul>
1314 |           <div class="tab-content">
1315 |             <div class="tab-pane active" id="tab_a">...</div>
1316 |   - class:
1317 |       t: div
1318 |       v: 
1319 |         tab-content: |
1320 |           <div class="tab-content">
1321 |           <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
1322 |           <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
1323 |         tab-pane: |
1324 |           <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
1325 |   #tooltip.js
1326 |   - data-toggle:
1327 |       t: *TOOLTIPTAGS
1328 |       v:
1329 |         tooltip: |
1330 |           Tooltip.
1331 |           For performance reasons, the Tooltip and Popover data-apis are opt-in,
1332 |           meaning YOU MUST INITIALIZE THEM YOURSELF.
1333 |           
1334 |           $(function () {
1335 |             $('[data-toggle="tooltip"]').tooltip({placement: 'bottom'})
1336 |           })
1337 |   - data-animation:
1338 |       t: *TOOLTIPTAGS
1339 |       v: [true, false]
1340 |       d: Animation for tooltip/popover.
1341 |   - data-container:
1342 |       t: global
1343 |       d: |
1344 |         Appends the tooltip/popover to a specific element.
1345 |         Example: container: 'body'.
1346 |         Allows you to position the tooltip/popover in the flow of the document near the triggering element.
1347 |         Prevent the tooltip/popover from floating away from the triggering element during a window resize.
1348 |       v: 
1349 |         false:
1350 |         body:
1351 |   - data-delay:
1352 |       t: *TOOLTIPTAGS
1353 |       v:
1354 |         0:
1355 |         1000:
1356 |         "{": &DELAYEXAMPLE |
1357 |           Onject: '{ "show": 500, "hide": 100 }'
1358 |         show: *DELAYEXAMPLE
1359 |         hide: *DELAYEXAMPLE
1360 |       d: |
1361 |         Delay, Number or Object '{ "show": 500, "hide": 100 }'
1362 |         Note, use data-delay='{"..' 
1363 |           not data-delay="{.."
1364 |       
1365 |   - data-html:
1366 |       t: *TOOLTIPTAGS
1367 |       d: Insert HTML into the tooltip/popover. If false, jQuery's TEXT method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
1368 |       v: [true, false]
1369 |   - data-placement:
1370 |       t: *TOOLTIPTAGS
1371 |       d: |
1372 |         How to position the tooltip/popover.
1373 |         When "auto" is specified, it will dynamically reorient the tooltip/popover.
1374 |         "auto left" - left if possible
1375 |       v: [top, bottom, left, right, auto]
1376 |   - data-selector:
1377 |       t: *TOOLTIPTAGS
1378 |       d: |
1379 |         String
1380 |         If a selector is provided, tooltip/popover objects will be delegated to the specified targets.
1381 |         In practice, this is used to enable dynamic HTML content to have tooltips/popover added.
1382 |       v: "false"
1383 |   - data-template:
1384 |       t: *TOOLTIPTAGS
1385 |       d: |
1386 |         For tooltip/popover, base html
1387 |   - data-title:
1388 |       t: *TOOLTIPTAGS
1389 |       d: Default title value if not present "title" attribute
1390 |   - data-trigger:
1391 |       t: *TOOLTIPTAGS
1392 |       d: |
1393 |         How tooltip/popover is triggered - click | hover | focus | manual.
1394 |         You may pass multiple triggers; separate them with a space.
1395 |       v: [click, hover, focus, manual]
1396 |   - data-viewport:
1397 |       t: *TOOLTIPTAGS
1398 |       d: |
1399 |         String or object.
1400 |         Keeps the tooltip/popover within the bounds of this element.
1401 |         Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }
1402 |       v: 
1403 |         selector: |
1404 |           Ex. { selector: 'body', padding: 0 }
1405 |   # ..and popover.js
1406 |   - data-toggle:
1407 |       t: *TOOLTIPTAGS
1408 |       v: 
1409 |         popover: |
1410 |           Popover.
1411 |           For performance reasons, the Tooltip and Popover data-apis are opt-in,
1412 |           meaning YOU MUST INITIALIZE THEM YOURSELF.
1413 | 
1414 |           $(function () {
1415 |             $('[data-toggle="popover"]').popover({placement: 'bottom'})
1416 |           })
1417 |   - data-content:
1418 |       t: *TOOLTIPTAGS
1419 |       d: Content of popover.
1420 |   # button.js
1421 |   - data-loading-text:
1422 |       t: *BUTTONS
1423 |       d: |
1424 |         A loading state on a button
1425 |         data-loading-text="Loading..."
1426 |   - data-toggle:
1427 |       t: *BUTTONS
1428 |       v: 
1429 |         button: |
1430 |           Single toggle button
1431 |           Pre-toggled buttons need .active and aria-pressed="true"
1432 |           <button type="button" class="btn btn-primary" data-toggle="button"
1433 |                   aria-pressed="false" autocomplete="off">
1434 |             Single toggle
1435 |           </button>
1436 |         buttons: |
1437 |           Togglable Checkbox or radio buttons.
1438 |           <div class="btn-group" data-toggle="buttons">
1439 |             <label class="btn btn-primary active">
1440 |               <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
1441 |             </label>
1442 |             <label class="btn btn-primary">
1443 |               <input type="checkbox" autocomplete="off"> Checkbox 2
1444 |             </label>
1445 |             <label class="btn btn-primary">
1446 |               <input type="checkbox" autocomplete="off"> Checkbox 3
1447 |            </label>
1448 |           </div>
1449 |   - class:
1450 |       t: div
1451 |       v:
1452 |         collapse: |
1453 |           Ex. opened collapsable panel.
1454 |           .panel-collapse .collapse .in
1455 |         panel-collapse: |
1456 |           Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
1457 |   # carousel.js
1458 |   - data-ride:
1459 |       t: div
1460 |       v: carousel
1461 |       d: |
1462 |         Used to mark a carousel as animating starting at page load.
1463 |         It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
1464 |         <div id="carousel-example" class="carousel slide" data-ride="carousel">
1465 |   - class:
1466 |       t: div
1467 |       v: 
1468 |         carousel: |
1469 |           Ensure for JS: $('.carousel').carousel()
1470 |           Ex.
1471 |           <div id="example" class="carousel slide" data-ride="carousel">
1472 |            <!-- Indicators -->
1473 |            <ol class="carousel-indicators">
1474 |             <li data-target="#example" data-slide-to="0" class="active"></li>
1475 |             <li data-target="#example" data-slide-to="1"></li>
1476 |             ..
1477 |            <!-- Wrapper for slides -->
1478 |            <div class="carousel-inner" role="listbox">
1479 |             <div class="item active">
1480 |              <img src="..." alt="...">
1481 |              <div class="carousel-caption">
1482 |              ..
1483 |              </div>
1484 |              .. more wrappers
1485 |            </div>
1486 |            <!-- Controls -->
1487 |            <a class="left carousel-control" href="#example" role="button" data-slide="prev">
1488 |              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
1489 |              <span class="sr-only">Previous</span>
1490 |            </a>
1491 |            .. <a> next ..
1492 |           </div>
1493 |         slide: |
1494 |           Slide carousel
1495 |         carousel-caption: |
1496 |           Add captions to your slides. Within any .item
1497 |           <div class="item">
1498 |             <img src="..." alt="...">
1499 |             <div class="carousel-caption">
1500 |               <h3>...</h3>
1501 |               <p>...</p>
1502 |             </div>
1503 |           </div>
1504 |         carousel-inner: |
1505 |           <!-- Wrapper for slides -->
1506 |            <div class="carousel-inner" role="listbox">
1507 |             <div class="item active">
1508 |              <img src="..." alt="...">
1509 |              <div class="carousel-caption">
1510 |              ..
1511 |              </div>
1512 |              .. more wrappers
1513 |            </div>
1514 |   - class:
1515 |       t: *BUTTONS
1516 |       v:
1517 |         carousel-control: |
1518 |            <a class="left carousel-control" href="#example" role="button" data-slide="prev">
1519 |              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
1520 |              <span class="sr-only">Previous</span>
1521 |            </a>
1522 |         left: &LEFTRIGHTCARUSEL |
1523 |           See .carousel-control
1524 |            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
1525 |         right: *LEFTRIGHTCARUSEL
1526 |   - class:
1527 |       t: [ul, ol]
1528 |       v:
1529 |         carousel-indicators: |
1530 |           <ol class="carousel-indicators">
1531 |             <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
1532 |             <li data-target="#carousel-example" data-slide-to="1"></li>
1533 |             <li data-target="#carousel-example" data-slide-to="2"></li>
1534 |           </ol>
1535 |   # ensure active for li exists
1536 |   - class:
1537 |       t: li
1538 |       v: active
1539 |   - data-pause:
1540 |       t: div
1541 |       d: Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
1542 |       v:
1543 |         hover: default
1544 |         false:
1545 |   - data-interval:
1546 |       t: div
1547 |       d: The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
1548 |       v: [5000, 3000, 2000]
1549 |   - data-wrap:
1550 |       t: div
1551 |       d: |
1552 |         Whether the carousel should cycle continuously or have hard stops.
1553 |         Default true.
1554 |       v: [true, false]
1555 |   - data-slide:
1556 |       t: *BUTTONS
1557 |       d: Carousel controll, next, prev.
1558 |       v: [next, prev]
1559 |   - data-slide-to:
1560 |       t: li
1561 |       d: Carousel controll
1562 |       v: [0, 1, 2]
1563 |   # affix.js
1564 |   - data-spy:
1565 |       t: global
1566 |       v:
1567 |         affix: |
1568 |           <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
1569 |             <li class="active"><a href="#one">Section One</a></li>
1570 |             <li><a href="#two">Section Two</a></li>
1571 |             <li><a href="#three">Section Three</a></li>
1572 |           </ul>
1573 |           The affix plugin toggles between three classes,
1574 |           each representing a particular state: .affix, .affix-top, and .affix-bottom.
1575 |           You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
1576 |   - data-offset-top:
1577 |       d: &DATAOFFSETAFFIX |
1578 |         Pixels to offset from screen when calculating position of scroll.
1579 |         If a single number is provided, the offset will be applied in both top and bottom directions.
1580 |         To provide a unique, bottom and top offset just provide an object offset:
1581 |           { top: 10 } or offset: { top: 10, bottom: 5 }.
1582 |         Use a function when you need to dynamically calculate an offset.
1583 |       v: [100, 200]
1584 |       t: div
1585 |   - data-offset-bottom:
1586 |       t: div
1587 |       d: *DATAOFFSETAFFIX
1588 |       v: [100, 200]
1589 | 
1590 |   ########################################
1591 |   # Attribute description
1592 |   ########################################
1593 |   - disabled:
1594 |       t: fieldset
1595 |       d: |
1596 |         Disable all the controls within the <fieldset> at once.
1597 |         For <a class="btn">  Opera <18, IE11 use JS to disable such link.
1598 | 
1599 |         While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>.
1600 |         Use custom JavaScript to disable the fieldset in these browsers.
1601 |   
1602 | # TAGS
1603 | tags:
1604 |   mark: Highlighting text
1605 |   s: Indicating blocks of text that are no longer relevant
1606 |   del: Indicating blocks of text that have been deleted
1607 |   ins: Indicating additions to the document
1608 |   u: Underline text
1609 |   small: |
1610 |     For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent.
1611 | 
1612 |     Heading elements receive their own font-size for nested <small> elements.
1613 |   strong: Bold. Emphasizing a snippet of text with a heavier font-weight.
1614 |   em: Italics
1615 |   abbr: |
1616 |     Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover.
1617 |     Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
1618 |     <abbr title="attribute">attr</abbr>
1619 |   address: |
1620 |     Present contact information for the nearest ancestor or the entire body of work.
1621 |     Preserve formatting by ending all lines with <br>.
1622 | 
1623 |     <address>
1624 |       <strong>Twitter, Inc.</strong><br>
1625 |       795 Folsom Ave, Suite 600<br>
1626 |       San Francisco, CA 94107<br>
1627 |       <abbr title="Phone">P:</abbr> (123) 456-7890
1628 |     </address>
1629 | 
1630 |   blockquote: |
1631 |     Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>
1632 |     Add a <footer> for identifying the source. Wrap the name of the source work in <cite>
1633 | 
1634 |   footer: (<blockquote>) Naming a source. Identifying the source
1635 |   cite: (<blockquote>) Naming a source.
1636 | 
1637 |   code:
1638 |   section:
1639 |   kbd:
1640 |   pre:
1641 |   var:
1642 |   samp:
1643 | 
1644 | 


--------------------------------------------------------------------------------
/fa-html-stuff/html-attributes-complete/i-class:
--------------------------------------------------------------------------------
  1 | fa
  2 | fa-2x
  3 | fa-3x
  4 | fa-4x
  5 | fa-5x
  6 | fa-adjust
  7 | fa-adn
  8 | fa-align-center
  9 | fa-align-justify
 10 | fa-align-left
 11 | fa-align-right
 12 | fa-ambulance
 13 | fa-anchor
 14 | fa-android
 15 | fa-angellist
 16 | fa-angle-double-down
 17 | fa-angle-double-left
 18 | fa-angle-double-right
 19 | fa-angle-double-up
 20 | fa-angle-down
 21 | fa-angle-left
 22 | fa-angle-right
 23 | fa-angle-up
 24 | fa-apple
 25 | fa-archive
 26 | fa-area-chart
 27 | fa-arrow-circle-down
 28 | fa-arrow-circle-left
 29 | fa-arrow-circle-o-down
 30 | fa-arrow-circle-o-left
 31 | fa-arrow-circle-o-right
 32 | fa-arrow-circle-o-up
 33 | fa-arrow-circle-right
 34 | fa-arrow-circle-up
 35 | fa-arrow-down
 36 | fa-arrow-left
 37 | fa-arrow-right
 38 | fa-arrow-up
 39 | fa-arrows
 40 | fa-arrows-alt
 41 | fa-arrows-h
 42 | fa-arrows-v
 43 | fa-asterisk
 44 | fa-at
 45 | fa-automobile
 46 | fa-backward
 47 | fa-ban
 48 | fa-bank
 49 | fa-bar-chart
 50 | fa-bar-chart-o
 51 | fa-barcode
 52 | fa-bars
 53 | fa-bed
 54 | fa-beer
 55 | fa-behance
 56 | fa-behance-square
 57 | fa-bell
 58 | fa-bell-o
 59 | fa-bell-slash
 60 | fa-bell-slash-o
 61 | fa-bicycle
 62 | fa-binoculars
 63 | fa-birthday-cake
 64 | fa-bitbucket
 65 | fa-bitbucket-square
 66 | fa-bitcoin
 67 | fa-bold
 68 | fa-bolt
 69 | fa-bomb
 70 | fa-book
 71 | fa-bookmark
 72 | fa-bookmark-o
 73 | fa-border
 74 | fa-briefcase
 75 | fa-btc
 76 | fa-bug
 77 | fa-building
 78 | fa-building-o
 79 | fa-bullhorn
 80 | fa-bullseye
 81 | fa-bus
 82 | fa-buysellads
 83 | fa-cab
 84 | fa-calculator
 85 | fa-calendar
 86 | fa-calendar-o
 87 | fa-camera
 88 | fa-camera-retro
 89 | fa-car
 90 | fa-caret-down
 91 | fa-caret-left
 92 | fa-caret-right
 93 | fa-caret-square-o-down
 94 | fa-caret-square-o-left
 95 | fa-caret-square-o-right
 96 | fa-caret-square-o-up
 97 | fa-caret-up
 98 | fa-cart-arrow-down
 99 | fa-cart-plus
100 | fa-cc
101 | fa-cc-amex
102 | fa-cc-discover
103 | fa-cc-mastercard
104 | fa-cc-paypal
105 | fa-cc-stripe
106 | fa-cc-visa
107 | fa-certificate
108 | fa-chain
109 | fa-chain-broken
110 | fa-check
111 | fa-check-circle
112 | fa-check-circle-o
113 | fa-check-square
114 | fa-check-square-o
115 | fa-chevron-circle-down
116 | fa-chevron-circle-left
117 | fa-chevron-circle-right
118 | fa-chevron-circle-up
119 | fa-chevron-down
120 | fa-chevron-left
121 | fa-chevron-right
122 | fa-chevron-up
123 | fa-child
124 | fa-circle
125 | fa-circle-o
126 | fa-circle-o-notch
127 | fa-circle-thin
128 | fa-clipboard
129 | fa-clock-o
130 | fa-close
131 | fa-cloud
132 | fa-cloud-download
133 | fa-cloud-upload
134 | fa-cny
135 | fa-code
136 | fa-code-fork
137 | fa-codepen
138 | fa-coffee
139 | fa-cog
140 | fa-cogs
141 | fa-columns
142 | fa-comment
143 | fa-comment-o
144 | fa-comments
145 | fa-comments-o
146 | fa-compass
147 | fa-compress
148 | fa-connectdevelop
149 | fa-copy
150 | fa-copyright
151 | fa-credit-card
152 | fa-crop
153 | fa-crosshairs
154 | fa-css3
155 | fa-cube
156 | fa-cubes
157 | fa-cut
158 | fa-cutlery
159 | fa-dashboard
160 | fa-dashcube
161 | fa-database
162 | fa-dedent
163 | fa-delicious
164 | fa-desktop
165 | fa-deviantart
166 | fa-diamond
167 | fa-digg
168 | fa-dollar
169 | fa-dot-circle-o
170 | fa-download
171 | fa-dribbble
172 | fa-dropbox
173 | fa-drupal
174 | fa-edit
175 | fa-eject
176 | fa-ellipsis-h
177 | fa-ellipsis-v
178 | fa-empire
179 | fa-envelope
180 | fa-envelope-o
181 | fa-envelope-square
182 | fa-eraser
183 | fa-eur
184 | fa-euro
185 | fa-exchange
186 | fa-exclamation
187 | fa-exclamation-circle
188 | fa-exclamation-triangle
189 | fa-expand
190 | fa-external-link
191 | fa-external-link-square
192 | fa-eye
193 | fa-eye-slash
194 | fa-eyedropper
195 | fa-facebook
196 | fa-facebook-f
197 | fa-facebook-official
198 | fa-facebook-square
199 | fa-fast-backward
200 | fa-fast-forward
201 | fa-fax
202 | fa-female
203 | fa-fighter-jet
204 | fa-file
205 | fa-file-archive-o
206 | fa-file-audio-o
207 | fa-file-code-o
208 | fa-file-excel-o
209 | fa-file-image-o
210 | fa-file-movie-o
211 | fa-file-o
212 | fa-file-pdf-o
213 | fa-file-photo-o
214 | fa-file-picture-o
215 | fa-file-powerpoint-o
216 | fa-file-sound-o
217 | fa-file-text
218 | fa-file-text-o
219 | fa-file-video-o
220 | fa-file-word-o
221 | fa-file-zip-o
222 | fa-files-o
223 | fa-film
224 | fa-filter
225 | fa-fire
226 | fa-fire-extinguisher
227 | fa-flag
228 | fa-flag-checkered
229 | fa-flag-o
230 | fa-flash
231 | fa-flask
232 | fa-flickr
233 | fa-flip-horizontal
234 | fa-flip-vertical
235 | fa-floppy-o
236 | fa-folder
237 | fa-folder-o
238 | fa-folder-open
239 | fa-folder-open-o
240 | fa-font
241 | fa-forumbee
242 | fa-forward
243 | fa-foursquare
244 | fa-frown-o
245 | fa-futbol-o
246 | fa-fw
247 | fa-gamepad
248 | fa-gavel
249 | fa-gbp
250 | fa-ge
251 | fa-gear
252 | fa-gears
253 | fa-genderless
254 | fa-gift
255 | fa-git
256 | fa-git-square
257 | fa-github
258 | fa-github-alt
259 | fa-github-square
260 | fa-gittip
261 | fa-glass
262 | fa-globe
263 | fa-google
264 | fa-google-plus
265 | fa-google-plus-square
266 | fa-google-wallet
267 | fa-graduation-cap
268 | fa-gratipay
269 | fa-group
270 | fa-h-square
271 | fa-hacker-news
272 | fa-hand-o-down
273 | fa-hand-o-left
274 | fa-hand-o-right
275 | fa-hand-o-up
276 | fa-hdd-o
277 | fa-header
278 | fa-headphones
279 | fa-heart
280 | fa-heart-o
281 | fa-heartbeat
282 | fa-history
283 | fa-home
284 | fa-hospital-o
285 | fa-hotel
286 | fa-html5
287 | fa-ils
288 | fa-image
289 | fa-inbox
290 | fa-indent
291 | fa-info
292 | fa-info-circle
293 | fa-inr
294 | fa-instagram
295 | fa-institution
296 | fa-inverse
297 | fa-ioxhost
298 | fa-italic
299 | fa-joomla
300 | fa-jpy
301 | fa-jsfiddle
302 | fa-key
303 | fa-keyboard-o
304 | fa-krw
305 | fa-language
306 | fa-laptop
307 | fa-lastfm
308 | fa-lastfm-square
309 | fa-leaf
310 | fa-leanpub
311 | fa-legal
312 | fa-lemon-o
313 | fa-level-down
314 | fa-level-up
315 | fa-lg
316 | fa-li
317 | fa-life-bouy
318 | fa-life-buoy
319 | fa-life-ring
320 | fa-life-saver
321 | fa-lightbulb-o
322 | fa-line-chart
323 | fa-link
324 | fa-linkedin
325 | fa-linkedin-square
326 | fa-linux
327 | fa-list
328 | fa-list-alt
329 | fa-list-ol
330 | fa-list-ul
331 | fa-location-arrow
332 | fa-lock
333 | fa-long-arrow-down
334 | fa-long-arrow-left
335 | fa-long-arrow-right
336 | fa-long-arrow-up
337 | fa-magic
338 | fa-magnet
339 | fa-mail-forward
340 | fa-mail-reply
341 | fa-mail-reply-all
342 | fa-male
343 | fa-map-marker
344 | fa-mars
345 | fa-mars-double
346 | fa-mars-stroke
347 | fa-mars-stroke-h
348 | fa-mars-stroke-v
349 | fa-maxcdn
350 | fa-meanpath
351 | fa-medium
352 | fa-medkit
353 | fa-meh-o
354 | fa-mercury
355 | fa-microphone
356 | fa-microphone-slash
357 | fa-minus
358 | fa-minus-circle
359 | fa-minus-square
360 | fa-minus-square-o
361 | fa-mobile
362 | fa-mobile-phone
363 | fa-money
364 | fa-moon-o
365 | fa-mortar-board
366 | fa-motorcycle
367 | fa-music
368 | fa-navicon
369 | fa-neuter
370 | fa-newspaper-o
371 | fa-openid
372 | fa-outdent
373 | fa-pagelines
374 | fa-paint-brush
375 | fa-paper-plane
376 | fa-paper-plane-o
377 | fa-paperclip
378 | fa-paragraph
379 | fa-paste
380 | fa-pause
381 | fa-paw
382 | fa-paypal
383 | fa-pencil
384 | fa-pencil-square
385 | fa-pencil-square-o
386 | fa-phone
387 | fa-phone-square
388 | fa-photo
389 | fa-picture-o
390 | fa-pie-chart
391 | fa-pied-piper
392 | fa-pied-piper-alt
393 | fa-pinterest
394 | fa-pinterest-p
395 | fa-pinterest-square
396 | fa-plane
397 | fa-play
398 | fa-play-circle
399 | fa-play-circle-o
400 | fa-plug
401 | fa-plus
402 | fa-plus-circle
403 | fa-plus-square
404 | fa-plus-square-o
405 | fa-power-off
406 | fa-print
407 | fa-pulse
408 | fa-puzzle-piece
409 | fa-qq
410 | fa-qrcode
411 | fa-question
412 | fa-question-circle
413 | fa-quote-left
414 | fa-quote-right
415 | fa-ra
416 | fa-random
417 | fa-rebel
418 | fa-recycle
419 | fa-reddit
420 | fa-reddit-square
421 | fa-refresh
422 | fa-remove
423 | fa-renren
424 | fa-reorder
425 | fa-repeat
426 | fa-reply
427 | fa-reply-all
428 | fa-retweet
429 | fa-rmb
430 | fa-road
431 | fa-rocket
432 | fa-rotate-180
433 | fa-rotate-270
434 | fa-rotate-90
435 | fa-rotate-left
436 | fa-rotate-right
437 | fa-rouble
438 | fa-rss
439 | fa-rss-square
440 | fa-rub
441 | fa-ruble
442 | fa-rupee
443 | fa-save
444 | fa-scissors
445 | fa-search
446 | fa-search-minus
447 | fa-search-plus
448 | fa-sellsy
449 | fa-send
450 | fa-send-o
451 | fa-server
452 | fa-share
453 | fa-share-alt
454 | fa-share-alt-square
455 | fa-share-square
456 | fa-share-square-o
457 | fa-shekel
458 | fa-sheqel
459 | fa-shield
460 | fa-ship
461 | fa-shirtsinbulk
462 | fa-shopping-cart
463 | fa-sign-in
464 | fa-sign-out
465 | fa-signal
466 | fa-simplybuilt
467 | fa-sitemap
468 | fa-skyatlas
469 | fa-skype
470 | fa-slack
471 | fa-sliders
472 | fa-slideshare
473 | fa-smile-o
474 | fa-soccer-ball-o
475 | fa-sort
476 | fa-sort-alpha-asc
477 | fa-sort-alpha-desc
478 | fa-sort-amount-asc
479 | fa-sort-amount-desc
480 | fa-sort-asc
481 | fa-sort-desc
482 | fa-sort-down
483 | fa-sort-numeric-asc
484 | fa-sort-numeric-desc
485 | fa-sort-up
486 | fa-soundcloud
487 | fa-space-shuttle
488 | fa-spin
489 | fa-spinner
490 | fa-spoon
491 | fa-spotify
492 | fa-square
493 | fa-square-o
494 | fa-stack
495 | fa-stack-1x
496 | fa-stack-2x
497 | fa-stack-exchange
498 | fa-stack-overflow
499 | fa-star
500 | fa-star-half
501 | fa-star-half-empty
502 | fa-star-half-full
503 | fa-star-half-o
504 | fa-star-o
505 | fa-steam
506 | fa-steam-square
507 | fa-step-backward
508 | fa-step-forward
509 | fa-stethoscope
510 | fa-stop
511 | fa-street-view
512 | fa-strikethrough
513 | fa-stumbleupon
514 | fa-stumbleupon-circle
515 | fa-subscript
516 | fa-subway
517 | fa-suitcase
518 | fa-sun-o
519 | fa-superscript
520 | fa-support
521 | fa-table
522 | fa-tablet
523 | fa-tachometer
524 | fa-tag
525 | fa-tags
526 | fa-tasks
527 | fa-taxi
528 | fa-tencent-weibo
529 | fa-terminal
530 | fa-text-height
531 | fa-text-width
532 | fa-th
533 | fa-th-large
534 | fa-th-list
535 | fa-thumb-tack
536 | fa-thumbs-down
537 | fa-thumbs-o-down
538 | fa-thumbs-o-up
539 | fa-thumbs-up
540 | fa-ticket
541 | fa-times
542 | fa-times-circle
543 | fa-times-circle-o
544 | fa-tint
545 | fa-toggle-down
546 | fa-toggle-left
547 | fa-toggle-off
548 | fa-toggle-on
549 | fa-toggle-right
550 | fa-toggle-up
551 | fa-train
552 | fa-transgender
553 | fa-transgender-alt
554 | fa-trash
555 | fa-trash-o
556 | fa-tree
557 | fa-trello
558 | fa-trophy
559 | fa-truck
560 | fa-try
561 | fa-tty
562 | fa-tumblr
563 | fa-tumblr-square
564 | fa-turkish-lira
565 | fa-twitch
566 | fa-twitter
567 | fa-twitter-square
568 | fa-ul
569 | fa-umbrella
570 | fa-underline
571 | fa-undo
572 | fa-university
573 | fa-unlink
574 | fa-unlock
575 | fa-unlock-alt
576 | fa-unsorted
577 | fa-upload
578 | fa-usd
579 | fa-user
580 | fa-user-md
581 | fa-user-plus
582 | fa-user-secret
583 | fa-user-times
584 | fa-users
585 | fa-venus
586 | fa-venus-double
587 | fa-venus-mars
588 | fa-viacoin
589 | fa-video-camera
590 | fa-vimeo-square
591 | fa-vine
592 | fa-vk
593 | fa-volume-down
594 | fa-volume-off
595 | fa-volume-up
596 | fa-warning
597 | fa-wechat
598 | fa-weibo
599 | fa-weixin
600 | fa-whatsapp
601 | fa-wheelchair
602 | fa-wifi
603 | fa-windows
604 | fa-won
605 | fa-wordpress
606 | fa-wrench
607 | fa-xing
608 | fa-xing-square
609 | fa-yahoo
610 | fa-yelp
611 | fa-yen
612 | fa-youtube
613 | fa-youtube-play
614 | fa-youtube-square
615 | pull-left
616 | pull-right
617 | 


--------------------------------------------------------------------------------
/font-awesome.pl:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/perl
 2 | 
 3 | # Parse font-awesome.css and put classes into ./fa-html-stuff/html-attributes-complete/i-class
 4 | 
 5 | use strict;
 6 | use warnings;
 7 | use Data::Dumper;
 8 | 
 9 | use Path::Tiny;
10 | use List::MoreUtils qw/ uniq /;
11 | 
12 | my $nested;                     # regexp for "{ }"
13 | $nested = qr/
14 |                 \{
15 |                 (
16 |                     [^{}]
17 |                 |
18 |                     (??{ $nested })
19 |                 )*
20 |                 \}
21 |             /x;
22 | 
23 | sub new {
24 |     my $class = shift;
25 |     return bless ({}, $class);
26 | }
27 | 
28 | sub _parse_css {
29 |     my ($source, $classes) = @_;
30 | 
31 |     $source =~s|/\*.*?\*/||gs;      # remove comments
32 | 
33 |     while ($source =~ m/(.*?)($nested)/gs) {
34 |         my ($selector, $selector_body) = ($1, $2);;
35 | 
36 |         if ($selector =~/\s*\@media/s) {
37 |             if ($selector_body =~m /\{(.+)\}/s) {
38 |                 _parse_css($1, $classes);
39 |             }
40 |             next;
41 |         } elsif ($selector =~/\s*\@/s) {
42 |             # ignore @keyframes, etc @..
43 |             next;
44 |         }
45 |         while ($selector =~m/\.([-\w]+)/gs) {
46 |             push @{$classes}, $1;
47 |         }
48 |     }
49 | }
50 | 
51 | main: {
52 |     my $fa_css = path('./font-awesome/css/font-awesome.css')->slurp_utf8;
53 | 
54 |     my @classes;
55 | 
56 |     _parse_css $fa_css, \@classes;
57 | 
58 |     # convert classes to hash
59 |     my %c;
60 |     foreach (@classes) {
61 |         $c{$_} = 1;
62 |     }
63 | 
64 |     # read old stuff file
65 |     my @old = path('./fa-html-stuff/html-attributes-complete/i-class')->touchpath->lines_utf8;
66 | 
67 |     # remoce selectors that present in old stuff file
68 |     foreach my $oldline (@old) {
69 |         chomp $oldline;
70 |         my ($selector) = $oldline =~m/([-\w]+)/;
71 |         if ($selector && $c{$selector}) {
72 |             delete $c{$selector};
73 |         }
74 |     }
75 | 
76 |     # save classes that not exists in old stuff
77 |     path('./fa-html-stuff/html-attributes-complete/i-class')->
78 |         append_utf8("\n" . join "\n", sort keys %c);
79 | }
80 | 


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/a-class:
--------------------------------------------------------------------------------
 1 | active Pressed button
 2 | alert-link Use the .alert-link utility class to quickly provide matching colored links within any alert.
 3 | bg-danger Contextual backgrounds
 4 | bg-info Contextual backgrounds
 5 | bg-primary Contextual backgrounds
 6 | bg-success Contextual backgrounds
 7 | bg-warning Contextual backgrounds
 8 | btn Highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
 9 | btn-block Create block level buttons—those that span the full width of a parent
10 | btn-danger
11 | btn-default
12 | btn-info
13 | btn-lg Button sizing
14 | btn-link Deemphasize a button by making it look like a link while maintaining button behavior
15 | btn-primary
16 | btn-sm Button sizing
17 | btn-success
18 | btn-warning
19 | btn-xs Button sizing
20 | caption caption of thumb
21 | carousel-control <a class="left carousel-control" href="#example" role="button" data-slide="prev">\n  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>\n  <span class="sr-only">Previous</span>\n</a>
22 | center-block Center content blocks
23 | close Generic close icon for dismissing content like modals and alerts.
24 | disabled Disabled state.\n\nFor <a>  Opera <18, IE11 use JS to disable such link.
25 | dropdown-toggle
26 | hidden Force an element to be hidden including for screen readers
27 | left See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
28 | list-group-item <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
29 | media-bottom
30 | media-left
31 | media-middle
32 | media-right
33 | navbar-brand Replace the navbar brand with your own image by swapping the text for an <img>.\nSince the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.\n<div class="navbar-header">\n <a class="navbar-brand"..
34 | navbar-left These classes are mixin-ed version of .pull-left
35 | navbar-link Links that are not within the regular navbar navigation component,\nuse the .navbar-link class to add the proper colors for the default and inverse navbar options.
36 | navbar-right These classes are mixin-ed version of .pull-right
37 | pull-left Float an element to the left with a class
38 | pull-right Float an element to the right with a class
39 | right See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
40 | show Force an element to be shown including for screen readers
41 | text-danger Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
42 | text-info Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
43 | text-muted Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
44 | text-primary Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
45 | text-success Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
46 | text-warning Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
47 | thumbnail


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/a-data-dismiss:
--------------------------------------------------------------------------------
1 | alert
2 | modal <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n  <span aria-hidden="true">&times;</span></button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/a-data-slide:
--------------------------------------------------------------------------------
1 | next
2 | prev


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/a-data-target:
--------------------------------------------------------------------------------
1 | #bs- d
2 | #myModal Activate modal, example.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/a-data-toggle:
--------------------------------------------------------------------------------
1 | button Single toggle button\nPre-toggled buttons need .active and aria-pressed="true"\n<button type="button" class="btn btn-primary" data-toggle="button"\n        aria-pressed="false" autocomplete="off">\n  Single toggle\n</button>
2 | buttons Togglable Checkbox or radio buttons.\n<div class="btn-group" data-toggle="buttons">\n  <label class="btn btn-primary active">\n    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 2\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 3\n </label>\n</div>
3 | collapse
4 | dropdown <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
5 | modal Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.\n\n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/abbr-class:
--------------------------------------------------------------------------------
1 | initialism Add .initialism to an abbreviation for a slightly smaller font-size.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/blockquote-class:
--------------------------------------------------------------------------------
1 | blockquote-reverse A blockquote with right-aligned content


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/button-class:
--------------------------------------------------------------------------------
 1 | active Pressed button
 2 | btn Highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
 3 | btn-block Create block level buttons—those that span the full width of a parent
 4 | btn-danger
 5 | btn-default
 6 | btn-info
 7 | btn-lg Button sizing
 8 | btn-link Deemphasize a button by making it look like a link while maintaining button behavior
 9 | btn-primary
10 | btn-sm Button sizing
11 | btn-success
12 | btn-warning
13 | btn-xs Button sizing
14 | carousel-control <a class="left carousel-control" href="#example" role="button" data-slide="prev">\n  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>\n  <span class="sr-only">Previous</span>\n</a>
15 | close Generic close icon for dismissing content like modals and alerts.
16 | disabled Disabled state.\n\nFor <a>  Opera <18, IE11 use JS to disable such link.
17 | dropdown-toggle
18 | left See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
19 | navbar-brand Replace the navbar brand with your own image by swapping the text for an <img>.\nSince the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.\n<div class="navbar-header">\n <a class="navbar-brand"..
20 | navbar-btn Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar
21 | navbar-left These classes are mixin-ed version of .pull-left
22 | navbar-right These classes are mixin-ed version of .pull-right
23 | right See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/button-data-dismiss:
--------------------------------------------------------------------------------
1 | alert
2 | modal <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n  <span aria-hidden="true">&times;</span></button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/button-data-slide:
--------------------------------------------------------------------------------
1 | next
2 | prev


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/button-data-target:
--------------------------------------------------------------------------------
1 | #bs- d
2 | #myModal Activate modal, example.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/button-data-toggle:
--------------------------------------------------------------------------------
1 | button Single toggle button\nPre-toggled buttons need .active and aria-pressed="true"\n<button type="button" class="btn btn-primary" data-toggle="button"\n        aria-pressed="false" autocomplete="off">\n  Single toggle\n</button>
2 | buttons Togglable Checkbox or radio buttons.\n<div class="btn-group" data-toggle="buttons">\n  <label class="btn btn-primary active">\n    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 2\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 3\n </label>\n</div>
3 | collapse
4 | dropdown <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
5 | modal Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.\n\n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-class:
--------------------------------------------------------------------------------
  1 | active Animate progress-bar
  2 | alert
  3 | alert-danger
  4 | alert-dismissible Build on any alert by adding an optional .alert-dismissible and close button.\nBe sure to use the <button> element with the data attribut\n\ndata-dismiss="alert"\n\n<div class="alert alert-warning alert-dismissible" role="alert">\n  <button type="button" class="close" data-dismiss="alert" aria-label="Close">\n    <span aria-hidden="true">&times;</span>\n  </button>\n  <strong>Warning!</strong> Better check yourself, you're not looking too good.\n</div>
  5 | alert-info
  6 | alert-success
  7 | alert-warning
  8 | bg-danger Contextual backgrounds
  9 | bg-info Contextual backgrounds
 10 | bg-primary Contextual backgrounds
 11 | bg-success Contextual backgrounds
 12 | bg-warning Contextual backgrounds
 13 | btn-group Group a series of buttons together on a single line with the button group.\nPlace a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.\n\n<div class="btn-group" role="group" aria-label="...">\n  <button type="button" class="btn btn-default">Left</button>\n  <button type="button" class="btn btn-default">Middle</button>\n  <button type="button" class="btn btn-default">Right</button>\n</div>
 14 | btn-group-justified Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.\n  <div class="btn-group btn-group-justified" role="group"..
 15 | btn-group-lg
 16 | btn-group-sm
 17 | btn-group-vertical Make a set of buttons appear vertically stacked rather than horizontally
 18 | btn-group-xs
 19 | btn-toolbar <div class="btn-toolbar">\n  <div class="btn-group">
 20 | caption caption of thumb
 21 | carousel Ensure for JS: $('.carousel').carousel()\nEx.\n<div id="example" class="carousel slide" data-ride="carousel">\n <!-- Indicators -->\n <ol class="carousel-indicators">\n  <li data-target="#example" data-slide-to="0" class="active"></li>\n  <li data-target="#example" data-slide-to="1"></li>\n  ..\n <!-- Wrapper for slides -->\n <div class="carousel-inner" role="listbox">\n  <div class="item active">\n   <img src="..." alt="...">\n   <div class="carousel-caption">\n   ..\n   </div>\n   .. more wrappers\n </div>\n <!-- Controls -->\n <a class="left carousel-control" href="#example" role="button" data-slide="prev">\n   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>\n   <span class="sr-only">Previous</span>\n </a>\n .. <a> next ..\n</div>
 22 | carousel-caption Add captions to your slides. Within any .item\n<div class="item">\n  <img src="..." alt="...">\n  <div class="carousel-caption">\n    <h3>...</h3>\n    <p>...</p>\n  </div>\n</div>
 23 | carousel-inner <!-- Wrapper for slides -->\n <div class="carousel-inner" role="listbox">\n  <div class="item active">\n   <img src="..." alt="...">\n   <div class="carousel-caption">\n   ..\n   </div>\n   .. more wrappers\n </div>
 24 | center-block Center content blocks
 25 | checkbox
 26 | checkbox-inline
 27 | clearfix Add the extra clearfix for only the required viewport\n“micro clearfix” generates pseudo-elements and sets their display to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.
 28 | collapse Ex. opened collapsable panel.\n.panel-collapse .collapse .in
 29 | container Fixed-width layout
 30 | container-fluid Create the fluid layouts in order to utilize the 100% width of the viewport.
 31 | disabled To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your:\n.radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.\n\nFor <a>  Opera <18, IE11 use JS to disable such link.
 32 | dropdown <div class="dropdown">\n    <button class="btn btn-default dropdown-toggle"\n    data-toggle="dropdown" aria-expanded="true" id="drMenu1">\n      Dropdown\n        <span class="caret"></span>\n    </button>\n    <ul class="dropdown-menu" role="menu" aria-labelledby="drMenu1">\n      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>\n      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>\n    </ul>\n</div>
 33 | dropup <div class="btn-group dropup">
 34 | embed-responsive Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
 35 | embed-responsive-16by9
 36 | embed-responsive-4by3
 37 | fade 1. Modal animation. Slide it down.\n2. Fade effect for .tab-pane
 38 | fieldset
 39 | form-group Wrap labels and controls in .form-group for optimum spacing.\nDon't mix form groups with input groups
 40 | form-group-lg Styles to the inputs and labels within a .form-group.
 41 | form-group-sm Styles to the inputs and labels within a .form-group.
 42 | has-error Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
 43 | has-feedback Add right feedback icon.\nFeedback icons only work with textual <input class="form-control"> elements\n (error)\nEx.\n <div class="form-group has-success has-feedback">\n  <label class="control-label" for="success">Input with success</label>\n  <input type="text" class="form-control" id="success" aria-describedby="successStatus">\n  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>\n  <span id="successStatus" class="sr-only">(success)</span>\n </div>
 44 | has-success Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
 45 | has-warning Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
 46 | hidden Force an element to be hidden including for screen readers
 47 | in 1. .fade .in animation for modal, (first .tab-pane .fade), etc\n2. .panel-collapse .collapse .in - default open panel
 48 | input-group Place one add-on or button on either side of an input\n <div class="input-group">\n   <span class="input-group-addon">@</span>\n   <input type="text" class="form-control" placeholder="Username">\n </div>
 49 | input-group-btn Segmented buttons\n <div class="input-group">\n  <div class="input-group-btn">\n     Button and dropdown menu here\n  </div>\n  <input type="text" class="form-control">\n</div>
 50 | input-group-lg
 51 | input-group-sm
 52 | jumbotron A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.\nTo make the jumbotron full width, and without rounded corners,\nplace it outside all .containers and instead add a .container within
 53 | list-group <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
 54 | media Abstract object styles for building various types of components.\n(like blog comments, Tweets, etc)\nthat feature a left- or right-aligned image alongside textual content.
 55 | media-body
 56 | media-bottom
 57 | media-left
 58 | media-middle
 59 | media-right
 60 | modal <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">\n<div class="modal-dialog">\n <div class="modal-content">\n  <div class="modal-header">\n  ..\n  <div class="modal-body">\n  ..\n  <div class="modal-footer">\n  
 61 | modal-body Where all modal content resides (sibling of .modal-header and .modal-footer)
 62 | modal-content
 63 | modal-dialog
 64 | modal-footer Footer (for actions)\n<div class="modal-footer">\n <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n <button type="button" class="btn btn-primary">Save changes</button>\n</div>
 65 | modal-header Top section of the modal w/ title and dismiss
 66 | navbar <nav class="navbar navbar-default"
 67 | navbar-brand Replace the navbar brand with your own image by swapping the text for an <img>.\nSince the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.\n<div class="navbar-header">\n <a class="navbar-brand"..
 68 | navbar-collapse <div class="navbar-header">\n <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#FOO"
 69 | navbar-default Opposite to .navbar-inverse
 70 | navbar-fixed-bottom Fixed bottom.\nAlso add padding! "body { padding-bottom: 70px; }" (after bs css)
 71 | navbar-fixed-top Fixed to top.\nInclude a .container or .container-fluid to center and pad navbar content.\nAlso add padding! "body { padding-top: 70px; }" (after bs css)
 72 | navbar-header Header of navbar
 73 | navbar-inverse Modify the look of the navbar Opposite to .navbar-default
 74 | navbar-left These classes are mixin-ed version of .pull-left
 75 | navbar-right These classes are mixin-ed version of .pull-right
 76 | navbar-static-top Create a full-width navbar that scrolls away with the page by adding
 77 | page-header A simple shell for an h1.
 78 | panel While not always necessary, sometimes you need to put your DOM in a box.\nFor those situations, try the panel component.\n\n<div class="panel panel-default">\n <div class="panel-body">\n  Basic panel example\n </div>\n</div>
 79 | panel-body
 80 | panel-collapse Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
 81 | panel-danger
 82 | panel-default
 83 | panel-footer Wrap buttons or secondary text in .panel-footer.\nNote that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
 84 | panel-group <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">\n <div class="panel panel-default">\n   <div class="panel-heading" role="tab" id="headingOne">
 85 | panel-heading Container for heading and h1-h6 .panel-title
 86 | panel-info
 87 | panel-primary Opposite to .panel-default
 88 | panel-success
 89 | panel-warning
 90 | progress
 91 | progress-bar Show filled bar\n<div class="progress">\n  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">\n    60%\n  </div>\n</div>
 92 | progress-bar-danger
 93 | progress-bar-info
 94 | progress-bar-striped
 95 | progress-bar-success
 96 | progress-bar-warning
 97 | pull-left Float an element to the left with a class
 98 | pull-right Float an element to the right with a class
 99 | radio
100 | radio-inline
101 | row Predefined grid class
102 | show Force an element to be shown including for screen readers
103 | slide Slide carousel
104 | tab-content <div class="tab-content">\n<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>\n<div role="tabpanel" class="tab-pane fade" id="profile">...</div>
105 | tab-pane <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
106 | text-danger Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
107 | text-info Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
108 | text-muted Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
109 | text-primary Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
110 | text-success Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
111 | text-warning Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
112 | thumbnail
113 | well Use the well as a simple effect on an element to give it an inset effect.
114 | well-lg
115 | well-sm


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-backdrop:
--------------------------------------------------------------------------------
1 | false
2 | static
3 | true


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-interval:
--------------------------------------------------------------------------------
1 | 2000
2 | 3000
3 | 5000


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-keyboard:
--------------------------------------------------------------------------------
1 | false
2 | true


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-offset-bottom:
--------------------------------------------------------------------------------
1 | 100
2 | 200


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-offset-top:
--------------------------------------------------------------------------------
1 | 100
2 | 200


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-pause:
--------------------------------------------------------------------------------
1 | false
2 | hover default


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-ride:
--------------------------------------------------------------------------------
1 | carousel


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-show:
--------------------------------------------------------------------------------
1 | false
2 | true


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/div-data-wrap:
--------------------------------------------------------------------------------
1 | false
2 | true


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/dl-class:
--------------------------------------------------------------------------------
1 | Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/embed-class:
--------------------------------------------------------------------------------
1 | embed-responsive-item Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/form-class:
--------------------------------------------------------------------------------
1 | form-horizontal Predefined grid classes to align labels and groups of form controls in a horizontal layout.\nNO NEED FOR .row
2 | form-inline Left-aligned and inline-block controls.\nThis only applies to forms within viewports that are at least 768px wide.
3 | navbar-form Use the alignment options to decide where it resides within the navbar content.\n\n<form class="navbar-form navbar-left" role="search">\n<div class="form-group">\n  <input type="text" class="form-control" placeholder="Search">\n</div>
4 | navbar-left These classes are mixin-ed version of .pull-left
5 | navbar-right These classes are mixin-ed version of .pull-right


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-class:
--------------------------------------------------------------------------------
  1 | col-lg-1 1170px.\nColumn width ~97px
  2 | col-lg-10 1170px.\nColumn width ~97px
  3 | col-lg-11 1170px.\nColumn width ~97px
  4 | col-lg-12 1170px.\nColumn width ~97px
  5 | col-lg-2 1170px.\nColumn width ~97px
  6 | col-lg-3 1170px.\nColumn width ~97px
  7 | col-lg-4 1170px.\nColumn width ~97px
  8 | col-lg-5 1170px.\nColumn width ~97px
  9 | col-lg-6 1170px.\nColumn width ~97px
 10 | col-lg-7 1170px.\nColumn width ~97px
 11 | col-lg-8 1170px.\nColumn width ~97px
 12 | col-lg-9 1170px.\nColumn width ~97px
 13 | col-lg-offset-1 Increase the left margin of a column
 14 | col-lg-offset-10 Increase the left margin of a column
 15 | col-lg-offset-11 Increase the left margin of a column
 16 | col-lg-offset-12 Increase the left margin of a column
 17 | col-lg-offset-2 Increase the left margin of a column
 18 | col-lg-offset-3 Increase the left margin of a column
 19 | col-lg-offset-4 Increase the left margin of a column
 20 | col-lg-offset-5 Increase the left margin of a column
 21 | col-lg-offset-6 Increase the left margin of a column
 22 | col-lg-offset-7 Increase the left margin of a column
 23 | col-lg-offset-8 Increase the left margin of a column
 24 | col-lg-offset-9 Increase the left margin of a column
 25 | col-lg-pull-1
 26 | col-lg-pull-10
 27 | col-lg-pull-11
 28 | col-lg-pull-12
 29 | col-lg-pull-2
 30 | col-lg-pull-3
 31 | col-lg-pull-4
 32 | col-lg-pull-5
 33 | col-lg-pull-6
 34 | col-lg-pull-7
 35 | col-lg-pull-8
 36 | col-lg-pull-9
 37 | col-lg-push-1
 38 | col-lg-push-10
 39 | col-lg-push-11
 40 | col-lg-push-12
 41 | col-lg-push-2
 42 | col-lg-push-3
 43 | col-lg-push-4
 44 | col-lg-push-5
 45 | col-lg-push-6
 46 | col-lg-push-7
 47 | col-lg-push-8
 48 | col-lg-push-9
 49 | col-md-1 970px.\nColumn width ~81px
 50 | col-md-10 970px.\nColumn width ~81px
 51 | col-md-11 970px.\nColumn width ~81px
 52 | col-md-12 970px.\nColumn width ~81px
 53 | col-md-2 970px.\nColumn width ~81px
 54 | col-md-3 970px.\nColumn width ~81px
 55 | col-md-4 970px.\nColumn width ~81px
 56 | col-md-5 970px.\nColumn width ~81px
 57 | col-md-6 970px.\nColumn width ~81px
 58 | col-md-7 970px.\nColumn width ~81px
 59 | col-md-8 970px.\nColumn width ~81px
 60 | col-md-9 970px.\nColumn width ~81px
 61 | col-md-offset-1 Increase the left margin of a column
 62 | col-md-offset-10 Increase the left margin of a column
 63 | col-md-offset-11 Increase the left margin of a column
 64 | col-md-offset-12 Increase the left margin of a column
 65 | col-md-offset-2 Increase the left margin of a column
 66 | col-md-offset-3 Increase the left margin of a column
 67 | col-md-offset-4 Increase the left margin of a column
 68 | col-md-offset-5 Increase the left margin of a column
 69 | col-md-offset-6 Increase the left margin of a column
 70 | col-md-offset-7 Increase the left margin of a column
 71 | col-md-offset-8 Increase the left margin of a column
 72 | col-md-offset-9 Increase the left margin of a column
 73 | col-md-pull-1
 74 | col-md-pull-10
 75 | col-md-pull-11
 76 | col-md-pull-12
 77 | col-md-pull-2
 78 | col-md-pull-3
 79 | col-md-pull-4
 80 | col-md-pull-5
 81 | col-md-pull-6
 82 | col-md-pull-7
 83 | col-md-pull-8
 84 | col-md-pull-9
 85 | col-md-push-1
 86 | col-md-push-10
 87 | col-md-push-11
 88 | col-md-push-12
 89 | col-md-push-2
 90 | col-md-push-3
 91 | col-md-push-4
 92 | col-md-push-5
 93 | col-md-push-6
 94 | col-md-push-7
 95 | col-md-push-8
 96 | col-md-push-9
 97 | col-sm-1 750px.\nColumn width ~62px
 98 | col-sm-10 750px.\nColumn width ~62px
 99 | col-sm-11 750px.\nColumn width ~62px
100 | col-sm-12 750px.\nColumn width ~62px
101 | col-sm-2 750px.\nColumn width ~62px
102 | col-sm-3 750px.\nColumn width ~62px
103 | col-sm-4 750px.\nColumn width ~62px
104 | col-sm-5 750px.\nColumn width ~62px
105 | col-sm-6 750px.\nColumn width ~62px
106 | col-sm-7 750px.\nColumn width ~62px
107 | col-sm-8 750px.\nColumn width ~62px
108 | col-sm-9 750px.\nColumn width ~62px
109 | col-sm-offset-1 Increase the left margin of a column
110 | col-sm-offset-10 Increase the left margin of a column
111 | col-sm-offset-11 Increase the left margin of a column
112 | col-sm-offset-12 Increase the left margin of a column
113 | col-sm-offset-2 Increase the left margin of a column
114 | col-sm-offset-3 Increase the left margin of a column
115 | col-sm-offset-4 Increase the left margin of a column
116 | col-sm-offset-5 Increase the left margin of a column
117 | col-sm-offset-6 Increase the left margin of a column
118 | col-sm-offset-7 Increase the left margin of a column
119 | col-sm-offset-8 Increase the left margin of a column
120 | col-sm-offset-9 Increase the left margin of a column
121 | col-sm-pull-1
122 | col-sm-pull-10
123 | col-sm-pull-11
124 | col-sm-pull-12
125 | col-sm-pull-2
126 | col-sm-pull-3
127 | col-sm-pull-4
128 | col-sm-pull-5
129 | col-sm-pull-6
130 | col-sm-pull-7
131 | col-sm-pull-8
132 | col-sm-pull-9
133 | col-sm-push-1
134 | col-sm-push-10
135 | col-sm-push-11
136 | col-sm-push-12
137 | col-sm-push-2
138 | col-sm-push-3
139 | col-sm-push-4
140 | col-sm-push-5
141 | col-sm-push-6
142 | col-sm-push-7
143 | col-sm-push-8
144 | col-sm-push-9
145 | col-xs-1 Horizontal at all times
146 | col-xs-10 Horizontal at all times
147 | col-xs-11 Horizontal at all times
148 | col-xs-12 Horizontal at all times
149 | col-xs-2 Horizontal at all times
150 | col-xs-3 Horizontal at all times
151 | col-xs-4 Horizontal at all times
152 | col-xs-5 Horizontal at all times
153 | col-xs-6 Horizontal at all times
154 | col-xs-7 Horizontal at all times
155 | col-xs-8 Horizontal at all times
156 | col-xs-9 Horizontal at all times
157 | col-xs-offset-1 Increase the left margin of a column
158 | col-xs-offset-10 Increase the left margin of a column
159 | col-xs-offset-11 Increase the left margin of a column
160 | col-xs-offset-12 Increase the left margin of a column
161 | col-xs-offset-2 Increase the left margin of a column
162 | col-xs-offset-3 Increase the left margin of a column
163 | col-xs-offset-4 Increase the left margin of a column
164 | col-xs-offset-5 Increase the left margin of a column
165 | col-xs-offset-6 Increase the left margin of a column
166 | col-xs-offset-7 Increase the left margin of a column
167 | col-xs-offset-8 Increase the left margin of a column
168 | col-xs-offset-9 Increase the left margin of a column
169 | col-xs-pull-1
170 | col-xs-pull-10
171 | col-xs-pull-11
172 | col-xs-pull-12
173 | col-xs-pull-2
174 | col-xs-pull-3
175 | col-xs-pull-4
176 | col-xs-pull-5
177 | col-xs-pull-6
178 | col-xs-pull-7
179 | col-xs-pull-8
180 | col-xs-pull-9
181 | col-xs-push-1
182 | col-xs-push-10
183 | col-xs-push-11
184 | col-xs-push-12
185 | col-xs-push-2
186 | col-xs-push-3
187 | col-xs-push-4
188 | col-xs-push-5
189 | col-xs-push-6
190 | col-xs-push-7
191 | col-xs-push-8
192 | col-xs-push-9
193 | hidden-lg Hidden for large devices (>1200px)
194 | hidden-md Hidden for medium devices (>992px)
195 | hidden-print Toggling content for print
196 | hidden-sm Hidden for small devices (>768px)
197 | hidden-xs Hidden for extra small devices (<768px)
198 | small For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent.\nHeading elements receive their own font-size for nested <small> elements.
199 | sr-only Hides an element to all devices except screen readers
200 | sr-only-focusable Combine with .sr-only to show the element again when it is focused e.g. by a keyboard-only user
201 | text-capitalize Capitalized text.
202 | text-center Center aligned text.
203 | text-hide Replace an element's text content with a background image.
204 | text-justify Justified text.
205 | text-left Left aligned text.
206 | text-lowercase Lowercased text.
207 | text-nowrap No wrap text.
208 | text-right Right aligned text.
209 | text-uppercase Uppercased text.
210 | visible-lg-block Large devices (>1200px).\nSet Visible of component
211 | visible-lg-inline Large devices (>1200px).\nSet Visible of component
212 | visible-lg-inline-block Large devices (>1200px).\nSet Visible of component
213 | visible-md-block Medium devices (>992px).\nSet Visible of component
214 | visible-md-inline Medium devices (>992px).\nSet Visible of component
215 | visible-md-inline-block Medium devices (>992px).\nSet Visible of component
216 | visible-print-block Toggling content for print
217 | visible-print-inline Toggling content for print
218 | visible-print-inline-block Toggling content for print
219 | visible-sm-block Small devices (>768px).\nSet Visible of component
220 | visible-sm-inline Small devices (>768px).\nSet Visible of component
221 | visible-sm-inline-block Small devices (>768px).\nSet Visible of component
222 | visible-xs-block Extra small devices (<768px).\nSet Visible of component
223 | visible-xs-inline Extra small devices (<768px).\nSet Visible of component
224 | visible-xs-inline-block Extra small devices (<768px).\nSet Visible of component


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-animation:
--------------------------------------------------------------------------------
1 | false
2 | true


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-container:
--------------------------------------------------------------------------------
1 | body
2 | false


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-delay:
--------------------------------------------------------------------------------
1 | 0
2 | 1000
3 | hide Onject: '{ "show": 500, "hide": 100 }'
4 | show Onject: '{ "show": 500, "hide": 100 }'
5 | { Onject: '{ "show": 500, "hide": 100 }'


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-html:
--------------------------------------------------------------------------------
1 | false
2 | true


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-offset:
--------------------------------------------------------------------------------
1 | 10 Default
2 | 16
3 | 20


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-placement:
--------------------------------------------------------------------------------
1 | auto
2 | bottom
3 | left
4 | right
5 | top


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-selector:
--------------------------------------------------------------------------------
1 | false


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-spy:
--------------------------------------------------------------------------------
1 | affix <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">\n  <li class="active"><a href="#one">Section One</a></li>\n  <li><a href="#two">Section Two</a></li>\n  <li><a href="#three">Section Three</a></li>\n</ul>\nThe affix plugin toggles between three classes,\neach representing a particular state: .affix, .affix-top, and .affix-bottom.\nYou must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
2 | scroll


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-toggle:
--------------------------------------------------------------------------------
1 | popover Popover.\nFor performance reasons, the Tooltip and Popover data-apis are opt-in,\nmeaning YOU MUST INITIALIZE THEM YOURSELF.\n\n$(function () {\n  $('[data-toggle="popover"]').popover({placement: 'bottom'})\n})
2 | tooltip Tooltip.\nFor performance reasons, the Tooltip and Popover data-apis are opt-in,\nmeaning YOU MUST INITIALIZE THEM YOURSELF.\n\n$(function () {\n  $('[data-toggle="tooltip"]').tooltip({placement: 'bottom'})\n})


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-trigger:
--------------------------------------------------------------------------------
1 | click
2 | focus
3 | hover
4 | manual


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/global-data-viewport:
--------------------------------------------------------------------------------
1 | selector Ex. { selector: 'body', padding: 0 }


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/h1-class:
--------------------------------------------------------------------------------
1 | list-group-item-heading <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
2 | media-heading Media heading, h4
3 | modal-title
4 | panel-title
5 | small Create lighter, secondary text in any heading


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/h2-class:
--------------------------------------------------------------------------------
1 | list-group-item-heading <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
2 | media-heading Media heading, h4
3 | modal-title
4 | panel-title
5 | small Create lighter, secondary text in any heading


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/h3-class:
--------------------------------------------------------------------------------
1 | list-group-item-heading <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
2 | media-heading Media heading, h4
3 | modal-title
4 | panel-title
5 | small Create lighter, secondary text in any heading


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/h4-class:
--------------------------------------------------------------------------------
1 | list-group-item-heading <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
2 | media-heading Media heading, h4
3 | modal-title
4 | panel-title
5 | small Create lighter, secondary text in any heading


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/h5-class:
--------------------------------------------------------------------------------
1 | list-group-item-heading <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
2 | media-heading Media heading, h4
3 | modal-title
4 | panel-title
5 | small Create lighter, secondary text in any heading


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/h6-class:
--------------------------------------------------------------------------------
1 | list-group-item-heading <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
2 | media-heading Media heading, h4
3 | modal-title
4 | panel-title
5 | small Create lighter, secondary text in any heading


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/i-class:
--------------------------------------------------------------------------------
  1 | glyphicon Base class\nBe sure to leave a space between the icon and text for proper padding.
  2 | glyphicon-adjust
  3 | glyphicon-align-center
  4 | glyphicon-align-justify
  5 | glyphicon-align-left
  6 | glyphicon-align-right
  7 | glyphicon-arrow-down
  8 | glyphicon-arrow-left
  9 | glyphicon-arrow-right
 10 | glyphicon-arrow-up
 11 | glyphicon-asterisk
 12 | glyphicon-backward
 13 | glyphicon-ban-circle
 14 | glyphicon-barcode
 15 | glyphicon-bell
 16 | glyphicon-bold
 17 | glyphicon-book
 18 | glyphicon-bookmark
 19 | glyphicon-briefcase
 20 | glyphicon-bullhorn
 21 | glyphicon-calendar
 22 | glyphicon-camera
 23 | glyphicon-certificate
 24 | glyphicon-check
 25 | glyphicon-chevron-down
 26 | glyphicon-chevron-left
 27 | glyphicon-chevron-right
 28 | glyphicon-chevron-up
 29 | glyphicon-circle-arrow-down
 30 | glyphicon-circle-arrow-left
 31 | glyphicon-circle-arrow-right
 32 | glyphicon-circle-arrow-up
 33 | glyphicon-cloud
 34 | glyphicon-cloud-download
 35 | glyphicon-cloud-upload
 36 | glyphicon-cog
 37 | glyphicon-collapse-down
 38 | glyphicon-collapse-up
 39 | glyphicon-comment
 40 | glyphicon-compressed
 41 | glyphicon-copyright-mark
 42 | glyphicon-credit-card
 43 | glyphicon-cutlery
 44 | glyphicon-dashboard
 45 | glyphicon-download
 46 | glyphicon-download-alt
 47 | glyphicon-earphone
 48 | glyphicon-edit
 49 | glyphicon-eject
 50 | glyphicon-envelope
 51 | glyphicon-euro
 52 | glyphicon-exclamation-sign
 53 | glyphicon-expand
 54 | glyphicon-export
 55 | glyphicon-eye-close
 56 | glyphicon-eye-open
 57 | glyphicon-facetime-video
 58 | glyphicon-fast-backward
 59 | glyphicon-fast-forward
 60 | glyphicon-file
 61 | glyphicon-film
 62 | glyphicon-filter
 63 | glyphicon-fire
 64 | glyphicon-flag
 65 | glyphicon-flash
 66 | glyphicon-floppy-disk
 67 | glyphicon-floppy-open
 68 | glyphicon-floppy-remove
 69 | glyphicon-floppy-save
 70 | glyphicon-floppy-saved
 71 | glyphicon-folder-close
 72 | glyphicon-folder-open
 73 | glyphicon-font
 74 | glyphicon-forward
 75 | glyphicon-fullscreen
 76 | glyphicon-gbp
 77 | glyphicon-gift
 78 | glyphicon-glass
 79 | glyphicon-globe
 80 | glyphicon-hand-down
 81 | glyphicon-hand-left
 82 | glyphicon-hand-right
 83 | glyphicon-hand-up
 84 | glyphicon-hd-video
 85 | glyphicon-hdd
 86 | glyphicon-header
 87 | glyphicon-headphones
 88 | glyphicon-heart
 89 | glyphicon-heart-empty
 90 | glyphicon-home
 91 | glyphicon-import
 92 | glyphicon-inbox
 93 | glyphicon-indent-left
 94 | glyphicon-indent-right
 95 | glyphicon-info-sign
 96 | glyphicon-italic
 97 | glyphicon-leaf
 98 | glyphicon-link
 99 | glyphicon-list
100 | glyphicon-list-alt
101 | glyphicon-lock
102 | glyphicon-log-in
103 | glyphicon-log-out
104 | glyphicon-magnet
105 | glyphicon-map-marker
106 | glyphicon-minus
107 | glyphicon-minus-sign
108 | glyphicon-move
109 | glyphicon-music
110 | glyphicon-new-window
111 | glyphicon-off
112 | glyphicon-ok
113 | glyphicon-ok-circle
114 | glyphicon-ok-sign
115 | glyphicon-open
116 | glyphicon-paperclip
117 | glyphicon-pause
118 | glyphicon-pencil
119 | glyphicon-phone
120 | glyphicon-phone-alt
121 | glyphicon-picture
122 | glyphicon-plane
123 | glyphicon-play
124 | glyphicon-play-circle
125 | glyphicon-plus
126 | glyphicon-plus-sign
127 | glyphicon-print
128 | glyphicon-pushpin
129 | glyphicon-qrcode
130 | glyphicon-question-sign
131 | glyphicon-random
132 | glyphicon-record
133 | glyphicon-refresh
134 | glyphicon-registration-mark
135 | glyphicon-remove
136 | glyphicon-remove-circle
137 | glyphicon-remove-sign
138 | glyphicon-repeat
139 | glyphicon-resize-full
140 | glyphicon-resize-horizontal
141 | glyphicon-resize-small
142 | glyphicon-resize-vertical
143 | glyphicon-retweet
144 | glyphicon-road
145 | glyphicon-save
146 | glyphicon-saved
147 | glyphicon-screenshot
148 | glyphicon-sd-video
149 | glyphicon-search
150 | glyphicon-send
151 | glyphicon-share
152 | glyphicon-share-alt
153 | glyphicon-shopping-cart
154 | glyphicon-signal
155 | glyphicon-sort
156 | glyphicon-sort-by-alphabet
157 | glyphicon-sort-by-alphabet-alt
158 | glyphicon-sort-by-attributes
159 | glyphicon-sort-by-attributes-alt
160 | glyphicon-sort-by-order
161 | glyphicon-sort-by-order-alt
162 | glyphicon-sound-5-1
163 | glyphicon-sound-6-1
164 | glyphicon-sound-7-1
165 | glyphicon-sound-dolby
166 | glyphicon-sound-stereo
167 | glyphicon-star
168 | glyphicon-star-empty
169 | glyphicon-stats
170 | glyphicon-step-backward
171 | glyphicon-step-forward
172 | glyphicon-stop
173 | glyphicon-subtitles
174 | glyphicon-tag
175 | glyphicon-tags
176 | glyphicon-tasks
177 | glyphicon-text-height
178 | glyphicon-text-width
179 | glyphicon-th
180 | glyphicon-th-large
181 | glyphicon-th-list
182 | glyphicon-thumbs-down
183 | glyphicon-thumbs-up
184 | glyphicon-time
185 | glyphicon-tint
186 | glyphicon-tower
187 | glyphicon-transfer
188 | glyphicon-trash
189 | glyphicon-tree-conifer
190 | glyphicon-tree-deciduous
191 | glyphicon-unchecked
192 | glyphicon-upload
193 | glyphicon-usd
194 | glyphicon-user
195 | glyphicon-volume-down
196 | glyphicon-volume-off
197 | glyphicon-volume-up
198 | glyphicon-warning-sign
199 | glyphicon-wrench
200 | glyphicon-zoom-in
201 | glyphicon-zoom-out


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/iframe-class:
--------------------------------------------------------------------------------
1 | embed-responsive-item Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/img-class:
--------------------------------------------------------------------------------
1 | img-circle Makes the entire image round by adding border-radius:500px.
2 | img-responsive This applies\n { max-width: 100%; height: auto; }\nto the image so that it scales nicely to the parent element.
3 | img-rounded Adds border-radius:6px to give the image rounded corners.
4 | img-thumbnail Adds a bit of padding and a gray border


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/input-class:
--------------------------------------------------------------------------------
 1 | active Pressed button
 2 | btn Highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
 3 | btn-block Create block level buttons—those that span the full width of a parent
 4 | btn-danger
 5 | btn-default
 6 | btn-info
 7 | btn-lg Button sizing
 8 | btn-link Deemphasize a button by making it look like a link while maintaining button behavior
 9 | btn-primary
10 | btn-sm Button sizing
11 | btn-success
12 | btn-warning
13 | btn-xs Button sizing
14 | carousel-control <a class="left carousel-control" href="#example" role="button" data-slide="prev">\n  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>\n  <span class="sr-only">Previous</span>\n</a>
15 | disabled Disabled state.\n\nFor <a>  Opera <18, IE11 use JS to disable such link.
16 | dropdown-toggle
17 | form-control Set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
18 | input-lg modifier classes to decrease or increase the height and font-size of form controls
19 | input-sm modifier classes to decrease or increase the height and font-size of form controls
20 | left See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
21 | navbar-btn Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar
22 | right See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/input-data-dismiss:
--------------------------------------------------------------------------------
1 | alert
2 | modal <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n  <span aria-hidden="true">&times;</span></button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/input-data-slide:
--------------------------------------------------------------------------------
1 | next
2 | prev


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/input-data-target:
--------------------------------------------------------------------------------
1 | #bs- d
2 | #myModal Activate modal, example.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/input-data-toggle:
--------------------------------------------------------------------------------
1 | button Single toggle button\nPre-toggled buttons need .active and aria-pressed="true"\n<button type="button" class="btn btn-primary" data-toggle="button"\n        aria-pressed="false" autocomplete="off">\n  Single toggle\n</button>
2 | buttons Togglable Checkbox or radio buttons.\n<div class="btn-group" data-toggle="buttons">\n  <label class="btn btn-primary active">\n    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 2\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 3\n </label>\n</div>
3 | collapse
4 | dropdown <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
5 | modal Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.\n\n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/label-class:
--------------------------------------------------------------------------------
 1 | active Pressed button
 2 | btn Highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
 3 | btn-block Create block level buttons—those that span the full width of a parent
 4 | btn-danger
 5 | btn-default
 6 | btn-info
 7 | btn-lg Button sizing
 8 | btn-link Deemphasize a button by making it look like a link while maintaining button behavior
 9 | btn-primary
10 | btn-sm Button sizing
11 | btn-success
12 | btn-warning
13 | btn-xs Button sizing
14 | carousel-control <a class="left carousel-control" href="#example" role="button" data-slide="prev">\n  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>\n  <span class="sr-only">Previous</span>\n</a>
15 | checkbox
16 | checkbox-inline
17 | control-label <div class="form-group">\n  <label class="control-label" for="myInput">Input with success</label>\n  <input type="text" class="form-control" id="myInput">\n</div>
18 | disabled Disabled state.\n\nFor <a>  Opera <18, IE11 use JS to disable such link.
19 | dropdown-toggle
20 | fieldset
21 | label
22 | label-danger
23 | label-default
24 | label-info
25 | label-primary
26 | label-success
27 | label-warning
28 | left See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
29 | radio
30 | radio-inline
31 | right See .carousel-control\n <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
32 | sr-only Screen readers will have trouble with your forms if you don't include a label for every input.\nFor these inline forms, you can hide the labels using the .sr-only class. \n  <div class="form-group">\n    <label class="sr-only" for="pwf">Password</label>\n    <input type="password" class="form-control" id="pwd" placeholder="Password">\n  </div>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/label-data-dismiss:
--------------------------------------------------------------------------------
1 | alert
2 | modal <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n  <span aria-hidden="true">&times;</span></button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/label-data-slide:
--------------------------------------------------------------------------------
1 | next
2 | prev


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/label-data-target:
--------------------------------------------------------------------------------
1 | #bs- d
2 | #myModal Activate modal, example.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/label-data-toggle:
--------------------------------------------------------------------------------
1 | button Single toggle button\nPre-toggled buttons need .active and aria-pressed="true"\n<button type="button" class="btn btn-primary" data-toggle="button"\n        aria-pressed="false" autocomplete="off">\n  Single toggle\n</button>
2 | buttons Togglable Checkbox or radio buttons.\n<div class="btn-group" data-toggle="buttons">\n  <label class="btn btn-primary active">\n    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 2\n  </label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 3\n </label>\n</div>
3 | collapse
4 | dropdown <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
5 | modal Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.\n\n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/li-class:
--------------------------------------------------------------------------------
1 | active <ul class="nav nav-tabs">\n  <li class="active"><a href=..\n  <li>..
2 | disabled This class will only change the <a>'s appearance, not its functionality.\nUse custom JavaScript to disable links here.
3 | divider Add a divider to separate series of links in a dropdown menu.
4 | dropdown-header Add a header to label sections of actions in any dropdown menu.
5 | list-group-item <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
6 | next You can align each link to the sides .pager\n<nav>\n  <ul class="pager">\n    <li class="previous"><a href="#">Older</a></li>\n    <li class="next"><a href="#">Newer</a></li>\n  </ul>\n</nav>
7 | previous You can align each link to the sides .pager\n<nav>\n  <ul class="pager">\n    <li class="previous"><a href="#">Older</a></li>\n    <li class="next"><a href="#">Newer</a></li>\n  </ul>\n</nav>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/li-data-slide-to:
--------------------------------------------------------------------------------
1 | 0
2 | 1
3 | 2


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/li-data-toggle:
--------------------------------------------------------------------------------
1 | pill <ul class="nav nav-pills">\n <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>\n <li><a href="#tab_b" data-toggle="pill">Pill B</a></li>\n <li><a href="#tab_c" data-toggle="pill">Pill C</a></li>\n <li><a href="#tab_d" data-toggle="pill">Pill D</a></li>\n</ul>\n<div class="tab-content">\n  <div class="tab-pane active" id="tab_a">...</div>
2 | tab <ul class="nav nav-tabs">\n <li class="active"><a href="#home" data-toggle="tab">Home</a></li>\n..\n<div class="tab-content">\n  <div class="tab-pane active" id="home">...</div>


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/nav-class:
--------------------------------------------------------------------------------
1 | navbar <nav class="navbar navbar-default"
2 | navbar-default Opposite to .navbar-inverse
3 | navbar-fixed-bottom Fixed bottom.\nAlso add padding! "body { padding-bottom: 70px; }" (after bs css)
4 | navbar-fixed-top Fixed to top.\nInclude a .container or .container-fluid to center and pad navbar content.\nAlso add padding! "body { padding-top: 70px; }" (after bs css)
5 | navbar-inverse Modify the look of the navbar Opposite to .navbar-default
6 | navbar-left These classes are mixin-ed version of .pull-left
7 | navbar-right These classes are mixin-ed version of .pull-right
8 | navbar-static-top Create a full-width navbar that scrolls away with the page by adding


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/object-class:
--------------------------------------------------------------------------------
1 | embed-responsive-item Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/ol-class:
--------------------------------------------------------------------------------
 1 | breadcrumb Indicate the current page's location within a navigational hierarchy.\nSeparators are automatically added in CSS through :before and content.\n\nHome / Links / Data\n<ol class="breadcrumb">\n  <li><a href="#">Home</a></li>\n  <li><a href="#">Library</a></li>\n  <li class="active">Data</li>\n</ol>
 2 | carousel-indicators <ol class="carousel-indicators">\n  <li data-target="#carousel-example" data-slide-to="0" class="active"></li>\n  <li data-target="#carousel-example" data-slide-to="1"></li>\n  <li data-target="#carousel-example" data-slide-to="2"></li>\n</ol>
 3 | list-group <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
 4 | list-inline Place all list items on a single line with display: inline-block; and some light padding.
 5 | list-unstyled Remove the default list-style and left margin on list items (immediate children only).\nThis only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
 6 | nav
 7 | nav-justified
 8 | nav-pills
 9 | nav-stacked Vertically stackable pills\n<ul class="nav nav-pills nav-stacked">\n  ..\n</ul>
10 | nav-tabs Example with data-toggle\n<div role="tabpanel">\n\n<!-- Nav tabs -->\n<ul class="nav nav-tabs" role="tablist">\n <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>\n <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>\n</ul>\n<!-- Tab panes -->\n<div class="tab-content">\n <div role="tabpanel" class="tab-pane active" id="home">...</div>\n <div role="tabpanel" class="tab-pane" id="profile">...</div>\n</div>\n\n</div>
11 | navbar-nav
12 | pager By default, the pager centers links.\n <nav>\n   <ul class="pager">\n     <li><a href="#">Previous</a></li>\n     <li><a href="#">Next</a></li>\n   </ul>\n </nav>
13 | pagination Provide pagination links\n\n <nav>\n   <ul class="pagination">\n     <li>\n       <a href="#" aria-label="Previous">\n         <span aria-hidden="true">&laquo;</span>\n       </a>\n     </li>\n     <li><a href="#">1</a></li>\n     <li><a href="#">2</a></li>\n     ..etc..
14 | pagination-lg
15 | pagination-sm


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/p-class:
--------------------------------------------------------------------------------
 1 | bg-danger Contextual backgrounds
 2 | bg-info Contextual backgrounds
 3 | bg-primary Contextual backgrounds
 4 | bg-success Contextual backgrounds
 5 | bg-warning Contextual backgrounds
 6 | center-block Center content blocks
 7 | form-control-static Place plain text next to a form label within a form\n <form class="form-horizontal" role="form">\n   <div class="form-group">\n   <label class="col-sm-2 control-label">Email</label>\n    <div class="col-sm-10">\n      <p class="form-control-static">email@example.com</p>\n    </div>\n  </div>
 8 | hidden Force an element to be hidden including for screen readers
 9 | input-group Place one add-on or button on either side of an input\n <div class="input-group">\n   <span class="input-group-addon">@</span>\n   <input type="text" class="form-control" placeholder="Username">\n </div>
10 | input-group-btn Segmented buttons\n <div class="input-group">\n  <div class="input-group-btn">\n     Button and dropdown menu here\n  </div>\n  <input type="text" class="form-control">\n</div>
11 | input-group-lg
12 | input-group-sm
13 | list-group-item-text <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
14 | navbar-text Text inside navbad
15 | pull-left Float an element to the left with a class
16 | pull-right Float an element to the right with a class
17 | show Force an element to be shown including for screen readers
18 | text-danger Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
19 | text-info Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
20 | text-muted Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
21 | text-primary Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
22 | text-success Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
23 | text-warning Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/select-class:
--------------------------------------------------------------------------------
1 | form-control Set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
2 | input-lg modifier classes to decrease or increase the height and font-size of form controls
3 | input-sm modifier classes to decrease or increase the height and font-size of form controls


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/span-class:
--------------------------------------------------------------------------------
 1 | alert
 2 | alert-danger
 3 | alert-dismissible Build on any alert by adding an optional .alert-dismissible and close button.\nBe sure to use the <button> element with the data attribut\n\ndata-dismiss="alert"\n\n<div class="alert alert-warning alert-dismissible" role="alert">\n  <button type="button" class="close" data-dismiss="alert" aria-label="Close">\n    <span aria-hidden="true">&times;</span>\n  </button>\n  <strong>Warning!</strong> Better check yourself, you're not looking too good.\n</div>
 4 | alert-info
 5 | alert-success
 6 | alert-warning
 7 | badge Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
 8 | bg-danger Contextual backgrounds
 9 | bg-info Contextual backgrounds
10 | bg-primary Contextual backgrounds
11 | bg-success Contextual backgrounds
12 | bg-warning Contextual backgrounds
13 | caption caption of thumb
14 | caret Use carets to indicate dropdown functionality and direction
15 | center-block Center content blocks
16 | hidden Force an element to be hidden including for screen readers
17 | icon-bar May be used in ".navbar-toggle .collapsed" as collapse toggle button\n<span class="icon-bar"></span>\n<span class="icon-bar"></span>\n<span class="icon-bar"></span>      
18 | input-group Place one add-on or button on either side of an input\n <div class="input-group">\n   <span class="input-group-addon">@</span>\n   <input type="text" class="form-control" placeholder="Username">\n </div>
19 | input-group-addon <div class="input-group">\n   <span class="input-group-addon">@</span>\n   <input type="text" class="form-control" placeholder="Username">
20 | input-group-btn Segmented buttons\n <div class="input-group">\n  <div class="input-group-btn">\n     Button and dropdown menu here\n  </div>\n  <input type="text" class="form-control">\n</div>
21 | input-group-lg
22 | input-group-sm
23 | label
24 | label-danger
25 | label-default
26 | label-info
27 | label-primary
28 | label-success
29 | label-warning
30 | media-bottom
31 | media-left
32 | media-middle
33 | media-right
34 | navbar-text Text inside navbad
35 | pull-left Float an element to the left with a class
36 | pull-right Float an element to the right with a class
37 | show Force an element to be shown including for screen readers
38 | sr-only Screen readers\n<span id="err" class="sr-only">(error)</span>          
39 | text-danger Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
40 | text-info Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
41 | text-muted Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
42 | text-primary Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
43 | text-success Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
44 | text-warning Contextual colors\nConvey meaning through color with a handful of emphasis utility classes.\nThese may also be applied to links and will darken on hover just like our default link styles.
45 | thumbnail


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/table-class:
--------------------------------------------------------------------------------
1 | table For basic styling—light padding and only horizontal dividers.\nIt may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
2 | table-bordered Bordered version
3 | table-condensed Make tables more compact by cutting cell padding in half.
4 | table-hover Enable a hover state on table rows within a <tbody>
5 | table-responsive Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).\nWhen viewing on anything larger than 768px wide, you will not see any difference in these tables.
6 | table-striped Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/td-class:
--------------------------------------------------------------------------------
1 | active
2 | danger
3 | info
4 | success
5 | warning


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/textarea-class:
--------------------------------------------------------------------------------
1 | form-control Set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
2 | input-lg modifier classes to decrease or increase the height and font-size of form controls
3 | input-sm modifier classes to decrease or increase the height and font-size of form controls


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/tr-class:
--------------------------------------------------------------------------------
1 | active
2 | danger
3 | info
4 | success
5 | warning


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/ul-class:
--------------------------------------------------------------------------------
 1 | breadcrumb Indicate the current page's location within a navigational hierarchy.\nSeparators are automatically added in CSS through :before and content.\n\nHome / Links / Data\n<ol class="breadcrumb">\n  <li><a href="#">Home</a></li>\n  <li><a href="#">Library</a></li>\n  <li class="active">Data</li>\n</ol>
 2 | carousel-indicators <ol class="carousel-indicators">\n  <li data-target="#carousel-example" data-slide-to="0" class="active"></li>\n  <li data-target="#carousel-example" data-slide-to="1"></li>\n  <li data-target="#carousel-example" data-slide-to="2"></li>\n</ol>
 3 | dropdown-menu <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">\n <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>\n <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>\n <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>\n</ul>
 4 | dropdown-menu-left
 5 | dropdown-menu-right
 6 | list-group <div class="list-group">\n <a href="#" class="list-group-item active">\n  <h4 class="list-group-item-heading">List group item heading</h4>\n  <p class="list-group-item-text">...</p>\n </a>\n</div>\n\nor\n\n<ul class="list-group">\n  <li class="list-group-item"...
 7 | list-inline Place all list items on a single line with display: inline-block; and some light padding.
 8 | list-unstyled Remove the default list-style and left margin on list items (immediate children only).\nThis only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
 9 | nav
10 | nav-justified
11 | nav-pills
12 | nav-stacked Vertically stackable pills\n<ul class="nav nav-pills nav-stacked">\n  ..\n</ul>
13 | nav-tabs Example with data-toggle\n<div role="tabpanel">\n\n<!-- Nav tabs -->\n<ul class="nav nav-tabs" role="tablist">\n <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>\n <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>\n</ul>\n<!-- Tab panes -->\n<div class="tab-content">\n <div role="tabpanel" class="tab-pane active" id="home">...</div>\n <div role="tabpanel" class="tab-pane" id="profile">...</div>\n</div>\n\n</div>
14 | navbar-nav
15 | pager By default, the pager centers links.\n <nav>\n   <ul class="pager">\n     <li><a href="#">Previous</a></li>\n     <li><a href="#">Next</a></li>\n   </ul>\n </nav>
16 | pagination Provide pagination links\n\n <nav>\n   <ul class="pagination">\n     <li>\n       <a href="#" aria-label="Previous">\n         <span aria-hidden="true">&laquo;</span>\n       </a>\n     </li>\n     <li><a href="#">1</a></li>\n     <li><a href="#">2</a></li>\n     ..etc..
17 | pagination-lg
18 | pagination-sm


--------------------------------------------------------------------------------
/html-stuff/html-attributes-complete/video-class:
--------------------------------------------------------------------------------
1 | embed-responsive-item Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/a:
--------------------------------------------------------------------------------
1 | data-dismiss .alert-dismissible. Close alert
2 | data-loading-text A loading state on a button\ndata-loading-text="Loading..."
3 | data-slide Carousel controll, next, prev.
4 | data-target 1. Link to collected nav links, forms, and other content for toggling\n2. Activate a modal \n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
5 | data-toggle Toggle facility


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/button:
--------------------------------------------------------------------------------
1 | data-dismiss .alert-dismissible. Close alert
2 | data-loading-text A loading state on a button\ndata-loading-text="Loading..."
3 | data-slide Carousel controll, next, prev.
4 | data-target 1. Link to collected nav links, forms, and other content for toggling\n2. Activate a modal \n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
5 | data-toggle Toggle facility


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/div:
--------------------------------------------------------------------------------
1 | data-backdrop Includes a modal-backdrop element.\nDefault true\nAlternatively, specify static for a backdrop which doesn't close the modal on click.\n<div id="myModal" class="modal fade" role="dialog" data-backdrop="true">
2 | data-interval The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
3 | data-keyboard Closes the modal when escape key is pressed. Default true. Carousel - react for keyboard
4 | data-offset-bottom
5 | data-offset-top
6 | data-pause Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
7 | data-ride
8 | data-show Shows the modal when initialized. Default true
9 | data-wrap Whether the carousel should cycle continuously or have hard stops.\nDefault true.


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/fieldset:
--------------------------------------------------------------------------------
1 | disabled


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/global:
--------------------------------------------------------------------------------
 1 | data-animation Animation for tooltip/popover.
 2 | data-container
 3 | data-content Content of popover.
 4 | data-delay Delay, Number or Object '{ "show": 500, "hide": 100 }'\nNote, use data-delay='{"..' \n  not data-delay="{.."
 5 | data-html Insert HTML into the tooltip/popover. If false, jQuery's TEXT method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
 6 | data-offset Pixels to offset from top when calculating position of scroll.
 7 | data-placement How to position the tooltip/popover.\nWhen "auto" is specified, it will dynamically reorient the tooltip/popover.\n"auto left" - left if possible
 8 | data-selector String\nIf a selector is provided, tooltip/popover objects will be delegated to the specified targets.\nIn practice, this is used to enable dynamic HTML content to have tooltips/popover added.
 9 | data-spy
10 | data-target For scrollspy.\n<body data-spy="scroll" data-target=".navbar-example">\n..\n  <div class="navbar-example">\n   <ul class="nav nav-tabs" role="tablist">\n..\n   </ul>\n  </div>\n..\n</body>
11 | data-template For tooltip/popover, base html
12 | data-title Default title value if not present "title" attribute
13 | data-trigger How tooltip/popover is triggered - click | hover | focus | manual.\nYou may pass multiple triggers; separate them with a space.
14 | data-viewport String or object.\nKeeps the tooltip/popover within the bounds of this element.\nExample: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/input:
--------------------------------------------------------------------------------
1 | data-dismiss .alert-dismissible. Close alert
2 | data-loading-text A loading state on a button\ndata-loading-text="Loading..."
3 | data-slide Carousel controll, next, prev.
4 | data-target 1. Link to collected nav links, forms, and other content for toggling\n2. Activate a modal \n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
5 | data-toggle Toggle facility


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/label:
--------------------------------------------------------------------------------
1 | data-dismiss .alert-dismissible. Close alert
2 | data-loading-text A loading state on a button\ndata-loading-text="Loading..."
3 | data-slide Carousel controll, next, prev.
4 | data-target 1. Link to collected nav links, forms, and other content for toggling\n2. Activate a modal \n<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
5 | data-toggle Toggle facility


--------------------------------------------------------------------------------
/html-stuff/html-attributes-list/li:
--------------------------------------------------------------------------------
1 | data-slide-to Carousel controll


--------------------------------------------------------------------------------
/html-stuff/html-attributes-short-docs/div-data-offset-bottom:
--------------------------------------------------------------------------------
1 | Pixels to offset from screen when calculating position of scroll.
2 | If a single number is provided, the offset will be applied in both top and bottom directions.
3 | To provide a unique, bottom and top offset just provide an object offset:
4 |   { top: 10 } or offset: { top: 10, bottom: 5 }.
5 | Use a function when you need to dynamically calculate an offset.
6 | 


--------------------------------------------------------------------------------
/html-stuff/html-attributes-short-docs/div-data-offset-top:
--------------------------------------------------------------------------------
1 | Pixels to offset from screen when calculating position of scroll.
2 | If a single number is provided, the offset will be applied in both top and bottom directions.
3 | To provide a unique, bottom and top offset just provide an object offset:
4 |   { top: 10 } or offset: { top: 10, bottom: 5 }.
5 | Use a function when you need to dynamically calculate an offset.
6 | 


--------------------------------------------------------------------------------
/html-stuff/html-attributes-short-docs/div-data-ride:
--------------------------------------------------------------------------------
1 | Used to mark a carousel as animating starting at page load.
2 | It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
3 | <div id="carousel-example" class="carousel slide" data-ride="carousel">
4 | 


--------------------------------------------------------------------------------
/html-stuff/html-attributes-short-docs/fieldset-disabled:
--------------------------------------------------------------------------------
1 | Disable all the controls within the <fieldset> at once.
2 | For <a class="btn">  Opera <18, IE11 use JS to disable such link.
3 | 
4 | While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>.
5 | Use custom JavaScript to disable the fieldset in these browsers.
6 | 


--------------------------------------------------------------------------------
/html-stuff/html-attributes-short-docs/global-data-container:
--------------------------------------------------------------------------------
1 | Appends the tooltip/popover to a specific element.
2 | Example: container: 'body'.
3 | Allows you to position the tooltip/popover in the flow of the document near the triggering element.
4 | Prevent the tooltip/popover from floating away from the triggering element during a window resize.
5 | 


--------------------------------------------------------------------------------
/html-stuff/html-attributes-short-docs/global-data-spy:
--------------------------------------------------------------------------------
 1 | Automatically updating nav targets based on scroll position.
 2 | CSS
 3 |   body { position: relative; }
 4 | HTML
 5 |   <body data-spy="scroll" data-target=".navbar-example">
 6 |   ..
 7 |    <div class="navbar-example">
 8 |     <ul class="nav nav-tabs" role="tablist">
 9 |     ..
10 |     </ul>
11 |    </div>
12 |   ..
13 |   </body>
14 | 


--------------------------------------------------------------------------------
/html-stuff/html-tag-list:
--------------------------------------------------------------------------------
 1 | abbr
 2 | address
 3 | blockquote
 4 | cite
 5 | code
 6 | del
 7 | em
 8 | footer
 9 | ins
10 | kbd
11 | mark
12 | pre
13 | s
14 | samp
15 | section
16 | small
17 | strong
18 | u
19 | var


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/abbr:
--------------------------------------------------------------------------------
1 | Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover.
2 | Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
3 | <abbr title="attribute">attr</abbr>
4 | 


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/address:
--------------------------------------------------------------------------------
 1 | Present contact information for the nearest ancestor or the entire body of work.
 2 | Preserve formatting by ending all lines with <br>.
 3 | 
 4 | <address>
 5 |   <strong>Twitter, Inc.</strong><br>
 6 |   795 Folsom Ave, Suite 600<br>
 7 |   San Francisco, CA 94107<br>
 8 |   <abbr title="Phone">P:</abbr> (123) 456-7890
 9 | </address>
10 | 


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/blockquote:
--------------------------------------------------------------------------------
1 | Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>
2 | Add a <footer> for identifying the source. Wrap the name of the source work in <cite>
3 | 


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/cite:
--------------------------------------------------------------------------------
1 | (<blockquote>) Naming a source.


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/del:
--------------------------------------------------------------------------------
1 | Indicating blocks of text that have been deleted


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/em:
--------------------------------------------------------------------------------
1 | Italics


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/footer:
--------------------------------------------------------------------------------
1 | (<blockquote>) Naming a source. Identifying the source


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/ins:
--------------------------------------------------------------------------------
1 | Indicating additions to the document


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/mark:
--------------------------------------------------------------------------------
1 | Highlighting text


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/s:
--------------------------------------------------------------------------------
1 | Indicating blocks of text that are no longer relevant


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/small:
--------------------------------------------------------------------------------
1 | For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent.
2 | 
3 | Heading elements receive their own font-size for nested <small> elements.
4 | 


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/strong:
--------------------------------------------------------------------------------
1 | Bold. Emphasizing a snippet of text with a heavier font-weight.


--------------------------------------------------------------------------------
/html-stuff/html-tag-short-docs/u:
--------------------------------------------------------------------------------
1 | Underline text


--------------------------------------------------------------------------------