Skip to content
GitLab
Commit 83c08969 authored by Mark Otto's avatar Mark Otto
Browse files

updated js pages to put examples first

parent eaa8220d
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 619 additions and 492 deletions
+619 -492
bootstrap.css
+ 4
- 4
View file @ 83c08969
......@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sun Jan 8 15:38:44 PST 2012
* Date: Sun Jan 8 19:32:37 PST 2012
*/
html, body {
margin: 0;
......@@ -2525,9 +2525,9 @@ i {
padding: 9px 14px 9px;
font-size: 15px;
line-height: normal;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn.small {
padding: 7px 9px 7px;
......
bootstrap.min.css
+ 1
- 1
View file @ 83c08969
......@@ -445,7 +445,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.btn.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
......
docs/base-css.html
+ 0
- 146
View file @ 83c08969
......@@ -1277,152 +1277,6 @@
<br>
<h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
<div class="row">
<div class="span4">
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
<p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
<div class="well" style="padding: 10px; margin-bottom: 9px;">
<div class="btn-group">
<a class="btn" href="#">Left</a>
<a class="btn" href="#">Middle</a>
<a class="btn" href="#">Right</a>
</div>
</div>
<div class="well" style="padding: 10px;">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
<a class="btn" href="#">4</a>
</div>
<div class="btn-group">
<a class="btn" href="#">5</a>
<a class="btn" href="#">6</a>
<a class="btn" href="#">7</a>
</div>
<div class="btn-group">
<a class="btn" href="#">8</a>
</div>
</div>
</div>
</div>
<div class="span4">
<h3>Example markup</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;1&lt;/a&gt;
&lt;a class="btn" href="#"&gt;2&lt;/a&gt;
&lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
<p>And with a toolbar for multiple groups:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
&lt;div class="btn-group"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span4">
<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 &raquo;</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>
</div>
</div>
<br>
<h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
<div class="row">
<div class="span4">
<h3>Split button dropdowns</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="well" style="padding: 10px; margin-bottom: 9px;">
<div class="btn-toolbar" style="margin-bottom: 9px;">
<div class="btn-group">
<a class="btn" href="#">Action</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">
<a class="btn primary" href="#">Action</a>
<a class="btn primary 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">
<a class="btn danger" href="#">Danger</a>
<a class="btn danger 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>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn success" href="#">Success</a>
<a class="btn success 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">
<a class="btn info" href="#">Info</a>
<a class="btn info 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>
</div> <!-- /well -->
</div>
<div class="span8">
<h3>Example markup</h3>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
......
docs/components.html
+ 163
- 1
View file @ 83c08969
......@@ -55,9 +55,171 @@
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
<div class="page-header">
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
<p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
<div class="well" style="padding: 10px; margin-bottom: 9px;">
<div class="btn-group">
<a class="btn" href="#">Left</a>
<a class="btn" href="#">Middle</a>
<a class="btn" href="#">Right</a>
</div>
</div>
<div class="well" style="padding: 10px;">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
<a class="btn" href="#">4</a>
</div>
<div class="btn-group">
<a class="btn" href="#">5</a>
<a class="btn" href="#">6</a>
<a class="btn" href="#">7</a>
</div>
<div class="btn-group">
<a class="btn" href="#">8</a>
</div>
</div>
</div>
</div>
<div class="span4">
<h3>Example markup</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;1&lt;/a&gt;
&lt;a class="btn" href="#"&gt;2&lt;/a&gt;
&lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
<p>And with a toolbar for multiple groups:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
&lt;div class="btn-group"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span4">
<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 &raquo;</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>
</div>
</div>
</section>
<!-- Split button dropdowns
================================================== -->
<section id="buttonGroups">
<div class="page-header">
<h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>Split button dropdowns</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="well" style="padding: 10px; margin-bottom: 9px;">
<div class="btn-toolbar" style="margin-bottom: 9px;">
<div class="btn-group">
<a class="btn" href="#">Action</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">
<a class="btn primary" href="#">Action</a>
<a class="btn primary 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">
<a class="btn danger" href="#">Danger</a>
<a class="btn danger 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>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn success" href="#">Success</a>
<a class="btn success 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">
<a class="btn info" href="#">Info</a>
<a class="btn info 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>
</div> <!-- /well -->
</div>
<div class="span8">
<h3>Example markup</h3>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Nav, Tabs, & Pills
================================================== -->
<section id="tabsAndPills">
<section id="navs">
<div class="page-header">
<h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
</div>
......
docs/javascript.html
+ 431
- 317
View file @ 83c08969
This diff is collapsed.
docs/scaffolding.html
+ 19
- 22
View file @ 83c08969
......@@ -384,36 +384,33 @@
<dd><a href="./base-css.html#tables">Tables</a></dd>
<dd><a href="./base-css.html#forms">Forms</a></dd>
<dd><a href="./base-css.html#buttons">Buttons</a></dd>
<dd><a href="./base-css.html#buttongroups">Button groups</a></dd>
<dd><a href="./base-css.html#icons">Icons</a></dd>
<dd><a href="./base-css.html#icons">Icons by Glyphicons</a></dd>
</dl>
<dl class="span2">
<dt>Components</dt>
<dd><a href="./components.html#thumbnails">Thumbnails</a></dd>
<dd><a href="./components.html#autocomplete">Autocomplete</a></dd>
<dd><a href="./components.html#carousel">Carousel</a></dd>
<dd><a href="./components.html#sidenav">Side nav</a></dd>
<dd><a href="./base-css.html#buttonGroups">Button groups</a></dd>
<dd><a href="./base-css.html#buttonDropdowns">Split button dropdowns</a></dd>
<dd><a href="./components.html#navs">Nav, tabs, pills</a></dd>
<dd><a href="./components.html#navbar">Navbar</a></dd>
<dd><a href="./components.html#tabspills">Tabs and pills</a></dd>
<dd><a href="./components.html#breadcrumbs">Breadcrumbs</a></dd>
<dd><a href="./components.html#pagination">Pagination</a></dd>
<dd><a href="./components.html#alerts">Alerts and errors</a></dd>
<dd><a href="./components.html#modals">Modals</a></dd>
<dd><a href="./components.html#twipsy">Twipsy tooltips</a></dd>
<dd><a href="./components.html#popover">Popovers</a></dd>
<dd><a href="./components.html#thumbnails">Thumbnails</a></dd>
<dd><a href="./components.html#alerts">Alert messages</a></dd>
</dl>
<dl class="span2">
<dt>Javascript plugins</dt>
<dd><a href="">Transitions</a></dd>
<dd><a href="./javasript.html#modals">Modals</a></dd>
<dd><a href="./javasript.html#dropdowns">Dropdowns</a></dd>
<dd><a href="./javasript.html#scrollspy">Scrollspy</a></dd>
<dd><a href="./javasript.html#tabs">Tabs</a></dd>
<dd><a href="./javasript.html#twipsy">Twipsy tooltips</a></dd>
<dd><a href="./javasript.html#popovers">Popovers</a></dd>
<dd><a href="./javasript.html#alerts">Alerts</a></dd>
<dd><a href="./javasript.html#buttons">Buttons</a></dd>
<dd><a href="./javasript.html#accordion">Accordion</a></dd>
<dd><a href="./javasript.html#carousel">Carousel</a></dd>
<dd><a href="./javascript.html#transitions">Transitions</a></dd>
<dd><a href="./javascript.html#modals">Modals</a></dd>
<dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd>
<dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd>
<dd><a href="./javascript.html#tabs">Tabs</a></dd>
<dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd>
<dd><a href="./javascript.html#popovers">Popovers</a></dd>
<dd><a href="./javascript.html#alerts">Alerts</a></dd>
<dd><a href="./javascript.html#buttons">Buttons</a></dd>
<dd><a href="./javascript.html#collapse">Collapse</a></dd>
<dd><a href="./javascript.html#carousel">Carousel</a></dd>
<dd><a href="./javascript.html#typeahead">Typeahead</a></dd>
</dl>
<dl class="span2">
<dt>Using LESS</dt>
......
lib/buttons.less
+ 1
- 1
View file @ 83c08969
......@@ -97,7 +97,7 @@
padding: 9px 14px 9px;
font-size: @baseFontSize + 2px;
line-height: normal;
.border-radius(6px);
.border-radius(5px);
}
&.small {
padding: 7px 9px 7px;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment