Skip to content

B
bootstrap
Commit 14975e4e authored by Mark Otto's avatar Mark Otto
Browse files
Options

indentation and page header changes

parent a633fc04
Show whitespace changes
Inline Side-by-side
Showing with 1499 additions and 1528 deletions
docs/about.html
View file @ 14975e4e
......@@ -9,9 +9,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
<!-- Brand
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="brand">Brand guidelines</h1>
</div>
<h1 id="brand" class="page-header">Brand guidelines</h1>
<p class="lead">Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by Mailchimp's <a href="http://mailchimp.com/about/brand-assets/" target="_blank">Brand Assets</a>.</p>
<h2>Mark and logo</h2>
......@@ -67,9 +66,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
<!-- History
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="history">History</h1>
</div>
<h1 id="history" class="page-header">History</h1>
<p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
<p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
......@@ -79,9 +77,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
<!-- Team
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="team">Team</h1>
</div>
<h1 id="team" class="page-header">Team</h1>
<p class="lead">Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<h2 id="team-core">Core team</h2>
......@@ -155,9 +152,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
<!-- Community
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="community">Community</h1>
</div>
<h1 id="community" class="page-header">Community</h1>
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
<ul>
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
......@@ -171,9 +167,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
<!-- Translations
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="translations">Translations</h1>
</div>
<h1 id="translations" class="page-header">Translations</h1>
<p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and may not always be up to date.</p>
<ul>
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
......
docs/customize.html
View file @ 14975e4e
......@@ -8,10 +8,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<!-- Customizer form -->
<form class="bs-customizer" role="form">
<div class="bs-docs-section" id="less-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Toggle all</button>
<h1 id="less">LESS files</h1>
</div>
<h1 id="less" class="page-header">LESS files</h1>
<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>
<div class="row">
......@@ -238,10 +237,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<div class="bs-docs-section" id="plugin-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Toggle all</button>
<h1 id="plugins">jQuery plugins</h1>
</div>
<h1 id="plugins" class="page-header">jQuery plugins</h1>
<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">
<div class="col-lg-6">
......@@ -338,18 +336,18 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<div class="bs-docs-section" id="less-variables-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Reset to defaults</button>
<h1 id="less-variables">LESS variables</h1>
</div>
<h1 id="less-variables" class="page-header">LESS variables</h1>
<p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
{% include customizer-variables.html %}
</div>
<div class="bs-docs-section">
<div class="page-header">
<h1 id="download">Download</h1>
</div>
<h1 id="download" class="page-header">Download</h1>
<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">
<button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
......
docs/javascript.html
View file @ 14975e4e
......@@ -6,12 +6,10 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug
---
<!-- Overview
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="js-overview">Overview</h1>
</div>
<!-- Overview
================================================== -->
<div class="bs-docs-section">
<h1 id="js-overview" class="page-header">Overview</h1>
<h3 id="js-individual-compiled">Individual or compiled</h3>
<p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>
......@@ -75,30 +73,27 @@ $('#myModal').on('show.bs.modal', function (e) {
<h4>Third-party libraries</h4>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
</div>
</div>
</div>
<!-- Transitions
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="transitions">Transitions <small>transition.js</small></h1>
</div>
<!-- Transitions
================================================== -->
<div class="bs-docs-section">
<h1 id="transitions" class="page-header">Transitions <small>transition.js</small></h1>
<h3>About transitions</h3>
<p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
<h3>What's inside</h3>
<p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
</div>
</div>
<!-- Modal
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="modals">Modals <small>modal.js</small></h1>
</div>
<!-- Modal
================================================== -->
<div class="bs-docs-section">
<h1 id="modals" class="page-header">Modals <small>modal.js</small></h1>
<h2 id="modals-examples">Examples</h2>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
......@@ -414,16 +409,14 @@ $('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
{% endhighlight %}
</div>
</div>
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="dropdowns">Dropdowns <small>dropdown.js</small></h1>
</div>
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section">
<h1 id="dropdowns" class="page-header">Dropdowns <small>dropdown.js</small></h1>
<h2 id="dropdowns-examples">Examples</h2>
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
......@@ -593,16 +586,13 @@ $('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- ScrollSpy
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="scrollspy">ScrollSpy <small>scrollspy.js</small></h1>
</div>
<!-- ScrollSpy
================================================== -->
<div class="bs-docs-section">
<h1 id="scrollspy" class="page-header">ScrollSpy <small>scrollspy.js</small></h1>
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
......@@ -734,16 +724,14 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- Tabs
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="tabs">Togglable tabs <small>tab.js</small></h1>
</div>
<!-- Tabs
================================================== -->
<div class="bs-docs-section">
<h1 id="tabs" class="page-header">Togglable tabs <small>tab.js</small></h1>
<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>
......@@ -783,6 +771,7 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<h2 id="tabs-usage">Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% highlight js %}
$('#myTab a').click(function (e) {
e.preventDefault()
......@@ -791,6 +780,7 @@ $('#myTab a').click(function (e) {
{% endhighlight %}
<p>You can activate individual tabs in several ways:</p>
{% highlight js %}
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
......@@ -883,16 +873,14 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
})
{% endhighlight %}
</div>
</div>
<!-- Tooltips
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="tooltips">Tooltips <small>tooltip.js</small></h1>
</div>
<!-- Tooltips
================================================== -->
<div class="bs-docs-section">
<h1 id="tooltips" class="page-header">Tooltips <small>tooltip.js</small></h1>
<h2 id="tooltips-examples">Examples</h2>
<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>
......@@ -1090,14 +1078,12 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- Popovers
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="popovers">Popovers <small>popover.js</small></h1>
</div>
<!-- Popovers
================================================== -->
<div class="bs-docs-section">
<h1 id="popovers" class="page-header">Popovers <small>popover.js</small></h1>
<h2 id="popovers-examples">Examples</h2>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
......@@ -1343,16 +1329,15 @@ $('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- Alert
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="alerts">Alert messages <small>alert.js</small></h1>
</div>
<!-- Alert
================================================== -->
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
......@@ -1420,16 +1405,14 @@ $('#my-alert').bind('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- Buttons
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="buttons">Buttons <small>button.js</small></h1>
</div>
<!-- Buttons
================================================== -->
<div class="bs-docs-section">
<h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
<h2 id="buttons-examples">Example uses</h2>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
......@@ -1580,16 +1563,14 @@ $('.btn').button()
$('.btn').button('complete')
</script>
{% endhighlight %}
</div>
</div>
<!-- Collapse
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="collapse">Collapse <small>collapse.js</small></h1>
</div>
<!-- Collapse
================================================== -->
<div class="bs-docs-section">
<h1 id="collapse" class="page-header">Collapse <small>collapse.js</small></h1>
<h3>About</h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
......@@ -1809,16 +1790,14 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- Carousel
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="carousel">Carousel <small>carousel.js</small></h1>
</div>
<!-- Carousel
================================================== -->
<div class="bs-docs-section">
<h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1>
<h2 id="carousel-examples">Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
......@@ -1877,10 +1856,11 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</a>
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
<div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
<h4>Transition animations not supported in Internet Explorer 8 &amp; 9</h4>
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 &amp; 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
</div>
</div>
<h3>Optional captions</h3>
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
......@@ -1932,10 +1912,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger">
<h4>Accessibility issue</h4>
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
</div>
</div>
<h2 id="carousel-usage">Usage</h2>
......@@ -2037,16 +2017,14 @@ $('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
{% endhighlight %}
</div>
</div>
<!-- Affix
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="affix">Affix <small>affix.js</small></h1>
</div>
<!-- Affix
================================================== -->
<div class="bs-docs-section">
<h1 id="affix" class="page-header">Affix <small>affix.js</small></h1>
<h2 id="affix-examples">Example</h2>
<p>The subnavigation on the left is a live demo of the affix plugin.</p>
......@@ -2153,4 +2131,4 @@ $('#myCarousel').on('slide.bs.carousel', function () {
</table>
</div><!-- /.table-responsive -->
</div>
</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