github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '3.0.0-wip' into bs3_navbar_overhaul

Browse Source 
Conflicts:
	dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto
2013-08-13 13:48:33 -07:00
parent 3c772b1ceb a8769b8cab
commit bd93ed2cb6
24 changed files with 577 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
components.html
View File

@@ -19,24 +19,25 @@ base_url: "../"
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
@@ -53,23 +54,24 @@ base_url: "../"
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-header">Dropdown header</li>
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<a id="dropdownMenu2" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-header">Dropdown header</li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
{% endhighlight %}
@@ -78,18 +80,19 @@ base_url: "../"
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
<a id="dropdownMenu3" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
</div>
@@ -230,8 +233,48 @@ base_url: "../"
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
{% highlight html %}
@@ -1743,22 +1786,22 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
</div>
@@ -1780,7 +1823,7 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1790,7 +1833,7 @@ body { padding-bottom: 70px; }
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1800,7 +1843,7 @@ body { padding-bottom: 70px; }
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1814,7 +1857,7 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
@@ -2072,7 +2115,7 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@@ -2081,14 +2124,14 @@ body { padding-bottom: 70px; }
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@@ -2116,7 +2159,7 @@ body { padding-bottom: 70px; }
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@@ -2124,7 +2167,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@@ -2132,7 +2175,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@@ -2144,7 +2187,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@@ -2155,7 +2198,7 @@ body { padding-bottom: 70px; }
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@@ -2307,12 +2350,16 @@ body { padding-bottom: 70px; }
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example">
<div class="panel">
Basic panel example
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
Basic panel example
<div class="panel-body">
Basic panel example
</div>
</div>
{% endhighlight %}
@@ -2321,26 +2368,34 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-heading">Panel heading</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
{% endhighlight %}
@@ -2348,13 +2403,17 @@ body { padding-bottom: 70px; }
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
<div class="bs-example">
<div class="panel">
Panel content
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
{% highlight html %}
<div class="panel">
Panel content
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
{% endhighlight %}
@@ -2366,31 +2425,41 @@ body { padding-bottom: 70px; }
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
@@ -2407,7 +2476,9 @@ body { padding-bottom: 70px; }
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- List group -->
<ul class="list-group">
@@ -2423,7 +2494,9 @@ body { padding-bottom: 70px; }
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<p>...</p>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">