-------------------------------------------------- */
.show-grid {
- margin-top: 10px;
- margin-bottom: 20px;
+ margin-bottom: 15px;
}
-.show-grid [class*="span"] {
+.show-grid [class^="span"] {
+ padding-top: 10px;
+ padding-bottom: 10px;
background-color: #eee;
- text-align: center;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- min-height: 40px;
- line-height: 40px;
+ border: 1px solid #ddd;
}
-.show-grid .show-grid {
- margin-top: 0;
- margin-bottom: 0;
-}
-.show-grid .show-grid [class*="span"] {
- margin-top: 5px;
-}
-.show-grid [class*="span"] [class*="span"] {
- background-color: #ccc;
-}
-.show-grid [class*="span"] [class*="span"] [class*="span"] {
- background-color: #999;
-}
-
-
-
-/* Mini layout previews
--------------------------------------------------- */
-.mini-layout {
- border: 1px solid #ddd;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
- -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
- -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
- box-shadow: 0 1px 2px rgba(0,0,0,.075);
-}
-.mini-layout,
-.mini-layout .mini-layout-body,
-.mini-layout.fluid .mini-layout-sidebar {
- height: 300px;
-}
-.mini-layout {
- margin-bottom: 20px;
- padding: 9px;
-}
-.mini-layout div {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-.mini-layout .mini-layout-body {
- background-color: #dceaf4;
- margin: 0 auto;
- width: 70%;
-}
-.mini-layout.fluid .mini-layout-sidebar,
-.mini-layout.fluid .mini-layout-header,
-.mini-layout.fluid .mini-layout-body {
- float: left;
-}
-.mini-layout.fluid .mini-layout-sidebar {
- background-color: #bbd8e9;
- width: 20%;
-}
-.mini-layout.fluid .mini-layout-body {
- width: 77.5%;
- margin-left: 2.5%;
-}
+ .show-grid [class*="span"]:hover {
+ background-color: #ddd;
+ }
-/* Responsive
+/* Misc docs stuff
-------------------------------------------------- */
-/* Desktop large
-------------------------- */
-@media (min-width: 1200px) {
- .bs-docs-container {
- max-width: 970px;
- }
- .bs-docs-sidenav {
- width: 258px;
- }
- .bs-docs-sidenav > li > a {
- width: 230px \9; /* Override the previous IE8-9 hack */
- }
-}
-
-/* Desktop
-------------------------- */
-@media (max-width: 980px) {
- /* Unfloat brand */
- body > .navbar-fixed-top .brand {
- float: left;
- margin-left: 0;
- padding-left: 10px;
- padding-right: 10px;
- }
-
- /* Inline-block quick links for more spacing */
- .quick-links li {
- display: inline-block;
- margin: 5px;
- }
-
- /* When affixed, space properly */
- .bs-docs-sidenav {
- top: 0;
- width: 218px;
- margin-top: 30px;
- margin-right: 0;
- }
+/* Pseudo :focus state for showing how it looks in the docs */
+input.focused {
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ outline: thin dotted \9; /* IE6-9 */
+ -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
+ box-shadow: 0 0 8px rgba(82,168,236,.6);
}
-/* Tablet to desktop
-------------------------- */
-@media (min-width: 768px) and (max-width: 979px) {
- /* Remove any padding from the body */
- body {
- padding-top: 0;
- }
- /* Widen masthead and social buttons to fill body padding */
- .jumbotron {
- margin-top: -20px; /* Offset bottom margin on .navbar */
- }
- /* Adjust sidenav width */
- .bs-docs-sidenav {
- width: 166px;
- margin-top: 20px;
- }
- .bs-docs-sidenav.affix {
- top: 0;
- }
+/* Scrollspy demo on fixed height div */
+.scrollspy-example {
+ position: relative;
+ height: 200px;
+ margin-top: 10px;
+ overflow: auto;
}
-/* Tablet
-------------------------- */
-@media (max-width: 767px) {
- /* Remove any padding from the body */
- body {
- padding-top: 0;
- }
-
- /* Widen masthead and social buttons to fill body padding */
- .jumbotron {
- padding: 40px 20px;
- margin-top: -20px; /* Offset bottom margin on .navbar */
- margin-right: -20px;
- margin-left: -20px;
- }
- .masthead h1 {
- font-size: 90px;
- }
- .masthead p,
- .masthead .btn {
- font-size: 24px;
- }
- .marketing .span4 {
- margin-bottom: 40px;
- }
- .bs-docs-social {
- margin: 0 -20px;
- }
- /* Space out the show-grid examples */
- .show-grid [class*="span"] {
- margin-bottom: 5px;
- }
- /* Sidenav */
- .bs-docs-sidenav {
- width: auto;
- margin-bottom: 20px;
- }
- .bs-docs-sidenav.affix {
- position: static;
- width: auto;
- top: 0;
- }
+/* Responsive variations
+-------------------------------------------------- */
- /* Unfloat the back to top link in footer */
- .footer {
- margin-left: -20px;
- margin-right: -20px;
- padding-left: 20px;
- padding-right: 20px;
- }
- .footer p {
- margin-bottom: 9px;
- }
-}
+/* Tablets and up */
+@media screen and (min-width: 768px) {
-/* Landscape phones
-------------------------- */
-@media (max-width: 480px) {
- /* Remove padding above jumbotron */
+ /* Account for fixed navbar */
body {
- padding-top: 0;
- }
-
- /* Change up some type stuff */
- h2 small {
- display: block;
+ padding-top: 50px;
}
- /* Downsize the jumbotrons */
- .jumbotron h1 {
- font-size: 45px;
+ /* Tweak display of docs jumbotrons */
+ .masthead {
+ padding-top: 100px;
+ padding-bottom: 100px;
}
- .jumbotron p,
- .jumbotron .btn {
- font-size: 18px;
- }
- .jumbotron .btn {
- display: block;
- margin: 0 auto;
- }
-
- /* center align subhead text like the masthead */
- .subhead h1,
- .subhead p {
- text-align: center;
+ .masthead h1 {
+ font-size: 100px;
}
-
- /* Marketing on home */
- .marketing h1 {
+ .masthead p {
font-size: 30px;
+ margin-left: 10%;
+ margin-right: 10%;
}
- .marketing-byline {
- font-size: 18px;
- }
-
- /* center example sites */
- .example-sites {
- margin-left: 0;
- }
- .example-sites > li {
- float: none;
- display: block;
- max-width: 280px;
- margin: 0 auto 18px;
- text-align: center;
- }
- .example-sites .thumbnail > img {
- max-width: 270px;
+ .subhead {
+ padding-top: 60px;
+ padding-bottom: 60px;
+ text-align: left;
}
- /* Do our best to make tables work in narrow viewports */
- table code {
- white-space: normal;
- word-wrap: break-word;
- word-break: break-all;
- }
-
- /* Examples: dropdowns */
- .bs-docs-example-submenus > .pull-left {
- float: none;
- clear: both;
- }
- .bs-docs-example-submenus > .pull-left,
- .bs-docs-example-submenus > .pull-left + .pull-left {
- margin-left: 0;
+ /* From here, start to affix the nav because we keep columns here */
+ .bs-docs-sidenav.affix {
+ position: fixed;
+ top: 54px;
}
- .bs-docs-example-submenus p {
- margin-bottom: 0;
+ .bs-docs-sidenav {
+ width: 170px;
}
- .bs-docs-example-submenus .dropup > .dropdown-menu,
- .bs-docs-example-submenus .dropdown > .dropdown-menu {
- margin-bottom: 10px;
- float: none;
- max-width: 180px;
+ .bs-docs-sidenav.affix-bottom {
+ position: absolute;
+ top: auto;
+ bottom: 270px;
}
+}
- /* Examples: modal */
- .modal-example .modal {
- position: relative;
- top: auto;
- right: auto;
- bottom: auto;
- left: auto;
+/* Tablets/desktops and up */
+@media screen and (min-width: 992px) {
+ .bs-docs-sidenav {
+ width: 220px;
}
+}
- /* Tighten up footer */
- .footer {
- padding-top: 20px;
- padding-bottom: 20px;
+/* Large desktops and up */
+@media screen and (min-width: 1200px) {
+ .bs-docs-sidenav {
+ width: 260px;
}
- }
+ }
<h2>Standard pagination</h2>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<div class="bs-docs-example">
- <div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li><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><a href="#">»</a></li>
- </ul>
- </div>
+ <ul class="pagination">
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
</div>
<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li><a href="#">Prev</a></li>
- <li><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><a href="#">Next</a></li>
- </ul>
-</div>
+<ul class="pagination">
+ <li><a href="#">Prev</a></li>
+ <li><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><a href="#">Next</a></li>
+</ul>
</pre>
<h3>Disabled and active states</h3>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-docs-example">
- <div class="pagination pagination-centered">
- <ul>
- <li class="disabled"><a href="#">«</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><a href="#">»</a></li>
- </ul>
- </div>
- </div>
-<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="disabled"><a href="#">&laquo;</a></li>
- <li class="active"><a href="#">1</a></li>
- ...
- </ul>
-</div>
+ <ul class="pagination">
+ <li class="disabled"><a href="#">«</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><a href="#">»</a></li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+<ul class="pagination">
- <li class="disabled"><a href="#">Prev</a></li>
++ <li class="disabled"><a href="#">&laquo;</a></li>
+ <li class="active"><a href="#">1</a></li>
+ ...
+</ul>
</pre>
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="disabled"><span>&laquo;</span></li>
- <li class="active"><span>1</span></li>
- ...
- </ul>
-</div>
+<ul class="pagination">
- <li class="disabled"><span>Prev</span></li>
++ <li class="disabled"><span>&laquo;</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+</ul>
</pre>
<h3>Sizes</h3>
================================================== -->
<section id="pagination">
<div class="page-header">
- <h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
+ <h1>Pagination <small>Two options for paging through content</small></h1>
</div>
- <h2>{{_i}}Standard pagination{{/i}}</h2>
- <p>{{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}</p>
+ <h2>Standard pagination</h2>
+ <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<div class="bs-docs-example">
- <div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li><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><a href="#">»</a></li>
- </ul>
- </div>
+ <ul class="pagination">
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
</div>
<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li><a href="#">Prev</a></li>
- <li><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><a href="#">Next</a></li>
- </ul>
-</div>
+<ul class="pagination">
+ <li><a href="#">Prev</a></li>
+ <li><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><a href="#">Next</a></li>
+</ul>
</pre>
<hr class="bs-docs-separator">
- <h2>{{_i}}Options{{/i}}</h2>
+ <h2>Options</h2>
- <h3>{{_i}}Disabled and active states{{/i}}</h3>
- <p>{{_i}}Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.{{/i}}</p>
+ <h3>Disabled and active states</h3>
+ <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-docs-example">
- <div class="pagination pagination-centered">
- <ul>
- <li class="disabled"><a href="#">«</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><a href="#">»</a></li>
- </ul>
- </div>
+ <ul class="pagination">
+ <li class="disabled"><a href="#">«</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><a href="#">»</a></li>
+ </ul>
</div>
<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="disabled"><a href="#">&laquo;</a></li>
- <li class="active"><a href="#">1</a></li>
- ...
- </ul>
-</div>
+<ul class="pagination">
- <li class="disabled"><a href="#">Prev</a></li>
++ <li class="disabled"><a href="#">&laquo;</a></li>
+ <li class="active"><a href="#">1</a></li>
+ ...
+</ul>
</pre>
- <p>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</p>
+ <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="disabled"><span>&laquo;</span></li>
- <li class="active"><span>1</span></li>
- ...
- </ul>
-</div>
+<ul class="pagination">
- <li class="disabled"><span>Prev</span></li>
++ <li class="disabled"><span>&laquo;</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+</ul>
</pre>
- <h3>{{_i}}Sizes{{/i}}</h3>
- <p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
+ <h3>Sizes</h3>
+ <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
- <div class="pagination pagination-large">
- <ul>
+ <div>
+ <ul class="pagination pagination-large">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>