github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-20 03:47:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Documented .row-desktop

Browse Source 
Added row desktop to jasny/responsive.less
This commit is contained in:
Arnold Daniels
2012-07-17 13:45:23 +02:00
parent 3a8f270d14
commit b441742867
4 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/assets/css/docs.css
View File

@@ -903,6 +903,11 @@ form.well {
border-top-width: 0px;
padding: 0;
}
/* Space out the show-grid examples */
.row-desktop.show-grid [class*="span"] {
margin-bottom: 5px;
}
}

4
docs/templates/pages/index.mustache vendored
View File

@@ -71,6 +71,10 @@
<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 class="span3">
<h3><a href="./scaffolding.html#responsive">{{_i}}Desktop rows{{/i}}</a></h3>
<p>{{_i}}By default columns of a row are show next to each other for tablets and desktops and not for phones. A desktop row displays acts like a row for desktops only and not for tablets or phones.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span3">

22
docs/templates/pages/scaffolding.mustache vendored
View File

@@ -569,6 +569,28 @@
</div><!-- /.span -->
</div><!-- /.row -->
<!-- Desktop row -->
<h2>{{_i}}Desktop rows{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}By default columns of a <code>.row</code> are show next to each other, however for phones the columns are show underneath each other. By adding the class <code>.row-desktop</code> to a row,
it will display the columns underneath each other for tablets as well.{{/i}}</p>
</div><!-- /.span -->
<div class="span8">
<h3>{{_i}}Test case{{/i}}</h3>
<p>{{_i}}Resize your browser to see the rows behave differently. They look the same for desktops and phones, but different for tablets.{{/i}}</p>
<div class="row show-grid">
<div class="span3">Normal row 1</div>
<div class="span3">Normal row 2</div>
<div class="span2">Normal row 3</div>
</div>
<div class="row show-grid row-desktop">
<div class="span3">Desktop row 1</div>
<div class="span3">Desktop row 2</div>
<div class="span2">Desktop row 3</div>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row">
<div class="span4">

1
less/jasny/responsive.less
View File

@@ -14,6 +14,7 @@
// Grid system and page structure
@import "layouts-semifluid.responsive.less";
@import "row-desktop.responsive.less";
// Base CSS
@import "forms.responsive.less";