diff options
| author | Mark Otto <[email protected]> | 2013-08-17 15:21:38 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-17 15:21:38 -0700 |
| commit | 61caed21e2553e1be29d98bd83c8e6ac06565ecd (patch) | |
| tree | 5919c94a42b48841b75eff0f1f25df44a2d90dd6 /customize.html | |
| parent | 5ba19dc8849b1b87836404acfa8bbb336db1e496 (diff) | |
| download | bootstrap-61caed21e2553e1be29d98bd83c8e6ac06565ecd.tar.xz bootstrap-61caed21e2553e1be29d98bd83c8e6ac06565ecd.zip | |
More consistent naming with screen size variables using xs, sm, md, and lg
Diffstat (limited to 'customize.html')
| -rw-r--r-- | customize.html | 36 |
1 files changed, 21 insertions, 15 deletions
diff --git a/customize.html b/customize.html index 26df1c748..f410acefe 100644 --- a/customize.html +++ b/customize.html @@ -480,16 +480,16 @@ base_url: "../" <h3>Media queries breakpoints</h3> <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <div class="row"> - <div class="col-lg-6"> - <label>@screen-xsmall</label> + <div class="col-xs-6"> + <label>@screen-xs</label> <input type="text" class="form-control" placeholder="480px"> - <label>@screen-small</label> + <label>@screen-sm</label> <input type="text" class="form-control" placeholder="768px"> </div> - <div class="col-lg-6"> - <label>@screen-medium</label> + <div class="col-xs-6"> + <label>@screen-md</label> <input type="text" class="form-control" placeholder="992px"> - <label>@screen-large</label> + <label>@screen-lg</label> <input type="text" class="form-control" placeholder="1200px"> </div> </div> @@ -497,35 +497,41 @@ base_url: "../" <h3>Container sizes</h3> <p>Define the maximum width of <code>.container</code> for different screen sizes.</p> <div class="row"> - <div class="col-lg-6"> + <div class="col-xs-6 col-sm-4"> <label>@container-tablet</label> <input type="text" class="form-control" placeholder="728px"> - <p class="help-block">For <code>@screen-small</code> and up.</p> + <p class="help-block">For <code>@screen-sm</code> and up.</p> + </div> + <div class="col-xs-6 col-sm-4"> <label>@container-desktop</label> <input type="text" class="form-control" placeholder="940px"> - <p class="help-block">For <code>@screen-medium</code> and up.</p> + <p class="help-block">For <code>@screen-md</code> and up.</p> </div> - <div class="col-lg-6"> - <label>@container-large-desktop</label> + <div class="clearfix visible-xs"></div> + <div class="col-xs-6 col-sm-4"> + <label>@container-lg-desktop</label> <input type="text" class="form-control" placeholder="1170px"> - <p class="help-block">For <code>@screen-large</code> and up.</p> + <p class="help-block">For <code>@screen-lg</code> and up.</p> </div> </div> <h3>Grid system</h3> <p>Define your custom responsive grid.</p> <div class="row"> - <div class="col-lg-6"> + <div class="col-xs-6 col-sm-4"> <label>@grid-columns</label> <input type="text" class="form-control" placeholder="12"> <p class="help-block">Number of columns in the grid.</p> + </div> + <div class="col-xs-6 col-sm-4"> <label>@grid-gutter-width</label> <input type="text" class="form-control" placeholder="30px"> <p class="help-block">Padding between columns.</p> </div> - <div class="col-lg-6"> + <div class="clearfix visible-xs"></div> + <div class="col-xs-6 col-sm-4"> <label>@grid-float-breakpoint</label> - <input type="text" class="form-control" placeholder="@screen-tablet"> + <input type="text" class="form-control" placeholder="@screen-sm"> <p class="help-block">Point at which the navbar stops collapsing.</p> </div> </div> |