rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Update jumbotron

Browse Source 
* Defaults to no rounded corners and full width in the viewport
* When in a container, the jumbotron has extra padding and will have
rounded corners
* Updates default jumbotron example to show the full width default
display

Fixes #9759.
This commit is contained in:
Mark Otto 2013-08-17 20:33:52 -07:00
parent d9e38312d2
commit d713f8341c
9 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components.html
View File

@ -1768,19 +1768,23 @@ body { padding-bottom: 70px; }
<div class="page-header">
<h1 id="jumbotron">Jumbotron</h1>
</div>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<p>A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a <code>.container</code>. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.</p>
<div class="bs-example">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
<div class="container">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
{% highlight html %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
{% endhighlight %}
</div>

14
dist/css/bootstrap.css vendored
View File

@ -5177,7 +5177,7 @@ a.list-group-item.active > .badge,
}
.jumbotron {
padding: 30px;
padding: 30px 15px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
@ -5195,10 +5195,18 @@ a.list-group-item.active > .badge,
line-height: 1.4;
}
.container .jumbotron {
border-radius: 6px;
}
@media screen and (min-width: 768px) {
.jumbotron {
padding: 50px 60px;
border-radius: 6px;
padding-top: 50px;
padding-bottom: 50px;
}
.container .jumbotron {
padding-right: 60px;
padding-left: 60px;
}
.jumbotron h1 {
font-size: 63px;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
examples/jumbotron-narrow/index.html
View File

@ -18,7 +18,7 @@
<body>
<div class="container-narrow">
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>

9
examples/jumbotron-narrow/jumbotron-narrow.css
View File

@ -31,10 +31,11 @@ body {
border-top: 1px solid #e5e5e5;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;

9
examples/jumbotron/index.html
View File

@ -59,15 +59,16 @@
</div>
</div>
<div class="container">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<div class="body-content">
<!-- Example row of columns -->

4
examples/jumbotron/jumbotron.css
View File

@ -13,10 +13,6 @@ body {
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Let the jumbotron breathe */
.jumbotron {
margin-top: 20px;
}
/* Remove padding from wrapping element since we kick in the grid classes here */
.body-content {
padding: 0;

BIN
examples/screenshots/jumbotron.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 76 KiB

17
less/jumbotron.less
View File

@ -4,13 +4,14 @@
.jumbotron {
padding: 30px;
padding: 30px 15px;
margin-bottom: 30px;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
@ -19,9 +20,19 @@
line-height: 1.4;
}
.container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
@media screen and (min-width: @screen-tablet) {
padding: 50px 60px;
border-radius: @border-radius-large; // Only round corners at higher resolutions
padding-top: 50px;
padding-bottom: 50px;
.container & {
padding-left: 60px;
padding-right: 60px;
}
h1 {
font-size: (@font-size-base * 4.5);
}