mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Update docs to reflect new breakpoint naming convention

Browse Source
This commit is contained in:
Eric Nolte
2016-11-04 10:54:34 -06:00
parent 9402be4d44
commit cec0c7c6d6
12 changed files with 143 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/dashboard/index.html
+4 -4
View File
@@ -62,22 +62,22 @@
<h1>Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
docs/examples/grid/index.html
+20 -20
View File
@@ -28,9 +28,9 @@
<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 class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
<div class="row">
@@ -105,17 +105,17 @@
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
<hr>
@@ -123,13 +123,13 @@
<h3>Mixed: mobile, tablet, and desktop</h3>
<p></p>
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
<div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
<hr>
@@ -137,18 +137,18 @@
<h3>Column clearing</h3>
<p><a href="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
<div class="row">
<div class="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
<div class="col-6 col-sm-3">
.col-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-sm-up"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
<hr>
docs/examples/index.md
+17 -17
View File
@@ -10,14 +10,14 @@ title: Examples
Examples that focus on implementing uses of built-in components provided by Bootstrap.
<div class="row bd-examples">
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/starter-template/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
</a>
<h4>Starter template</h4>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/grid/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt="">
</a>
@@ -26,14 +26,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/jumbotron/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron.jpg" alt="">
</a>
<h4>Jumbotron</h4>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/narrow-jumbotron/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron-narrow.jpg" alt="">
</a>
@@ -47,14 +47,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
Taking the default navbar component and showing how it can be moved, placed, and extended.
<div class="row bd-examples">
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/navbar/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar.jpg" alt="">
</a>
<h4>Navbar</h4>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/navbar-top/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-static.jpg" alt="">
</a>
@@ -63,7 +63,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/navbar-top-fixed/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-fixed.jpg" alt="">
</a>
@@ -77,14 +77,14 @@ Taking the default navbar component and showing how it can be moved, placed, and
Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
<div class="row bd-examples">
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/album/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/album.jpg" alt="">
</a>
<h4>Album</h4>
<p>Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/cover/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/cover.jpg" alt="">
</a>
@@ -93,14 +93,14 @@ Brand new components and templates to help folks quickly get started with Bootst
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/carousel/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/carousel.jpg" alt="">
</a>
<h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/blog/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/blog.jpg" alt="">
</a>
@@ -109,14 +109,14 @@ Brand new components and templates to help folks quickly get started with Bootst
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/dashboard/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/dashboard.jpg" alt="">
</a>
<h4>Dashboard</h4>
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/signin/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sign-in.jpg" alt="">
</a>
@@ -125,14 +125,14 @@ Brand new components and templates to help folks quickly get started with Bootst
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/justified-nav/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt="">
</a>
<h4>Justified nav</h4>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/sticky-footer/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer.jpg" alt="">
</a>
@@ -141,7 +141,7 @@ Brand new components and templates to help folks quickly get started with Bootst
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/sticky-footer-navbar/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer-navbar.jpg" alt="">
</a>
@@ -155,7 +155,7 @@ Brand new components and templates to help folks quickly get started with Bootst
Examples that focus on future-friendly features or techniques.
<div class="row bd-examples">
<div class="col-xs-6 col-md-4">
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/examples/offcanvas/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/offcanvas.jpg" alt="">
</a>
docs/examples/offcanvas/index.html
+8 -8
View File
@@ -34,7 +34,7 @@
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<div class="col-12 col-sm-9">
<p class="float-xs-right hidden-sm-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
@@ -43,32 +43,32 @@
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-xs-6 col-lg-4">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-xs-6 col-lg-4">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-xs-6 col-lg-4">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-xs-6 col-lg-4">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-xs-6 col-lg-4">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
@@ -76,7 +76,7 @@
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="col-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>