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

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
Show Stats 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);
}
// 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

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.
See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>.
{% highlight scss %}
.container {
max-width: 60em;
.example-container {
width: 800px;
@include make-container();
}
.row {
.example-row {
@include make-row();
}
.content-main {
.example-content-main {
@include make-col-ready();
@media (max-width: 32em) {
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@media (min-width: 32.1em) {
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.content-secondary {
.example-content-secondary {
@include make-col-ready();
@media (max-width: 32em) {
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@media (min-width: 32.1em) {
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
{% endhighlight %}
{% highlight html %}
<div class="container">
<div class="row">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
{% example html %}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
{% endhighlight %}
{% endexample %}
## Customizing the grid