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

Merge pull request #3 from twbs/v4_grid

Browse Source 
Add new grid tier
This commit is contained in:
Mark Otto 2014-12-04 23:27:08 -08:00
commit a4e991c1a6
11 changed files with 680 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

348
dist/css/bootstrap.css vendored
View File

@ -595,7 +595,7 @@ dd {
.dl-horizontal dd:after {
clear: both;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 155, /Users/mdo/work/bootstrap/scss/type */
.dl-horizontal dt {
float: left;
@ -748,6 +748,11 @@ pre code {
.container:after {
clear: both;
}
@media (min-width: 34em) {
.container {
max-width: 34em;
}
}
@media (min-width: 48em) {
.container {
max-width: 45rem;
@ -758,11 +763,6 @@ pre code {
max-width: 60rem;
}
}
@media (min-width: 75em) {
.container {
max-width: 72.25rem;
}
}
/* line 30, /Users/mdo/work/bootstrap/scss/grid */
.container-fluid {
@ -797,7 +797,7 @@ pre code {
}
/* line 11, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: .75rem;
@ -1064,7 +1064,7 @@ pre code {
margin-left: 100%;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.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;
@ -1326,7 +1326,7 @@ pre code {
}
}
@media (min-width: 62em) {
@media (min-width: 48em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
@ -1588,7 +1588,7 @@ pre code {
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.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;
@ -1850,6 +1850,268 @@ pre code {
}
}
@media (min-width: 62em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
float: left;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-1 {
width: 8.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-2 {
width: 16.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-3 {
width: 25%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-4 {
width: 33.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-5 {
width: 41.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-6 {
width: 50%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-7 {
width: 58.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-8 {
width: 66.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-9 {
width: 75%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-10 {
width: 83.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-11 {
width: 91.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-12 {
width: 100%;
}
/* line 55, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-0 {
right: auto;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-1 {
right: 8.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-2 {
right: 16.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-3 {
right: 25%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-4 {
right: 33.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-5 {
right: 41.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-6 {
right: 50%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-7 {
right: 58.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-8 {
right: 66.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-9 {
right: 75%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-10 {
right: 83.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-11 {
right: 91.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-12 {
right: 100%;
}
/* line 45, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-0 {
left: auto;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-1 {
left: 8.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-2 {
left: 16.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-3 {
left: 25%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-4 {
left: 33.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-5 {
left: 41.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-6 {
left: 50%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-7 {
left: 58.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-8 {
left: 66.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-9 {
left: 75%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-10 {
left: 83.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-11 {
left: 91.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-12 {
left: 100%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-0 {
margin-left: 0;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-1 {
margin-left: 8.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-2 {
margin-left: 16.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-3 {
margin-left: 25%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-4 {
margin-left: 33.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-5 {
margin-left: 41.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-6 {
margin-left: 50%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-7 {
margin-left: 58.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-8 {
margin-left: 66.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-9 {
margin-left: 75%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-10 {
margin-left: 83.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-11 {
margin-left: 91.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-12 {
margin-left: 100%;
}
}
/* line 5, /Users/mdo/work/bootstrap/scss/tables */
table {
background-color: transparent;
@ -1988,7 +2250,7 @@ table td[class*="col-"], table th[class*="col-"] {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 47.9em) {
@media screen and (max-width: 33.9em) {
.table-responsive {
width: 100%;
margin-bottom: 1rem;
@ -2516,7 +2778,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
color: #747a7f;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 423, /Users/mdo/work/bootstrap/scss/forms */
.form-inline .form-group, .navbar-form .form-group {
display: inline-block;
@ -2605,7 +2867,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.form-horizontal .form-group:after {
clear: both;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 523, /Users/mdo/work/bootstrap/scss/forms */
.form-horizontal .control-label {
padding-top: .6rem;
@ -2617,13 +2879,13 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.form-horizontal .has-feedback .form-control-feedback {
right: .75rem;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 544, /Users/mdo/work/bootstrap/scss/forms */
.form-horizontal .form-group-lg .control-label {
padding-top: .75rem;
}
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 551, /Users/mdo/work/bootstrap/scss/forms */
.form-horizontal .form-group-sm .control-label {
padding-top: .4rem;
@ -3593,7 +3855,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
.navbar:after {
clear: both;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar {
border-radius: .25rem;
}
@ -3604,7 +3866,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
z-index: 1000;
border-width: 0 0 1px;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-static-top {
border-radius: 0;
}
@ -3617,7 +3879,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
left: 0;
z-index: 1030;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-fixed-top, .navbar-fixed-bottom {
border-radius: 0;
}
@ -3681,7 +3943,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (max-width: 47em) {
@media (max-width: 33em) {
.navbar-form .form-group {
margin-bottom: 5px;
}
@ -3690,7 +3952,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
margin-bottom: 0;
}
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-form {
width: auto;
padding-top: 0;
@ -3718,7 +3980,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
border-bottom-left-radius: 0;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-text {
float: left;
margin-right: 1rem;
@ -3726,7 +3988,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
}
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 268, /Users/mdo/work/bootstrap/scss/navbar */
.navbar-right {
margin-right: -1rem;
@ -3795,7 +4057,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
color: #555;
background-color: #e7e7e7;
}
@media (max-width: 47em) {
@media (max-width: 33em) {
/* line 359, /Users/mdo/work/bootstrap/scss/navbar */
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
@ -3913,7 +4175,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
color: #fff;
background-color: #1f2021;
}
@media (max-width: 47em) {
@media (max-width: 33em) {
/* line 517, /Users/mdo/work/bootstrap/scss/navbar */
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #1f2021;
@ -4457,7 +4719,7 @@ a.badge:hover, a.badge:focus {
border-top-color: #d0d5d8;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 27, /Users/mdo/work/bootstrap/scss/jumbotron */
.jumbotron {
padding: 3.2rem 0;
@ -5233,7 +5495,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
overflow: scroll;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 133, /Users/mdo/work/bootstrap/scss/modal */
.modal-dialog {
width: 600px;
@ -5252,7 +5514,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
}
}
@media (min-width: 62em) {
@media (min-width: 48em) {
/* line 146, /Users/mdo/work/bootstrap/scss/modal */
.modal-lg {
width: 900px;
@ -5731,7 +5993,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
text-shadow: none;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 226, /Users/mdo/work/bootstrap/scss/carousel */
.carousel-control .icon-prev, .carousel-control .icon-next {
width: 30px;
@ -6009,93 +6271,93 @@ a.bg-danger:hover {
display: none !important;
}
@media (max-width: 47.9em) {
@media (max-width: 33.9em) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 47.9em) {
@media (max-width: 33.9em) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 47.9em) {
@media (max-width: 33.9em) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
/* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
.hidden-sm {
display: none !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
/* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
.hidden-md {
display: none !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
/* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
.hidden-lg {
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

348
docs/dist/css/bootstrap.css vendored
View File

@ -595,7 +595,7 @@ dd {
.dl-horizontal dd:after {
clear: both;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 155, /Users/mdo/work/bootstrap/scss/type */
.dl-horizontal dt {
float: left;
@ -748,6 +748,11 @@ pre code {
.container:after {
clear: both;
}
@media (min-width: 34em) {
.container {
max-width: 34em;
}
}
@media (min-width: 48em) {
.container {
max-width: 45rem;
@ -758,11 +763,6 @@ pre code {
max-width: 60rem;
}
}
@media (min-width: 75em) {
.container {
max-width: 72.25rem;
}
}
/* line 30, /Users/mdo/work/bootstrap/scss/grid */
.container-fluid {
@ -797,7 +797,7 @@ pre code {
}
/* line 11, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: .75rem;
@ -1064,7 +1064,7 @@ pre code {
margin-left: 100%;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.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;
@ -1326,7 +1326,7 @@ pre code {
}
}
@media (min-width: 62em) {
@media (min-width: 48em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
@ -1588,7 +1588,7 @@ pre code {
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.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;
@ -1850,6 +1850,268 @@ pre code {
}
}
@media (min-width: 62em) {
/* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
float: left;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-1 {
width: 8.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-2 {
width: 16.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-3 {
width: 25%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-4 {
width: 33.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-5 {
width: 41.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-6 {
width: 50%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-7 {
width: 58.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-8 {
width: 66.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-9 {
width: 75%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-10 {
width: 83.333333%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-11 {
width: 91.666667%;
}
/* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-12 {
width: 100%;
}
/* line 55, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-0 {
right: auto;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-1 {
right: 8.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-2 {
right: 16.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-3 {
right: 25%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-4 {
right: 33.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-5 {
right: 41.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-6 {
right: 50%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-7 {
right: 58.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-8 {
right: 66.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-9 {
right: 75%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-10 {
right: 83.333333%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-11 {
right: 91.666667%;
}
/* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-pull-12 {
right: 100%;
}
/* line 45, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-0 {
left: auto;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-1 {
left: 8.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-2 {
left: 16.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-3 {
left: 25%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-4 {
left: 33.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-5 {
left: 41.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-6 {
left: 50%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-7 {
left: 58.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-8 {
left: 66.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-9 {
left: 75%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-10 {
left: 83.333333%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-11 {
left: 91.666667%;
}
/* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-push-12 {
left: 100%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-0 {
margin-left: 0;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-1 {
margin-left: 8.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-2 {
margin-left: 16.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-3 {
margin-left: 25%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-4 {
margin-left: 33.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-5 {
margin-left: 41.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-6 {
margin-left: 50%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-7 {
margin-left: 58.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-8 {
margin-left: 66.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-9 {
margin-left: 75%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-10 {
margin-left: 83.333333%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-11 {
margin-left: 91.666667%;
}
/* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
.col-xl-offset-12 {
margin-left: 100%;
}
}
/* line 5, /Users/mdo/work/bootstrap/scss/tables */
table {
background-color: transparent;
@ -1988,7 +2250,7 @@ table td[class*="col-"], table th[class*="col-"] {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 47.9em) {
@media screen and (max-width: 33.9em) {
.table-responsive {
width: 100%;
margin-bottom: 1rem;
@ -2516,7 +2778,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
color: #747a7f;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 423, /Users/mdo/work/bootstrap/scss/forms */
.form-inline .form-group, .navbar-form .form-group {
display: inline-block;
@ -2605,7 +2867,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.form-horizontal .form-group:after {
clear: both;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 523, /Users/mdo/work/bootstrap/scss/forms */
.form-horizontal .control-label {
padding-top: .6rem;
@ -2617,13 +2879,13 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.form-horizontal .has-feedback .form-control-feedback {
right: .75rem;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 544, /Users/mdo/work/bootstrap/scss/forms */
.form-horizontal .form-group-lg .control-label {
padding-top: .75rem;
}
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 551, /Users/mdo/work/bootstrap/scss/forms */
.form-horizontal .form-group-sm .control-label {
padding-top: .4rem;
@ -3593,7 +3855,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
.navbar:after {
clear: both;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar {
border-radius: .25rem;
}
@ -3604,7 +3866,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
z-index: 1000;
border-width: 0 0 1px;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-static-top {
border-radius: 0;
}
@ -3617,7 +3879,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
left: 0;
z-index: 1030;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-fixed-top, .navbar-fixed-bottom {
border-radius: 0;
}
@ -3681,7 +3943,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (max-width: 47em) {
@media (max-width: 33em) {
.navbar-form .form-group {
margin-bottom: 5px;
}
@ -3690,7 +3952,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
margin-bottom: 0;
}
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-form {
width: auto;
padding-top: 0;
@ -3718,7 +3980,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
border-bottom-left-radius: 0;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
.navbar-text {
float: left;
margin-right: 1rem;
@ -3726,7 +3988,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
}
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 268, /Users/mdo/work/bootstrap/scss/navbar */
.navbar-right {
margin-right: -1rem;
@ -3795,7 +4057,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
color: #555;
background-color: #e7e7e7;
}
@media (max-width: 47em) {
@media (max-width: 33em) {
/* line 359, /Users/mdo/work/bootstrap/scss/navbar */
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
@ -3913,7 +4175,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
color: #fff;
background-color: #1f2021;
}
@media (max-width: 47em) {
@media (max-width: 33em) {
/* line 517, /Users/mdo/work/bootstrap/scss/navbar */
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #1f2021;
@ -4457,7 +4719,7 @@ a.badge:hover, a.badge:focus {
border-top-color: #d0d5d8;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 27, /Users/mdo/work/bootstrap/scss/jumbotron */
.jumbotron {
padding: 3.2rem 0;
@ -5233,7 +5495,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
overflow: scroll;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 133, /Users/mdo/work/bootstrap/scss/modal */
.modal-dialog {
width: 600px;
@ -5252,7 +5514,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
}
}
@media (min-width: 62em) {
@media (min-width: 48em) {
/* line 146, /Users/mdo/work/bootstrap/scss/modal */
.modal-lg {
width: 900px;
@ -5731,7 +5993,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
text-shadow: none;
}
@media (min-width: 48em) {
@media (min-width: 34em) {
/* line 226, /Users/mdo/work/bootstrap/scss/carousel */
.carousel-control .icon-prev, .carousel-control .icon-next {
width: 30px;
@ -6009,93 +6271,93 @@ a.bg-danger:hover {
display: none !important;
}
@media (max-width: 47.9em) {
@media (max-width: 33.9em) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 47.9em) {
@media (max-width: 33.9em) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 47.9em) {
@media (max-width: 33.9em) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (min-width: 48em) and (max-width: 61.9em) {
@media (min-width: 34em) and (max-width: 47.9em) {
/* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
.hidden-sm {
display: none !important;
}
}
@media (min-width: 62em) and (max-width: 74.9em) {
@media (min-width: 48em) and (max-width: 61.9em) {
/* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
.hidden-md {
display: none !important;
}
}
@media (min-width: 75em) {
@media (min-width: 62em) {
/* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
.hidden-lg {
display: none !important;

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

33
docs/examples/grid/index.html
View File

@ -28,6 +28,39 @@
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
<h3>Five grid tiers</h3>
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<div class="row">
<div class="col-xl-4">.col-xl-4</div>
<div class="col-xl-4">.col-xl-4</div>
<div class="col-xl-4">.col-xl-4</div>
</div>
<h3>Three equal columns</h3>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row">

7
docs/layout/grid.md
View File

@ -3,7 +3,12 @@ layout: page
title: Grid system
---
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes [predefined classes](#grid-example-basic) for easy layout options, as well as powerful [mixins for generating more semantic layouts](#grid-semantic).
Bootstrap includes a powerful grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and features multiple tiers for different device sizes. Put it to work with our predefined classes or semantic mixins. Plus, it's mobile-first!
### Quick start
- Example grid class
- Example mixins
### Introduction

9
scss/_grid.scss
View File

@ -82,3 +82,12 @@
@include media-lg {
@include make-grid(lg);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@include media-lg {
@include make-grid(xl);
}

25
scss/_variables.scss
View File

@ -272,16 +272,20 @@ $zindex-modal: 1040;
//
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Large screen / wide desktop
$screen-lg-min: 75em;
// Extra large screen / wide desktop
$screen-xl-min: 75em;
// Medium screen / desktop
$screen-md-min: 62em;
// Large screen / desktop
$screen-lg-max: ($screen-xl-min - .1);
$screen-lg-min: 62em;
// Medium screen / tablet
$screen-md-max: ($screen-lg-min - .1);
$screen-md-min: 48em;
// Small screen / tablet
$screen-sm-min: 48em;
// Small screen / phone
$screen-sm-max: ($screen-md-min - .1);
$screen-sm-min: 34em;
// Extra small screen / phone
$screen-xs-max: ($screen-sm-min - .1);
@ -306,14 +310,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
//
//## Define the maximum width of `.container` for different screen sizes.
//** For `$screen-xs-min` and up.
$container-sm: 34em; // 480
//** For `$screen-sm-min` and up.
$container-sm: 45rem; // 720
$container-md: 45rem; // 720
//** For `$screen-md-min` and up.
$container-md: 60rem; // 960
$container-lg: 60rem; // 960
//** For `$screen-lg-min` and up.
$container-lg: 72.25rem; // 1140
$container-xl: 72.25rem; // 1140
//== Navbar

4
scss/mixins/_grid-framework.scss
View File

@ -4,9 +4,9 @@
// any value of `$grid-columns`.
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
}
#{$list} {
position: relative;