diff options
| author | Mark Otto <[email protected]> | 2018-01-14 16:06:52 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2018-01-14 16:06:52 -0800 |
| commit | e946348eca928fa1c42dbb92c7a612543832dccc (patch) | |
| tree | 14a87eed8416197c156e9090d02f1de604e6cdab /docs/4.0/examples/cover | |
| parent | 4a64592dd8b9e97790533d79350d60291a7d8789 (diff) | |
| download | bootstrap-e946348eca928fa1c42dbb92c7a612543832dccc.tar.xz bootstrap-e946348eca928fa1c42dbb92c7a612543832dccc.zip | |
Examples updates (#24898)
* fix cover nav
* Improve signin visuals and alignment with that flexbox love
* rewrite cover example in flexbox
* lighten signin bg
* first pass at pricing example
* redo examples index with data file
* tighten up spacing a bit
* update navbar descriptions
* link pricing
* move that back
* property order
* Fix test errors.
* Compress pricing.png.
* add form validation example
* remove that
* rename that
* restyle and space out
* fix errors
* change order
* cleanup album css and styles
* tweak examples index
* make it a badge
* options
* improve sticky footer alignment
* redesign example index
* brand new blog layout
* start new screenshots
* new product example page a la apple
* add email field
* fix linter, remove unused blog css
* hook up feather icons to start
* redo dashboard
* fix linting
* add floating labels example
* formatting
* formatting
* lint
* fix values on select
* optional input, plus input group
* new dashboard image
* start to reboot the offcanvas example
* updated images
* new offcanvas mostly implemented
* linting
* edit description
* more description changes
* - Add vertical margin to album hero buttons for when they're stacked
- Adjust font-size and padding for pricing header and hero
- Fix checkout's stacked column margins, plus update their check/radio
markup
- Update product's utilities to be responsive
- Made blog cards somewhat responsive (needs a bit more work tbh)
* drop leading zero
* more linting
* swap empty images for holder, fix border
* dist the docs
* navbars have no margin-bottom to begin
* add css var, tweak padding for mobile
* comment headers
* nix commented out code
* nix the navbar structure for a custom one, stack it on mobile
* tweak heading button group for mobile
* Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4
* improve card sizing on pricing
* update and compress
Diffstat (limited to 'docs/4.0/examples/cover')
| -rw-r--r-- | docs/4.0/examples/cover/cover.css | 66 | ||||
| -rw-r--r-- | docs/4.0/examples/cover/index.html | 63 |
2 files changed, 37 insertions, 92 deletions
diff --git a/docs/4.0/examples/cover/cover.css b/docs/4.0/examples/cover/cover.css index 1783756e7..ebf135f5c 100644 --- a/docs/4.0/examples/cover/cover.css +++ b/docs/4.0/examples/cover/cover.css @@ -23,37 +23,27 @@ a:hover { /* * Base structure */ + html, body { height: 100%; background-color: #333; } + body { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; color: #fff; - text-align: center; text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); -} - -/* Extra markup and styles for table-esque vertical and horizontal centering */ -.site-wrapper { - display: table; - width: 100%; - height: 100%; /* For at least Firefox */ - min-height: 100%; box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); } -.site-wrapper-inner { - display: table-cell; - vertical-align: top; -} -.cover-container { - margin-right: auto; - margin-left: auto; -} -/* Padding for spacing */ -.inner { - padding: 2rem; +.cover-container { + max-width: 42em; } @@ -118,39 +108,3 @@ body { .mastfoot { color: rgba(255, 255, 255, .5); } - - -/* - * Affix and center - */ -@media (min-width: 40em) { - /* Pull out the header and footer */ - .masthead { - position: fixed; - top: 0; - } - .mastfoot { - position: fixed; - bottom: 0; - } - - /* Start the vertical centering */ - .site-wrapper-inner { - vertical-align: middle; - } - - /* Handle the widths */ - .masthead, - .mastfoot, - .cover-container { - width: 100%; /* Must be percentage or pixels for horizontal alignment */ - } -} - -@media (min-width: 62em) { - .masthead, - .mastfoot, - .cover-container { - width: 42rem; - } -} diff --git a/docs/4.0/examples/cover/index.html b/docs/4.0/examples/cover/index.html index 36035e84f..c19352fbc 100644 --- a/docs/4.0/examples/cover/index.html +++ b/docs/4.0/examples/cover/index.html @@ -16,45 +16,36 @@ <link href="cover.css" rel="stylesheet"> </head> - <body> - - <div class="site-wrapper"> - - <div class="site-wrapper-inner"> - - <div class="cover-container"> - - <header class="masthead clearfix"> - <div class="inner"> - <h3 class="masthead-brand">Cover</h3> - <nav class="nav nav-masthead"> - <a class="nav-link active" href="#">Home</a> - <a class="nav-link" href="#">Features</a> - <a class="nav-link" href="#">Contact</a> - </nav> - </div> - </header> - - <main role="main" class="inner cover"> - <h1 class="cover-heading">Cover your page.</h1> - <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> - <p class="lead"> - <a href="#" class="btn btn-lg btn-secondary">Learn more</a> - </p> - </main> - - <footer class="mastfoot"> - <div class="inner"> - <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> - </div> - </footer> - + <body class="text-center"> + + <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> + <header class="masthead mb-auto"> + <div class="inner"> + <h3 class="masthead-brand">Cover</h3> + <nav class="nav nav-masthead justify-content-center"> + <a class="nav-link active" href="#">Home</a> + <a class="nav-link" href="#">Features</a> + <a class="nav-link" href="#">Contact</a> + </nav> </div> - - </div> - + </header> + + <main role="main" class="inner cover"> + <h1 class="cover-heading">Cover your page.</h1> + <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> + <p class="lead"> + <a href="#" class="btn btn-lg btn-secondary">Learn more</a> + </p> + </main> + + <footer class="mastfoot mt-auto"> + <div class="inner"> + <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> + </div> + </footer> </div> + <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> |