rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'master' into modular-the-mixins

Browse Source 
* master:
  Replace some images on the Carousel example with some base64 encoded 1x1 gifs
  ugh grunt
  moar grunt
  mo copy
  http://www.youtube.com/watch?v=AJWtLf4-WWs
  grunt
  Copy change
  fix grammar in comment in forms.less
  Fixes #12759
  Fixes #12738
  replace .visible-{size} with .visible-{size}-{display} ; fixes #8869

Conflicts:
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap.css.map
	docs/assets/js/customize.min.js
	docs/assets/js/raw-files.min.js
	docs/dist/css/bootstrap-theme.css.map
	docs/dist/css/bootstrap.css.map
	less/mixins.less
This commit is contained in:
mrmrs 2014-03-09 23:28:08 -07:00
commit 2f380a9683
20 changed files with 502 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
dist/css/bootstrap-rtl.css vendored
View File

@ -3339,6 +3339,17 @@ select[multiple].input-lg {
vertical-align: middle;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
@ -4649,7 +4660,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
@ -4690,6 +4700,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
@media (max-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
@ -4891,6 +4913,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
vertical-align: middle;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}
@ -7197,6 +7230,21 @@ button.close {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
@ -7216,6 +7264,24 @@ button.close {
}
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
@ -7235,6 +7301,24 @@ button.close {
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
@ -7254,6 +7338,24 @@ button.close {
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
@ -7273,6 +7375,24 @@ button.close {
}
}
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
@ -7320,6 +7440,36 @@ button.close {
}
}
.visible-print-block {
display: none !important;
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print {
.hidden-print {
display: none !important;

2
dist/css/bootstrap-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

127
dist/css/bootstrap.css vendored
View File

@ -2591,6 +2591,15 @@ select[multiple].input-lg {
width: auto;
vertical-align: middle;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
@ -3705,7 +3714,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
@ -3740,6 +3748,16 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
padding-left: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
@media (max-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
@ -3910,6 +3928,15 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
width: auto;
vertical-align: middle;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}
@ -5842,6 +5869,20 @@ button.close {
.visible-lg {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
@ -5857,6 +5898,21 @@ button.close {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
@ -5872,6 +5928,21 @@ button.close {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
@ -5887,6 +5958,21 @@ button.close {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
@ -5902,6 +5988,21 @@ button.close {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
@ -5940,6 +6041,30 @@ button.close {
display: table-cell !important;
}
}
.visible-print-block {
display: none !important;
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print {
.hidden-print {
display: none !important;

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
docs/assets/css/src/docs.css
View File

@ -1195,14 +1195,14 @@ h1[id] {
color: #999;
border: 1px solid #ddd;
}
.visible-on .col-xs-6 .visible-xs,
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
.visible-on .col-xs-6 .visible-xs-block,
.visible-on .col-xs-6 .visible-sm-block,
.visible-on .col-xs-6 .visible-md-block,
.visible-on .col-xs-6 .visible-lg-block,
.hidden-on .col-xs-6 .visible-xs-block,
.hidden-on .col-xs-6 .visible-sm-block,
.hidden-on .col-xs-6 .visible-md-block,
.hidden-on .col-xs-6 .visible-lg-block {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;

2
docs/assets/js/customize.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/raw-files.min.js vendored
View File

File diff suppressed because one or more lines are too long

112
docs/css.html
View File

@ -302,7 +302,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
@ -315,7 +315,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
{% endhighlight %}
@ -332,7 +332,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
@ -344,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
@ -1649,6 +1649,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
@ -2646,7 +2652,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
<h2 id="responsive-utilities-classes">Available classes</h2>
@ -2676,28 +2682,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</thead>
<tbody>
<tr>
<th><code>.visible-xs</code></th>
<th><code>.visible-xs-*</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-sm</code></th>
<th><code>.visible-sm-*</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-md</code></th>
<th><code>.visible-md-*</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-lg</code></th>
<th><code>.visible-lg-*</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
@ -2737,6 +2743,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
</div>
<p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Group of classes</th>
<th>CSS <code>display</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.visible-*-block</code></td>
<td><code>display: block;</code></td>
</tr>
<tr>
<td><code>.visible-*-inline</code></td>
<td><code>display: inline;</code></td>
</tr>
<tr>
<td><code>.visible-*-inline-block</code></td>
<td><code>display: inline-block;</code></td>
</tr>
</tbody>
</table>
</div>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
<h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
@ -2744,14 +2777,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
<th>Class</th>
<th>Classes</th>
<th>Browser</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>.visible-print</code></th>
<th>
<code>.visible-print-block</code><br>
<code>.visible-print-inline</code><br>
<code>.visible-print-inline-block</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
@ -2763,6 +2800,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody>
</table>
</div>
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
<h2 id="responsive-utilities-tests">Test cases</h2>
@ -2773,48 +2811,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Visible on x-small</span>
<span class="visible-xs-block">&#10004; Visible on x-small</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Visible on small</span>
<span class="visible-sm-block">&#10004; Visible on small</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Visible on medium</span>
<span class="visible-md-block">&#10004; Visible on medium</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Visible on large</span>
<span class="visible-lg-block">&#10004; Visible on large</span>
</div>
</div>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
<span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
<span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
<span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
<span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
<span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
<span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
</div>
</div>
@ -2823,48 +2861,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Hidden on x-small</span>
<span class="visible-xs-block">&#10004; Hidden on x-small</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Hidden on small</span>
<span class="visible-sm-block">&#10004; Hidden on small</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Hidden on medium</span>
<span class="visible-md-block">&#10004; Hidden on medium</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Hidden on large</span>
<span class="visible-lg-block">&#10004; Hidden on large</span>
</div>
</div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Hidden on x-small and small</span>
<span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Hidden on medium and large</span>
<span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Hidden on x-small and medium</span>
<span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Hidden on small and large</span>
<span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Hidden on x-small and large</span>
<span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
<span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
</div>
</div>
</div>

2
docs/dist/css/bootstrap-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
docs/examples/carousel/index.html
View File

@ -79,7 +79,7 @@
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
@ -89,7 +89,7 @@
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
@ -99,7 +99,7 @@
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
@ -124,19 +124,19 @@
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140" alt="Generic placeholder image">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140" alt="Generic placeholder image">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140" alt="Generic placeholder image">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

14
less/forms.less
View File

@ -368,6 +368,18 @@ input[type="checkbox"],
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
@ -415,7 +427,7 @@ input[type="checkbox"],
// Consistent vertical alignment of radios and checkboxes
//
// Labels also get some reset styles, but that is scope to a media query below.
// Labels also get some reset styles, but that is scoped to a media query below.
.radio,
.checkbox,
.radio-inline,

1
less/mixins.less
View File

@ -42,4 +42,3 @@
@import "mixins/nav-vertical-align.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

12
less/navbar.less
View File

@ -48,7 +48,6 @@
// content for the user's viewport.
.navbar-collapse {
max-height: @navbar-collapse-max-height;
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
@ -88,6 +87,17 @@
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
.navbar-collapse {
max-height: @navbar-collapse-max-height;
@media (max-width: @screen-phone) and (orientation: landscape) {
max-height: 200px;
}
}
}
// Both navbar header and collapse
//

101
less/responsive-utilities.less
View File

@ -23,6 +23,7 @@
// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
@ -30,26 +31,104 @@
.responsive-invisibility();
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
.visible-xs-block {
@media (max-width: @screen-xs-max) {
display: block !important;
}
}
.visible-xs-inline {
@media (max-width: @screen-xs-max) {
display: inline !important;
}
}
.visible-xs-inline-block {
@media (max-width: @screen-xs-max) {
display: inline-block !important;
}
}
.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
.visible-sm-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: block !important;
}
}
.visible-sm-inline {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline !important;
}
}
.visible-sm-inline-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline-block !important;
}
}
.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
.visible-md-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: block !important;
}
}
.visible-md-inline {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline !important;
}
}
.visible-md-inline-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline-block !important;
}
}
.visible-lg {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
.visible-lg-block {
@media (min-width: @screen-lg-min) {
display: block !important;
}
}
.visible-lg-inline {
@media (min-width: @screen-lg-min) {
display: inline !important;
}
}
.visible-lg-inline-block {
@media (min-width: @screen-lg-min) {
display: inline-block !important;
}
}
.hidden-xs {
@media (max-width: @screen-xs-max) {
@ -77,6 +156,7 @@
//
// Media queries are placed on the inside to be mixin-friendly.
// Note: Deprecated .visible-print as of v3.2.0
.visible-print {
.responsive-invisibility();
@ -84,6 +164,27 @@
.responsive-visibility();
}
}
.visible-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.hidden-print {
@media print {

2
less/variables.less
View File

@ -261,7 +261,7 @@
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1, and @screen-xs-min as of v3.2.0
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

2
test-infra/npm-shrinkwrap.canonical.json
View File

File diff suppressed because one or more lines are too long