mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

nuke the .col

Browse Source
This commit is contained in:
Mark Otto
2013-06-03 21:57:51 -07:00
parent 45c5b4e45c
commit 245ebda651
11 changed files with 365 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/css.html
+109 -109
View File
@@ -70,81 +70,81 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
</div>
<div class="row show-grid">
<div class="col col-lg-4">4</div>
<div class="col col-lg-4">4</div>
<div class="col col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col col-lg-6">6</div>
<div class="col col-lg-6">6</div>
<div class="col-lg-6">6</div>
<div class="col-lg-6">6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
</div>
<div class="row">
<div class="col col-lg-4">4</div>
<div class="col col-lg-4">4</div>
<div class="col col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
</div>
<div class="row">
<div class="col col-lg-6">6</div>
<div class="col col-lg-6">6</div>
<div class="col-lg-6">6</div>
<div class="col-lg-6">6</div>
</div>
{% endhighlight %}
<h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col col-lg-4">4</div>
<div class="col col-lg-4 col-offset-4">4 offset 4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4 col-offset-4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="col col-lg-3 col-offset-3">3 offset 3</div>
<div class="col col-lg-3 col-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="col col-lg-6 col-offset-3">6 offset 3</div>
<div class="col-lg-6 col-offset-3">6 offset 3</div>
</div><!-- /row -->
</div>
{% highlight html %}
<div class="row">
<div class="col col-lg-4">...</div>
<div class="col col-lg-4 col-offset-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4 col-offset-4">...</div>
</div>
<div class="row">
<div class="col col-lg-3 col-offset-3">3 offset 3</div>
<div class="col col-lg-3 col-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col col-lg-6 col-offset-3">...</div>
<div class="col-lg-6 col-offset-3">...</div>
</div>
{% endhighlight %}
@@ -152,13 +152,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3 id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="col col-lg-9">
<div class="col-lg-9">
Level 1: 9 columns
<div class="row show-grid">
<div class="col col-lg-6">
<div class="col-lg-6">
Level 2: 6 columns
</div>
<div class="col col-lg-6">
<div class="col-lg-6">
Level 2: 6 columns
</div>
</div>
@@ -166,13 +166,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</div>
{% highlight html %}
<div class="row">
<div class="col col-lg-9">
<div class="col-lg-9">
Level 1: 9 columns
<div class="row">
<div class="col col-lg-6">
<div class="col-lg-6">
Level 2: 6 columns
</div>
<div class="col col-lg-6">
<div class="col-lg-6">
Level 2: 6 columns
</div>
</div>
@@ -183,29 +183,29 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div>
<div class="col-lg-9 col-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div>
</div>
{% highlight html %}
<div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div>
<div class="col-lg-9 col-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div>
</div>
{% endhighlight %}
<h3 id="grid-small">Small device grid</h3>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<div class="row show-grid">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
<div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
{% highlight html %}
<div class="row">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
<div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
{% endhighlight %}
@@ -918,8 +918,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="col col-lg-1">
<col class="col col-lg-7">
<col class="col-lg-1">
<col class="col-lg-7">
</colgroup>
<thead>
<tr>
@@ -1078,14 +1078,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
<form class="bs-example form-horizontal">
<div class="row">
<label for="inputEmail" class="col col-lg-2 control-label">Email</label>
<div class="col col-lg-10">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="row">
<label for="" class="col col-lg-2 control-label">Password</label>
<div class="col col-lg-10">
<label for="" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
@@ -1093,7 +1093,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label>
</div>
</div>
<div class="col col-lg-10 col-offset-2">
<div class="col-lg-10 col-offset-2">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
@@ -1101,14 +1101,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<form class="form-horizontal">
<div class="row">
<label for="inputEmail" class="col col-lg-2 control-label">Email</label>
<div class="col col-lg-10">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="row">
<label for="" class="col col-lg-2 control-label">Password</label>
<div class="col col-lg-10">
<label for="" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
@@ -1116,7 +1116,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label>
</div>
</div>
<div class="col col-lg-10 col-offset-2">
<div class="col-lg-10 col-offset-2">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
@@ -1400,34 +1400,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<form class="bs-example">
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-group col col-lg-6">
<div class="input-group col-lg-6">
<input type="text">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group col col-lg-3">
<div class="input-group col-lg-3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html %}
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<div class="input-group col col-lg-6">
<div class="input-group col-lg-6">
<input type="text">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group col col-lg-3">
<div class="input-group col-lg-3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
@@ -1437,33 +1437,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-example">
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
</div>
<br>
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username">
</div>
</form>
{% highlight html %}
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
</div>
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<div class="input-group col col-lg-9">
<div class="input-group col-lg-9">
<span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username">
</div>
@@ -1472,14 +1472,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text">
</div>
<br>
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<input type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
@@ -1487,14 +1487,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text">
</div>
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<input type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
@@ -1505,7 +1505,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
@@ -1519,7 +1519,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text">
</div><!-- /input-group -->
<br>
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<input type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1534,7 +1534,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /input-group -->
</form>
{% highlight html %}
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
@@ -1548,7 +1548,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text">
</div><!-- /input-group -->
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<input type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1565,7 +1565,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Segmented dropdown groups</h4>
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1584,7 +1584,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<br>
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<input type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
@@ -1602,14 +1602,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text">
</div>
<div class="input-group col col-lg-7">
<div class="input-group col-lg-7">
<input type="text">
<div class="input-group-btn btn-group">
<!-- Button and dropdown menu -->
@@ -1639,27 +1639,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col col-lg-2">
<input type="text" placeholder="col col-large-2">
<div class="col-lg-2">
<input type="text" placeholder="col-large-2">
</div>
<div class="col col-lg-3">
<input type="text" placeholder="col col-large-3">
<div class="col-lg-3">
<input type="text" placeholder="col-large-3">
</div>
<div class="col col-lg-4">
<input type="text" placeholder="col col-large-4">
<div class="col-lg-4">
<input type="text" placeholder="col-large-4">
</div>
</div>
</form>
{% highlight html %}
<div class="row">
<div class="col col-lg-2">
<input type="text" placeholder="col col-large-2">
<div class="col-lg-2">
<input type="text" placeholder="col-large-2">
</div>
<div class="col col-lg-3">
<input type="text" placeholder="col col-large-3">
<div class="col-lg-3">
<input type="text" placeholder="col-large-3">
</div>
<div class="col col-lg-4">
<input type="text" placeholder="col col-large-4">
<div class="col-lg-4">
<input type="text" placeholder="col-large-4">
</div>
</div>
{% endhighlight %}