Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
-Turn a button into a dropdown toggle with some basic markup changes.
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
Button dropdowns work with buttons of all sizes.
Trigger dropdown menus above elements by adding .dropup to the parent.
Wrap a series of buttons with .btn in .btn-group.
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
-Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML. Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Add a header to label sections of actions in any dropdown menu.
Add a divider to separate series of links in a dropdown menu.
Add .disabled to a <li> in the dropdown to disable the link.
Add any of the below mentioned modifier classes to change the appearance of a label.
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
-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.
Add the badges component to any list group item and it will automatically be positioned on the right.
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.
Add .disabled to a .list-group-item to gray it out to appear disabled.
Use contextual classes to style list items, default or linked. Also includes .active state.
Add nearly any HTML within, even for linked list groups like the one below.
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.
-The default media displays a media object (images, video, audio) to the left or right of a content block.
The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
-By default, all the .panel does is apply some basic border and padding to contain some content.
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
For proper link coloring, be sure to place links in headings within .panel-title.
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.
Easily include full-width list groups within any panel.
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
Default progress bar.
Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
Progress bars use some of the same button and alert classes for consistent styles.
Uses a gradient to create a striped effect. Not available in IE8.
Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
Place multiple bars into the same .progress to stack them.
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.
-By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Use the well as a simple effect on an element to give it an inset effect.
Control padding and rounded corners with two optional modifier classes.
Designed and built with all the love in the world by @mdo and @fat.
Maintained by the core team with the help of our contributors.
-Code licensed under MIT, documentation under CC BY 3.0.
+Code licensed under MIT, documentation under CC BY 3.0.
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index 84370a7bf2..7d5fa5b496 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -75,9 +75,9 @@ body { } {% endhighlight %} {% highlight html %} - + ... -