mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
docs spacing, spare divs in a few places, updating css spacing
This commit is contained in:
parent
14b77f3a21
commit
aaf9f752c4
3 changed files with 99 additions and 119 deletions
|
@ -146,34 +146,6 @@ div.quickstart form textarea {
|
|||
.show-grid:hover .column, .show-grid:hover .columns {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* Hashgrid.js grid (press G & H to view)
|
||||
-------------------------------------------------- */
|
||||
#grid {
|
||||
width: 980px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -490px;
|
||||
}
|
||||
#grid div.vert {
|
||||
background-color: rgba(0, 206, 209, 0.075);
|
||||
width: 39px;
|
||||
border: solid darkturquoise;
|
||||
border-width: 0 1px;
|
||||
margin-right: 19px;
|
||||
}
|
||||
#grid div.vert.first-line {
|
||||
margin-left: 19px;
|
||||
}
|
||||
#grid div.horiz {
|
||||
height: 19px;
|
||||
border-bottom: 1px solid rgba(255, 0, 0, 0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#grid div.horiz:nth-child(5n) {
|
||||
border-color: rgba(255, 0, 0, 0.25);
|
||||
}
|
||||
/* Render mini layout previews
|
||||
-------------------------------------------------- */
|
||||
div.mini-layout {
|
||||
|
@ -199,7 +171,9 @@ div.mini-layout div.mini-layout-body {
|
|||
width: 450px;
|
||||
height: 340px;
|
||||
}
|
||||
div.mini-layout.fluid div.mini-layout-sidebar, div.mini-layout.fluid div.mini-layout-header, div.mini-layout.fluid div.mini-layout-body {
|
||||
div.mini-layout.fluid div.mini-layout-sidebar,
|
||||
div.mini-layout.fluid div.mini-layout-header,
|
||||
div.mini-layout.fluid div.mini-layout-body {
|
||||
float: left;
|
||||
}
|
||||
div.mini-layout.fluid div.mini-layout-sidebar {
|
||||
|
|
156
docs/index.html
156
docs/index.html
|
@ -878,7 +878,7 @@
|
|||
<h2>Fixed topbar</h2>
|
||||
<div class="topbar-wrapper" style="z-index: 5;">
|
||||
<div class="topbar">
|
||||
<div class="container fixed">
|
||||
<div class="container">
|
||||
<h3><a href="#">Project Name</a></h3>
|
||||
<ul>
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
|
@ -920,20 +920,20 @@
|
|||
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Tabs and pills</h2>
|
||||
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
|
||||
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Tabs and pills</h2>
|
||||
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
|
||||
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
|
@ -943,13 +943,13 @@
|
|||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<ul class="pills">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<ul class="pills">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="pills">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
|
@ -959,56 +959,57 @@
|
|||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Pagination</h2>
|
||||
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev disabled"><a href="#">← Previous</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li class="next"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev"><a href="#">← Previous</a></li>
|
||||
<li class="active"><a href="#">10</a></li>
|
||||
<li><a href="#">11</a></li>
|
||||
<li><a href="#">12</a></li>
|
||||
<li class="disabled"><a href="#">…</a></li>
|
||||
<li><a href="#">19</a></li>
|
||||
<li><a href="#">20</a></li>
|
||||
<li><a href="#">21</a></li>
|
||||
<li class="next"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev"><a href="#">← Previous</a></li>
|
||||
<li><a href="#">10</a></li>
|
||||
<li><a href="#">11</a></li>
|
||||
<li><a href="#">12</a></li>
|
||||
<li><a href="#">13</a></li>
|
||||
<li><a href="#">14</a></li>
|
||||
<li class="active"><a href="#">15</a></li>
|
||||
<li><a href="#">16</a></li>
|
||||
<li><a href="#">17</a></li>
|
||||
<li><a href="#">18</a></li>
|
||||
<li><a href="#">19</a></li>
|
||||
<li><a href="#">20</a></li>
|
||||
<li class="next"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
<!-- Pagination -->
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Pagination</h2>
|
||||
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev disabled"><a href="#">← Previous</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li class="next"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev"><a href="#">← Previous</a></li>
|
||||
<li class="active"><a href="#">10</a></li>
|
||||
<li><a href="#">11</a></li>
|
||||
<li><a href="#">12</a></li>
|
||||
<li class="disabled"><a href="#">…</a></li>
|
||||
<li><a href="#">19</a></li>
|
||||
<li><a href="#">20</a></li>
|
||||
<li><a href="#">21</a></li>
|
||||
<li class="next"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev"><a href="#">← Previous</a></li>
|
||||
<li><a href="#">10</a></li>
|
||||
<li><a href="#">11</a></li>
|
||||
<li><a href="#">12</a></li>
|
||||
<li><a href="#">13</a></li>
|
||||
<li><a href="#">14</a></li>
|
||||
<li class="active"><a href="#">15</a></li>
|
||||
<li><a href="#">16</a></li>
|
||||
<li><a href="#">17</a></li>
|
||||
<li><a href="#">18</a></li>
|
||||
<li><a href="#">19</a></li>
|
||||
<li><a href="#">20</a></li>
|
||||
<li class="next"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
|
@ -1022,8 +1023,8 @@
|
|||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
@ -1033,6 +1034,7 @@
|
|||
<div class="page-header">
|
||||
<h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
|
||||
</div>
|
||||
<!-- Basic alert messages -->
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Basic alerts</h2>
|
||||
|
@ -1056,7 +1058,8 @@
|
|||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<!-- Block messages -->
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Block messages</h2>
|
||||
|
@ -1084,11 +1087,13 @@
|
|||
<p><a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
<section id="popovers">
|
||||
|
||||
<!-- Popovers, modals, and tooltips -->
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
|
||||
</div>
|
||||
|
@ -1117,6 +1122,7 @@
|
|||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
<!-- Tooltips -->
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Tool Tips</h2>
|
||||
|
@ -1149,6 +1155,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
|||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
<!-- Popovers -->
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Popovers</h2>
|
||||
|
@ -1172,7 +1179,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
|||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
@ -145,39 +145,39 @@
|
|||
// Border Radius
|
||||
.border-radius(@radius: 5px) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow: @shadow;
|
||||
-moz-box-shadow: @shadow;
|
||||
box-shadow: @shadow;
|
||||
-moz-box-shadow: @shadow;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
// Background clipping
|
||||
.background-clip(@clip) {
|
||||
-webkit-background-clip: @clip;
|
||||
-moz-background-clip: @clip;
|
||||
background-clip: @clip;
|
||||
-moz-background-clip: @clip;
|
||||
background-clip: @clip;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
.content-columns(@columnCount, @columnGap: 20px) {
|
||||
-webkit-column-count: @columnCount;
|
||||
-webkit-column-gap: @columnGap;
|
||||
-moz-column-count: @columnCount;
|
||||
-moz-column-gap: @columnGap;
|
||||
column-count: @columnCount;
|
||||
column-gap: @columnGap;
|
||||
-moz-column-count: @columnCount;
|
||||
column-count: @columnCount;
|
||||
-webkit-column-gap: @columnGap;
|
||||
-moz-column-gap: @columnGap;
|
||||
column-gap: @columnGap;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
@ -265,6 +265,6 @@
|
|||
.opacity(@opacity: 100) {
|
||||
filter: e(%("alpha(opacity=%d)", @opacity));
|
||||
-khtml-opacity: @opacity / 100;
|
||||
-moz-opacity: @opacity / 100;
|
||||
opacity: @opacity / 100;
|
||||
-moz-opacity: @opacity / 100;
|
||||
opacity: @opacity / 100;
|
||||
}
|
Loading…
Reference in a new issue