mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
keep tables at 13px in docs for now, clean up some modals js docs stuff
This commit is contained in:
Mark Otto
parent
7ed02b461b
commit
5dd47f1196
@ -69,81 +69,6 @@ body > .navbar-fixed-top .brand:hover {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Left nav
|
||||
-------------------------------------------------- */
|
||||
|
||||
.bs-docs-nav {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
width: 150px;
|
||||
padding: 25px;
|
||||
background-color: #dde2e9;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.55);
|
||||
-webkit-box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
|
||||
-moz-box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
|
||||
box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
|
||||
background-color: #444;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
||||
}
|
||||
.bs-docs-nav ul {
|
||||
margin-left: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.bs-docs-nav ul li {
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
}
|
||||
.bs-docs-nav a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.bs-docs-nav ul li a {
|
||||
display: block;
|
||||
width: 145px;
|
||||
padding: 0 30px;
|
||||
margin: 0 -30px;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
color: #444;
|
||||
color: #999;
|
||||
}
|
||||
.bs-docs-nav ul li a:hover {
|
||||
color: #333;
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.05);
|
||||
}
|
||||
.bs-docs-nav > ul > li > a {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Logo wordmark */
|
||||
.bs-docs-logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bs-docs-logo a {
|
||||
color: #a4b4cb;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 0 #555;
|
||||
}
|
||||
.bs-docs-logo a:hover {
|
||||
color: #8e9db3;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Space out sub-sections more
|
||||
-------------------------------------------------- */
|
||||
|
||||
@ -151,6 +76,11 @@ section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
section > .table {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
/* Table of contents */
|
||||
.bs-docs-contents li {
|
||||
line-height: 25px;
|
||||
|
||||
@ -106,10 +106,13 @@
|
||||
<div class="page-header">
|
||||
<h1>Javascript in Bootstrap</h1>
|
||||
</div>
|
||||
|
||||
<h3>Individual or compiled</h3>
|
||||
<p>If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</p>
|
||||
<h3>Data attributea</h3>
|
||||
|
||||
<h3>Data attributes</h3>
|
||||
<p>...</p>
|
||||
|
||||
<h3>Programmatic API</h3>
|
||||
<p>...</p>
|
||||
|
||||
@ -126,8 +129,16 @@
|
||||
<h1>Transitions <small>bootstrap-transition.js</small></h1>
|
||||
</div>
|
||||
<h3>About transitions</h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.</p>
|
||||
<h3>Use cases</h3>
|
||||
<p>A few examples of the transition plugin:</p>
|
||||
<ul>
|
||||
<li>Sliding or fading in modals</li>
|
||||
<li>Fading out tabs</li>
|
||||
<li>Fading out alerts</li>
|
||||
<li>Sliding carousel panes</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -139,11 +150,11 @@
|
||||
<h1>Modals <small>bootstrap-modal.js</small></h1>
|
||||
</div>
|
||||
|
||||
<h3>About modals</h3>
|
||||
|
||||
<h2>About modals</h2>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
|
||||
<h2>Static example</h2>
|
||||
<p>Below is a statically rendered modal.</p>
|
||||
<h3>Static example</h3>
|
||||
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
@ -159,10 +170,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">&times;</button>
|
||||
<h3>Modal header</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn">Close</a>
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>Live demo</h2>
|
||||
<h3>Live demo</h3>
|
||||
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-header">
|
||||
@ -195,16 +220,18 @@
|
||||
<a href="#" role="button" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Using bootstrap-modal</h2>
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>Call the modal via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
|
||||
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
|
||||
50
docs/templates/pages/javascript.mustache
vendored
50
docs/templates/pages/javascript.mustache
vendored
@ -29,10 +29,13 @@
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Individual or compiled{{/i}}</h3>
|
||||
<p>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</p>
|
||||
<h3>{{_i}}Data attributea{{/i}}</h3>
|
||||
|
||||
<h3>{{_i}}Data attributes{{/i}}</h3>
|
||||
<p>{{_i}}...{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Programmatic API{{/i}}</h3>
|
||||
<p>{{_i}}...{{/i}}</p>
|
||||
|
||||
@ -50,8 +53,17 @@
|
||||
<h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
|
||||
</div>
|
||||
<h3>{{_i}}About transitions{{/i}}</h3>
|
||||
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
|
||||
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}</p>
|
||||
<h3>{{_i}}Use cases{{/i}}</h3>
|
||||
<p>{{_i}}A few examples of the transition plugin:{{/i}}</p>
|
||||
<ul>
|
||||
<li>{{_i}}Sliding or fading in modals{{/i}}</li>
|
||||
<li>{{_i}}Fading out tabs{{/i}}</li>
|
||||
<li>{{_i}}Fading out alerts{{/i}}</li>
|
||||
<li>{{_i}}Sliding carousel panes{{/i}}</li>
|
||||
</ul>
|
||||
|
||||
{{! Ideas: include docs for .fade.in, .slide.in, etc }}
|
||||
</section>
|
||||
|
||||
|
||||
@ -63,11 +75,11 @@
|
||||
<h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}About modals{{/i}}</h3>
|
||||
|
||||
<h2>{{_i}}About modals{{/i}}</h2>
|
||||
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Static example{{/i}}</h2>
|
||||
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
|
||||
<h3>{{_i}}Static example{{/i}}</h3>
|
||||
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
@ -83,10 +95,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">&times;</button>
|
||||
<h3>{{_i}}Modal header{{/i}}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>{{_i}}One fine body…{{/i}}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn">{{_i}}Close{{/i}}</a>
|
||||
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Live demo{{/i}}</h2>
|
||||
<h3>{{_i}}Live demo{{/i}}</h3>
|
||||
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
|
||||
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-header">
|
||||
@ -119,16 +145,18 @@
|
||||
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
|
||||
</div>{{! /example }}
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>{{_i}}Using bootstrap-modal{{/i}}</h2>
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Call the modal via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user