mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
Merge branch '3.0.0-wip' into bs3_remove_icons
Conflicts: docs/components.html
This commit is contained in:
Mark Otto
commit
62f76ad33f
@ -9,4 +9,3 @@ permalink: pretty
|
||||
source: ./docs
|
||||
destination: ./_gh_pages
|
||||
port: 9001
|
||||
url: http://getbootstrap.dev:9001
|
||||
|
||||
@ -4,10 +4,6 @@
|
||||
<script src="/assets/js/jquery.js"></script>
|
||||
<script src="/assets/js/bootstrap.js"></script>
|
||||
|
||||
<!-- Offcanvas example
|
||||
================================================== -->
|
||||
<script src="/assets/js/examples/bootstrap-offcanvas.js"></script>
|
||||
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="/assets/js/holder/holder.js"></script>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<a href="#js-overview">Overview</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#js-individual-compiled">Individual or compiled</a></li>
|
||||
<li><a href="#js-data-attributes">Data attributes</a></li>
|
||||
<li><a href="#js-data-attrs">Data attributes</a></li>
|
||||
<li><a href="#js-programmatic-api">Programmatic API</a></li>
|
||||
<li><a href="#js-noconflict">No Conflict</a></li>
|
||||
<li><a href="#js-events">Events</a></li>
|
||||
|
||||
234
docs/assets/css/bootstrap.css
vendored
234
docs/assets/css/bootstrap.css
vendored
@ -353,14 +353,6 @@ small {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
@ -425,6 +417,7 @@ h6,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
@ -818,13 +811,26 @@ pre code {
|
||||
.col-lg-11,
|
||||
.col-lg-12 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
@ -877,6 +883,20 @@ pre code {
|
||||
.container {
|
||||
max-width: 728px;
|
||||
}
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-sm-1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
@ -913,39 +933,6 @@ pre code {
|
||||
.col-sm-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-offset-1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
.col-offset-2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.col-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-offset-4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.col-offset-5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.col-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-offset-7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.col-offset-8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.col-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-offset-10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.col-offset-11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
.col-push-1 {
|
||||
left: 8.333333333333332%;
|
||||
}
|
||||
@ -1018,6 +1005,20 @@ pre code {
|
||||
.container {
|
||||
max-width: 940px;
|
||||
}
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-lg-1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
@ -1054,6 +1055,39 @@ pre code {
|
||||
.col-lg-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-offset-1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
.col-offset-2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.col-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-offset-4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.col-offset-5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.col-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-offset-7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.col-offset-8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.col-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-offset-10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.col-offset-11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@ -1200,13 +1234,13 @@ th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
table col[class*="col-span-"] {
|
||||
table col[class^="col-"] {
|
||||
display: table-column;
|
||||
float: none;
|
||||
}
|
||||
|
||||
table td[class*="col-span-"],
|
||||
table th[class*="col-span-"] {
|
||||
table td[class^="col-"],
|
||||
table th[class^="col-"] {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
}
|
||||
@ -1337,6 +1371,58 @@ input[type="color"]:focus {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[type="text"][disabled],
|
||||
input[type="password"][disabled],
|
||||
input[type="datetime"][disabled],
|
||||
input[type="datetime-local"][disabled],
|
||||
input[type="date"][disabled],
|
||||
input[type="month"][disabled],
|
||||
input[type="time"][disabled],
|
||||
input[type="week"][disabled],
|
||||
input[type="number"][disabled],
|
||||
input[type="email"][disabled],
|
||||
input[type="url"][disabled],
|
||||
input[type="search"][disabled],
|
||||
input[type="tel"][disabled],
|
||||
input[type="color"][disabled],
|
||||
select[readonly],
|
||||
textarea[readonly],
|
||||
input[type="text"][readonly],
|
||||
input[type="password"][readonly],
|
||||
input[type="datetime"][readonly],
|
||||
input[type="datetime-local"][readonly],
|
||||
input[type="date"][readonly],
|
||||
input[type="month"][readonly],
|
||||
input[type="time"][readonly],
|
||||
input[type="week"][readonly],
|
||||
input[type="number"][readonly],
|
||||
input[type="email"][readonly],
|
||||
input[type="url"][readonly],
|
||||
input[type="search"][readonly],
|
||||
input[type="tel"][readonly],
|
||||
input[type="color"][readonly],
|
||||
fieldset[disabled] select,
|
||||
fieldset[disabled] textarea,
|
||||
fieldset[disabled] input[type="text"],
|
||||
fieldset[disabled] input[type="password"],
|
||||
fieldset[disabled] input[type="datetime"],
|
||||
fieldset[disabled] input[type="datetime-local"],
|
||||
fieldset[disabled] input[type="date"],
|
||||
fieldset[disabled] input[type="month"],
|
||||
fieldset[disabled] input[type="time"],
|
||||
fieldset[disabled] input[type="week"],
|
||||
fieldset[disabled] input[type="number"],
|
||||
fieldset[disabled] input[type="email"],
|
||||
fieldset[disabled] input[type="url"],
|
||||
fieldset[disabled] input[type="search"],
|
||||
fieldset[disabled] input[type="tel"],
|
||||
fieldset[disabled] input[type="color"] {
|
||||
cursor: not-allowed;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@ -1490,6 +1576,7 @@ input[type="url"].input-large,
|
||||
input[type="search"].input-large,
|
||||
input[type="tel"].input-large,
|
||||
input[type="color"].input-large {
|
||||
min-height: 56px;
|
||||
padding: 14px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
@ -1511,34 +1598,12 @@ input[type="url"].input-small,
|
||||
input[type="search"].input-small,
|
||||
input[type="tel"].input-small,
|
||||
input[type="color"].input-small {
|
||||
min-height: 32px;
|
||||
min-height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly],
|
||||
fieldset[disabled] input,
|
||||
fieldset[disabled] select,
|
||||
fieldset[disabled] textarea {
|
||||
cursor: not-allowed;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly],
|
||||
fieldset[disabled] input[type="radio"],
|
||||
fieldset[disabled] input[type="checkbox"] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.has-warning .control-label {
|
||||
color: #c09853;
|
||||
}
|
||||
@ -1608,21 +1673,6 @@ fieldset[disabled] input[type="checkbox"] {
|
||||
border-color: #468847;
|
||||
}
|
||||
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
|
||||
input:focus:invalid:focus,
|
||||
textarea:focus:invalid:focus,
|
||||
select:focus:invalid:focus {
|
||||
border-color: #e9322d;
|
||||
-webkit-box-shadow: 0 0 6px #f8b9b7;
|
||||
box-shadow: 0 0 6px #f8b9b7;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
@ -1661,6 +1711,7 @@ select:focus:invalid:focus {
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -2939,7 +2990,8 @@ input[type="button"].btn-block {
|
||||
}
|
||||
|
||||
.list-group {
|
||||
margin: 0 0 20px;
|
||||
padding-left: 0;
|
||||
margin-bottom: 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
@ -3464,6 +3516,10 @@ button.close {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-nav.pull-right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-static-top {
|
||||
border-radius: 0;
|
||||
}
|
||||
@ -3677,7 +3733,7 @@ button.close {
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
margin-left: -5px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar-nav {
|
||||
float: left;
|
||||
@ -3692,6 +3748,7 @@ button.close {
|
||||
}
|
||||
.navbar-nav.pull-right {
|
||||
float: right;
|
||||
width: auto;
|
||||
}
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
@ -4375,10 +4432,6 @@ button.close {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.popover-title:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
@ -5024,6 +5077,7 @@ a.list-group-item.active > .badge,
|
||||
left: 50%;
|
||||
z-index: 15;
|
||||
width: 100px;
|
||||
padding-left: 0;
|
||||
margin: 0 0 0 -50px;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
||||
@ -81,7 +81,9 @@ body {
|
||||
|
||||
/* Textual links */
|
||||
.bs-masthead-links {
|
||||
margin: 20px 0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.bs-masthead-links li {
|
||||
@ -711,13 +713,6 @@ input.focused {
|
||||
/* Tablets and up */
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
/* Reaffix the fixed sidebar */
|
||||
.bs-sidebar.affix {
|
||||
position: fixed; /* Undo the static from mobile-first approach */
|
||||
top: 50px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
/* Back to top link */
|
||||
.bs-top {
|
||||
display: block; /* Unhide */
|
||||
@ -779,6 +774,8 @@ input.focused {
|
||||
|
||||
/* Widen the fixed sidebar */
|
||||
.bs-sidebar.affix {
|
||||
position: fixed; /* Undo the static from mobile-first approach */
|
||||
top: 50px;
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
|
||||
2
docs/assets/js/bootstrap.js
vendored
2
docs/assets/js/bootstrap.js
vendored
@ -1420,6 +1420,8 @@
|
||||
$tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
|
||||
|
||||
$tip.removeClass('fade top bottom left right in')
|
||||
|
||||
$tip.find('.popover-title:empty').hide()
|
||||
}
|
||||
|
||||
Popover.prototype.hasContent = function () {
|
||||
|
||||
2
docs/assets/js/bootstrap.min.js
vendored
2
docs/assets/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -6,7 +6,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
||||
---
|
||||
|
||||
|
||||
|
||||
<!-- Dropdowns
|
||||
================================================== -->
|
||||
<div class="bs-docs-section" id="dropdowns">
|
||||
@ -168,6 +167,11 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
||||
</div>
|
||||
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
|
||||
|
||||
<div class="bs-callout">
|
||||
<h4>Tooltips & popovers in button groups require special setting</h4>
|
||||
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||
</div>
|
||||
|
||||
<h3 id="btn-groups-single">Basic button group</h3>
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="bs-example">
|
||||
@ -628,7 +632,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs">
|
||||
<ul class="nav nav-pills">
|
||||
...
|
||||
<li class="disabled"><a href="#">Disabled link</a></li>
|
||||
...
|
||||
|
||||
@ -43,7 +43,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
|
||||
</ul>
|
||||
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
|
||||
|
||||
<h3 id="overview-reset">Normalize reset</h3>
|
||||
<h3 id="overview-normalize">Normalize reset</h3>
|
||||
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
||||
|
||||
<h3 id="overview-container">Centering with container</h3>
|
||||
@ -247,7 +247,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
|
||||
|
||||
<div class="bs-callout">
|
||||
<h4>Need more examples?</h4>
|
||||
<p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p>
|
||||
<p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
|
||||
<p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
|
||||
</div>
|
||||
|
||||
@ -1380,21 +1380,6 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<input id="focusedInput" type="text" value="This is focused...">
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||
|
||||
<div class="bs-callout">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
|
||||
</div>
|
||||
|
||||
<form class="bs-example">
|
||||
<input type="email" placeholder="test@example.com" required>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<input type="email" placeholder="test@example.com" required>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||
@ -1509,12 +1494,16 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||
|
||||
<h3 id="forms-input-groups">Input groups</h3>
|
||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||
|
||||
<div class="bs-callout">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||
</div>
|
||||
<div class="bs-callout">
|
||||
<h4>Tooltips & popovers in input groups require special setting</h4>
|
||||
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||
</div>
|
||||
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-9">
|
||||
@ -1757,26 +1746,26 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<form class="bs-example" style="padding-bottom: 15px;">
|
||||
<div class="row">
|
||||
<div class="col-lg-2">
|
||||
<input type="text" placeholder="col-large-2">
|
||||
<input type="text" placeholder=".col-lg-2">
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" placeholder="col-large-3">
|
||||
<input type="text" placeholder=".col-lg-3">
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<input type="text" placeholder="col-large-4">
|
||||
<input type="text" placeholder=".col-lg-4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-2">
|
||||
<input type="text" placeholder="col-large-2">
|
||||
<input type="text" placeholder=".col-lg-2">
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" placeholder="col-large-3">
|
||||
<input type="text" placeholder=".col-lg-3">
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<input type="text" placeholder="col-large-4">
|
||||
<input type="text" placeholder=".col-lg-4">
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -357,7 +357,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
|
||||
</div>
|
||||
<div class="bs-callout">
|
||||
<h4>Heads up!</h4>
|
||||
<p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
|
||||
<p>All checked plugins will be compiled into a single file, <code>bootstrap.js</code>. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1942,26 +1942,26 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="row">
|
||||
<div class="col-lg-2">
|
||||
<input type="text" placeholder="col-large-2">
|
||||
<input type="text" placeholder=".col-lg-2">
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" placeholder="col-large-3">
|
||||
<input type="text" placeholder=".col-lg-3">
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<input type="text" placeholder="col-large-4">
|
||||
<input type="text" placeholder=".col-lg-4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-2">
|
||||
<input type="text" placeholder="col-large-2">
|
||||
<input type="text" placeholder=".col-lg-2">
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" placeholder="col-large-3">
|
||||
<input type="text" placeholder=".col-lg-3">
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<input type="text" placeholder="col-large-4">
|
||||
<input type="text" placeholder=".col-lg-4">
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -48,6 +48,11 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout" id="callout-less-compilation">
|
||||
<h4>LESS compilation</h4>
|
||||
<p>If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports <a href="http://twitter.github.io/recess/">Recess</a>, Twitter's CSS hinter built on top of <a href="http://lesscss.org">less.js</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File structure
|
||||
|
||||
@ -64,6 +64,11 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
if (!data) return e.preventDefault() // stops modal from being shown
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout" id="callout-third-party-libs">
|
||||
<h4>Third-party libraries</h4>
|
||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -75,7 +80,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<h1>Transitions <small>transition.js</small></h1>
|
||||
</div>
|
||||
<h3>About transitions</h3>
|
||||
<p>For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.</p>
|
||||
<p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this—it's already there.</p>
|
||||
<h3>Use cases</h3>
|
||||
<p>A few examples of the transition plugin:</p>
|
||||
<ul>
|
||||
@ -118,7 +123,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dalog -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@ -137,7 +142,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dalog -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
{% endhighlight %}
|
||||
|
||||
@ -181,7 +186,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dalog -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div class="bs-example" style="padding-bottom: 24px;">
|
||||
@ -207,7 +212,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dalog -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
{% endhighlight %}
|
||||
|
||||
@ -259,7 +264,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<td>remote</td>
|
||||
<td>path</td>
|
||||
<td>false</td>
|
||||
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
||||
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
||||
{% highlight html %}
|
||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||
{% endhighlight %}
|
||||
@ -305,7 +310,7 @@ $('#myModal').modal({
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
|
||||
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
@ -313,7 +318,7 @@ $('#myModal').modal({
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
|
||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -739,9 +744,10 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
</ul>
|
||||
</div><!-- /example -->
|
||||
|
||||
|
||||
<h3>Tooltips in input groups</h3>
|
||||
<p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
|
||||
<div class="bs-callout">
|
||||
<h4>Tooltips in button groups and input groups require special setting</h4>
|
||||
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
|
||||
</div>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
@ -768,13 +774,13 @@ $('#example').tooltip(options)
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>apply a css fade transition to the tooltip</td>
|
||||
<td>apply a CSS fade transition to the tooltip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
|
||||
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
@ -798,7 +804,7 @@ $('#example').tooltip(options)
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types.</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space separated, trigger types.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
@ -815,7 +821,7 @@ $('#example').tooltip(options)
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
|
||||
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -868,6 +874,10 @@ $('#example').tooltip(options)
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
<div class="bs-callout">
|
||||
<h4>Popovers in button groups and input groups require special setting</h4>
|
||||
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
|
||||
</div>
|
||||
|
||||
<h3>Static popover</h3>
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
@ -946,13 +956,13 @@ $('#example').tooltip(options)
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>apply a css fade transition to the tooltip</td>
|
||||
<td>apply a CSS fade transition to the tooltip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
|
||||
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
@ -999,7 +1009,7 @@ $('#example').tooltip(options)
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the popover to a specific element <code>container: 'body'</code></p>
|
||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1101,7 +1111,7 @@ $('#example').tooltip(options)
|
||||
</tr>
|
||||
<tr>
|
||||
<td>closed</td>
|
||||
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
|
||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -1374,7 +1384,7 @@ $('.nav-tabs').button()
|
||||
<h2>Usage</h2>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
|
||||
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
|
||||
<p>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
@ -1446,7 +1456,7 @@ $('#myCollapsible').collapse({
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
|
||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
@ -1456,7 +1466,7 @@ $('#myCollapsible').collapse({
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -55,6 +55,8 @@
|
||||
$tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
|
||||
|
||||
$tip.removeClass('fade top bottom left right in')
|
||||
|
||||
$tip.find('.popover-title:empty').hide()
|
||||
}
|
||||
|
||||
Popover.prototype.hasContent = function () {
|
||||
|
||||
@ -131,6 +131,7 @@
|
||||
z-index: 15;
|
||||
width: 100px;
|
||||
margin: 0 0 0 -50px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
|
||||
@ -31,8 +31,6 @@ pre {
|
||||
line-height: @line-height-base;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc; // IE8 fallback
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
@ -47,7 +45,6 @@ pre {
|
||||
code {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
@ -72,6 +72,17 @@ input[type="color"] {
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty,
|
||||
// we don't honor that edge case; we style them as disabled anyway.
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
background-color: @input-bg-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
@ -184,7 +195,7 @@ textarea {
|
||||
// Move the options list down to align with labels
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 5px; // has to be padding because margin collaspes
|
||||
padding-top: 5px; // has to be padding because margin collapses
|
||||
}
|
||||
*/
|
||||
|
||||
@ -227,6 +238,7 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
&.input-large {
|
||||
min-height: @input-height-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
@ -240,35 +252,6 @@ input[type="color"] {
|
||||
}
|
||||
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty,
|
||||
// we don't honor that edge case; we style them as disabled anyway.
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
background-color: @input-bg-disabled;
|
||||
}
|
||||
}
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// FORM FIELD FEEDBACK STATES
|
||||
// --------------------------
|
||||
@ -286,20 +269,6 @@ input[type="checkbox"] {
|
||||
.form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
|
||||
}
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
&:focus {
|
||||
border-color: darken(#ee5f5b, 10%);
|
||||
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -352,6 +321,7 @@ select:focus:invalid {
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
@ -455,7 +425,7 @@ select:focus:invalid {
|
||||
}
|
||||
}
|
||||
|
||||
// Only right aline form labels here when the columns stop stacking
|
||||
// Only right align form labels here when the columns stop stacking
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .control-label {
|
||||
text-align: right;
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container {
|
||||
.container-fixed();
|
||||
@ -51,9 +50,6 @@
|
||||
.col-lg-11,
|
||||
.col-lg-12 {
|
||||
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
|
||||
@ -68,6 +64,20 @@
|
||||
//
|
||||
|
||||
// Tiny device columns (smartphones)
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-3 { width: percentage((3 / @grid-columns)); }
|
||||
@ -87,6 +97,20 @@
|
||||
max-width: @container-tablet;
|
||||
}
|
||||
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-sm-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-sm-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-sm-3 { width: percentage((3 / @grid-columns)); }
|
||||
@ -100,19 +124,6 @@
|
||||
.col-sm-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-sm-12 { width: 100%; }
|
||||
|
||||
// Offsets
|
||||
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
|
||||
// Push and pull columns for source order changes
|
||||
.col-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
@ -144,6 +155,20 @@
|
||||
.container {
|
||||
max-width: @container-desktop;
|
||||
}
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-lg-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-lg-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-lg-3 { width: percentage((3 / @grid-columns)); }
|
||||
@ -156,6 +181,19 @@
|
||||
.col-lg-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-lg-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-lg-12 { width: 100%; }
|
||||
|
||||
// Offsets
|
||||
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Large desktops and up
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
.list-group {
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
margin: 0 0 20px; // reset all margins because ul and ol
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
background-color: @list-group-bg;
|
||||
}
|
||||
|
||||
|
||||
@ -400,6 +400,16 @@
|
||||
margin-bottom: ((@navbar-height - @element-height) / 2);
|
||||
}
|
||||
|
||||
// Responsive utilities
|
||||
// -------------------------
|
||||
// More easily include all the states for responsive-utilities.less.
|
||||
.responsive-visibility() {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Grid System
|
||||
@ -491,5 +501,5 @@
|
||||
color: @text-color;
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
.navbar {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: @navbar-padding;
|
||||
padding-right: @navbar-padding;
|
||||
background-color: @navbar-bg;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
@ -48,6 +48,12 @@
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
|
||||
// Right aligned contents
|
||||
// Make them full width first so that they align properly on mobile
|
||||
&.pull-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -90,7 +96,7 @@
|
||||
max-width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 15px;
|
||||
padding: @navbar-padding;
|
||||
font-size: @font-size-large;
|
||||
font-weight: 500;
|
||||
line-height: @line-height-computed;
|
||||
@ -278,7 +284,7 @@
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
margin-left: -5px;
|
||||
margin-left: -(@navbar-padding);
|
||||
margin-right: 5px;
|
||||
}
|
||||
.navbar-nav {
|
||||
@ -296,6 +302,7 @@
|
||||
|
||||
&.pull-right {
|
||||
float: right;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Redeclare pull classes because of specifity
|
||||
// Redeclare pull classes because of specificity
|
||||
// Todo: consider making these utilities !important to avoid this bullshit
|
||||
> .pull-right {
|
||||
float: right;
|
||||
|
||||
@ -40,10 +40,6 @@
|
||||
background-color: @popover-title-bg;
|
||||
border-bottom: 1px solid darken(@popover-title-bg, 5%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
|
||||
@ -29,34 +29,25 @@
|
||||
// Hide from screenreaders and browsers
|
||||
// Credit: HTML5 Boilerplate
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// Visibility utilities
|
||||
|
||||
// For Phones
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.visible-md { display: none !important; }
|
||||
.visible-lg { display: none !important; }
|
||||
|
||||
.hidden-sm { display: none !important; }
|
||||
.hidden-md {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-lg {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
|
||||
|
||||
@ -64,25 +55,16 @@
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.visible-sm { display: none !important; }
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.visible-lg { display: none !important; }
|
||||
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-md { display: none !important; }
|
||||
.hidden-lg {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,23 +73,14 @@
|
||||
.visible-sm { display: none !important; }
|
||||
.visible-md { display: none !important; }
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-md {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-lg { display: none !important; }
|
||||
}
|
||||
@ -118,10 +91,7 @@
|
||||
|
||||
@media print {
|
||||
.visible-print {
|
||||
display: block !important;
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-print { display: none !important; }
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ body {
|
||||
background-color: @body-bg;
|
||||
}
|
||||
|
||||
// Reset fonts for revelant elements
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
@ -60,7 +60,7 @@ a:focus {
|
||||
|
||||
img {
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
max-width: 100%; // Part 1: Set a maxium relative to the parent
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
|
||||
// Match vertical alignment with other comment elements
|
||||
|
||||
@ -184,16 +184,18 @@ th {
|
||||
// -----------------
|
||||
|
||||
// Reset default table behavior
|
||||
table col[class*="col-span-"] {
|
||||
table col[class^="col-"] {
|
||||
float: none;
|
||||
display: table-column;
|
||||
}
|
||||
table td[class*="col-span-"],
|
||||
table th[class*="col-span-"] {
|
||||
table td[class^="col-"],
|
||||
table th[class^="col-"] {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// TABLE BACKGROUNDS
|
||||
// -----------------
|
||||
// Exact selectors below required to override .table-striped
|
||||
|
||||
@ -23,8 +23,6 @@ p {
|
||||
// Ex: 14px base font * 85% = about 12px
|
||||
small { font-size: 85%; }
|
||||
|
||||
strong { font-weight: bold; }
|
||||
em { font-style: italic; }
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Utility classes
|
||||
@ -54,6 +52,7 @@ a.text-success:focus { color: darken(@state-success-text, 10%); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
line-height: @headings-line-height;
|
||||
small {
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
|
||||
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
|
||||
@ -128,8 +129,8 @@
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2) + 2);
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
|
||||
// Dropdowns
|
||||
@ -172,6 +173,7 @@
|
||||
@navbar-height: 50px;
|
||||
@navbar-color: #777;
|
||||
@navbar-bg: #eee;
|
||||
@navbar-padding: floor(@grid-gutter-width / 2); // ~15px
|
||||
|
||||
// Navbar links
|
||||
@navbar-link-color: #777;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user