soc-core
Version:
Core sass framework based on Bootstrap
151 lines (147 loc) • 5.97 kB
HTML
<a name="grid"></a>
<div class="container-fluid">
<div class="page-header">
<h1>Grid <small>Responsive layouting
<span class="label label-default">Wrap</span>
</small></h1>
</div>
<p>Responsive 12 Column layout as defined by Bootstrap</p>
<ul>
<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width)
for proper alignment and padding.</li>
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts.
Less mixins can also be used for more semantic layouts.</li>
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for
the first and last column via negative margin on <code>.row</code>s.</li>
<li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up
with non-grid content.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three
equal columns would use three <code>.col-xs-4</code>.</li>
<li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto
a new line.
</li>
<li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid
classes targeted at smaller devices. Therefore, e.g. applying any <code>.col-md-*</code> class to an element
will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-*</code> class
is not present.</li>
</ul>
<p>For more information, check out the docs at <a href="http://getbootstrap.com/css/#grid" target="blank" alt="Bootstrap grid">Bootstrap</a></p>
<div class="row">
<div class="col-md-12">
<div class="row show-grid">
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
<div class="col-md-1">
<span>1</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-2 col-sm-4">
<span>2</span>
</div>
<div class="col-md-2 col-sm-4">
<span>2</span>
</div>
<div class="col-md-2 col-sm-4">
<span>2</span>
</div>
<div class="col-md-2 col-sm-4">
<span>2</span>
</div>
<div class="col-md-2 col-sm-4">
<span>2</span>
</div>
<div class="col-md-2 col-sm-4">
<span>2</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-3">
<span>3</span>
</div>
<div class="col-md-3">
<span>3</span>
</div>
<div class="col-md-3 col-sm-6">
<span>3</span>
</div>
<div class="col-md-3 col-sm-6">
<span>3</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-4 col-sm-4">
<span>4</span>
</div>
<div class="col-md-4 col-sm-4">
<span>4</span>
</div>
<div class="col-md-4 col-sm-4">
<span>4</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-6 col-sm-6">
<span>6</span>
</div>
<div class="col-md-6 col-sm-6">
<span>6</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-4 col-sm-4">
<span>4</span>
</div>
<div class="col-md-8 col-sm-8">
<span>8</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-3 col-sm-3">
<span>3</span>
</div>
<div class="col-md-9 col-sm-9">
<span>9</span>
</div>
</div>
<div class="row show-grid">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</div>
</div>