mirror of
https://github.com/twbs/bootstrap.git
synced 2025-10-03 16:51:54 +02:00
Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into features/warning_progress_bar
This commit is contained in:
Jonathan Camile
@@ -98,6 +98,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#labels">Labels</a></li>
|
||||
<li><a href="#badges">Badges</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
@@ -175,9 +176,8 @@
|
||||
<h3>Checkbox and radio flavors</h3>
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<hr>
|
||||
<h4 class="muted">Heads up</h4>
|
||||
<p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
<h3>Dropdowns in button groups</h3>
|
||||
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -188,12 +188,13 @@
|
||||
================================================== -->
|
||||
<section id="buttonDropdowns">
|
||||
<div class="page-header">
|
||||
<h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
|
||||
<h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Button dropdowns</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Button dropdowns</h3>
|
||||
<h3>Overview and examples</h3>
|
||||
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
@@ -248,6 +249,16 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Inverse <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<hr>
|
||||
<p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
|
||||
@@ -268,10 +279,14 @@
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong> In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
|
||||
</div>
|
||||
|
||||
<h2>Split button dropdowns</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Split button dropdowns</h3>
|
||||
<h3>Overview and examples</h3>
|
||||
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
@@ -331,7 +346,41 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-inverse" href="#">Inverse</a>
|
||||
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<h3>Right aligned menus</h3>
|
||||
<p>Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.</p>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Right</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
...
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<!-- dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example markup</h3>
|
||||
@@ -347,6 +396,44 @@
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
<h3>Dropup menus</h3>
|
||||
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
|
||||
<div class="btn-toolbar" style="margin-top: 9px;">
|
||||
<div class="btn-group dropup">
|
||||
<a class="btn" href="#">Dropup</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<a class="btn primary" href="#">Right dropup</a>
|
||||
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group dropup">
|
||||
<a class="btn" href="#">Dropup</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -453,7 +540,7 @@
|
||||
<h3>Tabs with dropdowns</h3>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
@@ -464,6 +551,16 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
|
||||
<ul class="dropdown-menu bottom-up pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs">
|
||||
@@ -485,7 +582,7 @@
|
||||
<h3>Pills with dropdowns</h3>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
@@ -496,6 +593,16 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
|
||||
<ul class="dropdown-menu bottom-up pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills">
|
||||
@@ -521,8 +628,18 @@
|
||||
<h3>Application-style navigation</h3>
|
||||
<p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
|
||||
<p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
|
||||
<hr>
|
||||
<h4>With icons</h4>
|
||||
<p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</p>
|
||||
<h4>Horizontal dividers</h4>
|
||||
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-list">
|
||||
...
|
||||
<li class="divider"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example nav list</h3>
|
||||
@@ -536,6 +653,7 @@
|
||||
<li class="nav-header">Another list header</li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
</div> <!-- /well -->
|
||||
@@ -566,6 +684,7 @@
|
||||
<li class="nav-header">Another list header</li>
|
||||
<li><a href="#"><i class="icon-user"></i> Profile</a></li>
|
||||
<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#"><i class="icon-flag"></i> Help</a></li>
|
||||
</ul>
|
||||
</div> <!-- /well -->
|
||||
@@ -754,7 +873,7 @@
|
||||
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
@@ -816,13 +935,24 @@
|
||||
</div>
|
||||
</pre>
|
||||
<h3>Fixed navbar</h3>
|
||||
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
|
||||
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-bottom">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
|
||||
<h3>Brand name</h3>
|
||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
@@ -830,8 +960,14 @@
|
||||
Project name
|
||||
</a>
|
||||
</pre>
|
||||
<h3>Search form</h3>
|
||||
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
|
||||
<h3>Forms in navbar</h3>
|
||||
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
</form>
|
||||
</pre>
|
||||
<p>For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
@@ -890,8 +1026,8 @@
|
||||
</pre>
|
||||
<h3>Component alignment</h3>
|
||||
<p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
|
||||
<h3>Adding dropdowns</h3>
|
||||
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
|
||||
<h3>Adding dropdown menus</h3>
|
||||
<p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
@@ -908,6 +1044,9 @@
|
||||
</ul>
|
||||
</pre>
|
||||
<p><a class="btn" href="./javascript.html#dropdowns">Get the javascript →</a></p>
|
||||
<hr>
|
||||
<h3>Text in the navbar</h3>
|
||||
<p>Wrap strings of text in a <code><p></code> tag for proper leading and color.</p>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
@@ -953,9 +1092,7 @@
|
||||
<li>
|
||||
<a href="#">Library</a> <span class="divider">/</span>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
<li class="active">Data</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
@@ -1144,12 +1281,116 @@
|
||||
<code><span class="label label-info">Info</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-inverse">Inverse</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-inverse">Inverse</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>Badges <small>Indicators and unread counts</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>About</h3>
|
||||
<p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
|
||||
</div><!-- /.span -->
|
||||
<div class="span8">
|
||||
<h3>Available classes</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Example</th>
|
||||
<th>Markup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Default
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge">1</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge">1</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Success
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-success">2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-success">2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Warning
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">4</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-warning">4</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Error
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-error">6</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-error">1</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Info
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-info">8</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-info">8</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Inverse
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-inverse">10</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-inverse">10</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /.row -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Typographic components
|
||||
================================================== -->
|
||||
<section id="typography">
|
||||
@@ -1188,8 +1429,11 @@
|
||||
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<div class="page-header">
|
||||
<h1>Example page header <small>Subtext for header</small></h1>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="page-haeder">
|
||||
<div class="page-header">
|
||||
<h1>Example page header</h1>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1525,7 +1769,7 @@
|
||||
================================================== -->
|
||||
<section id="misc">
|
||||
<div class="page-header">
|
||||
<h1>Miscellaneous <small>Wells, badges, and close icon</small></h1>
|
||||
<h1>Miscellaneous <small>Lightweight utility components</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
@@ -1539,11 +1783,6 @@
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
</div><!--/span-->
|
||||
<div class="span4" style="display: none;">
|
||||
<h2>Badges</h2>
|
||||
<p>Use a badge on an element for an unread count or as a simple indicator.</p>
|
||||
<pre class="prettyprint linenums"><span class="badge">3</div></pre>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<h2>Close icon</h2>
|
||||
|
||||
Reference in New Issue
Block a user