POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/customize.html

   1 ---
   2 layout: default
   3 title: Customize and download
   4 slug: customize
   5 lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
   6 ---
   7
   8
   9 <!-- less.js isn't IE8-compatible and throws an exception during initialization, so our Blob compatibility check and error messaging code never get called in that case.
  10   So we use a conditional comment instead to inform folks about the lack of IE8 support.
  11 -->
  12 <!--[if lt IE 9]>
  13   <style>
  14     .bs-customizer,
  15     .bs-customizer-import,
  16     .bs-docs-sidebar {
  17       display: none;
  18     }
  19   </style>
  20   <div class="alert alert-danger">
  21     <strong>The Bootstrap Customizer does not support IE9 and below.</strong><br>
  22     Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
  23   </div>
  24 <![endif]-->
  25
  26 <!-- Customizer form -->
  27
  28 <div id="defaults-change-alert" class="alert alert-warning alert-dismissible" role="alert">
  29   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  30   <strong>Heads up!</strong> The default value for <code>@brand-primary</code> has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading.
  31 </div>
  32
  33 <div class="bs-docs-section bs-customizer-import">
  34   <div id="import-drop-target" class="bs-dropzone">
  35     <div class="import-header">
  36       <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
  37     </div>
  38     <p class="lead">Have an existing configuration? Upload your <code>config.json</code> to import it.</p>
  39     <p>Drag and drop here, or <label id="import-manual-trigger" class="btn-link">manually upload<input type="file" id="import-file-select" class="hidden"></label>.</p>
  40     <hr>
  41     <p><strong>Don't have one?</strong> That's okay—just start customizing the fields below.</p>
  42   </div>
  43 </div>
  44
  45 <form class="bs-customizer">
  46   <div class="bs-docs-section" id="less-section">
  47     <button class="btn btn-default toggle" type="button">Toggle all</button>
  48     <h1 id="less" class="page-header">Less files</h1>
  49
  50     <p class="lead">Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
  51
  52     <div class="row">
  53       <div class="col-xs-6 col-sm-4">
  54         <h3>Common CSS</h3>
  55         <div class="checkbox">
  56           <label>
  57             <input type="checkbox" checked value="print.less">
  58             Print media styles
  59           </label>
  60         </div>
  61         <div class="checkbox">
  62           <label>
  63             <input type="checkbox" checked value="type.less">
  64             Typography
  65           </label>
  66         </div>
  67         <div class="checkbox">
  68           <label>
  69             <input type="checkbox" checked value="code.less">
  70             Code
  71           </label>
  72         </div>
  73         <div class="checkbox">
  74           <label>
  75             <input type="checkbox" checked value="grid.less">
  76             Grid system
  77           </label>
  78         </div>
  79         <div class="checkbox">
  80           <label>
  81             <input type="checkbox" checked value="tables.less">
  82             Tables
  83           </label>
  84         </div>
  85         <div class="checkbox">
  86           <label>
  87             <input type="checkbox" checked value="forms.less" data-dependents="navbar.less,input-groups.less">
  88             Forms
  89           </label>
  90         </div>
  91         <div class="checkbox">
  92           <label>
  93             <input type="checkbox" checked value="buttons.less" data-dependents="button-groups.less">
  94             Buttons
  95           </label>
  96         </div>
  97         <div class="checkbox">
  98           <label>
  99             <input type="checkbox" checked value="responsive-utilities.less">
 100             Responsive utilities
 101           </label>
 102         </div>
 103       </div><!-- .col-xs-6 .col-sm-4 -->
 104
 105       <div class="col-xs-6 col-sm-4">
 106         <h3>Components</h3>
 107         <div class="checkbox">
 108           <label>
 109             <input type="checkbox" checked value="glyphicons.less">
 110             Glyphicons
 111           </label>
 112         </div>
 113         <div class="checkbox">
 114           <label>
 115             <input type="checkbox" checked value="button-groups.less" data-dependencies="buttons.less">
 116             Button groups
 117           </label>
 118         </div>
 119         <div class="checkbox">
 120           <label>
 121             <input type="checkbox" checked value="input-groups.less" data-dependencies="forms.less">
 122             Input groups
 123           </label>
 124         </div>
 125         <div class="checkbox">
 126           <label>
 127             <input type="checkbox" checked value="navs.less" data-dependents="navbar.less">
 128             Navs
 129           </label>
 130         </div>
 131         <div class="checkbox">
 132           <label>
 133             <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,navs.less">
 134             Navbar
 135           </label>
 136         </div>
 137         <div class="checkbox">
 138           <label>
 139             <input type="checkbox" checked value="breadcrumbs.less">
 140             Breadcrumbs
 141           </label>
 142         </div>
 143         <div class="checkbox">
 144           <label>
 145             <input type="checkbox" checked value="pagination.less">
 146             Pagination
 147           </label>
 148         </div>
 149         <div class="checkbox">
 150           <label>
 151             <input type="checkbox" checked value="pager.less">
 152             Pager
 153           </label>
 154         </div>
 155         <div class="checkbox">
 156           <label>
 157             <input type="checkbox" checked value="labels.less">
 158             Labels
 159           </label>
 160         </div>
 161         <div class="checkbox">
 162           <label>
 163             <input type="checkbox" checked value="badges.less">
 164             Badges
 165           </label>
 166         </div>
 167         <div class="checkbox">
 168           <label>
 169             <input type="checkbox" checked value="jumbotron.less">
 170             Jumbotron
 171           </label>
 172         </div>
 173         <div class="checkbox">
 174           <label>
 175             <input type="checkbox" checked value="thumbnails.less">
 176             Thumbnails
 177           </label>
 178         </div>
 179         <div class="checkbox">
 180           <label>
 181             <input type="checkbox" checked value="alerts.less">
 182             Alerts
 183           </label>
 184         </div>
 185         <div class="checkbox">
 186           <label>
 187             <input type="checkbox" checked value="progress-bars.less">
 188             Progress bars
 189           </label>
 190         </div>
 191         <div class="checkbox">
 192           <label>
 193             <input type="checkbox" checked value="media.less">
 194             Media items
 195           </label>
 196         </div>
 197         <div class="checkbox">
 198           <label>
 199             <input type="checkbox" checked value="list-group.less">
 200             List groups
 201           </label>
 202         </div>
 203         <div class="checkbox">
 204           <label>
 205             <input type="checkbox" checked value="panels.less">
 206             Panels
 207           </label>
 208         </div>
 209         <div class="checkbox">
 210           <label>
 211             <input type="checkbox" checked value="responsive-embed.less">
 212             Responsive embed
 213           </label>
 214         </div>
 215         <div class="checkbox">
 216           <label>
 217             <input type="checkbox" checked value="wells.less">
 218             Wells
 219           </label>
 220         </div>
 221         <div class="checkbox">
 222           <label>
 223             <input type="checkbox" checked value="close.less">
 224             Close icon
 225           </label>
 226         </div>
 227       </div><!-- .col-xs-6 .col-sm-4 -->
 228
 229       <div class="col-xs-6 col-sm-4">
 230         <h3>JavaScript components</h3>
 231         <div class="checkbox">
 232           <label>
 233             <input type="checkbox" checked value="component-animations.less">
 234             Component animations (for JS)
 235           </label>
 236         </div>
 237         <div class="checkbox">
 238           <label>
 239             <input type="checkbox" checked value="dropdowns.less">
 240             Dropdowns
 241           </label>
 242         </div>
 243         <div class="checkbox">
 244           <label>
 245             <input type="checkbox" checked value="tooltip.less">
 246             Tooltips
 247           </label>
 248         </div>
 249         <div class="checkbox">
 250           <label>
 251             <input type="checkbox" checked value="popovers.less">
 252             Popovers
 253           </label>
 254         </div>
 255         <div class="checkbox">
 256           <label>
 257             <input type="checkbox" checked value="modals.less">
 258             Modals
 259           </label>
 260         </div>
 261         <div class="checkbox">
 262           <label>
 263             <input type="checkbox" checked value="carousel.less">
 264             Carousel
 265           </label>
 266         </div>
 267       </div><!-- .col-xs-6 .col-sm-4 -->
 268     </div><!-- /.row -->
 269   </div>
 270
 271   <div class="bs-docs-section" id="plugin-section">
 272     <button class="btn btn-default toggle" type="button">Toggle all</button>
 273     <h1 id="plugins" class="page-header">jQuery plugins</h1>
 274
 275     <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
 276     <div class="row">
 277       <div class="col-lg-6">
 278         <h4>Linked to components</h4>
 279         <div class="checkbox">
 280           <label>
 281             <input type="checkbox" checked value="alert.js">
 282             Alert dismissal
 283           </label>
 284         </div>
 285         <div class="checkbox">
 286           <label>
 287             <input type="checkbox" checked value="button.js">
 288             Advanced buttons
 289           </label>
 290         </div>
 291         <div class="checkbox">
 292           <label>
 293             <input type="checkbox" checked value="carousel.js">
 294             Carousel functionality
 295           </label>
 296         </div>
 297         <div class="checkbox">
 298           <label>
 299             <input type="checkbox" checked value="dropdown.js">
 300             Dropdowns
 301           </label>
 302         </div>
 303         <div class="checkbox">
 304           <label>
 305             <input type="checkbox" checked value="modal.js">
 306             Modals
 307           </label>
 308         </div>
 309         <div class="checkbox">
 310           <label>
 311             <input type="checkbox" checked value="tooltip.js">
 312             Tooltips
 313           </label>
 314         </div>
 315         <div class="checkbox">
 316           <label>
 317             <input type="checkbox" checked value="popover.js" data-dependencies="tooltip.js">
 318             Popovers <small>(requires Tooltips)</small>
 319           </label>
 320         </div>
 321         <div class="checkbox">
 322           <label>
 323             <input type="checkbox" checked value="tab.js">
 324             Togglable tabs
 325           </label>
 326         </div>
 327       </div>
 328       <div class="col-lg-6">
 329         <h4>Magic</h4>
 330         <div class="checkbox">
 331           <label>
 332             <input type="checkbox" checked value="affix.js">
 333             Affix
 334           </label>
 335         </div>
 336         <div class="checkbox">
 337           <label>
 338             <input type="checkbox" checked value="collapse.js">
 339             Collapse
 340           </label>
 341         </div>
 342         <div class="checkbox">
 343           <label>
 344             <input type="checkbox" checked value="scrollspy.js">
 345             Scrollspy
 346           </label>
 347         </div>
 348         <div class="checkbox">
 349           <label>
 350             <input type="checkbox" checked value="transition.js">
 351             Transitions <small>(required for any kind of animation)</small>
 352           </label>
 353         </div>
 354       </div>
 355     </div>
 356
 357     <div class="bs-callout bs-callout-info">
 358       <h4>Produces two files</h4>
 359       <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
 360     </div>
 361
 362     <div class="bs-callout bs-callout-danger">
 363       <h4>jQuery required</h4>
 364       <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
 365     </div>
 366   </div>
 367
 368   <div class="bs-docs-section" id="less-variables-section">
 369     <button class="btn btn-default toggle" type="button">Reset to defaults</button>
 370     <h1 id="less-variables" class="page-header">Less variables</h1>
 371
 372     <p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
 373     {% include customizer-variables.html %}
 374   </div>
 375
 376   <div class="bs-docs-section">
 377     <h1 id="download" class="page-header">Download</h1>
 378
 379     <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
 380     <div id="firefox-customizer-alert" class="alert alert-warning alert-dismissible fade in" role="alert">
 381       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 382       <h4>Warning for Firefox users!</h4>
 383       <p>Due to a possible browser bug, the customizer download randomly fails in Firefox. If this happens to you, we advise either retrying in Firefox or using one of the other browsers supported by the Customizer (Chrome or IE10+).</p>
 384     </div>
 385     <div class="bs-customize-download">
 386       <button type="submit" id="btn-compile" disabled class="btn btn-block btn-lg btn-outline" onclick="ga('send', 'event', 'Customize', 'Download', 'Customize and Download');">Compile and Download</button>
 387     </div>
 388   </div><!-- /download -->
 389 </form>