mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Normalize examples and update where relevant.
This commit is contained in:
parent
dd22d99254
commit
ba49d709ba
@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../favicon.ico">
|
||||
@ -35,7 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-static-top navbar-dark bg-inverse">
|
||||
<div class="navbar navbar-full navbar-static-top navbar-dark bg-inverse">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<a href="#" class="navbar-brand">Album</a>
|
||||
|
@ -3,6 +3,7 @@
|
||||
/* Padding below the footer and lighter body text */
|
||||
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
@ -19,7 +19,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-static-top navbar-light bg-faded">
|
||||
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
|
||||
<a href="#" class="navbar-brand">Carousel</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
|
@ -27,35 +27,35 @@
|
||||
<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-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-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-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-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>
|
||||
<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>
|
||||
@ -135,7 +135,7 @@
|
||||
<hr>
|
||||
|
||||
<h3>Column clearing</h3>
|
||||
<p><a href="https://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
|
||||
<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
|
||||
@ -164,10 +164,8 @@
|
||||
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
@ -20,7 +20,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
|
||||
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
|
@ -1,4 +1,4 @@
|
||||
/* Move down content because we have a fixed navbar that is 50px tall */
|
||||
body {
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
@ -74,7 +74,6 @@
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../favicon.ico">
|
||||
@ -21,12 +22,12 @@
|
||||
|
||||
<div class="pos-f-t">
|
||||
<div class="collapse" id="navbar-header">
|
||||
<div class="container-fluid bg-inverse p-1">
|
||||
<div class="container-fluid bg-inverse text-white pt-1">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<div class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
/* Show it is fixed to the top */
|
||||
body {
|
||||
/* Show it's not fixed to the top */
|
||||
min-height: 75rem;
|
||||
padding-top: 6rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../favicon.ico">
|
||||
@ -20,12 +21,12 @@
|
||||
<body>
|
||||
|
||||
<div class="collapse" id="navbar-header">
|
||||
<div class="container-fluid bg-inverse p-1">
|
||||
<div class="container-fluid bg-inverse text-white pt-1">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top mb-1">
|
||||
<div class="navbar navbar-light bg-faded mb-1">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
</div>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user