mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-28 23:59:53 +02:00
updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings
This commit is contained in:
Mark Otto
@@ -315,11 +315,6 @@ h2 + table {
|
||||
-------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
/* Hide the nav for now */
|
||||
body > .navbar-fixed .nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Change up some type stuff */
|
||||
h1 small {
|
||||
display: block;
|
||||
@@ -365,11 +360,6 @@ h2 + table {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Hide the nav for now */
|
||||
body > .navbar-fixed .nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Adjust the jumbotron */
|
||||
.jumbotron .benefits {
|
||||
position: relative;
|
||||
@@ -394,6 +384,9 @@ h2 + table {
|
||||
.footer .pull-right {
|
||||
float: none;
|
||||
}
|
||||
.footer p {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -423,7 +416,7 @@ h2 + table {
|
||||
/* Provide enough space on right-hand side for benefits list */
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
margin-right: 40%;
|
||||
margin-right: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
docs/assets/img/less-small.png
Normal file
BIN
docs/assets/img/less-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@@ -151,7 +151,7 @@
|
||||
<p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
|
||||
<img class="icon" src="assets/img/less-small.png">
|
||||
<h2>Built on LESS</h2>
|
||||
<p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
|
||||
</div>
|
||||
@@ -175,7 +175,7 @@
|
||||
<div class="span3">
|
||||
<img class="small-icon" src="assets/img/icon-twitter.png">
|
||||
<h3>Made at Twitter</h3>
|
||||
<p>Brought to you by experienced engineers and designers.</p>
|
||||
<p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
@@ -196,6 +196,16 @@
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.nav .active a').click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).parent().siblings().toggle();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Why LESS?</h3>
|
||||
<p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p>
|
||||
<p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>What's included?</h3>
|
||||
@@ -72,7 +72,7 @@
|
||||
<div class="span4">
|
||||
<h3>Learn more</h3>
|
||||
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
|
||||
<p>Visit the official website at http://lesscss.org to learn more.</p>
|
||||
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@@ -98,11 +98,7 @@
|
||||
<h1>Variables <small>from variables.less</small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Hyperlinks</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -124,92 +120,70 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Grayscale colors</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@black</code></td>
|
||||
<td>#000</td>
|
||||
<td>Black</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDark</code></td>
|
||||
<td><code>lighten(@black, 25%)</code></td>
|
||||
<td>Dark gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gray</code></td>
|
||||
<td><code>lighten(@black, 50%)</code></td>
|
||||
<td>Medium gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLight</code></td>
|
||||
<td><code>lighten(@black, 75%)</code></td>
|
||||
<td>Light gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLighter</code></td>
|
||||
<td><code>lighten(@black, 90%)</code></td>
|
||||
<td>Lighter gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@white</code></td>
|
||||
<td>#fff</td>
|
||||
<td>White</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Accent colors</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@blue</code></td>
|
||||
<td>#049CDB</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@green</code></td>
|
||||
<td>#46a546</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@red</code></td>
|
||||
<td>#9d261d</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@yellow</code></td>
|
||||
<td>#ffc40d</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@orange</code></td>
|
||||
<td>#f89406</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@pink</code></td>
|
||||
<td>#c3325f</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@purple</code></td>
|
||||
<td>#7a43b6</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -217,48 +191,36 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Grid system</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>12</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>60px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@siteWidth</code></td>
|
||||
<td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Typography</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@baseFontSize</code></td>
|
||||
<td>13px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@baseFontFamily</code></td>
|
||||
@@ -268,7 +230,6 @@
|
||||
<tr>
|
||||
<td><code>@baseLineHeight</code></td>
|
||||
<td>18px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -53,15 +53,6 @@
|
||||
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
|
||||
</header>
|
||||
|
||||
<!-- Work in progress sub nav for docs -->
|
||||
<div class="navbar subnav docked-top">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Grid system</a></li>
|
||||
<li><a href="#">Layouts</a></li>
|
||||
<li><a href="#">Responsive</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Grid system
|
||||
|
||||
Reference in New Issue
Block a user