mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-21 18:54:30 +01:00
updated javascripts for first pass at single column
This commit is contained in:
Mark Otto
parent
53cec198c0
commit
8ee0679522
@ -23,6 +23,47 @@ li {
|
|||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bs-docs-nav {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
width: 140px;
|
||||||
|
padding: 25px 30px;
|
||||||
|
background-color: #eee;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||||
|
}
|
||||||
|
.bs-docs-nav ul {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.bs-docs-nav ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.bs-docs-nav a {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.bs-docs-nav > ul > li > a {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-docs-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 200px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 40px 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
-webkit-box-shadow: -10px 0 15px rgba(0,0,0,.05), -5px 0 10px rgba(0,0,0,.05);
|
||||||
|
-moz-box-shadow: -10px 0 15px rgba(0,0,0,.05), -5px 0 10px rgba(0,0,0,.05);
|
||||||
|
box-shadow: -10px 0 15px rgba(0,0,0,.05), -5px 0 10px rgba(0,0,0,.05);
|
||||||
|
}
|
||||||
|
|
||||||
.bs-docs-container {
|
.bs-docs-container {
|
||||||
max-width: 780px;
|
max-width: 780px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -69,13 +110,13 @@ hr.soften {
|
|||||||
|
|
||||||
/* Table of contents */
|
/* Table of contents */
|
||||||
.bs-docs-contents {
|
.bs-docs-contents {
|
||||||
color: #999;
|
|
||||||
}
|
}
|
||||||
.bs-docs-contents h3 {
|
.bs-docs-contents h3 {
|
||||||
|
|
||||||
}
|
}
|
||||||
.bs-docs-contents li {
|
.bs-docs-contents li {
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -85,7 +126,7 @@ hr.soften {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.jumbotron h1 {
|
.jumbotron h1 {
|
||||||
margin-bottom: 9px;
|
margin-bottom: 10px;
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
@ -110,8 +151,8 @@ hr.soften {
|
|||||||
|
|
||||||
/* Masthead (docs home) */
|
/* Masthead (docs home) */
|
||||||
.masthead {
|
.masthead {
|
||||||
padding-top: 36px;
|
padding-top: 40px;
|
||||||
margin-bottom: 72px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
.masthead h1,
|
.masthead h1,
|
||||||
.masthead p {
|
.masthead p {
|
||||||
@ -122,7 +163,7 @@ hr.soften {
|
|||||||
}
|
}
|
||||||
.masthead p {
|
.masthead p {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 36px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -130,12 +171,15 @@ hr.soften {
|
|||||||
------------------------- */
|
------------------------- */
|
||||||
/* supporting docs pages */
|
/* supporting docs pages */
|
||||||
.subhead {
|
.subhead {
|
||||||
padding-bottom: 0;
|
padding-bottom: 12px;
|
||||||
margin-bottom: 9px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
.subhead h1 {
|
.subhead h1 {
|
||||||
font-size: 54px;
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
.subhead .lead {
|
||||||
|
line-height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Subnav */
|
/* Subnav */
|
||||||
|
|||||||
@ -70,7 +70,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// tooltip demo
|
// tooltip demo
|
||||||
$('.tooltip-demo.well').tooltip({
|
$('.tooltip-demo').tooltip({
|
||||||
selector: "a[rel=tooltip]"
|
selector: "a[rel=tooltip]"
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
@ -81,17 +164,7 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>Base CSS</h1>
|
<h1>Base CSS</h1>
|
||||||
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
|
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
|
||||||
<!-- <div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li><a href="#typography">Typography</a></li>
|
|
||||||
<li><a href="#code">Code</a></li>
|
|
||||||
<li><a href="#tables">Tables</a></li>
|
|
||||||
<li><a href="#forms">Forms</a></li>
|
|
||||||
<li><a href="#buttons">Buttons</a></li>
|
|
||||||
<li><a href="#icons">Icons by Glyphicons</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
--></header>
|
|
||||||
|
|
||||||
|
|
||||||
<section id="contents">
|
<section id="contents">
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
@ -81,24 +164,20 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>Components</h1>
|
<h1>Components</h1>
|
||||||
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
|
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
|
||||||
<div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li class="dropdown">
|
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
|
|
||||||
<ul class="dropdown-menu">
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>Contents</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#buttonGroups">Button groups</a></li>
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown">
|
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#navs">Nav, tabs, pills</a></li>
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
<li><a href="#navbar">Navbar</a></li>
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
<li><a href="#pagination">Pagination</a></li>
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#labels">Labels</a></li>
|
<li><a href="#labels">Labels</a></li>
|
||||||
<li><a href="#badges">Badges</a></li>
|
<li><a href="#badges">Badges</a></li>
|
||||||
<li><a href="#typography">Type</a></li>
|
<li><a href="#typography">Type</a></li>
|
||||||
@ -106,9 +185,9 @@
|
|||||||
<li><a href="#alerts">Alerts</a></li>
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
<li><a href="#progress">Progress bars</a></li>
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
<li><a href="#misc">Misc</a></li>
|
<li><a href="#misc">Misc</a></li>
|
||||||
</ul>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
@ -81,16 +164,22 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>Customize and download</h1>
|
<h1>Customize and download</h1>
|
||||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
|
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
|
||||||
<div class="subnav">
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li><a href="#components">1. Choose components</a></li>
|
|
||||||
<li><a href="#plugins">2. Select jQuery plugins</a></li>
|
|
||||||
<li><a href="#variables">3. Customize variables</a></li>
|
|
||||||
<li><a href="#download">4. Download</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>Contents</h3>
|
||||||
|
<ol>
|
||||||
|
<li><a href="#components">Choose components</a></li>
|
||||||
|
<li><a href="#plugins">Select jQuery plugins</a></li>
|
||||||
|
<li><a href="#variables">Customize variables</a></li>
|
||||||
|
<li><a href="#download">Download</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<section class="download" id="components">
|
<section class="download" id="components">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="active">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
|
|||||||
@ -74,15 +74,57 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
<!-- Masthead
|
<ul>
|
||||||
================================================== -->
|
<!-- <li class="">
|
||||||
<header class="jumbotron subhead" id="overview">
|
<a href="./index.html">Home</a>
|
||||||
<h1>Javascript for Bootstrap</h1>
|
</li>
|
||||||
<p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
|
-->
|
||||||
<div class="subnav">
|
<li class="">
|
||||||
<ul class="nav nav-pills">
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
<li><a href="#javascript">All plugins</a></li>
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
<li><a href="#modals">Modal</a></li>
|
<li><a href="#modals">Modal</a></li>
|
||||||
<li><a href="#dropdowns">Dropdown</a></li>
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
@ -96,10 +138,58 @@
|
|||||||
<li><a href="#carousel">Carousel</a></li>
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
<li><a href="#typeahead">Typeahead</a></li>
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
|
<!-- Masthead
|
||||||
|
================================================== -->
|
||||||
|
<header class="jumbotron subhead" id="overview">
|
||||||
|
<h1>Javascript for Bootstrap</h1>
|
||||||
|
<p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>Contents</h3>
|
||||||
|
<ol>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Using Javascript w/ Bootstrap
|
<!-- Using Javascript w/ Bootstrap
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="javascript">
|
<section id="javascript">
|
||||||
@ -173,17 +263,15 @@
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Modals <small>bootstrap-modal.js</small></h1>
|
<h1>Modals <small>bootstrap-modal.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About modals</h3>
|
<h3>About modals</h3>
|
||||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||||
<a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Static example</h2>
|
<h2>Static example</h2>
|
||||||
<p>Below is a statically rendered modal.</p>
|
<p>Below is a statically rendered modal.</p>
|
||||||
<div class="well modal-example" style="background-color: #888; border: none;">
|
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
|
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
<h3>Modal header</h3>
|
<h3>Modal header</h3>
|
||||||
@ -196,7 +284,7 @@
|
|||||||
<a href="#" class="btn btn-primary">Save changes</a>
|
<a href="#" class="btn btn-primary">Save changes</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- /well -->
|
</div>
|
||||||
|
|
||||||
<h2>Live demo</h2>
|
<h2>Live demo</h2>
|
||||||
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||||
@ -233,7 +321,10 @@
|
|||||||
<a href="#" role="button" class="btn btn-primary">Save changes</a>
|
<a href="#" role="button" class="btn btn-primary">Save changes</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
|
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -348,13 +439,10 @@ $('#myModal').modal({
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#myModal').on('hidden', function () {
|
$('#myModal').on('hidden', function () {
|
||||||
// do something…
|
// do something…
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -365,16 +453,15 @@ $('#myModal').on('hidden', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
|
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About dropdowns</h3>
|
<h3>About dropdowns</h3>
|
||||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||||
<a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Examples</h2>
|
<h2>Examples</h2>
|
||||||
<p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
|
<p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div id="navbar-example" class="navbar navbar-static">
|
<div id="navbar-example" class="navbar navbar-static">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container" style="width: auto;">
|
<div class="container" style="width: auto;">
|
||||||
@ -416,7 +503,9 @@ $('#myModal').on('hidden', function () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- /navbar-example -->
|
</div> <!-- /navbar-example -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="active"><a href="#">Regular link</a></li>
|
<li class="active"><a href="#">Regular link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
@ -450,6 +539,7 @@ $('#myModal').on('hidden', function () {
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul> <!-- /tabs -->
|
</ul> <!-- /tabs -->
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -497,8 +587,6 @@ $('#myModal').on('hidden', function () {
|
|||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>$().dropdown()</h4>
|
<h4>$().dropdown()</h4>
|
||||||
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
|
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -509,14 +597,13 @@ $('#myModal').on('hidden', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
|
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p>
|
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p>
|
||||||
<a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example navbar with scrollspy</h2>
|
<h2>Example navbar with scrollspy</h2>
|
||||||
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
|
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div id="navbarExample" class="navbar navbar-static">
|
<div id="navbarExample" class="navbar navbar-static">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container" style="width: auto;">
|
<div class="container" style="width: auto;">
|
||||||
@ -561,6 +648,8 @@ $('#myModal').on('hidden', function () {
|
|||||||
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
<h2>Using bootstrap-scrollspy.js</h2>
|
<h2>Using bootstrap-scrollspy.js</h2>
|
||||||
<p>Call the scrollspy via javascript:</p>
|
<p>Call the scrollspy via javascript:</p>
|
||||||
@ -614,8 +703,6 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -626,14 +713,13 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
|
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p>
|
<p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p>
|
||||||
<a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example tabs</h2>
|
<h2>Example tabs</h2>
|
||||||
<p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
|
<p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
|
||||||
|
<div class="bs-docs-example">
|
||||||
<ul id="myTab" class="nav nav-tabs">
|
<ul id="myTab" class="nav nav-tabs">
|
||||||
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
||||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||||
@ -659,7 +745,8 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</div>
|
||||||
|
|
||||||
<h2>Using bootstrap-tab.js</h2>
|
<h2>Using bootstrap-tab.js</h2>
|
||||||
<p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p>
|
<p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
@ -727,14 +814,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('a[data-toggle="tab"]').on('shown', function (e) {
|
$('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
e.target // activated tab
|
e.target // activated tab
|
||||||
e.relatedTarget // previous tab
|
e.relatedTarget // previous tab
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -744,20 +828,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
|
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About Tooltips</h3>
|
<h3>About Tooltips</h3>
|
||||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p>
|
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p>
|
||||||
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example use of Tooltips</h2>
|
<h2>Example use of Tooltips</h2>
|
||||||
<p>Hover over the links below to see tooltips:</p>
|
<p>Hover over the links below to see tooltips:</p>
|
||||||
<div class="tooltip-demo well">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
|
||||||
<h2>Using bootstrap-tooltip.js</h2>
|
<h2>Using bootstrap-tooltip.js</h2>
|
||||||
<p>Trigger the tooltip via javascript:</p>
|
<p>Trigger the tooltip via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
||||||
@ -829,6 +911,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
|
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>$().tooltip(options)</h4>
|
<h4>$().tooltip(options)</h4>
|
||||||
<p>Attaches a tooltip handler to an element collection.</p>
|
<p>Attaches a tooltip handler to an element collection.</p>
|
||||||
@ -841,8 +924,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<h4>.tooltip('toggle')</h4>
|
<h4>.tooltip('toggle')</h4>
|
||||||
<p>Toggles an element's tooltip.</p>
|
<p>Toggles an element's tooltip.</p>
|
||||||
<pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
|
<pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -853,20 +934,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Popovers <small>bootstrap-popover.js</small></h1>
|
<h1>Popovers <small>bootstrap-popover.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About popovers</h3>
|
<h3>About popovers</h3>
|
||||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
|
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
|
||||||
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example hover popover</h2>
|
<h2>Example hover popover</h2>
|
||||||
<p>Hover over the button to trigger the popover.</p>
|
<p>Hover over the button to trigger the popover.</p>
|
||||||
<div class="well">
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
|
<a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
|
||||||
<h2>Using bootstrap-popover.js</h2>
|
<h2>Using bootstrap-popover.js</h2>
|
||||||
<p>Enable popovers via javascript:</p>
|
<p>Enable popovers via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
||||||
@ -955,8 +1034,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<h4>.popover('toggle')</h4>
|
<h4>.popover('toggle')</h4>
|
||||||
<p>Toggles an elements popover.</p>
|
<p>Toggles an elements popover.</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -967,19 +1044,21 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
|
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About alerts</h3>
|
<h3>About alerts</h3>
|
||||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||||
<a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">Download</a>
|
<a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">Download</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example alerts</h2>
|
<h2>Example alerts</h2>
|
||||||
<p>The alerts plugin works on regular alert messages, and block messages.</p>
|
<p>The alerts plugin works on regular alert messages, and block messages.</p>
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div class="alert fade in">
|
<div class="alert fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div class="alert alert-block alert-error fade in">
|
<div class="alert alert-block alert-error fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<h4 class="alert-heading">Oh snap! You got an error!</h4>
|
<h4 class="alert-heading">Oh snap! You got an error!</h4>
|
||||||
@ -988,7 +1067,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
|
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</div>
|
||||||
|
|
||||||
<h2>Using bootstrap-alert.js</h2>
|
<h2>Using bootstrap-alert.js</h2>
|
||||||
<p>Enable dismissal of an alert via javascript:</p>
|
<p>Enable dismissal of an alert via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
||||||
@ -1025,8 +1105,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
$('#my-alert').bind('closed', function () {
|
$('#my-alert').bind('closed', function () {
|
||||||
// do something…
|
// do something…
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1037,54 +1115,44 @@ $('#my-alert').bind('closed', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Buttons <small>bootstrap-button.js</small></h1>
|
<h1>Buttons <small>bootstrap-button.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About</h3>
|
<h3>About</h3>
|
||||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||||
<a href="assets/js/bootstrap-button.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-button.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example uses</h2>
|
<h2>Example uses</h2>
|
||||||
<p>Use the buttons plugin for states and toggles.</p>
|
<p>Use the buttons plugin for states and toggles.</p>
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
<tbody>
|
<h4>Stateful</h4>
|
||||||
<tr>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>Stateful</td>
|
|
||||||
<td>
|
|
||||||
<button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
|
<button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
|
||||||
Loading State
|
Loading State
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
<tr>
|
<h4>Single toggle</h4>
|
||||||
<td>Single toggle</td>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" data-toggle="button">Single Toggle</button>
|
<button class="btn btn-primary" data-toggle="button">Single Toggle</button>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
<tr>
|
<h4>Checkbox</h4>
|
||||||
<td>Checkbox</td>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>
|
|
||||||
<div class="btn-group" data-toggle="buttons-checkbox">
|
<div class="btn-group" data-toggle="buttons-checkbox">
|
||||||
<button class="btn btn-primary">Left</button>
|
<button class="btn btn-primary">Left</button>
|
||||||
<button class="btn btn-primary">Middle</button>
|
<button class="btn btn-primary">Middle</button>
|
||||||
<button class="btn btn-primary">Right</button>
|
<button class="btn btn-primary">Right</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
<tr>
|
<h4>Radio</h4>
|
||||||
<td>Radio</td>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>
|
|
||||||
<div class="btn-group" data-toggle="buttons-radio">
|
<div class="btn-group" data-toggle="buttons-radio">
|
||||||
<button class="btn btn-primary">Left</button>
|
<button class="btn btn-primary">Left</button>
|
||||||
<button class="btn btn-primary">Middle</button>
|
<button class="btn btn-primary">Middle</button>
|
||||||
<button class="btn btn-primary">Right</button>
|
<button class="btn btn-primary">Right</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr>
|
|
||||||
<h2>Using bootstrap-button.js</h2>
|
<h2>Using bootstrap-button.js</h2>
|
||||||
<p>Enable buttons via javascript:</p>
|
<p>Enable buttons via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
|
<pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
|
||||||
@ -1132,8 +1200,6 @@ $('#my-alert').bind('closed', function () {
|
|||||||
<script>
|
<script>
|
||||||
$('.btn').button('complete')
|
$('.btn').button('complete')
|
||||||
</script></pre>
|
</script></pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1144,17 +1210,16 @@ $('#my-alert').bind('closed', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Collapse <small>bootstrap-collapse.js</small></h1>
|
<h1>Collapse <small>bootstrap-collapse.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About</h3>
|
<h3>About</h3>
|
||||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||||
<a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
|
||||||
<p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
|
<p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example accordion</h2>
|
<h2>Example accordion</h2>
|
||||||
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
|
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div class="accordion" id="accordion2">
|
<div class="accordion" id="accordion2">
|
||||||
<div class="accordion-group">
|
<div class="accordion-group">
|
||||||
<div class="accordion-heading">
|
<div class="accordion-heading">
|
||||||
@ -1193,9 +1258,8 @@ $('#my-alert').bind('closed', function () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
<h2>Using bootstrap-collapse.js</h2>
|
<h2>Using bootstrap-collapse.js</h2>
|
||||||
<p>Enable via javascript:</p>
|
<p>Enable via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
|
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
|
||||||
@ -1281,13 +1345,10 @@ $('#myCollapsible').collapse({
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#myCollapsible').on('hidden', function () {
|
$('#myCollapsible').on('hidden', function () {
|
||||||
// do something…
|
// do something…
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1298,15 +1359,15 @@ $('#myCollapsible').on('hidden', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Carousel <small>bootstrap-carousel.js</small></h1>
|
<h1>Carousel <small>bootstrap-carousel.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About</h3>
|
<h3>About</h3>
|
||||||
<p>A generic plugin for cycling through elements. A merry-go-round.</p>
|
<p>A generic plugin for cycling through elements. A merry-go-round.</p>
|
||||||
<a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example carousel</h2>
|
<h2>Example carousel</h2>
|
||||||
<p>Watch the slideshow below.</p>
|
<p>Watch the slideshow below.</p>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div id="myCarousel" class="carousel slide">
|
<div id="myCarousel" class="carousel slide">
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="item active">
|
<div class="item active">
|
||||||
@ -1334,6 +1395,8 @@ $('#myCollapsible').on('hidden', function () {
|
|||||||
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
|
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
|
||||||
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
|
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
<strong>Heads up!</strong>
|
<strong>Heads up!</strong>
|
||||||
When implementing this carousel, remove the images we have provided and replace them with your own.
|
When implementing this carousel, remove the images we have provided and replace them with your own.
|
||||||
@ -1420,8 +1483,6 @@ $('.carousel').carousel({
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1432,19 +1493,17 @@ $('.carousel').carousel({
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
|
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>About</h3>
|
<h3>About</h3>
|
||||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||||
<a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
|
<a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>Example</h2>
|
<h2>Example</h2>
|
||||||
<p>Start typing in the field below to show the typeahead results.</p>
|
<p>Start typing in the field below to show the typeahead results.</p>
|
||||||
<div class="well">
|
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||||
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
|
||||||
<h2>Using bootstrap-typeahead.js</h2>
|
<h2>Using bootstrap-typeahead.js</h2>
|
||||||
<p>Call the typeahead via javascript:</p>
|
<p>Call the typeahead via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
|
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
|
||||||
@ -1500,8 +1559,6 @@ $('.carousel').carousel({
|
|||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>.typeahead(options)</h4>
|
<h4>.typeahead(options)</h4>
|
||||||
<p>Initializes an input with a typeahead.</p>
|
<p>Initializes an input with a typeahead.</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
@ -81,15 +164,21 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>Using LESS with Bootstrap</h1>
|
<h1>Using LESS with Bootstrap</h1>
|
||||||
<p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
|
<p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
|
||||||
<div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>Contents</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#builtWith">Built with Less</a></li>
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
<li><a href="#variables">Variables</a></li>
|
<li><a href="#variables">Variables</a></li>
|
||||||
<li><a href="#mixins">Mixins</a></li>
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
</ul>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="active">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
@ -81,61 +164,18 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>Scaffolding</h1>
|
<h1>Scaffolding</h1>
|
||||||
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
|
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
<!-- <div class="subnav">
|
|
||||||
<ul class="nav nav-pills">
|
<section class="bs-docs-contents">
|
||||||
|
<h3>Contents</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#global">Global styles</a></li>
|
<li><a href="#global">Global styles</a></li>
|
||||||
<li><a href="#gridSystem">Grid system</a></li>
|
<li><a href="#gridSystem">Grid system</a></li>
|
||||||
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
|
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
|
||||||
<li><a href="#gridCustomization">Customizing</a></li>
|
<li><a href="#gridCustomization">Customizing</a></li>
|
||||||
<li><a href="#layouts">Layouts</a></li>
|
<li><a href="#layouts">Layouts</a></li>
|
||||||
<li><a href="#responsive">Responsive design</a></li>
|
<li><a href="#responsive">Responsive design</a></li>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
--></header>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="bs-docs-contents">
|
|
||||||
<h3>Contents</h3>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<a href="#global">Global styles</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#global-1">Requires HTML5 doctype</a></li>
|
|
||||||
<li><a href="#global-2">Typography and links</a></li>
|
|
||||||
<li><a href="#global-3">Reset via Normalize</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#gridSystem">Grid system</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#gridSystem-1">Offsetting columns</a></li>
|
|
||||||
<li><a href="#gridSystem-2">Nesting columns</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#fluidGridSystem">Fluid grid system</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#fluidGridSystem-1">Nesting fluid columns</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#gridCustomization">Grid Customization</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#layouts">Layouts</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#layouts-1">Fixed layout</a></li>
|
|
||||||
<li><a href="#layouts-1">Fluid layout</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#responsive">Responsive design</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#responsive-1">Responsive utility classes</a></li>
|
|
||||||
<li><a href="#responsive-2">Responsive tests</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
3
docs/templates/layout.mustache
vendored
3
docs/templates/layout.mustache
vendored
@ -85,6 +85,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-nav">
|
<div class="bs-docs-nav">
|
||||||
<h3 class="bs-docs-logo">Bootstrap</h3>
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
<ul>
|
<ul>
|
||||||
@ -168,7 +169,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-wrapper">
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
{{>body}}
|
{{>body}}
|
||||||
@ -184,7 +184,6 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div><!-- /container -->
|
</div><!-- /container -->
|
||||||
</div><!-- /wrapper -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
12
docs/templates/pages/base-css.mustache
vendored
12
docs/templates/pages/base-css.mustache
vendored
@ -3,17 +3,7 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>{{_i}}Base CSS{{/i}}</h1>
|
<h1>{{_i}}Base CSS{{/i}}</h1>
|
||||||
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
|
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
|
||||||
<!-- <div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
|
|
||||||
<li><a href="#code">{{_i}}Code{{/i}}</a></li>
|
|
||||||
<li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
|
|
||||||
<li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
|
|
||||||
<li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
|
|
||||||
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
--></header>
|
|
||||||
|
|
||||||
|
|
||||||
<section id="contents">
|
<section id="contents">
|
||||||
|
|||||||
24
docs/templates/pages/components.mustache
vendored
24
docs/templates/pages/components.mustache
vendored
@ -3,24 +3,20 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>{{_i}}Components{{/i}}</h1>
|
<h1>{{_i}}Components{{/i}}</h1>
|
||||||
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
|
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
|
||||||
<div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li class="dropdown">
|
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
|
|
||||||
<ul class="dropdown-menu">
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>{{_i}}Contents{{/i}}</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
|
<li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
|
||||||
<li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
|
<li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown">
|
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Navigation{{/i}} <b class="caret"></b></a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
|
<li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
|
||||||
<li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
|
<li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
|
||||||
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
|
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
|
||||||
<li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
|
<li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
|
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
|
||||||
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
|
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
|
||||||
<li><a href="#typography">{{_i}}Type{{/i}}</a></li>
|
<li><a href="#typography">{{_i}}Type{{/i}}</a></li>
|
||||||
@ -28,9 +24,9 @@
|
|||||||
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
|
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
|
||||||
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
|
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
|
||||||
<li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
|
<li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
|
||||||
</ul>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
22
docs/templates/pages/download.mustache
vendored
22
docs/templates/pages/download.mustache
vendored
@ -3,16 +3,22 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>{{_i}}Customize and download{{/i}}</h1>
|
<h1>{{_i}}Customize and download{{/i}}</h1>
|
||||||
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
|
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
|
||||||
<div class="subnav">
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li>
|
|
||||||
<li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li>
|
|
||||||
<li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li>
|
|
||||||
<li><a href="#download">{{_i}}4. Download{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>{{_i}}Contents{{/i}}</h3>
|
||||||
|
<ol>
|
||||||
|
<li><a href="#components">{{_i}}Choose components{{/i}}</a></li>
|
||||||
|
<li><a href="#plugins">{{_i}}Select jQuery plugins{{/i}}</a></li>
|
||||||
|
<li><a href="#variables">{{_i}}Customize variables{{/i}}</a></li>
|
||||||
|
<li><a href="#download">{{_i}}Download{{/i}}</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<section class="download" id="components">
|
<section class="download" id="components">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
|
|||||||
200
docs/templates/pages/javascript.mustache
vendored
200
docs/templates/pages/javascript.mustache
vendored
@ -3,8 +3,14 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
|
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
|
||||||
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
|
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
|
||||||
<div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>{{_i}}Contents{{/i}}</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#javascript">{{_i}}All plugins{{/i}}</a></li>
|
<li><a href="#javascript">{{_i}}All plugins{{/i}}</a></li>
|
||||||
<li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
|
<li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
|
||||||
<li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
|
<li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
|
||||||
@ -17,9 +23,10 @@
|
|||||||
<li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
|
<li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
|
||||||
<li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
|
<li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
|
||||||
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
|
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
|
||||||
</ul>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Using Javascript w/ Bootstrap
|
<!-- Using Javascript w/ Bootstrap
|
||||||
@ -95,17 +102,15 @@
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
|
<h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About modals{{/i}}</h3>
|
<h3>{{_i}}About modals{{/i}}</h3>
|
||||||
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Static example{{/i}}</h2>
|
<h2>{{_i}}Static example{{/i}}</h2>
|
||||||
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
|
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
|
||||||
<div class="well modal-example" style="background-color: #888; border: none;">
|
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
|
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
<h3>{{_i}}Modal header{{/i}}</h3>
|
<h3>{{_i}}Modal header{{/i}}</h3>
|
||||||
@ -118,7 +123,7 @@
|
|||||||
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
|
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- /well -->
|
</div>{{! /example }}
|
||||||
|
|
||||||
<h2>{{_i}}Live demo{{/i}}</h2>
|
<h2>{{_i}}Live demo{{/i}}</h2>
|
||||||
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
|
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
|
||||||
@ -155,7 +160,10 @@
|
|||||||
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
|
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
|
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
|
||||||
|
</div>{{! /example }}
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -270,13 +278,10 @@ $('#myModal').modal({
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#myModal').on('hidden', function () {
|
$('#myModal').on('hidden', function () {
|
||||||
// {{_i}}do something…{{/i}}
|
// {{_i}}do something…{{/i}}
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -287,16 +292,15 @@ $('#myModal').on('hidden', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Dropdowns{{/i}} <small>bootstrap-dropdown.js</small></h1>
|
<h1>{{_i}}Dropdowns{{/i}} <small>bootstrap-dropdown.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About dropdowns{{/i}}</h3>
|
<h3>{{_i}}About dropdowns{{/i}}</h3>
|
||||||
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
|
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Examples{{/i}}</h2>
|
<h2>{{_i}}Examples{{/i}}</h2>
|
||||||
<p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
|
<p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div id="navbar-example" class="navbar navbar-static">
|
<div id="navbar-example" class="navbar navbar-static">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container" style="width: auto;">
|
<div class="container" style="width: auto;">
|
||||||
@ -338,7 +342,9 @@ $('#myModal').on('hidden', function () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- /navbar-example -->
|
</div> <!-- /navbar-example -->
|
||||||
|
</div> {{! /example }}
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
|
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
@ -372,6 +378,7 @@ $('#myModal').on('hidden', function () {
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul> <!-- /tabs -->
|
</ul> <!-- /tabs -->
|
||||||
|
</div> {{! /example }}
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -419,8 +426,6 @@ $('#myModal').on('hidden', function () {
|
|||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<h3>{{_i}}Methods{{/i}}</h3>
|
||||||
<h4>$().dropdown()</h4>
|
<h4>$().dropdown()</h4>
|
||||||
<p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
|
<p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -431,14 +436,13 @@ $('#myModal').on('hidden', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}ScrollSpy{{/i}} <small>bootstrap-scrollspy.js</small></h1>
|
<h1>{{_i}}ScrollSpy{{/i}} <small>bootstrap-scrollspy.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}</p>
|
<p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example navbar with scrollspy{{/i}}</h2>
|
<h2>{{_i}}Example navbar with scrollspy{{/i}}</h2>
|
||||||
<p>{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}</p>
|
<p>{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}</p>
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div id="navbarExample" class="navbar navbar-static">
|
<div id="navbarExample" class="navbar navbar-static">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container" style="width: auto;">
|
<div class="container" style="width: auto;">
|
||||||
@ -483,6 +487,8 @@ $('#myModal').on('hidden', function () {
|
|||||||
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>{{! /example }}
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
<h2>{{_i}}Using bootstrap-scrollspy.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-scrollspy.js{{/i}}</h2>
|
||||||
<p>{{_i}}Call the scrollspy via javascript:{{/i}}</p>
|
<p>{{_i}}Call the scrollspy via javascript:{{/i}}</p>
|
||||||
@ -536,8 +542,6 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -548,14 +552,13 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Togglable tabs{{/i}} <small>bootstrap-tab.js</small></h1>
|
<h1>{{_i}}Togglable tabs{{/i}} <small>bootstrap-tab.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<p>{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}</p>
|
<p>{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example tabs{{/i}}</h2>
|
<h2>{{_i}}Example tabs{{/i}}</h2>
|
||||||
<p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
|
<p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
|
||||||
|
<div class="bs-docs-example">
|
||||||
<ul id="myTab" class="nav nav-tabs">
|
<ul id="myTab" class="nav nav-tabs">
|
||||||
<li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
|
<li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
|
||||||
<li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
|
<li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
|
||||||
@ -581,7 +584,8 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</div>{{! /example }}
|
||||||
|
|
||||||
<h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
|
||||||
<p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
|
<p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
@ -649,14 +653,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('a[data-toggle="tab"]').on('shown', function (e) {
|
$('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
e.target // activated tab
|
e.target // activated tab
|
||||||
e.relatedTarget // previous tab
|
e.relatedTarget // previous tab
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -666,20 +667,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Tooltips{{/i}} <small>bootstrap-tooltip.js</small></h1>
|
<h1>{{_i}}Tooltips{{/i}} <small>bootstrap-tooltip.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About Tooltips{{/i}}</h3>
|
<h3>{{_i}}About Tooltips{{/i}}</h3>
|
||||||
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example use of Tooltips{{/i}}</h2>
|
<h2>{{_i}}Example use of Tooltips{{/i}}</h2>
|
||||||
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
|
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
|
||||||
<div class="tooltip-demo well">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
|
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>{{! /example }}
|
||||||
<hr>
|
|
||||||
<h2>{{_i}}Using{{/i}} bootstrap-tooltip.js</h2>
|
<h2>{{_i}}Using{{/i}} bootstrap-tooltip.js</h2>
|
||||||
<p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
|
<p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
|
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
|
||||||
@ -751,6 +750,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
|
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<h3>{{_i}}Methods{{/i}}</h3>
|
||||||
<h4>$().tooltip({{_i}}options{{/i}})</h4>
|
<h4>$().tooltip({{_i}}options{{/i}})</h4>
|
||||||
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
|
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
|
||||||
@ -763,8 +763,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<h4>.tooltip('toggle')</h4>
|
<h4>.tooltip('toggle')</h4>
|
||||||
<p>{{_i}}Toggles an element's tooltip.{{/i}}</p>
|
<p>{{_i}}Toggles an element's tooltip.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
|
<pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -775,20 +773,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1>
|
<h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About popovers{{/i}}</h3>
|
<h3>{{_i}}About popovers{{/i}}</h3>
|
||||||
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
|
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
|
||||||
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p>
|
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example hover popover{{/i}}</h2>
|
<h2>{{_i}}Example hover popover{{/i}}</h2>
|
||||||
<p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
|
<p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
|
||||||
<div class="well">
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
|
<a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
|
||||||
<h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
|
||||||
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
|
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
|
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
|
||||||
@ -877,8 +873,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<h4>.popover('toggle')</h4>
|
<h4>.popover('toggle')</h4>
|
||||||
<p>{{_i}}Toggles an elements popover.{{/i}}</p>
|
<p>{{_i}}Toggles an elements popover.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -889,19 +883,21 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
|
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About alerts{{/i}}</h3>
|
<h3>{{_i}}About alerts{{/i}}</h3>
|
||||||
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
|
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">{{_i}}Download{{/i}}</a>
|
<a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">{{_i}}Download{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example alerts{{/i}}</h2>
|
<h2>{{_i}}Example alerts{{/i}}</h2>
|
||||||
<p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
|
<p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div class="alert fade in">
|
<div class="alert fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
||||||
</div>
|
</div>
|
||||||
|
</div>{{! /example }}
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div class="alert alert-block alert-error fade in">
|
<div class="alert alert-block alert-error fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
|
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
|
||||||
@ -910,7 +906,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
|
<a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</div>{{! /example }}
|
||||||
|
|
||||||
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
|
||||||
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
|
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
||||||
@ -947,8 +944,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
$('#my-alert').bind('closed', function () {
|
$('#my-alert').bind('closed', function () {
|
||||||
// {{_i}}do something…{{/i}}
|
// {{_i}}do something…{{/i}}
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -959,54 +954,44 @@ $('#my-alert').bind('closed', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Buttons{{/i}} <small>bootstrap-button.js</small></h1>
|
<h1>{{_i}}Buttons{{/i}} <small>bootstrap-button.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About{{/i}}</h3>
|
<h3>{{_i}}About{{/i}}</h3>
|
||||||
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
|
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-button.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-button.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example uses{{/i}}</h2>
|
<h2>{{_i}}Example uses{{/i}}</h2>
|
||||||
<p>{{_i}}Use the buttons plugin for states and toggles.{{/i}}</p>
|
<p>{{_i}}Use the buttons plugin for states and toggles.{{/i}}</p>
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
<tbody>
|
<h4>{{_i}}Stateful{{/i}}</h4>
|
||||||
<tr>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>{{_i}}Stateful{{/i}}</td>
|
|
||||||
<td>
|
|
||||||
<button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
|
<button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
|
||||||
{{_i}}Loading State{{/i}}
|
{{_i}}Loading State{{/i}}
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</div>{{! /example }}
|
||||||
</tr>
|
|
||||||
<tr>
|
<h4>{{_i}}Single toggle{{/i}}</h4>
|
||||||
<td>{{_i}}Single toggle{{/i}}</td>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
|
<button class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
|
||||||
</td>
|
</div>{{! /example }}
|
||||||
</tr>
|
|
||||||
<tr>
|
<h4>{{_i}}Checkbox{{/i}}</h4>
|
||||||
<td>{{_i}}Checkbox{{/i}}</td>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>
|
|
||||||
<div class="btn-group" data-toggle="buttons-checkbox">
|
<div class="btn-group" data-toggle="buttons-checkbox">
|
||||||
<button class="btn btn-primary">{{_i}}Left{{/i}}</button>
|
<button class="btn btn-primary">{{_i}}Left{{/i}}</button>
|
||||||
<button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
|
<button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
|
||||||
<button class="btn btn-primary">{{_i}}Right{{/i}}</button>
|
<button class="btn btn-primary">{{_i}}Right{{/i}}</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>{{! /example }}
|
||||||
</tr>
|
|
||||||
<tr>
|
<h4>{{_i}}Radio{{/i}}</h4>
|
||||||
<td>{{_i}}Radio{{/i}}</td>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<td>
|
|
||||||
<div class="btn-group" data-toggle="buttons-radio">
|
<div class="btn-group" data-toggle="buttons-radio">
|
||||||
<button class="btn btn-primary">{{_i}}Left{{/i}}</button>
|
<button class="btn btn-primary">{{_i}}Left{{/i}}</button>
|
||||||
<button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
|
<button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
|
||||||
<button class="btn btn-primary">{{_i}}Right{{/i}}</button>
|
<button class="btn btn-primary">{{_i}}Right{{/i}}</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>{{! /example }}
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr>
|
|
||||||
<h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
|
||||||
<p>{{_i}}Enable buttons via javascript:{{/i}}</p>
|
<p>{{_i}}Enable buttons via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
|
<pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
|
||||||
@ -1054,8 +1039,6 @@ $('#my-alert').bind('closed', function () {
|
|||||||
<script>
|
<script>
|
||||||
$('.btn').button('complete')
|
$('.btn').button('complete')
|
||||||
</script></pre>
|
</script></pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1066,17 +1049,16 @@ $('#my-alert').bind('closed', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Collapse{{/i}} <small>bootstrap-collapse.js</small></h1>
|
<h1>{{_i}}Collapse{{/i}} <small>bootstrap-collapse.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About{{/i}}</h3>
|
<h3>{{_i}}About{{/i}}</h3>
|
||||||
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
|
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
<p class="muted"><strong>*</strong> {{_i}}Requires the Transitions plugin to be included.{{/i}}</p>
|
<p class="muted"><strong>*</strong> {{_i}}Requires the Transitions plugin to be included.{{/i}}</p>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example accordion{{/i}}</h2>
|
<h2>{{_i}}Example accordion{{/i}}</h2>
|
||||||
<p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
|
<p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div class="accordion" id="accordion2">
|
<div class="accordion" id="accordion2">
|
||||||
<div class="accordion-group">
|
<div class="accordion-group">
|
||||||
<div class="accordion-heading">
|
<div class="accordion-heading">
|
||||||
@ -1115,9 +1097,8 @@ $('#my-alert').bind('closed', function () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>{{! /example }}
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
<h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
|
||||||
<p>{{_i}}Enable via javascript:{{/i}}</p>
|
<p>{{_i}}Enable via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
|
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
|
||||||
@ -1203,13 +1184,10 @@ $('#myCollapsible').collapse({
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#myCollapsible').on('hidden', function () {
|
$('#myCollapsible').on('hidden', function () {
|
||||||
// {{_i}}do something…{{/i}}
|
// {{_i}}do something…{{/i}}
|
||||||
})</pre>
|
})</pre>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1220,15 +1198,15 @@ $('#myCollapsible').on('hidden', function () {
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Carousel{{/i}} <small>bootstrap-carousel.js</small></h1>
|
<h1>{{_i}}Carousel{{/i}} <small>bootstrap-carousel.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About{{/i}}</h3>
|
<h3>{{_i}}About{{/i}}</h3>
|
||||||
<p>{{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}</p>
|
<p>{{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example carousel{{/i}}</h2>
|
<h2>{{_i}}Example carousel{{/i}}</h2>
|
||||||
<p>{{_i}}Watch the slideshow below.{{/i}}</p>
|
<p>{{_i}}Watch the slideshow below.{{/i}}</p>
|
||||||
|
|
||||||
|
<div class="bs-docs-example">
|
||||||
<div id="myCarousel" class="carousel slide">
|
<div id="myCarousel" class="carousel slide">
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="item active">
|
<div class="item active">
|
||||||
@ -1256,6 +1234,8 @@ $('#myCollapsible').on('hidden', function () {
|
|||||||
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
|
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
|
||||||
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
|
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>{{! /example }}
|
||||||
|
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||||
{{_i}}When implementing this carousel, remove the images we have provided and replace them with your own.{{/i}}
|
{{_i}}When implementing this carousel, remove the images we have provided and replace them with your own.{{/i}}
|
||||||
@ -1342,8 +1322,6 @@ $('.carousel').carousel({
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1354,19 +1332,17 @@ $('.carousel').carousel({
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Typeahead{{/i}} <small>bootstrap-typeahead.js</small></h1>
|
<h1>{{_i}}Typeahead{{/i}} <small>bootstrap-typeahead.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="span3 columns">
|
|
||||||
<h3>{{_i}}About{{/i}}</h3>
|
<h3>{{_i}}About{{/i}}</h3>
|
||||||
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
|
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
|
||||||
<a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
<a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||||
</div>
|
|
||||||
<div class="span9 columns">
|
|
||||||
<h2>{{_i}}Example{{/i}}</h2>
|
<h2>{{_i}}Example{{/i}}</h2>
|
||||||
<p>{{_i}}Start typing in the field below to show the typeahead results.{{/i}}</p>
|
<p>{{_i}}Start typing in the field below to show the typeahead results.{{/i}}</p>
|
||||||
<div class="well">
|
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||||
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
||||||
</div>
|
</div>{{! /example }}
|
||||||
<hr>
|
|
||||||
<h2>{{_i}}Using bootstrap-typeahead.js{{/i}}</h2>
|
<h2>{{_i}}Using bootstrap-typeahead.js{{/i}}</h2>
|
||||||
<p>{{_i}}Call the typeahead via javascript:{{/i}}</p>
|
<p>{{_i}}Call the typeahead via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
|
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
|
||||||
@ -1422,6 +1398,4 @@ $('.carousel').carousel({
|
|||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<h3>{{_i}}Methods{{/i}}</h3>
|
||||||
<h4>.typeahead({{_i}}options{{/i}})</h4>
|
<h4>.typeahead({{_i}}options{{/i}})</h4>
|
||||||
<p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
|
<p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
14
docs/templates/pages/less.mustache
vendored
14
docs/templates/pages/less.mustache
vendored
@ -3,15 +3,21 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1>
|
<h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1>
|
||||||
<p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
|
<p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
|
||||||
<div class="subnav">
|
</header>
|
||||||
<ul class="nav nav-pills">
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="contents">
|
||||||
|
<div class="bs-docs-contents">
|
||||||
|
<h3>{{_i}}Contents{{/i}}</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
|
<li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
|
||||||
<li><a href="#variables">{{_i}}Variables{{/i}}</a></li>
|
<li><a href="#variables">{{_i}}Variables{{/i}}</a></li>
|
||||||
<li><a href="#mixins">{{_i}}Mixins{{/i}}</a></li>
|
<li><a href="#mixins">{{_i}}Mixins{{/i}}</a></li>
|
||||||
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
|
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
|
||||||
</ul>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
55
docs/templates/pages/scaffolding.mustache
vendored
55
docs/templates/pages/scaffolding.mustache
vendored
@ -3,64 +3,21 @@
|
|||||||
<header class="jumbotron subhead" id="overview">
|
<header class="jumbotron subhead" id="overview">
|
||||||
<h1>{{_i}}Scaffolding{{/i}}</h1>
|
<h1>{{_i}}Scaffolding{{/i}}</h1>
|
||||||
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
|
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
<!-- <div class="subnav">
|
|
||||||
<ul class="nav nav-pills">
|
<section class="bs-docs-contents">
|
||||||
|
<h3>{{_i}}Contents{{/i}}</h3>
|
||||||
|
<ol>
|
||||||
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
|
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
|
||||||
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
|
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
|
||||||
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
|
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
|
||||||
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
|
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
|
||||||
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
|
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
|
||||||
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
|
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
--></header>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <section class="bs-docs-contents">
|
|
||||||
<h3>{{_i}}Contents{{/i}}</h3>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<a href="#global">{{_i}}Global styles{{/i}}</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#global-1">{{_i}}Requires HTML5 doctype{{/i}}</a></li>
|
|
||||||
<li><a href="#global-2">{{_i}}Typography and links{{/i}}</a></li>
|
|
||||||
<li><a href="#global-3">{{_i}}Reset via Normalize{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#gridSystem">{{_i}}Grid system{{/i}}</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#gridSystem-1">{{_i}}Offsetting columns{{/i}}</a></li>
|
|
||||||
<li><a href="#gridSystem-2">{{_i}}Nesting columns{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#fluidGridSystem-1">{{_i}}Nesting fluid columns{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#gridCustomization">{{_i}}Grid Customization{{/i}}</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#layouts">{{_i}}Layouts{{/i}}</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#layouts-1">{{_i}}Fixed layout{{/i}}</a></li>
|
|
||||||
<li><a href="#layouts-1">{{_i}}Fluid layout{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#responsive">{{_i}}Responsive design{{/i}}</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#responsive-1">{{_i}}Responsive utility classes{{/i}}</a></li>
|
|
||||||
<li><a href="#responsive-2">{{_i}}Responsive tests{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Global Bootstrap settings
|
<!-- Global Bootstrap settings
|
||||||
|
|||||||
@ -74,6 +74,89 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-docs-nav">
|
||||||
|
<h3 class="bs-docs-logo">Bootstrap</h3>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="">
|
||||||
|
<a href="./index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="">
|
||||||
|
<a href="./scaffolding.html">Scaffolding</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Doctype</a></li>
|
||||||
|
<li><a href="">Type and links</a></li>
|
||||||
|
<li><a href="">Normalize reset</a></li>
|
||||||
|
<li><a href="">Grid system</a></li>
|
||||||
|
<li><a href="">Fluid grid system</a></li>
|
||||||
|
<li><a href="">Layouts</a></li>
|
||||||
|
<li><a href="">Responsive</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./base-css.html">Base CSS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Typography</a></li>
|
||||||
|
<li><a href="">Code</a></li>
|
||||||
|
<li><a href="">Tables</a></li>
|
||||||
|
<li><a href="">Forms</a></li>
|
||||||
|
<li><a href="">Buttons</a></li>
|
||||||
|
<li><a href="">Glyphicons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./components.html">Components</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#buttonGroups">Button groups</a></li>
|
||||||
|
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
||||||
|
<li><a href="#navs">Nav, tabs, pills</a></li>
|
||||||
|
<li><a href="#navbar">Navbar</a></li>
|
||||||
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#pagination">Pagination</a></li>
|
||||||
|
<li><a href="#labels">Labels</a></li>
|
||||||
|
<li><a href="#badges">Badges</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#progress">Progress bars</a></li>
|
||||||
|
<li><a href="#misc">Miscellaneous</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./javascript.html">Javascript</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#javascript">All plugins</a></li>
|
||||||
|
<li><a href="#modals">Modal</a></li>
|
||||||
|
<li><a href="#dropdowns">Dropdown</a></li>
|
||||||
|
<li><a href="#scrollspy">Scrollspy</a></li>
|
||||||
|
<li><a href="#tabs">Tab</a></li>
|
||||||
|
<li><a href="#tooltips">Tooltip</a></li>
|
||||||
|
<li><a href="#popovers">Popover</a></li>
|
||||||
|
<li><a href="#alerts">Alert</a></li>
|
||||||
|
<li><a href="#buttons">Button</a></li>
|
||||||
|
<li><a href="#collapse">Collapse</a></li>
|
||||||
|
<li><a href="#carousel">Carousel</a></li>
|
||||||
|
<li><a href="#typeahead">Typeahead</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./less.html">LESS</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#builtWith">Built with Less</a></li>
|
||||||
|
<li><a href="#variables">Variables</a></li>
|
||||||
|
<li><a href="#mixins">Mixins</a></li>
|
||||||
|
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./download.html">Customize</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./examples.html">Examples</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-container">
|
<div class="bs-docs-container">
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user