mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

tweak the h2s again for better spacing, adjust docs, remove white bg if possible on file input, few other tweaks

Browse Source
This commit is contained in:
Mark Otto
2011-10-16 18:01:05 -07:00
parent 756e7c8739
commit 2a82b38cff
6 changed files with 117 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/assets/css/docs.css
View File

@@ -9,7 +9,7 @@
-------------------------------------------------- */
body {
position: relative;
padding-top: 40px;
padding-top: 100px;
background-color: #fff;
}
section {
@@ -19,65 +19,88 @@ section > .row {
margin-bottom: 10px;
}
/* Tweak topbar brand link to be super sleek
-------------------------------------------------- */
.navbar .brand {
float: right;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.navbar .brand:hover {
text-decoration: none;
}
/* Jumbotrons
-------------------------------------------------- */
.jumbotron,
.jumbotron .inner {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.jumbotron {
margin-bottom: 40px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
}
.jumbotron .inner {
background: transparent url(../img/grid-18px.png) top center;
padding: 36px 60px;
-webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
position: relative;
padding-bottom: 58px;
margin-bottom: 50px;
border-bottom: 2px solid #eee;
}
.jumbotron h1,
.jumbotron p {
margin-bottom: 9px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
margin-bottom: 10px;
text-shadow: 0 1px 0 #fff;
}
.jumbotron h1 {
font-size: 54px;
font-size: 90px;
line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
margin-right: 40%;
letter-spacing: -1px;
}
.jumbotron p {
font-weight: 300;
margin-right: 25%;
margin-right: 32%;
}
.jumbotron .lead {
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
font-size: 25px;
line-height: 35px;
}
.jumbotron p a {
color: #fff;
font-weight: bold;
}
.jumbotron .btn {
font-size: 20px;
padding: 12px 24px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.benefits {
width: 250px;
position: absolute;
right: 0;
bottom: 60px;
}
.benefits ul {
list-style: none;
margin: 0;
}
.benefits li {
font-size: 16px;
font-weight: 300;
line-height: 40px;
color: #555;
}
.benefits li + li {
border-top: 1px solid #f5f5f5;
}
.benefits h4 {
color: #555;
}
.benefits span {
position: relative;
top: -2px;
padding-right: 5px;
color: #999;
}
/* Specific jumbotrons
------------------------- */
/* main docs page */
.masthead {
background-color: #004d9f;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f));
background-image: -webkit-linear-gradient(#048ccd, #004d9f);
background-image: -moz-linear-gradient(#048ccd, #004d9f);
background-image: -o-linear-gradient(top, #048ccd, #004d9f);
background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */
}
/* supporting docs pages */
.subhead {
background-color: #767d80;

57
docs/index.html
View File

@@ -16,16 +16,6 @@
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
@@ -49,6 +39,7 @@
<ul class="dropdown-menu">
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Resposive</a></li>
</ul>
</li>
<li class="dropdown">
@@ -62,14 +53,17 @@
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
<ul class="dropdown-menu">
<li><a href="#media">Media</a></li>
<li><a href="#navigation">Navigation</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#autocomplete">Autocomplete</a></li>
<li><a href="#accordion">Accordion</a></li>
<li><a href="#datepicker">Datepicker</a></li>
</ul>
</li>
<li><a href="#javascript">Javascript</a></li>
<li><a href="#less">Less</a></li>
<li><a href="#less">Using Less</a></li>
</ul>
</div>
</div>
@@ -82,10 +76,21 @@
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<div class="benefits pull-right">
<h4>Feature highlights</h4>
<ul>
<li><span>&times;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide</li>
<li><span>&times;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li>
</ul>
</div>
<h1>Bootstrap, from Twitter</h1>
<a href="#" class="btn btn-large pull-right">Download on GitHub</a>
<p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p>
<a href="#" class="btn primary btn-large">Download on GitHub</a>
</div>
</header>
@@ -164,6 +169,19 @@
</li>
</ul>
<!--
Quick links:
GitHub
Twitter
Roadmap
Changelog
Authors:
@mdo
@fat
-->
</div><!-- /#overview -->
@@ -1964,5 +1982,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div><!-- /container -->
<!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>