rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'master' into restore_grid_mixins

Browse Source 
Conflicts:
	dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto 2013-10-13 18:32:34 -07:00
commit 265fda7903
39 changed files with 356 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CONTRIBUTING.md
View File

@ -36,7 +36,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
### CSS ### CSS
- Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/) - Adhere to the [RECESS CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
- Multiple-line approach (one property and value per line) - Multiple-line approach (one property and value per line)
- Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`) - Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
- End all lines with a semi-colon - End all lines with a semi-colon

6
Gruntfile.js
View File

@ -3,6 +3,7 @@
module.exports = function(grunt) { module.exports = function(grunt) {
"use strict"; "use strict";
var btoa = require('btoa')
// Project configuration. // Project configuration.
grunt.initConfig({ grunt.initConfig({
@ -156,6 +157,7 @@ module.exports = function(grunt) {
// These plugins provide necessary tasks. // These plugins provide necessary tasks.
grunt.loadNpmTasks('browserstack-runner');
grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-connect');
@ -167,7 +169,6 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-html-validation'); grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-jekyll'); grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner');
// Docs HTML validation task // Docs HTML validation task
grunt.registerTask('validate-html', ['jekyll', 'validation']); grunt.registerTask('validate-html', ['jekyll', 'validation']);
@ -209,7 +210,8 @@ module.exports = function(grunt) {
return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path) return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path)
}) })
.forEach(function (path) { .forEach(function (path) {
return files[path] = fs.readFileSync(type + '/' + path, 'utf8') var fullPath = type + '/' + path
return files[path] = (type == 'fonts' ? btoa(fs.readFileSync(fullPath)) : fs.readFileSync(fullPath, 'utf8'))
}) })
return 'var __' + type + ' = ' + JSON.stringify(files) + '\n' return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
} }

2
README.md
View File

@ -11,7 +11,7 @@ To get started, check out [http://getbootstrap.com](http://getbootstrap.com)!
Three quick start options are available: Three quick start options are available:
* [Download the latest release](https://github.com/twbs/bootstrap/releases/tag/v3.0.0). * [Download the latest release](https://github.com/twbs/bootstrap/releases/tag/v3.0.0).
* Clone the repo: `git clone git://github.com/twbs/bootstrap.git`. * Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
* Install with [Bower](http://bower.io): `bower install bootstrap`. * Install with [Bower](http://bower.io): `bower install bootstrap`.
Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more. Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.

2
_includes/footer.html
View File

@ -1,7 +1,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="{{ page.base_url }}docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.js"></script> <script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script> <script src="http://platform.twitter.com/widgets.js"></script>

2
_includes/header.html
View File

@ -21,7 +21,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="{{ page.base_url }}docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="{{ page.base_url }}docs-assets/js/respond.min.js"></script> <script src="{{ page.base_url }}docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->

2
_includes/nav-css.html
View File

@ -12,6 +12,7 @@
<li> <li>
<a href="#grid">Grid system</a> <a href="#grid">Grid system</a>
<ul class="nav"> <ul class="nav">
<li><a href="#grid-intro">Introduction</a></li>
<li><a href="#grid-media-queries">Media queries</a></li> <li><a href="#grid-media-queries">Media queries</a></li>
<li><a href="#grid-options">Grid options</a></li> <li><a href="#grid-options">Grid options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li> <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
@ -79,6 +80,7 @@
<a href="#helper-classes">Helper classes</a> <a href="#helper-classes">Helper classes</a>
<ul class="nav"> <ul class="nav">
<li><a href="#helper-classes-close">Close icon</a></li> <li><a href="#helper-classes-close">Close icon</a></li>
<li><a href="#helper-classes-carets">Carets</a></li>
<li><a href="#helper-classes-floats">Quick floats</a></li> <li><a href="#helper-classes-floats">Quick floats</a></li>
<li><a href="#helper-classes-center">Center content blocks</a></li> <li><a href="#helper-classes-center">Center content blocks</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li> <li><a href="#helper-classes-clearfix">Clearfix</a></li>

24
css.html
View File

@ -72,6 +72,16 @@ base_url: "../"
</div> </div>
<p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p> <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-intro">Introduction</h3>
<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
<ul>
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
</ul>
<p>Look to the examples for applying these principles to your code.</p>
<h3 id="grid-media-queries">Media queries</h3> <h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p> <p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p>
{% highlight css %} {% highlight css %}
@ -175,7 +185,7 @@ base_url: "../"
<p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p> <p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div>
@ -627,7 +637,7 @@ base_url: "../"
<h6>h6. Bootstrap heading</h6> <h6>h6. Bootstrap heading</h6>
{% endhighlight %} {% endhighlight %}
<p>Also included with headings is an autoscaling <code>&lt;small&gt;</code> element. Use it for smaller, gray secondary text in any heading.</p> <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.</p>
<div class="bs-example bs-example-type"> <div class="bs-example bs-example-type">
<table class="table"> <table class="table">
<tbody> <tbody>
@ -2258,6 +2268,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="helper-classes-carets">Carets</h3>
<p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
<div class="bs-example">
<span class="caret"></span>
</div>
{% highlight html %}
<span class="caret"></span>
{% endhighlight %}
<h3 id="helper-classes-floats">Quick floats</h3> <h3 id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p> <p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
{% highlight html %} {% highlight html %}

3
customize.html
View File

@ -629,9 +629,6 @@ base_url: "../"
<input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg"> <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
<label>@btn-info-border</label> <label>@btn-info-border</label>
<input type="text" class="form-control" placeholder="darken(@btn-info-bg, 5%)" data-var="@btn-info-border"> <input type="text" class="form-control" placeholder="darken(@btn-info-bg, 5%)" data-var="@btn-info-border">
<h4>Button hover</h4>
<label>@btn-hover-color</label>
<input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-hover-color">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h4>Success</h4> <h4>Success</h4>

41
dist/css/bootstrap.css vendored
View File

@ -495,7 +495,19 @@ h6 small,
.h3 small, .h3 small,
.h4 small, .h4 small,
.h5 small, .h5 small,
.h6 small { .h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: #999999; color: #999999;
@ -510,7 +522,10 @@ h3 {
h1 small, h1 small,
h2 small, h2 small,
h3 small { h3 small,
h1 .small,
h2 .small,
h3 .small {
font-size: 65%; font-size: 65%;
} }
@ -523,7 +538,10 @@ h6 {
h4 small, h4 small,
h5 small, h5 small,
h6 small { h6 small,
h4 .small,
h5 .small,
h6 .small {
font-size: 75%; font-size: 75%;
} }
@ -685,15 +703,18 @@ blockquote.pull-right {
} }
blockquote.pull-right p, blockquote.pull-right p,
blockquote.pull-right small { blockquote.pull-right small,
blockquote.pull-right .small {
text-align: right; text-align: right;
} }
blockquote.pull-right small:before { blockquote.pull-right small:before,
blockquote.pull-right .small:before {
content: ''; content: '';
} }
blockquote.pull-right small:after { blockquote.pull-right small:after,
blockquote.pull-right .small:after {
content: '\00A0 \2014'; content: '\00A0 \2014';
} }
@ -744,7 +765,7 @@ pre code {
color: inherit; color: inherit;
white-space: pre-wrap; white-space: pre-wrap;
background-color: transparent; background-color: transparent;
border: 0; border-radius: 0;
} }
.pre-scrollable { .pre-scrollable {
@ -4220,13 +4241,11 @@ textarea.input-group-sm > .input-group-btn > .btn {
clear: both; clear: both;
} }
.tab-content > .tab-pane, .tab-content > .tab-pane {
.pill-content > .pill-pane {
display: none; display: none;
} }
.tab-content > .active, .tab-content > .active {
.pill-content > .active {
display: block; display: block;
} }

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
docs-assets/css/docs.css
View File

@ -180,7 +180,7 @@ body {
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.bs-social { .bs-social {
text-align: left; text-align: left;
} }
@ -244,7 +244,7 @@ body {
color: #fff; color: #fff;
} }
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.bs-masthead { .bs-masthead {
text-align: left; text-align: left;
padding-top: 140px; padding-top: 140px;
@ -295,7 +295,7 @@ body {
position: relative; position: relative;
} }
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.bs-header { .bs-header {
font-size: 21px; font-size: 21px;
text-align: left; text-align: left;
@ -306,7 +306,7 @@ body {
} }
} }
@media screen and (min-width: 992px) { @media (min-width: 992px) {
.bs-header h1, .bs-header h1,
.bs-header p { .bs-header p {
margin-right: 380px; margin-right: 380px;
@ -361,7 +361,7 @@ body {
display: none; /* hide what I assume are tracking images */ display: none; /* hide what I assume are tracking images */
} }
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.carbonad { .carbonad {
margin: 0 !important; margin: 0 !important;
border-radius: 4px; border-radius: 4px;
@ -369,7 +369,7 @@ body {
} }
} }
@media screen and (min-width: 992px) { @media (min-width: 992px) {
.carbonad { .carbonad {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -383,14 +383,14 @@ body {
.bs-docs-home .carbonad { .bs-docs-home .carbonad {
margin: 0 -15px 40px !important; margin: 0 -15px 40px !important;
} }
@media screen and (min-width: 480px) { @media (min-width: 480px) {
.bs-docs-home .carbonad { .bs-docs-home .carbonad {
width: 330px !important; width: 330px !important;
margin: 0 auto 40px !important; margin: 0 auto 40px !important;
border-radius: 4px; border-radius: 4px;
} }
} }
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.bs-docs-home .carbonad { .bs-docs-home .carbonad {
float: left; float: left;
width: 330px !important; width: 330px !important;
@ -407,12 +407,12 @@ body {
margin-top: 10px; margin-top: 10px;
} }
} }
@media screen and (min-width: 992px) { @media (min-width: 992px) {
.bs-docs-home .carbonad { .bs-docs-home .carbonad {
position: static; position: static;
} }
} }
@media screen and (min-width: 1170px) { @media (min-width: 1170px) {
.bs-docs-home .carbonad { .bs-docs-home .carbonad {
margin-top: -25px !important; margin-top: -25px !important;
} }
@ -495,7 +495,7 @@ body {
} }
/* Show and affix the side nav when space allows it */ /* Show and affix the side nav when space allows it */
@media screen and (min-width: 992px) { @media (min-width: 992px) {
.bs-sidebar .nav > .active > ul { .bs-sidebar .nav > .active > ul {
display: block; display: block;
} }
@ -517,7 +517,7 @@ body {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media screen and (min-width: 1200px) { @media (min-width: 1200px) {
/* Widen the fixed sidebar again */ /* Widen the fixed sidebar again */
.bs-sidebar.affix-bottom, .bs-sidebar.affix-bottom,
.bs-sidebar.affix { .bs-sidebar.affix {
@ -641,7 +641,7 @@ h1[id] {
} }
/* Make the examples and snippets not full-width */ /* Make the examples and snippets not full-width */
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.bs-example { .bs-example {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -908,7 +908,7 @@ h1[id] {
} }
/* Show code snippets when we have the space */ /* Show code snippets when we have the space */
@media screen and (min-width: 481px) { @media (min-width: 481px) {
.highlight { .highlight {
display: block; display: block;
} }

3
docs-assets/js/application.js
View File

@ -90,9 +90,6 @@
btn.button('reset') btn.button('reset')
}, 3000) }, 3000)
}) })
// carousel demo
$('.bs-docs-carousel-example').carousel()
}) })
}(window.jQuery) }(window.jQuery)

19
docs-assets/js/customizer.js
View File

@ -31,13 +31,13 @@ window.onload = function () { // wait for load in a dumb way because B-0
return match && decodeURIComponent(match[1].replace(/\+/g, " ")); return match && decodeURIComponent(match[1].replace(/\+/g, " "));
} }
function createGist(configData) { function createGist(configJson) {
var data = { var data = {
"description": "Bootstrap Customizer Config", "description": "Bootstrap Customizer Config",
"public": true, "public": true,
"files": { "files": {
"config.json": { "config.json": {
"content": JSON.stringify(configData, null, 2) "content": configJson
} }
} }
} }
@ -107,7 +107,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
}) })
} }
function generateZip(css, js, fonts, complete) { function generateZip(css, js, fonts, config, complete) {
if (!css && !js) return showError('<strong>Ruh roh!</strong> No Bootstrap files selected.', new Error('no Bootstrap')) if (!css && !js) return showError('<strong>Ruh roh!</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
var zip = new JSZip() var zip = new JSZip()
@ -129,10 +129,14 @@ window.onload = function () { // wait for load in a dumb way because B-0
if (fonts) { if (fonts) {
var fontsFolder = zip.folder('fonts') var fontsFolder = zip.folder('fonts')
for (var fileName in fonts) { for (var fileName in fonts) {
fontsFolder.file(fileName, fonts[fileName]) fontsFolder.file(fileName, fonts[fileName], {base64: true})
} }
} }
if (config) {
zip.file('config.json', config)
}
var content = zip.generate({type:"blob"}) var content = zip.generate({type:"blob"})
complete(content) complete(content)
@ -262,14 +266,17 @@ window.onload = function () { // wait for load in a dumb way because B-0
var $downloadBtn = $('#btn-download') var $downloadBtn = $('#btn-download')
$compileBtn.on('click', function (e) { $compileBtn.on('click', function (e) {
var configData = getCustomizerData()
var configJson = JSON.stringify(configData, null, 2)
e.preventDefault() e.preventDefault()
$compileBtn.attr('disabled', 'disabled') $compileBtn.attr('disabled', 'disabled')
generateZip(generateCSS(), generateJavascript(), generateFonts(), function (blob) { generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) {
$compileBtn.removeAttr('disabled') $compileBtn.removeAttr('disabled')
saveAs(blob, "bootstrap.zip") saveAs(blob, "bootstrap.zip")
createGist(getCustomizerData()) createGist(configJson)
}) })
}) })

425
docs-assets/js/holder.js Executable file → Normal file
View File

@ -1,9 +1,9 @@
/* /*
Holder - 2.0 - client side image placeholders Holder - 2.1 - client side image placeholders
(c) 2012-2013 Ivan Malopinsky / http://imsky.co (c) 2012-2013 Ivan Malopinsky / http://imsky.co
Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 Provided under the MIT License.
Commercial use requires attribution. Commercial use requires attribution.
*/ */
@ -15,176 +15,6 @@ var preempted = false,
fallback = false, fallback = false,
canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
//getElementsByClassName polyfill
document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
//getComputedStyle polyfill
window.getComputedStyle||(window.getComputedStyle=function(e,t){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}};
//https://gist.github.com/991057 by Jed Schmidt with modifications
function selector(a){
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
var ret=[]; b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]); return ret;
}
//shallow object property extend
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
//hasOwnProperty polyfill
if (!Object.prototype.hasOwnProperty)
Object.prototype.hasOwnProperty = function(prop) {
var proto = this.__proto__ || this.constructor.prototype;
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
}
function text_size(width, height, template) {
height = parseInt(height,10);
width = parseInt(width,10);
var bigSide = Math.max(height, width)
var smallSide = Math.min(height, width)
var scale = 1 / 12;
var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
return {
height: Math.round(Math.max(template.size, newHeight))
}
}
function draw(ctx, dimensions, template, ratio) {
var ts = text_size(dimensions.width, dimensions.height, template);
var text_height = ts.height;
var width = dimensions.width * ratio,
height = dimensions.height * ratio;
var font = template.font ? template.font : "sans-serif";
canvas.width = width;
canvas.height = height;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = template.background;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = template.foreground;
ctx.font = "bold " + text_height + "px " + font;
var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
var text_width = ctx.measureText(text).width;
if (text_width / width >= 0.75) {
text_height = Math.floor(text_height * 0.75 * (width/text_width));
}
//Resetting font size if necessary
ctx.font = "bold " + (text_height * ratio) + "px " + font;
ctx.fillText(text, (width / 2), (height / 2), width);
return canvas.toDataURL("image/png");
}
function render(mode, el, holder, src) {
var dimensions = holder.dimensions,
theme = holder.theme,
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
var dimensions_caption = dimensions.width + "x" + dimensions.height;
theme = (text ? extend(theme, {
text: text
}) : theme);
theme = (holder.font ? extend(theme, {
font: holder.font
}) : theme);
if (mode == "image") {
el.setAttribute("data-src", src);
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
if (fallback || !holder.auto) {
el.style.width = dimensions.width + "px";
el.style.height = dimensions.height + "px";
}
if (fallback) {
el.style.backgroundColor = theme.background;
} else {
el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
}
} else if (mode == "background") {
if (!fallback) {
el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
}
} else if (mode == "fluid") {
el.setAttribute("data-src", src);
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
if (dimensions.height.substr(-1) == "%") {
el.style.height = dimensions.height
} else {
el.style.height = dimensions.height + "px"
}
if (dimensions.width.substr(-1) == "%") {
el.style.width = dimensions.width
} else {
el.style.width = dimensions.width + "px"
}
if (el.style.display == "inline" || el.style.display == "") {
el.style.display = "block";
}
if (fallback) {
el.style.backgroundColor = theme.background;
} else {
el.holderData = holder;
fluid_images.push(el);
fluid_update(el);
}
}
};
function fluid_update(element) {
var images;
if (element.nodeType == null) {
images = fluid_images;
} else {
images = [element]
}
for (i in images) {
var el = images[i]
if (el.holderData) {
var holder = el.holderData;
el.setAttribute("src", draw(ctx, {
height: el.clientHeight,
width: el.clientWidth
}, holder.theme, ratio));
}
}
}
function parse_flags(flags, options) {
var ret = {
theme: settings.themes.gray
}, render = false;
for (sl = flags.length, j = 0; j < sl; j++) {
var flag = flags[j];
if (app.flags.dimensions.match(flag)) {
render = true;
ret.dimensions = app.flags.dimensions.output(flag);
} else if (app.flags.fluid.match(flag)) {
render = true;
ret.dimensions = app.flags.fluid.output(flag);
ret.fluid = true;
} else if (app.flags.colors.match(flag)) {
ret.theme = app.flags.colors.output(flag);
} else if (options.themes[flag]) {
//If a theme is specified, it will override custom colors
ret.theme = options.themes[flag];
} else if (app.flags.text.match(flag)) {
ret.text = app.flags.text.output(flag);
} else if (app.flags.font.match(flag)) {
ret.font = app.flags.font.output(flag);
} else if (app.flags.auto.match(flag)) {
ret.auto = true;
}
}
return render ? ret : false;
};
if (!canvas.getContext) { if (!canvas.getContext) {
fallback = true; fallback = true;
} else { } else {
@ -206,8 +36,181 @@ if(!fallback){
var ratio = dpr / bsr; var ratio = dpr / bsr;
var fluid_images = []; //getElementsByClassName polyfill
document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
//getComputedStyle polyfill
window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
//https://gist.github.com/991057 by Jed Schmidt with modifications
function selector(a){
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
var ret=[]; b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]); return ret;
}
//shallow object property extend
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
//hasOwnProperty polyfill
if (!Object.prototype.hasOwnProperty)
/*jshint -W001, -W103 */
Object.prototype.hasOwnProperty = function(prop) {
var proto = this.__proto__ || this.constructor.prototype;
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
}
/*jshint +W001, +W103 */
function text_size(width, height, template) {
height = parseInt(height, 10);
width = parseInt(width, 10);
var bigSide = Math.max(height, width)
var smallSide = Math.min(height, width)
var scale = 1 / 12;
var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
return {
height: Math.round(Math.max(template.size, newHeight))
}
}
function draw(ctx, dimensions, template, ratio, literal) {
var ts = text_size(dimensions.width, dimensions.height, template);
var text_height = ts.height;
var width = dimensions.width * ratio,
height = dimensions.height * ratio;
var font = template.font ? template.font : "sans-serif";
canvas.width = width;
canvas.height = height;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = template.background;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = template.foreground;
ctx.font = "bold " + text_height + "px " + font;
var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
if (literal) {
text = template.literalText;
}
var text_width = ctx.measureText(text).width;
if (text_width / width >= 0.75) {
text_height = Math.floor(text_height * 0.75 * (width / text_width));
}
//Resetting font size if necessary
ctx.font = "bold " + (text_height * ratio) + "px " + font;
ctx.fillText(text, (width / 2), (height / 2), width);
return canvas.toDataURL("image/png");
}
function render(mode, el, holder, src) {
var dimensions = holder.dimensions,
theme = holder.theme,
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
var dimensions_caption = dimensions.width + "x" + dimensions.height;
theme = (text ? extend(theme, {
text: text
}) : theme);
theme = (holder.font ? extend(theme, {
font: holder.font
}) : theme);
el.setAttribute("data-src", src);
theme.literalText = dimensions_caption;
holder.originalTheme = holder.theme;
holder.theme = theme;
if (mode == "image") {
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
if (fallback || !holder.auto) {
el.style.width = dimensions.width + "px";
el.style.height = dimensions.height + "px";
}
if (fallback) {
el.style.backgroundColor = theme.background;
} else {
el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
}
} else if (mode == "background") {
if (!fallback) {
el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
}
} else if (mode == "fluid") {
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
if (dimensions.height.slice(-1) == "%") {
el.style.height = dimensions.height
} else {
el.style.height = dimensions.height + "px"
}
if (dimensions.width.slice(-1) == "%") {
el.style.width = dimensions.width
} else {
el.style.width = dimensions.width + "px"
}
if (el.style.display == "inline" || el.style.display === "") {
el.style.display = "block";
}
if (fallback) {
el.style.backgroundColor = theme.background;
} else {
el.holderData = holder;
fluid_images.push(el);
fluid_update(el);
}
}
}
function fluid_update(element) {
var images;
if (element.nodeType == null) {
images = fluid_images;
} else {
images = [element]
}
for (var i in images) {
var el = images[i]
if (el.holderData) {
var holder = el.holderData;
el.setAttribute("src", draw(ctx, {
height: el.clientHeight,
width: el.clientWidth
}, holder.theme, ratio, !! holder.literal));
}
}
}
function parse_flags(flags, options) {
var ret = {
theme: settings.themes.gray
};
var render = false;
for (sl = flags.length, j = 0; j < sl; j++) {
var flag = flags[j];
if (app.flags.dimensions.match(flag)) {
render = true;
ret.dimensions = app.flags.dimensions.output(flag);
} else if (app.flags.fluid.match(flag)) {
render = true;
ret.dimensions = app.flags.fluid.output(flag);
ret.fluid = true;
} else if (app.flags.literal.match(flag)) {
ret.literal = true;
} else if (app.flags.colors.match(flag)) {
ret.theme = app.flags.colors.output(flag);
} else if (options.themes[flag]) {
//If a theme is specified, it will override custom colors
ret.theme = options.themes[flag];
} else if (app.flags.font.match(flag)) {
ret.font = app.flags.font.output(flag);
} else if (app.flags.auto.match(flag)) {
ret.auto = true;
} else if (app.flags.text.match(flag)) {
ret.text = app.flags.text.output(flag);
}
}
return render ? ret : false;
}
var fluid_images = [];
var settings = { var settings = {
domain: "holder.js", domain: "holder.js",
images: "img", images: "img",
@ -229,10 +232,8 @@ var settings = {
size: 12 size: 12
} }
}, },
stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}" stylesheet: ""
}; };
app.flags = { app.flags = {
dimensions: { dimensions: {
regex: /^(\d+)x(\d+)$/, regex: /^(\d+)x(\d+)$/,
@ -279,21 +280,21 @@ app.flags = {
}, },
auto: { auto: {
regex: /^auto$/ regex: /^auto$/
},
literal: {
regex: /^literal$/
} }
} }
for (var flag in app.flags) { for (var flag in app.flags) {
if (!app.flags.hasOwnProperty(flag)) continue; if (!app.flags.hasOwnProperty(flag)) continue;
app.flags[flag].match = function (val) { app.flags[flag].match = function (val) {
return val.match(this.regex) return val.match(this.regex)
} }
} }
app.add_theme = function (name, theme) { app.add_theme = function (name, theme) {
name != null && theme != null && (settings.themes[name] = theme); name != null && theme != null && (settings.themes[name] = theme);
return app; return app;
}; };
app.add_image = function (src, el) { app.add_image = function (src, el) {
var node = selector(el); var node = selector(el);
if (node.length) { if (node.length) {
@ -305,32 +306,27 @@ app.add_image = function (src, el) {
} }
return app; return app;
}; };
app.run = function (o) { app.run = function (o) {
var options = extend(settings, o), var options = extend(settings, o),
images = [], imageNodes = [], bgnodes = []; images = [],
imageNodes = [],
if(typeof(options.images) == "string"){ bgnodes = [];
imageNodes = selector(options.images); if (typeof (options.images) == "string") {
} imageNodes = selector(options.images);
else if (window.NodeList && options.images instanceof window.NodeList) { } else if (window.NodeList && options.images instanceof window.NodeList) {
imageNodes = options.images; imageNodes = options.images;
} else if (window.Node && options.images instanceof window.Node) { } else if (window.Node && options.images instanceof window.Node) {
imageNodes = [options.images]; imageNodes = [options.images];
} }
if (typeof (options.bgnodes) == "string") {
if(typeof(options.bgnodes) == "string"){ bgnodes = selector(options.bgnodes);
bgnodes = selector(options.bgnodes);
} else if (window.NodeList && options.elements instanceof window.NodeList) { } else if (window.NodeList && options.elements instanceof window.NodeList) {
bgnodes = options.bgnodes; bgnodes = options.bgnodes;
} else if (window.Node && options.bgnodes instanceof window.Node) { } else if (window.Node && options.bgnodes instanceof window.Node) {
bgnodes = [options.bgnodes]; bgnodes = [options.bgnodes];
} }
preempted = true; preempted = true;
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]); for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
var holdercss = document.getElementById("holderjs-style"); var holdercss = document.getElementById("holderjs-style");
if (!holdercss) { if (!holdercss) {
holdercss = document.createElement("style"); holdercss = document.createElement("style");
@ -338,53 +334,44 @@ app.run = function (o) {
holdercss.type = "text/css"; holdercss.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(holdercss); document.getElementsByTagName("head")[0].appendChild(holdercss);
} }
if (!options.nocss) { if (!options.nocss) {
if (holdercss.styleSheet) { if (holdercss.styleSheet) {
holdercss.styleSheet.cssText += options.stylesheet; holdercss.styleSheet.cssText += options.stylesheet;
} else { } else {
holdercss.appendChild(document.createTextNode(options.stylesheet)); holdercss.appendChild(document.createTextNode(options.stylesheet));
} }
} }
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
for (var l = bgnodes.length, i = 0; i < l; i++) { for (var l = bgnodes.length, i = 0; i < l; i++) {
var src = window.getComputedStyle(bgnodes[i], null) var src = window.getComputedStyle(bgnodes[i], null)
.getPropertyValue("background-image"); .getPropertyValue("background-image");
var flags = src.match(cssregex); var flags = src.match(cssregex);
var bgsrc = bgnodes[i].getAttribute("data-background-src"); var bgsrc = bgnodes[i].getAttribute("data-background-src");
if (flags) { if (flags) {
var holder = parse_flags(flags[1].split("/"), options); var holder = parse_flags(flags[1].split("/"), options);
if (holder) { if (holder) {
render("background", bgnodes[i], holder, src); render("background", bgnodes[i], holder, src);
} }
} } else if (bgsrc != null) {
else if(bgsrc != null){ var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
.split("/"), options); .split("/"), options);
if(holder){ if (holder) {
render("background", bgnodes[i], holder, src); render("background", bgnodes[i], holder, src);
} }
} }
} }
for (l = images.length, i = 0; i < l; i++) { for (l = images.length, i = 0; i < l; i++) {
var attr_data_src, attr_src;
var attr_src = attr_data_src = src = null; attr_src = attr_data_src = src = null;
try {
try{ attr_src = images[i].getAttribute("src");
attr_src = images[i].getAttribute("src"); attr_datasrc = images[i].getAttribute("data-src");
attr_datasrc = images[i].getAttribute("data-src"); } catch (e) {}
}catch(e){}
if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) { if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) {
src = attr_src; src = attr_src;
} else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) { } else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) {
src = attr_datasrc; src = attr_datasrc;
} }
if (src) { if (src) {
var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1) var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
.split("/"), options); .split("/"), options);
@ -399,7 +386,6 @@ app.run = function (o) {
} }
return app; return app;
}; };
contentLoaded(win, function () { contentLoaded(win, function () {
if (window.addEventListener) { if (window.addEventListener) {
window.addEventListener("resize", fluid_update, false); window.addEventListener("resize", fluid_update, false);
@ -409,9 +395,8 @@ contentLoaded(win, function () {
} }
preempted || app.run(); preempted || app.run();
}); });
if (typeof define === "function" && define.amd) { if (typeof define === "function" && define.amd) {
define("Holder", [], function () { define([], function () {
return app; return app;
}); });
} }

8
docs-assets/js/html5shiv.js vendored
View File

@ -1,8 +0,0 @@
/*
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

6
docs-assets/js/jquery.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs-assets/js/raw-files.js
View File

File diff suppressed because one or more lines are too long

6
examples/carousel/index.html
View File

@ -15,7 +15,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
@ -66,7 +66,7 @@
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
<div id="myCarousel" class="carousel slide"> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@ -195,7 +195,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../docs-assets/js/holder.js"></script> <script src="../../docs-assets/js/holder.js"></script>
</body> </body>

2
examples/grid/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>

2
examples/jumbotron-narrow/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>

4
examples/jumbotron/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -89,7 +89,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

2
examples/justified-nav/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>

4
examples/navbar-fixed-top/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -81,7 +81,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

4
examples/navbar-static-top/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -82,7 +82,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

4
examples/navbar/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -78,7 +78,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

4
examples/non-responsive/index.html
View File

@ -20,7 +20,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -91,7 +91,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

4
examples/offcanvas/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -119,7 +119,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="offcanvas.js"></script> <script src="offcanvas.js"></script>
</body> </body>

2
examples/signin/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>

4
examples/starter-template/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -58,7 +58,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

4
examples/sticky-footer-navbar/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -81,7 +81,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

2
examples/sticky-footer/index.html
View File

@ -18,7 +18,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>

4
examples/theme/index.html
View File

@ -20,7 +20,7 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -347,7 +347,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs-assets/js/jquery.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../docs-assets/js/holder.js"></script> <script src="../../docs-assets/js/holder.js"></script>
</body> </body>

6
getting-started.html
View File

@ -111,7 +111,7 @@ bootstrap/
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script> <script src="../../docs-assets/js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
@ -119,7 +119,7 @@ bootstrap/
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script> <script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
</body> </body>
@ -995,7 +995,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<p><strong>In summary, here's the basic workflow:</strong></p> <p><strong>In summary, here's the basic workflow:</strong></p>
<ul> <ul>
<li>For each element you want to customize, find its code in the compiled Bootstrap CSS.</li> <li>For each element you want to customize, find its code in the compiled Bootstrap CSS.</li>
<li>Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the <code>.navbar</code> style specificaton.</li> <li>Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the <code>.navbar</code> style specification.</li>
<li>In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending <code>!important</code> here. Keep it simple.</li> <li>In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending <code>!important</code> here. Keep it simple.</li>
<li>Rinse and repeat until you're happy with your customizations.</li> <li>Rinse and repeat until you're happy with your customizations.</li>
</ul> </ul>

13
javascript.html
View File

@ -104,6 +104,11 @@ $('#myModal').on('show.bs.modal', function (e) {
<h2 id="modals-examples">Examples</h2> <h2 id="modals-examples">Examples</h2>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p> <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
<div class="bs-callout bs-callout-warning">
<h4>Overlapping modals not supported</h4>
<p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
</div>
<h3>Static example</h3> <h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p> <p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-example bs-example-modal"> <div class="bs-example bs-example-modal">
@ -253,7 +258,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<tbody> <tbody>
<tr> <tr>
<td>backdrop</td> <td>backdrop</td>
<td>boolean</td> <td>boolean or the string <code>'static'</code></td>
<td>true</td> <td>true</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr> </tr>
@ -1665,7 +1670,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<h2 id="carousel-examples">Examples</h2> <h2 id="carousel-examples">Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p> <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-example"> <div class="bs-example">
<div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
@ -1691,7 +1696,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div id="carousel-example-generic" class="carousel slide"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@ -1727,7 +1732,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<h3>Optional captions</h3> <h3>Optional captions</h3>
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p> <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
<div class="bs-example"> <div class="bs-example">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example"> <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li> <li data-target="#carousel-example-captions" data-slide-to="1"></li>

2
js/tests/index.html
View File

@ -8,7 +8,7 @@
<script src="vendor/jquery.js"></script> <script src="vendor/jquery.js"></script>
<!-- qunit --> <!-- qunit -->
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" /> <link rel="stylesheet" href="vendor/qunit.css" media="screen">
<script src="vendor/qunit.js"></script> <script src="vendor/qunit.js"></script>
<!-- plugin sources --> <!-- plugin sources -->

2
less/code.less
View File

@ -42,7 +42,7 @@ pre {
color: inherit; color: inherit;
white-space: pre-wrap; white-space: pre-wrap;
background-color: transparent; background-color: transparent;
border: 0; border-radius: 0;
} }
} }

12
less/navs.less
View File

@ -227,13 +227,11 @@
.clearfix(); .clearfix();
} }
// Show/hide tabbable areas // Hide tabbable panes to start, show them when `.active`
.tab-content > .tab-pane, .tab-content {
.pill-content > .pill-pane { > .tab-pane {
display: none; display: none;
} }
.tab-content,
.pill-content {
> .active { > .active {
display: block; display: block;
} }

15
less/type.less
View File

@ -82,7 +82,8 @@ h1, h2, h3, h4, h5, h6,
line-height: @headings-line-height; line-height: @headings-line-height;
color: @headings-color; color: @headings-color;
small { small,
.small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @headings-small-color; color: @headings-small-color;
@ -95,7 +96,8 @@ h3 {
margin-top: @line-height-computed; margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small { small,
.small {
font-size: 65%; font-size: 65%;
} }
} }
@ -105,7 +107,8 @@ h6 {
margin-top: (@line-height-computed / 2); margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small { small,
.small {
font-size: 75%; font-size: 75%;
} }
} }
@ -240,10 +243,12 @@ blockquote {
border-right: 5px solid @blockquote-border-color; border-right: 5px solid @blockquote-border-color;
border-left: 0; border-left: 0;
p, p,
small { small,
.small {
text-align: right; text-align: right;
} }
small { small,
.small {
&:before { &:before {
content: ''; content: '';
} }

7
package.json
View File

@ -20,7 +20,9 @@
} }
] ]
, "devDependencies": { , "devDependencies": {
"grunt": "~0.4.1" "browserstack-runner": "~0.0.12"
, "btoa": "~1.1.1"
, "grunt": "~0.4.1"
, "grunt-contrib-clean": "~0.5.0" , "grunt-contrib-clean": "~0.5.0"
, "grunt-contrib-concat": "~0.3.0" , "grunt-contrib-concat": "~0.3.0"
, "grunt-contrib-connect": "~0.5.0" , "grunt-contrib-connect": "~0.5.0"
@ -30,8 +32,7 @@
, "grunt-contrib-uglify": "~0.2.4" , "grunt-contrib-uglify": "~0.2.4"
, "grunt-contrib-watch": "~0.5.3" , "grunt-contrib-watch": "~0.5.3"
, "grunt-html-validation": "~0.1.5" , "grunt-html-validation": "~0.1.5"
, "grunt-jekyll": "~0.3.9" , "grunt-jekyll": "~0.4.0"
, "grunt-recess": "~0.4.0" , "grunt-recess": "~0.4.0"
, "browserstack-runner": "~0.0.12"
} }
} }