A Tutorial On Bootstrap And Its Grid System. - Plunker

Trang chủ » Html Div Class Col-md-2 » A Tutorial On Bootstrap And Its Grid System. - Plunker

Có thể bạn quan tâm

<!DOCTYPE html> <html> <head> <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <style> body { background: black; } .col-xs-12 { height: 100px; background-color: blue; color: white; text-align: center; border: 1px solid black; } .col-xs-8 { height: 100px; background-color: red; color: white; text-align: center; border: 1px solid black; } .col-xs-6 { height: 100px; background-color: yellow; color: black; text-align: center; border: 1px solid black; } .col-xs-4 { height: 100px; background-color: green; color: white; text-align: center; border: 1px solid black; } .col-xs-2 { height: 100px; background-color: orange; color: black; text-align: center; border: 1px solid black; } .footer .col-sm-4 { height: 100px; background-color: purple; color: white; text-align: center; border: 1px solid black; } </style> </head> <body> <!-- Grid Classes: .container: wrapper for all your rows .row: contains all your column classes .col-##-##: the sizes of the columns in your row (xs, sm, md, lg) Ordering Classes (does not work on sm or xs): .col-##-push-##: pushes your columns .col-##-pull-##: pulls your columns Offset Classes (does not work on sm or xs): .col-##-push-##: moves your columns depending on what the column is offset by .col-##-pull-##: pulls your columns Responsive Utility Classes: They hide and show content on your screen depending on which device you style for. .visible-##: your content will only be visible on that screen size .hidden-##: your content will be hidden on that screen size --> <div class="row"> <div class="col-xs-12"> <p>col-xs-12</p> <p>This has no container and will always strectch the entire width of the page.</p> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-xs-12"> <p>col-xs-12</p> <h2 class="visible-xs">extra small screen</h2> <h2 class="visible-sm">small screen</h2> <h2 class="visible-md">medium screen</h2> <h2 class="visible-lg">large screen</h2> </div> </div> <!-- multiple columns, multiple sizes (must always add to 12) --> <div class="row"> <div class="col-xs-6 col-lg-4"> <span class="hidden-lg">col-xs-6</span> <span class="visible-lg">col-lg-4</span> </div> <div class="col-xs-6 col-lg-8"> <span class="hidden-lg">col-xs-6</span> <span class="visible-lg">col-lg-8</span> </div> </div> <!-- nested and stacked --> <div class="row"> <div class="col-sm-6"> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-8">col-xs-8</div> </div> </div> <!-- pushed and pulled --> <div class="col-sm-6"> <div class="row"> <div class="col-xs-4 col-md-push-8">col-xs-4</div> <div class="col-xs-8 col-md-pull-4">col-xs-8</div> </div> </div> </div> <!-- stacked on xs --> <div class="row footer"> <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> <!-- hidden over xs --> <div class="row hidden-xs"> <div class="col-xs-2">col-xs-2</div> <div class="col-xs-2">col-xs-2</div> <div class="col-xs-2">col-xs-2</div> <div class="col-xs-2">col-xs-2</div> <div class="col-xs-2">col-xs-2</div> <div class="col-xs-2">col-xs-2</div> </div> <!-- offsets --> <div class="row"> <div class="col-md-4 col-md-offset-8 panel"> Find easydevtuts on social media </div> </div> </div> </body> </html> # Bootstrap 3.0 Tutorial - Grid System This is based on a tutorial that I followed on YouTube for Bootstrap 3.0. Here's the link to the first of five in a series: <a href="http://www.youtube.com/watch?feature=player_embedded&v=g3j7eRunzv4 " target="_blank"><img src="http://img.youtube.com/vi/g3j7eRunzv4/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a> ## Grid Classes * `.container` is a wrapper for all your rows * `.row` contains all your column classes * `.col-##-##` are the sizes of the columns in your row (xs, sm, md, lg) ## Ordering Classes (does not work on sm or xs): * `.col-##-push-##` pushes your columns * `.col-##-pull-##` pulls your columns ## Offset Classes (does not work on sm or xs): * `.col-##-push-##` moves your columns depending on what the column is offset by * `.col-##-pull-##` pulls your columns ## Responsive Utility Classes They hide and show content on your screen depending on which device you style for. * `.visible-##` your content will only be visible on that screen size * `.hidden-##` your content will be hidden on that screen size

Từ khóa » Html Div Class Col-md-2