container illustrations
This commit is contained in:
parent
1624c5b594
commit
28bcf047c8
|
@ -5981,6 +5981,66 @@ button.close {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-xs-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-xs-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-xs-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 34em) {
|
||||
.text-sm-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-sm-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-sm-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.text-md-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-md-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-md-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.text-lg-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-lg-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-lg-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75em) {
|
||||
.text-xl-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-xl-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-xl-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -16,6 +16,43 @@
|
|||
}
|
||||
|
||||
|
||||
//
|
||||
// Container illustrations
|
||||
//
|
||||
|
||||
.bd-example-container {
|
||||
max-width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.bd-example-container-header {
|
||||
height: 3rem;
|
||||
margin-bottom: .5rem;
|
||||
background-color: lighten($brand-primary, 50%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-sidebar {
|
||||
float: right;
|
||||
width: 4rem;
|
||||
height: 8rem;
|
||||
background-color: lighten($brand-warning, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-body {
|
||||
height: 8rem;
|
||||
margin-right: 4.5rem;
|
||||
background-color: lighten($bd-purple, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-fluid {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
@ -36,7 +73,7 @@
|
|||
border-width: .2rem;
|
||||
}
|
||||
|
||||
+ .highlight,
|
||||
+ .highlight,
|
||||
+ .zero-clipboard + .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
@ -5981,6 +5981,66 @@ button.close {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-xs-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-xs-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-xs-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 34em) {
|
||||
.text-sm-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-sm-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-sm-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.text-md-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-md-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-md-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.text-lg-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-lg-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-lg-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75em) {
|
||||
.text-xl-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-xl-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-xl-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -12,6 +12,14 @@ Containers are the most basic layout element in Bootstrap and are **required whe
|
|||
|
||||
While containers *can* be nested, most layouts do not require a nested container.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="bd-example-container">
|
||||
<div class="bd-example-container-header"></div>
|
||||
<div class="bd-example-container-sidebar"></div>
|
||||
<div class="bd-example-container-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container">
|
||||
<!-- Content here -->
|
||||
|
@ -20,6 +28,14 @@ While containers *can* be nested, most layouts do not require a nested container
|
|||
|
||||
Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="bd-example-container bd-example-container-fluid">
|
||||
<div class="bd-example-container-header"></div>
|
||||
<div class="bd-example-container-sidebar"></div>
|
||||
<div class="bd-example-container-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container-fluid">
|
||||
...
|
||||
|
|
Loading…
Reference in New Issue