root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #7704 from twitter/bs3_moar_grid_changes 

BS3: Overhaul grid system once more
This commit is contained in:
Mark Otto 2013-04-28 18:44:54 -07:00
parent 781692ffa2 efd3b0c171
commit cd06c5baac
5 changed files with 240 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
docs/assets/css/bootstrap.css vendored
View File

@ -784,107 +784,98 @@ pre code {
margin-left: -15px;
}
[class*="col-span-"],
[class*="col-small-"] {
.col {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
[class*="col-small-"] {
float: left;
}
.col-small-span-12 {
.col-sm-12 {
width: 100%;
}
.col-small-span-11 {
.col-sm-11 {
width: 91.66666666666666%;
}
.col-small-span-10 {
.col-sm-10 {
width: 83.33333333333334%;
}
.col-small-span-9 {
.col-sm-9 {
width: 75%;
}
.col-small-span-8 {
.col-sm-8 {
width: 66.66666666666666%;
}
.col-small-span-7 {
.col-sm-7 {
width: 58.333333333333336%;
}
.col-small-span-6 {
.col-sm-6 {
width: 50%;
}
.col-small-span-5 {
.col-sm-5 {
width: 41.66666666666667%;
}
.col-small-span-4 {
.col-sm-4 {
width: 33.33333333333333%;
}
.col-small-span-3 {
.col-sm-3 {
width: 25%;
}
.col-small-span-2 {
.col-sm-2 {
width: 16.666666666666664%;
}
.col-small-span-1 {
.col-sm-1 {
width: 8.333333333333332%;
}
@media screen and (min-width: 768px) {
.container {
max-width: 728px;
}
[class*="col-span-"] {
float: left;
}
.col-span-12 {
.col-lg-12 {
width: 100%;
}
.col-span-11 {
.col-lg-11 {
width: 91.66666666666666%;
}
.col-span-10 {
.col-lg-10 {
width: 83.33333333333334%;
}
.col-span-9 {
.col-lg-9 {
width: 75%;
}
.col-span-8 {
.col-lg-8 {
width: 66.66666666666666%;
}
.col-span-7 {
.col-lg-7 {
width: 58.333333333333336%;
}
.col-span-6 {
.col-lg-6 {
width: 50%;
}
.col-span-5 {
.col-lg-5 {
width: 41.66666666666667%;
}
.col-span-4 {
.col-lg-4 {
width: 33.33333333333333%;
}
.col-span-3 {
.col-lg-3 {
width: 25%;
}
.col-span-2 {
.col-lg-2 {
width: 16.666666666666664%;
}
.col-span-1 {
.col-lg-1 {
width: 8.333333333333332%;
}
.col-offset-12 {
@ -997,6 +988,12 @@ pre code {
}
}
@media screen and (min-width: 768px) {
.container {
max-width: 728px;
}
}
@media screen and (min-width: 992px) {
.container {
max-width: 940px;
@ -1009,9 +1006,9 @@ pre code {
}
}
[class*="col-span-"].pull-right {
/*[class*="col-span-"].pull-right {
float: right;
}
}*/
table {
max-width: 100%;

4
docs/assets/css/docs.css
View File

@ -124,13 +124,13 @@ section > ul li {
.show-grid {
margin-bottom: 15px;
}
.show-grid [class*="col-span-"] {
.show-grid .col {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.show-grid [class*="col-span-"]:hover {
.show-grid .col:hover {
background-color: #ddd;
}

306
docs/docs.html
View File

@ -20,22 +20,22 @@ title: Bootstrap Documentation
</div>
<p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<div class="row">
<div class="col-span-6">
<div class="col col-lg-6">
<h3>Compiled CSS and JS</h3>
<p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
<p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
</div>
<div class="col-span-6">
<div class="col col-lg-6">
<h3>Latest source code</h3>
<p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
<p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
</div>
<div class="col-span-6">
<div class="col col-lg-6">
<h3>Clone or fork via GitHub</h3>
<p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
<p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">GitHub repository</a></p>
</div>
<div class="col-span-6">
<div class="col col-lg-6">
<h3>Bower</h3>
<p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
@ -110,63 +110,63 @@ title: Bootstrap Documentation
<h3>Examples</h3>
<div class="row bs-docs-examples">
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a>
<h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
@ -174,21 +174,21 @@ title: Bootstrap Documentation
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
@ -338,81 +338,81 @@ title: Bootstrap Documentation
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-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 col-lg-1">1</div>
</div>
<div class="row show-grid">
<div class="col-span-4">4</div>
<div class="col-span-4">4</div>
<div class="col-span-4">4</div>
<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>
<div class="row show-grid">
<div class="col-span-6">6</div>
<div class="col-span-6">6</div>
<div class="col col-lg-6">6</div>
<div class="col col-lg-6">6</div>
</div>
</div>
{% highlight html linenos %}
<div class="row">
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-1">1</div>
<div class="col-span-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 col-lg-1">1</div>
</div>
<div class="row">
<div class="col-span-4">4</div>
<div class="col-span-4">4</div>
<div class="col-span-4">4</div>
<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>
<div class="row">
<div class="col-span-6">6</div>
<div class="col-span-6">6</div>
<div class="col col-lg-6">6</div>
<div class="col 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-span-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 col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-span-4">4</div>
<div class="col-span-4 col-offset-4">4 offset 4</div>
<div class="col col-lg-4">4</div>
<div class="col col-lg-4 col-offset-4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="col-span-3 col-offset-3">3 offset 3</div>
<div class="col-span-3 col-offset-3">3 offset 3</div>
<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><!-- /row -->
<div class="row show-grid">
<div class="col-span-6 col-offset-3">6 offset 3</div>
<div class="col col-lg-6 col-offset-3">6 offset 3</div>
</div><!-- /row -->
</div>
{% highlight html linenos %}
<div class="row">
<div class="col-span-4">...</div>
<div class="col-span-4 col-offset-4">...</div>
<div class="col col-lg-4">...</div>
<div class="col col-lg-4 col-offset-4">...</div>
</div>
<div class="row">
<div class="col-span-3 col-offset-3">3 offset 3</div>
<div class="col-span-3 col-offset-3">3 offset 3</div>
<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>
<div class="row">
<div class="col-span-6 col-offset-3">...</div>
<div class="col col-lg-6 col-offset-3">...</div>
</div>
{% endhighlight %}
@ -420,13 +420,13 @@ title: Bootstrap Documentation
<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-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="col-span-9">
<div class="col col-lg-9">
Level 1: 9 columns
<div class="row show-grid">
<div class="col-span-6">
<div class="col col-lg-6">
Level 2: 6 columns
</div>
<div class="col-span-6">
<div class="col col-lg-6">
Level 2: 6 columns
</div>
</div>
@ -434,13 +434,13 @@ title: Bootstrap Documentation
</div>
{% highlight html linenos %}
<div class="row">
<div class="col-span-9">
<div class="col col-lg-9">
Level 1: 9 columns
<div class="row">
<div class="col-span-6">
<div class="col col-lg-6">
Level 2: 6 columns
</div>
<div class="col-span-6">
<div class="col col-lg-6">
Level 2: 6 columns
</div>
</div>
@ -451,29 +451,29 @@ title: Bootstrap Documentation
<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-span-9 col-push-3">9</div>
<div class="col-span-3 col-pull-9">3</div>
<div class="col col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div>
</div>
{% highlight html linenos %}
<div class="row show-grid">
<div class="col-span-9 col-push-3">9</div>
<div class="col-span-3 col-pull-9">3</div>
<div class="col col-lg-9 col-push-3">9</div>
<div class="col 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-small-span-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>
<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-span-4 col-small-span-6">4 cols, 6 small cols</div>
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
<div class="col-span-4 col-small-span-12">4 cols, 12 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-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
{% highlight html linenos %}
<div class="row">
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
<div class="col-span-4 col-small-span-12">4 cols, 12 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-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
{% endhighlight %}
@ -1186,8 +1186,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-span-1">
<col class="col-span-7">
<col class="col col-lg-1">
<col class="col col-lg-7">
</colgroup>
<thead>
<tr>
@ -1316,8 +1316,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-inline">Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
<form class="bs-docs-example form-inline">
<input type="text" class="col-span-3" placeholder="Email">
<input type="password" class="col-span-3" placeholder="Password">
<input type="text" class="col col-lg-3" placeholder="Email">
<input type="password" class="col col-lg-3" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@ -1327,8 +1327,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form><!-- /example -->
{% highlight html linenos %}
<form class="form-inline">
<input type="text" class="col-span-3" placeholder="Email">
<input type="password" class="col-span-3" placeholder="Password">
<input type="text" class="col col-lg-3" placeholder="Email">
<input type="password" class="col col-lg-3" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@ -1548,10 +1548,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<form class="bs-docs-example form-inline">
<input class="col-span-3" type="email" placeholder="test@example.com" required>
<input class="col col-lg-3" type="email" placeholder="test@example.com" required>
</form>
{% highlight html linenos %}
<input class="col-span-3" type="email" placeholder="test@example.com" required>
<input class="col col-lg-3" type="email" placeholder="test@example.com" required>
{% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
@ -1579,10 +1579,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline">
<fieldset disabled>
<div>
<input type="text" class="col-span-4" placeholder="Disabled input">
<input type="text" class="col col-lg-4" placeholder="Disabled input">
</div>
<div>
<select class="col-span-4">
<select class="col col-lg-4">
<option>Disabled select</option>
</select>
</div>
@ -1598,10 +1598,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="form-inline">
<fieldset disabled>
<div>
<input type="text" class="col-span-4" placeholder="Disabled input">
<input type="text" class="col col-lg-4" placeholder="Disabled input">
</div>
<div>
<select class="col-span-4">
<select class="col col-lg-4">
<option>Disabled select</option>
</select>
</div>
@ -1678,34 +1678,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<form class="bs-docs-example">
<div class="input-group col-span-9">
<div class="input-group col col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-group col-span-6">
<div class="input-group col col-lg-6">
<input type="text">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group col-span-3">
<div class="input-group col col-lg-3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html linenos %}
<div class="input-group col-span-9">
<div class="input-group col col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<div class="input-group col-span-6">
<div class="input-group col col-lg-6">
<input type="text">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group col-span-3">
<div class="input-group col col-lg-3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
@ -1715,33 +1715,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-docs-example">
<div class="input-group col-span-9">
<div class="input-group col 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-span-9">
<div class="input-group col col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-group col-span-9">
<div class="input-group col col-lg-9">
<span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username">
</div>
</form>
{% highlight html linenos %}
<div class="input-group col-span-9">
<div class="input-group col 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-span-9">
<div class="input-group col col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<div class="input-group col-span-9">
<div class="input-group col col-lg-9">
<span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username">
</div>
@ -1750,14 +1750,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-docs-example">
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
</span>
<input type="text">
</div>
<br>
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<input type="text">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
@ -1765,14 +1765,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html linenos %}
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
</span>
<input type="text">
</div>
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<input type="text">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
@ -1783,7 +1783,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-docs-example">
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
@ -1797,7 +1797,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-span-7">
<div class="input-group col col-lg-7">
<input type="text">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -1812,7 +1812,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /input-group -->
</form>
{% highlight html linenos %}
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
@ -1826,7 +1826,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text">
</div><!-- /input-group -->
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<input type="text">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -1843,7 +1843,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@ -1862,7 +1862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<br>
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<input type="text">
<div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button>
@ -1880,14 +1880,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html linenos %}
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text">
</div>
<div class="input-group col-span-7">
<div class="input-group col col-lg-7">
<input type="text">
<div class="input-group-btn btn-group">
<!-- Button and dropdown menu -->
@ -1914,27 +1914,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h4>Column sizing</h4>
<p>Use <code>.col-span-1</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
<p>Use <code>.col col-lg-1</code> to <code>.col col-lg-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="col-span-1" type="text" placeholder=".col-span-1">
<input class="col-span-2" type="text" placeholder=".col-span-2">
<input class="col-span-3" type="text" placeholder=".col-span-3">
<select class="col-span-1">
<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
<select class="col col-lg-1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="col-span-2">
<select class="col col-lg-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="col-span-3">
<select class="col col-lg-3">
<option>1</option>
<option>2</option>
<option>3</option>
@ -1944,16 +1944,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html linenos %}
<input class="col-span-1" type="text" placeholder=".col-span-1">
<input class="col-span-2" type="text" placeholder=".col-span-2">
<input class="col-span-3" type="text" placeholder=".col-span-3">
<select class="col-span-1">
<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
<select class="col col-lg-1">
...
</select>
<select class="col-span-2">
<select class="col col-lg-2">
...
</select>
<select class="col-span-3">
<select class="col col-lg-3">
...
</select>
{% endhighlight %}
@ -1961,27 +1961,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col-span-4">
<input type="text" placeholder=".col-span-4">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
<div class="col-span-4">
<input type="text" placeholder=".col-span-4">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
<div class="col-span-4">
<input type="text" placeholder=".col-span-4">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
</div>
</form>
{% highlight html linenos %}
<div class="row">
<div class="col-span-4">
<input type="text" placeholder=".col-span-4">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
<div class="col-span-4">
<input type="text" placeholder=".col-span-4">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
<div class="col-span-4">
<input type="text" placeholder=".col-span-4">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
</div>
{% endhighlight %}
@ -2679,7 +2679,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col-span-2" id="inputIcon" type="text">
<input class="col col-lg-2" id="inputIcon" type="text">
</div>
</div>
</div>
@ -2690,7 +2690,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col-span-2" id="inputIcon" type="text">
<input class="col col-lg-2" id="inputIcon" type="text">
</div>
</div>
</div>
@ -3626,7 +3626,7 @@ body {
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="col-span-8" placeholder="Search">
<input type="text" class="col col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
@ -3703,7 +3703,7 @@ body {
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="col-span-8" placeholder="Search">
<input type="text" class="col col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
@ -4093,22 +4093,22 @@ body {
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-docs-example">
<div class="row">
<div class="col-span-3">
<div class="col col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="col-span-3">
<div class="col col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="col-span-3">
<div class="col col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="col-span-3">
<div class="col col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
@ -4117,7 +4117,7 @@ body {
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="row">
<div class="col-span-3">
<div class="col col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
@ -4130,7 +4130,7 @@ body {
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-docs-example">
<div class="row">
<div class="col-span-4">
<div class="col col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
@ -4140,7 +4140,7 @@ body {
</div>
</div>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
@ -4150,7 +4150,7 @@ body {
</div>
</div>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
@ -4164,7 +4164,7 @@ body {
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="row">
<div class="col-span-3">
<div class="col col-lg-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
@ -6520,7 +6520,7 @@ $('.carousel').carousel({
<h2>Example</h2>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="col-span-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
<input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div><!-- /example -->
{% highlight html linenos %}
<input type="text" data-provide="typeahead">

30
less/grid.less
View File

@ -12,29 +12,35 @@
.row {
.make-row();
}
[class*="col-span-"],
[class*="col-small-"] {
// Common styles for small and large grid columns
.col {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
[class*="col-small-"] {
float: left;
// Generate small grid classes first
.generate-grid-columns(@grid-columns);
// Then generate the larger grid classes via media query
@media screen and (min-width: 768px) {
.generate-large-grid-columns(@grid-columns);
}
.generate-small-grid-columns(@grid-columns);
// Responsive: Tablets and up
@media screen and (min-width: @screen-tablet) {
.container {
max-width: 728px;
}
// Generate the grid columns and offsets
[class*="col-span-"] {
float: left;
}
.generate-grid-columns(@grid-columns);
}
// Responsive: Desktops and up
@ -52,6 +58,6 @@
}
// Reset utility classes due to specificity
[class*="col-span-"].pull-right {
/*[class*="col-span-"].pull-right {
float: right;
}
}*/

62
less/mixins.less
View File

@ -412,13 +412,12 @@
// Generate the columns
.make-column(@columns) {
@media (min-width: @grid-float-breakpoint) {
float: left;
// Calculate width based on number of columns available
width: percentage((@columns / @grid-columns));
}
// Prevent columns from collapsing when empty
min-height: 1px;
// Set inner padding as gutters instead of margin
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
@ -451,15 +450,40 @@
// The Grid
// Small grid columns
.generate-grid-columns(@grid-columns) {
// Default columns
.col-span-X (@index) when (@index > 0) {
.col-span-@{index} { .col-span-(@index); }
.col-span-X((@index - 1));
.col-sm-X (@index) when (@index > 0) {
.col-sm-@{index} { .col-sm-(@index); }
.col-sm-X((@index - 1));
}
.col-sm-X (0) {}
// Generate columns
.col-sm-X(@grid-columns);
// Apply the styles
.col-sm-(@columns) {
width: percentage((@columns / @grid-columns));
}
}
// Large grid columns
.generate-large-grid-columns(@grid-columns) {
.col-lg-X (@index) when (@index > 0) {
.col-lg-@{index} { .col-lg-(@index); }
.col-lg-X((@index - 1));
}
.col-lg-X (0) {}
// Generate the columns
.col-lg-X(@grid-columns);
// Apply the styles
.col-lg-(@columns) {
width: percentage((@columns / @grid-columns));
}
.col-span-X(0) {}
// Offsets (gaps between columns)
.col-offset-X (@index) when (@index > 0) {
@ -483,9 +507,6 @@
.col-pull-X (0) {}
// Apply the styles
.col-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
.col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
@ -497,30 +518,11 @@
}
// Generate .spanX and .offsetX
.col-span-X(@grid-columns);
.col-offset-X(@grid-columns);
.col-push-X(@grid-columns);
.col-pull-X(@grid-columns);
}
// Small device grid
.generate-small-grid-columns(@grid-columns) {
// Deterimine the classes
.col-small-span-X (@index) when (@index > 0) {
.col-small-span-@{index} { .col-small-span-(@index); }
.col-small-span-X((@index - 1));
}
.col-small-span-X(0) {}
// Specify widths
.col-small-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
// Generate the CSS
.col-small-span-X(@grid-columns);
}
// Framework mixins