mirror of
https://github.com/jasny/bootstrap.git
synced 2026-01-22 12:48:10 -05:00
Documented .row-desktop
Added row desktop to jasny/responsive.less
This commit is contained in:
@@ -920,6 +920,11 @@ form.bs-docs-example {
|
||||
margin-top: 30px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Space out the show-grid examples */
|
||||
.row-desktop.show-grid [class*="span"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet to desktop
|
||||
@@ -1072,16 +1077,6 @@ form.bs-docs-example {
|
||||
border-top-width: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
|
||||
/* Space out the show-grid examples */
|
||||
.row-desktop.show-grid [class*="span"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
>>>>>>> Added support for semifluid layouts
|
||||
|
||||
/* Modal example */
|
||||
.modal-example .modal {
|
||||
|
||||
7
docs/templates/pages/index.mustache
vendored
7
docs/templates/pages/index.mustache
vendored
@@ -38,6 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<div class="container">
|
||||
<div class="changes">
|
||||
<h1>{{_i}}What's different?{{/i}}</h1>
|
||||
@@ -48,6 +49,8 @@
|
||||
<p>{{_i}}Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.{{/i}}</p>
|
||||
<p>{{_i}}Action links look distinctly different than normal links.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./base-css.html#iconic-icons">{{_i}}Iconic icons{{/i}}</a></h3>
|
||||
<p>{{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}</p>
|
||||
@@ -61,6 +64,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">
|
||||
|
||||
16
docs/templates/pages/scaffolding.mustache
vendored
16
docs/templates/pages/scaffolding.mustache
vendored
@@ -482,6 +482,22 @@
|
||||
<li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">✔ {{_i}}Desktop{{/i}}</span></li>
|
||||
</ul>
|
||||
|
||||
<!-- Desktop row -->
|
||||
<h2>{{_i}}Desktop rows{{/i}}</h2>
|
||||
<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>
|
||||
<h4>{{_i}}Test case{{/i}}</h4>
|
||||
<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="span3">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="span3">Desktop row 3</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user