mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 12:51:52 +02:00
Code Issues Releases Wiki Activity

Redo semantic grid example and make it real in the docs

Browse Source
This commit is contained in:
Mark Otto
2017-03-25 12:12:02 -07:00
committed by Mark Otto
parent 2d243086c9
commit 1a264be8b3
2 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/assets/scss/_component-examples.scss
View File

@@ -37,6 +37,40 @@
border: 1px solid rgba($bd-purple, .15); border: 1px solid rgba($bd-purple, .15);
} }
// Grid mixins
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
// //
// Container illustrations // Container illustrations

35
docs/layout/grid.md
View File

@@ -646,46 +646,47 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>.
{% highlight scss %} {% highlight scss %}
.container { .example-container {
max-width: 60em; width: 800px;
@include make-container(); @include make-container();
} }
.row {
.example-row {
@include make-row(); @include make-row();
} }
.content-main {
.example-content-main {
@include make-col-ready(); @include make-col-ready();
@media (max-width: 32em) { @include media-breakpoint-up(sm) {
@include make-col(6); @include make-col(6);
} }
@media (min-width: 32.1em) { @include media-breakpoint-up(lg) {
@include make-col(8); @include make-col(8);
} }
} }
.content-secondary {
.example-content-secondary {
@include make-col-ready(); @include make-col-ready();
@media (max-width: 32em) { @include media-breakpoint-up(sm) {
@include make-col(6); @include make-col(6);
} }
@media (min-width: 32.1em) { @include media-breakpoint-up(lg) {
@include make-col(4); @include make-col(4);
} }
} }
{% endhighlight %} {% endhighlight %}
{% highlight html %} {% example html %}
<div class="container"> <div class="example-container">
<div class="row"> <div class="example-row">
<div class="content-main">...</div> <div class="example-content-main">Main content</div>
<div class="content-secondary">...</div> <div class="example-content-secondary">Secondary content</div>
</div> </div>
</div> </div>
{% endhighlight %} {% endexample %}
## Customizing the grid ## Customizing the grid