mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
add markdown toc stuff
This commit is contained in:
parent
9e1af0d743
commit
b455ed8def
@ -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).
|
||||
|
@ -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 %}
|
||||
|
@ -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.
|
||||
|
@ -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
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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>
|
||||
|
@ -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 %}
|
||||
|
@ -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.
|
||||
|
@ -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
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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.
|
||||
|
@ -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.
|
||||
|
@ -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.**
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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 %}
|
||||
|
@ -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:
|
||||
|
@ -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.
|
||||
|
@ -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.
|
||||
|
@ -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:
|
||||
|
@ -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 %}
|
||||
|
@ -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:
|
||||
|
@ -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.
|
||||
|
@ -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 %}
|
||||
|
@ -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:
|
||||
|
@ -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:
|
||||
|
@ -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.
|
||||
|
@ -5,7 +5,12 @@ title: Compiling
|
||||
|
||||
Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.
|
||||
|
||||
### Install Grunt
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Install Grunt
|
||||
|
||||
**To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js.
|
||||
|
||||
@ -22,7 +27,7 @@ When completed, you'll be able to run the various Grunt commands provided from t
|
||||
[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
|
||||
[gembundler]: http://bundler.io/
|
||||
|
||||
### Available Grunt commands
|
||||
## Available Grunt commands
|
||||
|
||||
| Task | Description |
|
||||
| --- | --- |
|
||||
@ -32,9 +37,9 @@ When completed, you'll be able to run the various Grunt commands provided from t
|
||||
| `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
|
||||
| `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |
|
||||
|
||||
### Use another Sass compiler
|
||||
Bootstrap is compiled with [libsass][libsass] by default.
|
||||
Use another compiler by setting the `TWBS_SASS` environment variable to:
|
||||
## Use another Sass compiler
|
||||
|
||||
Bootstrap is compiled with [libsass][libsass] by default. Use another compiler by setting the `TWBS_SASS` environment variable to:
|
||||
|
||||
* `sass` to use [Ruby Sass][ruby-sass] via [grunt-contrib-sass][grunt-contrib-sass].
|
||||
* `libsass` (default) to use [libsass][libsass] via [grunt-sass][grunt-sass].
|
||||
@ -46,6 +51,6 @@ For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sa
|
||||
[libsass]: https://github.com/sass/libsass
|
||||
[grunt-sass]: https://github.com/sindresorhus/grunt-sass
|
||||
|
||||
### Troubleshooting dependencies
|
||||
## Troubleshooting dependencies
|
||||
|
||||
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
|
||||
|
@ -11,7 +11,12 @@ Bootstrap can come in one of two forms, as precompiled or source code. Learn mor
|
||||
Please note that **all JavaScript plugins require jQuery** to be included, as shown in the [starter template](../quick-start). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
|
||||
{% endcallout %}
|
||||
|
||||
### Precompiled Bootstrap
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Precompiled Bootstrap
|
||||
|
||||
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
|
||||
|
||||
@ -30,7 +35,7 @@ bootstrap/
|
||||
|
||||
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
|
||||
### Bootstrap source code
|
||||
## Bootstrap source code
|
||||
|
||||
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
|
||||
|
||||
|
@ -5,6 +5,11 @@ title: Download
|
||||
|
||||
Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
{% comment %}
|
||||
## Optional builds
|
||||
|
||||
@ -23,25 +28,25 @@ Download the entire project and quickly get developing. Includes all CSS and Jav
|
||||
---
|
||||
{% endcomment %}
|
||||
|
||||
### Precompiled
|
||||
## Precompiled
|
||||
|
||||
Compiled and minified CSS and JavaScript. No docs or original source files are included.
|
||||
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
|
||||
|
||||
### Download source and docs
|
||||
## Download source and docs
|
||||
|
||||
Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).**
|
||||
|
||||
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
### Bower
|
||||
## Bower
|
||||
|
||||
You can also install and manage Bootstrap's Sass, CSS, and JavaScript using [Bower](http://bower.io).
|
||||
|
||||
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
|
||||
|
||||
### npm
|
||||
## npm
|
||||
|
||||
Bootstrap is available as [an npm package](https://www.npmjs.org/package/bootstrap). Install it into your Node powered apps with:
|
||||
|
||||
@ -54,19 +59,18 @@ Bootstrap's `package.json` contains some additional metadata under the following
|
||||
- `less` - path to Bootstrap's main [Less](http://lesscss.org) source file
|
||||
- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
|
||||
|
||||
### Meteor
|
||||
## Meteor
|
||||
|
||||
{% highlight bash %}
|
||||
$ meteor add twbs:bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
### Composer
|
||||
## Composer
|
||||
|
||||
{% highlight bash %}
|
||||
$ composer require twbs/bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
### Autoprefixer required
|
||||
## Autoprefixer required
|
||||
|
||||
Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its source Sass and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this as Autoprefixer is already integrated into our Gruntfile.
|
||||
|
@ -5,15 +5,20 @@ title: JavaScript
|
||||
|
||||
Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more.
|
||||
|
||||
### Individual or compiled
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Individual or compiled
|
||||
|
||||
Plugins can be included individually (using Bootstrap's individual `*.js` files), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
|
||||
|
||||
### Dependencies
|
||||
## Dependencies
|
||||
|
||||
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
|
||||
|
||||
### Data attributes
|
||||
## Data attributes
|
||||
|
||||
Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.)
|
||||
|
||||
@ -29,7 +34,7 @@ Alternatively, to target a specific plugin, just include the plugin's name as a
|
||||
$(document).off('.alert.data-api')
|
||||
{% endhighlight %}
|
||||
|
||||
### Programmatic API
|
||||
## Programmatic API
|
||||
|
||||
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
|
||||
|
||||
@ -47,14 +52,14 @@ $('#myModal').modal('show') // initializes and invokes show immed
|
||||
|
||||
Each plugin also exposes its raw constructor on a `Constructor` property: `$.fn.popover.Constructor`. If you'd like to get a particular plugin instance, retrieve it directly from an element: `$('[rel="popover"]').data('popover')`.
|
||||
|
||||
#### Default settings
|
||||
### Default settings
|
||||
You can change the default settings for a plugin by modifying the plugin's `Constructor.DEFAULTS` object:
|
||||
|
||||
{% highlight js %}
|
||||
$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
|
||||
{% endhighlight %}
|
||||
|
||||
### No conflict
|
||||
## No conflict
|
||||
|
||||
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
|
||||
|
||||
@ -63,7 +68,7 @@ var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previous
|
||||
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
|
||||
{% endhighlight %}
|
||||
|
||||
### Events
|
||||
## Events
|
||||
|
||||
Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
|
||||
|
||||
@ -75,7 +80,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
### Version numbers
|
||||
## Version numbers
|
||||
|
||||
The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
|
||||
|
||||
@ -83,7 +88,7 @@ The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSI
|
||||
$.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
|
||||
{% endhighlight %}
|
||||
|
||||
### No special fallbacks when JavaScript is disabled
|
||||
## No special fallbacks when JavaScript is disabled
|
||||
|
||||
Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
|
||||
|
||||
|
@ -5,6 +5,11 @@ title: Supported platforms
|
||||
|
||||
Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Supported browsers
|
||||
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11**. More specific support information is provided below.
|
||||
|
@ -5,6 +5,11 @@ title: Flexbox
|
||||
|
||||
Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## What's included
|
||||
|
||||
Flexbox support is available for a number of Bootstrap's components:
|
||||
|
@ -7,6 +7,11 @@ Bootstrap includes a powerful mobile-first grid system for building layouts of a
|
||||
|
||||
There are multiple tiers for different device sizes, available via our predefined classes or semantic mixins.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
### Quick start
|
||||
|
||||
- Example grid class
|
||||
|
@ -5,7 +5,12 @@ title: Media
|
||||
|
||||
Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
|
||||
|
||||
### Default media
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Default media
|
||||
|
||||
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
|
||||
|
||||
@ -21,7 +26,7 @@ The default media allow to float a media object (images, video, audio) to the le
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Nesting
|
||||
## Nesting
|
||||
|
||||
Media components can also be nested.
|
||||
|
||||
@ -48,7 +53,7 @@ Media components can also be nested.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Alignment
|
||||
## Alignment
|
||||
|
||||
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
|
||||
|
||||
@ -97,7 +102,7 @@ The images or other media can be aligned top, middle, or bottom. The default is
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Media list
|
||||
## Media list
|
||||
|
||||
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
|
||||
|
||||
|
@ -7,7 +7,12 @@ The scaffolding of Bootstrap refers to our general approach to building the proj
|
||||
|
||||
Bootstrap's general approach to writing HTML, CSS, and JavaScript, as well as our core settings, is referred to as scaffolding. This includes required responsive and cross browser enhancements, dependencies, and more.
|
||||
|
||||
### HTML5 doctype
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## HTML5 doctype
|
||||
|
||||
Bootstrap makes use of certain HTML elements and CSS properties that **require** the use of the HTML5 doctype. Include it at the beginning of all your projects.
|
||||
|
||||
@ -18,7 +23,7 @@ Bootstrap makes use of certain HTML elements and CSS properties that **require**
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
|
||||
### Mobile first
|
||||
## Mobile first
|
||||
|
||||
Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
|
||||
|
||||
@ -28,11 +33,11 @@ To ensure proper rendering and touch zooming, **add the viewport meta tag** to y
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{% endhighlight %}
|
||||
|
||||
### Normalize
|
||||
## Normalize
|
||||
|
||||
For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices.
|
||||
|
||||
### Important CSS resets
|
||||
## Important CSS resets
|
||||
|
||||
Still need to do this section. Should port the third party section about box sizing and edit it for here, then add the rest of the list items.
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user