Documented semifluid layouts

Added semifluid layouts to jasny/bootstrap.less and jasny/responsive.less
This commit is contained in:
Arnold Daniels
2012-07-17 12:45:11 +02:00
parent 80679f8550
commit 3ab1eb55b9
5 changed files with 34 additions and 6 deletions

View File

@@ -396,6 +396,7 @@ hr.soften {
width: 100%;
}
/* Popover docs
-------------------------------------------------- */
.popover-well {
@@ -902,11 +903,6 @@ form.well {
border-top-width: 0px;
padding: 0;
}
/* Space out the show-grid examples */
.row-desktop.show-grid [class*="span"] {
margin-bottom: 5px;
}
}

View File

@@ -67,6 +67,10 @@
<h3><a href="./components.html#alerts">{{_i}}Page alerts{{/i}}</a></h3>
<p>{{_i}}Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./scaffolding.html#layouts">{{_i}}Semi-fluid layout{{/i}}</a></h3>
<p>{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span3">

View File

@@ -358,6 +358,28 @@
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row">
<div class="span6">
<h2>{{_i}}Semi-fluid layout{{/i}}</h2>
<p>{{_i}}Get the best of both worlds with <code>&lt;div class="container-semifluid"&gt;</code>. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
<div class="semifluid-layouts">
<div class="mini-layout desktop">
<div class="mini-layout-body"></div>
</div>
<div class="mini-layout tablet">
<div class="mini-layout-body"></div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;
&lt;div class="row-fluid"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
@@ -547,7 +569,7 @@
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row">
<div class="span4">
</div><!-- /.span -->

View File

@@ -12,6 +12,9 @@
@import "../variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../mixins.less";
// Grid system and page structure
@import "layouts-semifluid.less";
// Base CSS
@import "forms.less";
@import "forms-uneditable.less";

View File

@@ -12,6 +12,9 @@
@import "../variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../mixins.less";
// Grid system and page structure
@import "layouts-semifluid.responsive.less";
// Base CSS
@import "forms.responsive.less";