mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 12:59:05 +02:00
Code Issues Releases Wiki Activity

.bs-docs-example to .bs-example

Browse Source
This commit is contained in:
Mark Otto
2013-05-08 22:56:29 -07:00
parent ac28ad81d0
commit 09c3a4b3bc
5 changed files with 206 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/javascript.html
View File

@@ -101,7 +101,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example bs-docs-example-modal">
<div class="bs-example bs-example-modal">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
@@ -183,7 +183,7 @@ $('#myModal').on('show', function (e) {
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
</div><!-- /example -->
{% highlight html %}
@@ -337,7 +337,7 @@ $('#myModal').on('hidden', function () {
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
<h3>Within a navbar</h3>
<div class="bs-docs-example">
<div class="bs-example">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
@@ -382,7 +382,7 @@ $('#myModal').on('hidden', function () {
</div> <!-- /example -->
<h3>Within tabs</h3>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
@@ -472,7 +472,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2>
<p>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.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
@@ -591,7 +591,7 @@ $('[data-spy="scroll"]').each(function () {
<h2>Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-docs-example bs-docs-example-tabs">
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
@@ -719,13 +719,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Examples</h2>
<p>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.</p>
<p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
<div class="bs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div><!-- /example -->
<h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo">
<div class="bs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
@@ -866,7 +866,7 @@ $('#example').tooltip(options)
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-docs-example bs-docs-example-popover">
<div class="bs-example bs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
@@ -903,12 +903,12 @@ $('#example').tooltip(options)
</div>
<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<h4>Four directions</h4>
<div class="bs-docs-example tooltip-demo">
<div class="bs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
@@ -1040,14 +1040,14 @@ $('#example').tooltip(options)
<h2>Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-docs-example">
<div class="bs-example">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Oh snap! You got an error!</h4>
@@ -1121,7 +1121,7 @@ $('#my-alert').bind('closed', function () {
<h4>Stateful</h4>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
@@ -1134,7 +1134,7 @@ $('#my-alert').bind('closed', function () {
<h4>Single toggle</h4>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
</div><!-- /example -->
{% highlight html %}
@@ -1143,7 +1143,7 @@ $('#my-alert').bind('closed', function () {
<h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
@@ -1172,7 +1172,7 @@ $('#my-alert').bind('closed', function () {
<h4>Radio</h4>
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
@@ -1272,7 +1272,7 @@ $('.nav-tabs').button()
<h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
@@ -1473,7 +1473,7 @@ $('#myCollapsible').on('hidden', function () {
<h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@@ -1535,7 +1535,7 @@ $('#myCollapsible').on('hidden', function () {
<h4>Responsive visibility</h4>
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div>
<div class="bs-docs-example">
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>