mirror of https://github.com/twbs/bootstrap.git
new jumbotron
This commit is contained in:
Mark Otto
parent
fb29075926
commit
70e81e6f55
|
|
@ -15,6 +15,7 @@
|
|||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +95,7 @@
|
|||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
|
|
@ -187,6 +189,7 @@
|
|||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
|
|
@ -434,6 +437,7 @@
|
|||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
|
|
@ -527,6 +531,7 @@
|
|||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ textarea {
|
|||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -181,6 +182,7 @@ a:hover {
|
|||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -303,6 +305,7 @@ a:hover {
|
|||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -515,6 +518,7 @@ a:hover {
|
|||
.container:before,
|
||||
.container:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -531,6 +535,7 @@ a:hover {
|
|||
.container-fluid:before,
|
||||
.container-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -1331,6 +1336,7 @@ select:focus:required:invalid:focus {
|
|||
.form-actions:before,
|
||||
.form-actions:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -1600,6 +1606,7 @@ legend + .control-group {
|
|||
.form-horizontal .control-group:before,
|
||||
.form-horizontal .control-group:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -2758,9 +2765,9 @@ button.close {
|
|||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
*zoom: 1;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
|
|
@ -2807,9 +2814,9 @@ button.close {
|
|||
background-color: #d9d9d9 \9;
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
|
|
@ -3029,17 +3036,17 @@ button.close {
|
|||
}
|
||||
|
||||
.btn-inverse {
|
||||
background-color: #414141;
|
||||
background-color: #363636;
|
||||
*background-color: #222222;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
|
||||
background-image: -webkit-linear-gradient(top, #555555, #222222);
|
||||
background-image: -o-linear-gradient(top, #555555, #222222);
|
||||
background-image: linear-gradient(top, #555555, #222222);
|
||||
background-image: -moz-linear-gradient(top, #555555, #222222);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
|
||||
background-image: -webkit-linear-gradient(top, #444444, #222222);
|
||||
background-image: -o-linear-gradient(top, #444444, #222222);
|
||||
background-image: linear-gradient(top, #444444, #222222);
|
||||
background-image: -moz-linear-gradient(top, #444444, #222222);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #222222 #222222 #000000;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff222222', GradientType=0);
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
}
|
||||
|
||||
|
|
@ -3468,6 +3475,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.nav-tabs:after,
|
||||
.nav-pills:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -3641,6 +3649,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.tabbable:before,
|
||||
.tabbable:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -3845,6 +3854,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar-form:before,
|
||||
.navbar-form:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -4373,6 +4383,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.pager:before,
|
||||
.pager:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -4522,6 +4533,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.modal-footer:before,
|
||||
.modal-footer:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -4814,6 +4826,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.thumbnails:before,
|
||||
.thumbnails:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -775,3 +775,61 @@ form.bs-docs-example {
|
|||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar {
|
||||
}
|
||||
.jumbo {
|
||||
padding: 100px 0;
|
||||
margin-top: -60px;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075);
|
||||
|
||||
background: #c9cabc; /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c9cabc), color-stop(100%,#68686d)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */
|
||||
background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
|
||||
xborder-bottom: 1px solid #68686d;
|
||||
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
}
|
||||
.jumbo h1 {
|
||||
font-size: 120px;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
margin: 0 0 5px;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
.jumbo p {
|
||||
margin-bottom: 30px;
|
||||
font-size: 40px;
|
||||
font-weight: 200;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.jumbo .btn {
|
||||
font-size: 20px;
|
||||
padding: 14px 24px;
|
||||
margin: 0 10px 30px 0;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
.jumbo .btn:active {
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -75,9 +75,22 @@
|
|||
|
||||
<div class="bs-docs-container">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="jumbo">
|
||||
<div class="bs-docs-container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">Download Bootstrap <small>(v2.1.0)</small></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-container">
|
||||
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron masthead">
|
||||
<header class="jumbotron masthead" style="display: none;">
|
||||
<div class="inner">
|
||||
<h1>Twitter Bootstrap</h1>
|
||||
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
</div>
|
||||
|
||||
<div class="jumbo">
|
||||
<div class="bs-docs-container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">{{_i}}Download Bootstrap <small>(v2.1.0)</small>{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-container">
|
||||
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron masthead">
|
||||
<header class="jumbotron masthead" style="display: none;">
|
||||
<div class="inner">
|
||||
<h1>{{_i}}Twitter Bootstrap{{/i}}</h1>
|
||||
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
border-bottom-color: darken(@btnBorder, 10%);
|
||||
.border-radius(4px);
|
||||
.ie7-restore-left-whitespace(); // Give IE7 some love
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
// Hover state
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
background-color: darken(@white, 15%) e("\9");
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
@btnDangerBackground: #ee5f5b;
|
||||
@btnDangerBackgroundHighlight: #bd362f;
|
||||
|
||||
@btnInverseBackground: @gray;
|
||||
@btnInverseBackground: #444;
|
||||
@btnInverseBackgroundHighlight: @grayDarker;
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue