Skip to content

B
bootstrap
Commit 6fdb18b6 authored by fat's avatar fat
Browse files
Options

Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip

parents e2d4cf5f 46a33204
Show whitespace changes
Inline Side-by-side
Showing with 1124 additions and 1135 deletions
_config.yml
View file @ 6fdb18b6
......@@ -9,3 +9,20 @@ permalink: pretty
destination: ./_gh_pages
exclude: [".editorconfig", ".gitignore", ".ruby-version", "bower.json", "composer.json", "CONTRIBUTING.md", "LICENSE", "Makefile", "package.json", "node_modules", "README.md", "less"]
port: 9001
# Custom vars
repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/v3.0.0-rc1.zip
download_dist: https://github.com/twbs/bootstrap/archive/v3.0.0-rc1-dist.zip
examples: http://examples.getbootstrap.com
examples_repo: https://github.com/twbs/bootstrap-examples
glyphicons: http://glyphicons.getbootstrap.com
glyphicons_repo: https://github.com/twbs/bootstrap-glyphicons
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
_layouts/customize.html
View file @ 6fdb18b6
......@@ -26,7 +26,7 @@
<div class="bs-customize-placeholder">
<div class="container bs-docs-container">
<p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="https://github.com/twbs/bootstrap/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
<p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
</div>
</div>
......@@ -38,11 +38,11 @@
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li class="muted">&middot;</li>
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</footer>
......
_layouts/default.html
View file @ 6fdb18b6
......@@ -51,9 +51,7 @@
</div>
<!-- Quick back to top -->
<a href="#" class="bs-top">
Back to top
</a>
<a href="#" class="bs-top">Back to top</a>
<!-- Footer
================================================== -->
......@@ -63,11 +61,11 @@
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li class="muted">&middot;</li>
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</footer>
......
_layouts/home.html
View file @ 6fdb18b6
......@@ -21,16 +21,16 @@
<ul class="bs-masthead-links">
<li>
<a href="http://github.com/twbs/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li>
<li>
<a href="http://examples.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
<a href="{{ site.examples }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
</li>
<li>
<a href="http://glyphicons.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
<a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
</li>
<li>
<a href="http://expo.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
<a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
</li>
</ul>
</div>
......
assets/css/docs.css
View file @ 6fdb18b6
......@@ -175,6 +175,10 @@ body {
position: relative;
}
.bs-docs-section + .bs-docs-section {
margin-top: 80px;
}
/* Ads in page headers */
.carbonad {
width: auto !important;
......@@ -211,11 +215,6 @@ body {
display: none; /* hide what I assume are tracking images */
}
/* Padding for in-page bookmarks */
.bs-docs-section {
padding-top: 30px;
}
/* Docs sidebar
......@@ -230,23 +229,24 @@ body {
.bs-sidenav {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 5px;
padding-bottom: 5px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 0 #fff;
background-color: #f5f5f5;
background-color: #f2f0f5;
border-radius: 5px;
}
/* All levels of nav */
.bs-sidebar .nav > li > a {
display: block;
color: #666;
color: #716b7a;
padding: 5px 20px;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
border-right: 1px solid #d5d5d5;
background-color: #e5e3e9;
border-right: 1px solid #dbd8e0;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
......
assets/js/application.js
View file @ 6fdb18b6
......@@ -67,11 +67,8 @@
})
// popover demo
$("a[data-toggle=popover]")
$("[data-toggle=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})
// button state demo
$('#fat-btn')
......
components.html
View file @ 6fdb18b6
......@@ -8,9 +8,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section" id="dropdowns">
<div class="bs-docs-section">
<div class="page-header">
<h1>Dropdown menus</h1>
<h1 id="dropdowns">Dropdown menus</h1>
</div>
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="/javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
......@@ -97,9 +97,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<!-- Button Groups
================================================== -->
<div class="bs-docs-section" id="btn-groups">
<div class="bs-docs-section">
<div class="page-header">
<h1>Button groups</h1>
<h1 id="btn-groups">Button groups</h1>
</div>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="/javascript/#js-buttons">our buttons plugin</a>.</p>
......@@ -218,9 +218,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<!-- Split button dropdowns
================================================== -->
<div class="bs-docs-section" id="btn-dropdowns">
<div class="bs-docs-section">
<div class="page-header">
<h1>Button dropdown menus</h1>
<h1 id="btn-dropdowns">Button dropdown menus</h1>
</div>
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
......@@ -478,9 +478,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<!-- Navs
================================================== -->
<div class="bs-docs-section" id="nav">
<div class="bs-docs-section">
<div class="page-header">
<h1>Navs</h1>
<h1 id="nav">Navs</h1>
</div>
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
......@@ -666,12 +666,11 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<!-- Navbar
================================================== -->
<div class="bs-docs-section" id="navbar">
<div class="bs-docs-section">
<div class="page-header">
<h1>Navbar</h1>
<h1 id="navbar">Navbar</h1>
</div>
<h2 id="navbar-basic">Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<div class="bs-example">
......@@ -1042,9 +1041,9 @@ body { padding-bottom: 70px; }
<!-- Breadcrumbs
================================================== -->
<div class="bs-docs-section" id="breadcrumbs">
<div class="bs-docs-section">
<div class="page-header">
<h1>Breadcrumbs <small></small></h1>
<h1 id="breadcrumbs">Breadcrumbs <small></small></h1>
</div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
......@@ -1075,9 +1074,9 @@ body { padding-bottom: 70px; }
<!-- Pagination
================================================== -->
<div class="bs-docs-section" id="pagination">
<div class="bs-docs-section">
<div class="page-header">
<h1>Pagination</h1>
<h1 id="pagination">Pagination</h1>
</div>
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
......@@ -1234,9 +1233,9 @@ body { padding-bottom: 70px; }
<!-- Labels
================================================== -->
<div class="bs-docs-section" id="labels">
<div class="bs-docs-section">
<div class="page-header">
<h1>Labels</h1>
<h1 id="labels">Labels</h1>
</div>
<p class="lead"></p>
......@@ -1276,9 +1275,9 @@ body { padding-bottom: 70px; }
<!-- Badges
================================================== -->
<div class="bs-docs-section" id="badges">
<div class="bs-docs-section">
<div class="page-header">
<h1>Badges</h1>
<h1 id="badges">Badges</h1>
</div>
<p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
......@@ -1339,9 +1338,9 @@ body { padding-bottom: 70px; }
<!-- Typographic components
================================================== -->
<div class="bs-docs-section" id="type-components">
<div class="bs-docs-section">
<div class="page-header">
<h1>Typographic components</h1>
<h1 id="type-components">Typographic components</h1>
</div>
<h2 id="type-components-jumbotron">Jumbotron</h2>
......@@ -1379,9 +1378,9 @@ body { padding-bottom: 70px; }
<!-- Thumbnails
================================================== -->
<div class="bs-docs-section" id="thumbnails">
<div class="bs-docs-section">
<div class="page-header">
<h1>Thumbnails</h1>
<h1 id="thumbnails">Thumbnails</h1>
</div>
<p class="lead">Extend Bootstrap's <a href="/css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
......@@ -1479,9 +1478,9 @@ body { padding-bottom: 70px; }
<!-- Alerts
================================================== -->
<div class="bs-docs-section" id="alerts">
<div class="bs-docs-section">
<div class="page-header">
<h1>Alerts</h1>
<h1 id="alerts">Alerts</h1>
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="/javascript/#js-alerts">alerts jQuery plugin</a>.</p>
......@@ -1579,9 +1578,9 @@ body { padding-bottom: 70px; }
<!-- Progress bars
================================================== -->
<div class="bs-docs-section" id="progress">
<div class="bs-docs-section">
<div class="page-header">
<h1>Progress bars</h1>
<h1 id="progress">Progress bars</h1>
</div>
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
......@@ -1701,9 +1700,9 @@ body { padding-bottom: 70px; }
<!-- Media object
================================================== -->
<div class="bs-docs-section" id="media">
<div class="bs-docs-section">
<div class="page-header">
<h1>Media object</h1>
<h1 id="media">Media object</h1>
</div>
<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
......@@ -1825,9 +1824,9 @@ body { padding-bottom: 70px; }
<!-- List group
================================================== -->
<div class="bs-docs-section" id="list-group">
<div class="bs-docs-section">
<div class="page-header">
<h1>List group</h1>
<h1 id="list-group">List group</h1>
</div>
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
......@@ -1945,9 +1944,9 @@ body { padding-bottom: 70px; }
<!-- Panels
================================================== -->
<div class="bs-docs-section" id="panels">
<div class="bs-docs-section">
<div class="page-header">
<h1>Panels</h1>
<h1 id="panels">Panels</h1>
</div>
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
......@@ -2092,9 +2091,9 @@ body { padding-bottom: 70px; }
<!-- Wells
================================================== -->
<div class="bs-docs-section" id="wells">
<div class="bs-docs-section">
<div class="page-header">
<h1>Wells</h1>
<h1 id="wells">Wells</h1>
</div>
<h3>Default well</h3>
......
css.html
View file @ 6fdb18b6
......@@ -8,9 +8,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<!-- Global Bootstrap settings
================================================== -->
<div class="bs-docs-section" id="overview">
<div class="bs-docs-section">
<div class="page-header">
<h1>Overview</h1>
<h1 id="overview">Overview</h1>
</div>
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
......@@ -56,9 +56,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<!-- Glyphicons icon font
================================================== -->
<div class="bs-docs-section" id="glyphicons">
<div class="bs-docs-section">
<div class="page-header">
<h1>Glyphicons</h1>
<h1 id="glyphicons">Glyphicons</h1>
</div>
<p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
<p class="lead">
......@@ -70,9 +70,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<!-- Grid system
================================================== -->
<div class="bs-docs-section" id="grid">
<div class="bs-docs-section">
<div class="page-header">
<h1>Grid system</h1>
<h1 id="grid">Grid system</h1>
</div>
<p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
......@@ -410,9 +410,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<!-- Typography
================================================== -->
<div class="bs-docs-section" id="type">
<div class="bs-docs-section">
<div class="page-header">
<h1>Typography</h1>
<h1 id="type">Typography</h1>
</div>
<!-- Headings -->
......@@ -801,9 +801,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<!-- Code
================================================== -->
<div class="bs-docs-section" id="code">
<div class="bs-docs-section">
<div class="page-header">
<h1>Code</h1>
<h1 id="code">Code</h1>
</div>
<h2>Inline</h2>
......@@ -831,9 +831,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Tables
================================================== -->
<div class="bs-docs-section" id="tables">
<div class="bs-docs-section">
<div class="page-header">
<h1>Tables</h1>
<h1 id="tables">Tables</h1>
</div>
<h2 id="tables-example">Basic example</h2>
......@@ -1160,9 +1160,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Forms
================================================== -->
<div class="bs-docs-section" id="forms">
<div class="bs-docs-section">
<div class="page-header">
<h1>Forms</h1>
<h1 id="forms">Forms</h1>
</div>
<h2 id="forms-example">Basic example</h2>
......@@ -1839,9 +1839,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Buttons
================================================== -->
<div class="bs-docs-section" id="buttons">
<div class="bs-docs-section">
<div class="page-header">
<h1>Buttons</h1>
<h1 id="buttons">Buttons</h1>
</div>
<h2 id="buttons-options">Button options</h2>
......@@ -1986,9 +1986,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Images
================================================== -->
<div class="bs-docs-section" id="images">
<div class="bs-docs-section">
<div class="page-header">
<h1>Images</h1>
<h1 id="images">Images</h1>
</div>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
......@@ -2012,9 +2012,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Helpers
================================================== -->
<div class="bs-docs-section" id="helper-classes">
<div class="bs-docs-section">
<div class="page-header">
<h1>Helper classes</h1>
<h1 id="helper-classes">Helper classes</h1>
</div>
<h3>Close icon</h3>
......
customize.html
View file @ 6fdb18b6
......@@ -8,10 +8,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<!-- Customize
================================================== -->
<form class="bs-customizer">
<div class="bs-docs-section" id="less">
<div class="bs-docs-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Toggle all</button>
<h1>LESS files</h1>
<h1 id="less">LESS files</h1>
</div>
<p class="lead">Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="/css/">CSS</a> and <a href="/components/">Components</a> pages in the docs</p>
......@@ -263,10 +263,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<div class="bs-docs-section" id="plugins">
<div class="bs-docs-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Toggle all</button>
<h1>jQuery plugins</h1>
<h1 id="plugins">jQuery plugins</h1>
</div>
<p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="/javascript/">JavaScript</a> page in the docs.</p>
<div class="row">
......@@ -363,10 +363,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<div class="bs-docs-section" id="less-variables">
<div class="bs-docs-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Reset to defaults</button>
<h1>LESS variables</h1>
<h1 id="less-variables">LESS variables</h1>
</div>
<p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
......@@ -1425,9 +1425,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div>
</div>
<div class="bs-docs-section" id="download">
<div class="bs-docs-section">
<div class="page-header">
<h1>Download</h1>
<h1 id="download">Download</h1>
</div>
<p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
<div class="bs-customize-download">
......
getting-started.html
View file @ 6fdb18b6
......@@ -8,26 +8,26 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<!-- Getting started
================================================== -->
<div class="bs-docs-section" id="download">
<div class="bs-docs-section">
<div class="page-header">
<h1>Download Bootstrap</h1>
<h1 id="download">Download Bootstrap</h1>
</div>
<p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<p><a class="btn btn-large btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<hr>
<h3 id="download-options">More download options</h3>
<div class="bs-docs-dl-options">
<h4>
<a href="https://github.com/twbs/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a>
<a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a>
</h4>
<p>Get the original files for all CSS and JavaScript by downloading the latest version directly from GitHub.</p>
<h4>
<a href="https://github.com/twbs/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
</h4>
<p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
<h4>
......@@ -43,10 +43,10 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %}
<!-- Latest compiled and minified CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="{{ site.cdn_css }}">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="{{ site.cdn_js }}"></script>
{% endhighlight %}
<div class="bs-callout bs-callout-warning" id="callout-less-compilation">
......@@ -59,9 +59,9 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<!-- File structure
================================================== -->
<div class="bs-docs-section" id="whats-included">
<div class="bs-docs-section">
<div class="page-header">
<h1>What's included</h1>
<h1 id="whats-included">What's included</h1>
</div>
<p class="lead">Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
......@@ -79,7 +79,7 @@ bootstrap/
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#examples">starter template</a>.</p>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
</div>
</div>
......@@ -87,13 +87,12 @@ bootstrap/
<!-- Template
================================================== -->
<div class="bs-docs-section" id="template">
<div class="bs-docs-section">
<div class="page-header">
<h1>Basic template</h1>
<h1 id="template">Basic template</h1>
</div>
<p class="lead">Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<p class="lead">Make use of a super basic HTML template, or dive into a <a href="{{ site.examples }}">few examples</a> we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<h3 id="examples-template">HTML template</h3>
<p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p>
{% highlight html %}
<!DOCTYPE html>
......@@ -118,19 +117,17 @@ bootstrap/
</html>
{% endhighlight %}
<hr>
<h3>Looking for more example templates?</h3>
<p>Check out the new <a href="https://github.com/twbs/bootstrap-examples">Examples repository on GitHub</a>, or <a href="http://examples.getbootstrap.com">view them in your browser</a>. Included are over a dozen example templates for building with and extending Bootstrap.</p>
<p>Check out the new <a href="{{ site.examples_repo }}">Examples repository on GitHub</a>, or <a href="{{ site.examples }}">view them in your browser</a>. Included are over a dozen example templates for building with and extending Bootstrap.</p>
</div>
<!-- Browser compatibility
================================================== -->
<div class="bs-docs-section" id="browsers">
<div class="bs-docs-section">
<div class="page-header">
<h1>Browser compatibility</h1>
<h1 id="browsers">Browser compatibility</h1>
</div>
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
......@@ -157,9 +154,9 @@ bootstrap/
<!-- License FAQs
================================================== -->
<div class="bs-docs-section" id="license-faqs">
<div class="bs-docs-section">
<div class="page-header">
<h1>License FAQs</h1>
<h1 id="license-faqs">License FAQs</h1>
</div>
<p class="lead">Bootstrap is released under the Apache 2 license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
......@@ -196,15 +193,15 @@ bootstrap/
</ul>
</div>
</div>
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/master/README.md">in the project repository</a> for more information.</p>
<p>The full Bootstrap license is located <a href="{{ site.repo }}/blob/master/README.md">in the project repository</a> for more information.</p>
</div><!-- /.bs-docs-section -->
<div class="bs-docs-section" id="customizing">
<div class="bs-docs-section">
<div class="page-header">
<h1>Customizing Bootstrap</h1>
<h1 id="customizing">Customizing Bootstrap</h1>
</div>
<p class="lead">Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also familiarizing yourself to the intricacies of the framework.</p>
......
index.html
View file @ 6fdb18b6
......@@ -8,7 +8,7 @@ title: Bootstrap
<h1>Bootstrap 3</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
<p>
<a href="assets/bootstrap.zip" class="btn btn-bs btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a>
<a href="{{ site.download_dist }}" class="btn btn-bs btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a>
</p>
</div>
</div>
javascript.html
View file @ 6fdb18b6
......@@ -222,8 +222,6 @@ $('#myModal').on('show.bs.modal', function (e) {
</div><!-- /.modal -->
{% endhighlight %}
<h2 id="modals-usage">Usage</h2>
<h3>Via data attributes</h3>
......@@ -344,7 +342,6 @@ $('#myModal').on('hidden.bs.modal', function () {
<h1 id="dropdowns">Dropdowns <small>dropdown.js</small></h1>
</div>
<h2 id="dropdowns-examples">Examples</h2>
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
......@@ -436,9 +433,6 @@ $('#myModal').on('hidden.bs.modal', function () {
</div> <!-- /example -->
<hr class="bs-docs-separator">
<h2 id="dropdowns-usage">Usage</h2>
<h3>Via data attributes</h3>
......@@ -475,7 +469,7 @@ $('.dropdown-toggle').dropdown()
<h3>Methods</h3>
<h4>$().dropdown('toggle')</h4>
<p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
</section>
</div>
......@@ -599,7 +593,7 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
{% endhighlight %}
</section>
</div>
......@@ -610,7 +604,6 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<h1 id="tabs">Togglable tabs <small>tab.js</small></h1>
</div>
<h2 id="tabs-examples">Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-example bs-example-tabs">
......@@ -642,9 +635,6 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2 id="tabs-usage">Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% highlight js %}
......@@ -727,7 +717,8 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
})
{% endhighlight %}
</section>
</div>
<!-- Tooltips
......@@ -760,8 +751,6 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
</div>
<hr class="bs-docs-separator">
<h2 id="tooltips-usage">Usage</h2>
<p>Trigger the tooltip via JavaScript:</p>
......@@ -867,7 +856,7 @@ $('#example').tooltip(options)
<h4>.tooltip('destroy')</h4>
<p>Hides and destroys an element's tooltip.</p>
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
</section>
</div>
......@@ -935,18 +924,23 @@ $('#example').tooltip(options)
<h4>Four directions</h4>
<div class="bs-example tooltip-demo">
<ul class="bs-example-tooltips">
<li><a href="#" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
<li><a href="#" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
<li><a href="#" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
<li><a href="#" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
</ul>
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
</div>
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2 id="popovers-usage">Usage</h2>
<p>Enable popovers via JavaScript:</p>
{% highlight js %}$('#example').popover(options){% endhighlight %}
......@@ -1052,7 +1046,7 @@ $('#example').tooltip(options)
<h4>.popover('destroy')</h4>
<p>Hides and destroys an element's popover.</p>
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
</section>
</div>
......@@ -1085,9 +1079,6 @@ $('#example').tooltip(options)
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2 id="alerts-usage">Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %}
......@@ -1226,9 +1217,6 @@ $('#my-alert').bind('closed.bs.alert', function () {
{% endhighlight %}
<hr class="bs-docs-separator">
<h2 id="buttons-usage">Usage</h2>
<p>Enable buttons via JavaScript:</p>
{% highlight js %}
......@@ -1389,9 +1377,6 @@ $('.nav-tabs').button()
{% endhighlight %}
<hr class="bs-docs-separator">
<h2 id="collapse-usage">Usage</h2>
<h3>Via data attributes</h3>
......@@ -1486,7 +1471,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
{% endhighlight %}
</section>
</div>
......@@ -1610,10 +1595,6 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
{% endhighlight %}
<hr class="bs-docs-separator">
<h2 id="carousel-usage">Usage</h2>
<h3>Via data attributes</h3>
......@@ -1698,12 +1679,12 @@ $('.carousel').carousel({
</tr>
</tbody>
</table>
{% highlight js %}
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
{% endhighlight %}
</section>
</div>
......@@ -1771,4 +1752,4 @@ $('#myCarousel').on('slide.bs.carousel', function () {
</tr>
</tbody>
</table>
</section>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment