diff options
| author | Mark Otto <[email protected]> | 2015-05-29 01:58:52 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-05-29 01:58:52 -0700 |
| commit | b455ed8def8c82acaabf79c74e8899ee9139b6b2 (patch) | |
| tree | 4d287f898555ceab2d089c17905239f3f437e799 /docs/components | |
| parent | 9e1af0d743315e4f3dc220dc308f940f92b20d5a (diff) | |
| download | bootstrap-b455ed8def8c82acaabf79c74e8899ee9139b6b2.tar.xz bootstrap-b455ed8def8c82acaabf79c74e8899ee9139b6b2.zip | |
add markdown toc stuff
Diffstat (limited to 'docs/components')
26 files changed, 139 insertions, 22 deletions
diff --git a/docs/components/alerts.md b/docs/components/alerts.md index a7d43400a..b3a2e1b00 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -5,6 +5,11 @@ title: Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Examples Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). diff --git a/docs/components/badges.md b/docs/components/badges.md index 0828f151d..324053fec 100644 --- a/docs/components/badges.md +++ b/docs/components/badges.md @@ -5,6 +5,11 @@ title: Badges Badges are indicators for new or unread activity and include support for the active states of our [navigation components](/components/navs/), links, buttons, and more. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + {% example html %} <a href="#">Inbox <span class="badge">42</span></a> {% endexample %} diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index 1e44d7853..2e7b9d8de 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -11,6 +11,11 @@ Use any button to trigger a dropdown menu by placing it within a `.btn-group` an Button dropdowns require the [dropdown plugin](../javascript/#dropdowns) to be included in your version of Bootstrap. {% endcallout %} +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ### Single button dropdowns Turn a button into a dropdown toggle with some basic markup changes. diff --git a/docs/components/button-group.md b/docs/components/button-group.md index 9f223c7de..979dac1c1 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -5,6 +5,11 @@ title: Button group Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons). +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + {% callout warning %} #### Tooltips & popovers in button groups require special setting diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 62727fba4..4d2fc47be 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -5,6 +5,11 @@ title: Buttons Buttons are used to execute actions in forms, dialogs, and more. Use any of the available button classes to quickly create a styled button. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Examples Bootstrap includes six predefined button styles, each serving its own semantic purpose. diff --git a/docs/components/card.md b/docs/components/card.md index 1a7a2aaca..8c5bcc9b4 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -7,6 +7,11 @@ A **card** is a flexible and extensible content container. It includes options f If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Example Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. @@ -154,7 +159,9 @@ Add an optional header and/or footer within a card. <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> +{% endexample %} +{% example html %} <div class="card"> <div class="card-header"> Quote @@ -182,21 +189,6 @@ Add an optional header and/or footer within a card. 2 days ago </div> </div> - -<div class="card text-center"> - <div class="card-header"> - Quote - </div> - <div class="card-block"> - <blockquote class="card-blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> - </blockquote> - </div> - <div class="card-footer text-muted"> - 2 days ago - </div> -</div> {% endexample %} ## Image caps @@ -228,7 +220,7 @@ Turn an image into a card background and overlay your card's text. Depending on {% example html %} <div class="card card-inverse"> - <img class="card-img" data-src="holder.js/270x270/#55595c:#373a3c/text:Card image" alt="Card image"> + <img class="card-img" data-src="holder.js/100%x270/#55595c:#373a3c/text:Card image" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 138358f37..0beb89f1c 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -5,6 +5,11 @@ title: Carousel A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.** +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Example {% example html %} diff --git a/docs/components/code.md b/docs/components/code.md index 423987d92..9c7f92bae 100644 --- a/docs/components/code.md +++ b/docs/components/code.md @@ -5,6 +5,11 @@ title: Code Styles for inline code snippets and longer, multiline blocks of code. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Inline code Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets. diff --git a/docs/components/collapse.md b/docs/components/collapse.md index e61fb82b5..e3eff9e69 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -5,6 +5,11 @@ title: Collapse Flexible plugin that utilizes a handful of classes for easy toggle behavior. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + {% callout danger %} #### Plugin dependency diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index a24093d9a..f806f9256 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -5,6 +5,11 @@ title: Dropdowns Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Example Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then add the menu's HTML. diff --git a/docs/components/forms.md b/docs/components/forms.md index b2e2263b6..2c4e3979d 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -5,6 +5,11 @@ title: Forms Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Form controls Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes. diff --git a/docs/components/images.md b/docs/components/images.md index dca37a5e8..afcf1c9d2 100644 --- a/docs/components/images.md +++ b/docs/components/images.md @@ -5,6 +5,11 @@ title: Images Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Responsive images Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. diff --git a/docs/components/input-group.md b/docs/components/input-group.md index c89b44e87..3c933b862 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -5,6 +5,11 @@ title: Input group Easily extend form controls by adding text, buttons, or button groups on either side of textual `<input>`s. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Basic example Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.** diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 6324032f5..6e6faf75f 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -5,7 +5,12 @@ title: List group List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. -<h3 id="list-group-basic">Basic example</h3> +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Basic example <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p> {% example html %} @@ -18,7 +23,7 @@ List groups are a flexible and powerful component for displaying not only simple </ul> {% endexample %} -### Badges +## Badges Add the badges component to any list group item and it will automatically be positioned on the right. @@ -39,7 +44,7 @@ Add the badges component to any list group item and it will automatically be pos </ul> {% endexample %} -### Linked items +## Linked items Linkify list group items by using anchor tags instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. @@ -55,7 +60,7 @@ Linkify list group items by using anchor tags instead of list items (that also m </div> {% endexample %} -### Disabled items +## Disabled items Add `.disabled` to a `.list-group-item` to gray it out to appear disabled. @@ -71,7 +76,7 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled. </div> {% endexample %} -### Contextual classes +## Contextual classes Use contextual classes to style list items, default or linked. Also includes `.active` state. @@ -90,7 +95,7 @@ Use contextual classes to style list items, default or linked. Also includes `.a </div> {% endexample %} -### Custom content +## Custom content Add nearly any HTML within, even for linked list groups like the one below. diff --git a/docs/components/modal.md b/docs/components/modal.md index b80b41405..80d0820fc 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -5,6 +5,11 @@ title: Modal Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + **Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.** To achieve the same effect, use some custom JavaScript: {% highlight js %} diff --git a/docs/components/navbar.md b/docs/components/navbar.md index a28ed3714..1e53de16b 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -5,6 +5,11 @@ title: Navbar The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ### Basics Here's what you need to know before getting started with the navbar: diff --git a/docs/components/navs.md b/docs/components/navs.md index b69d063a7..9096dcdce 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -5,6 +5,11 @@ title: Navs Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Regarding accessibility If you are using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies. diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 35cebe435..6a49de48b 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -5,6 +5,11 @@ title: Pagination Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pagination-pager). +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Default pagination Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas. diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 478e75f0b..3a3946d81 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -5,6 +5,11 @@ title: Popovers Add small overlays of content, like those found in iOS, to any element for housing secondary information. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Overview Things to know when using the popover plugin: diff --git a/docs/components/progress.md b/docs/components/progress.md index 47e099e62..f69d6012c 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -5,6 +5,11 @@ title: Progress Stylize the HTML5 `<progress>` element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ### Example {% example html %} diff --git a/docs/components/reboot.md b/docs/components/reboot.md index d1ee0a869..b542976d5 100644 --- a/docs/components/reboot.md +++ b/docs/components/reboot.md @@ -7,6 +7,11 @@ Part of Bootstrap's job is to provide an elegant, consistent, and simple baselin Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Approach Here are our guidelines and reasons for choosing what to override in Reboot: diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index dde50fc2a..6469612c0 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -3,6 +3,11 @@ layout: page title: Srollspy --- +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Example in navbar 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. diff --git a/docs/components/tables.md b/docs/components/tables.md index 8856a08b7..0bcddf21b 100644 --- a/docs/components/tables.md +++ b/docs/components/tables.md @@ -5,6 +5,11 @@ title: Tables Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Basic example {% example html %} diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 3bb3763d5..d59b330ff 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -5,6 +5,11 @@ title: Tooltips 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. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Overview Things to know when using the popover plugin: diff --git a/docs/components/typography.md b/docs/components/typography.md index 4c94349ae..60cc87ead 100644 --- a/docs/components/typography.md +++ b/docs/components/typography.md @@ -5,6 +5,11 @@ title: Typography Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/). +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Global settings Bootstrap sets basic global display, typography, and link styles. Specifically, we: diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 1587d660a..563e4b7f6 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -5,6 +5,11 @@ title: Utility classes Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to keep the number of declarations in your CSS down while allowing for quick and easy development. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ### Text alignment Easily realign text to components with text alignment classes. |
