docs redesign a bit
This commit is contained in:
Mark Otto
parent
9dc5868ea7
commit
6944e418eb
|
|
@ -23,6 +23,9 @@
|
|||
<!-- Documentation extras -->
|
||||
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Google Web fonts -->
|
||||
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700" rel="stylesheet">
|
||||
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,9 @@
|
|||
<header class="navbar navbar-static-top bs-nav-home" id="top" role="banner">
|
||||
<div class="container">
|
||||
<h3 class="navbar-brand">
|
||||
<a href="{{ site.baseurl }}">Bootstrap</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.baseurl }}/getting-started/quick-start" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<header class="bd-header" role="banner">
|
||||
<a class="bd-header-mark" href="{{ site.baseurl }}">Bootstrap</a>
|
||||
|
||||
<nav class="nav nav-pills bd-header-nav">
|
||||
<a class="nav-link" href="{{ site.baseurl }}/getting-started/quick-start" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav-home.html %}
|
||||
|
||||
<!-- Page content of course! -->
|
||||
{{ content }}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -74,8 +74,7 @@ body {
|
|||
width: 9rem;
|
||||
height: 9rem;
|
||||
font-size: 6.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 8.8rem;
|
||||
line-height: 9rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
|
|
@ -210,39 +209,81 @@ body {
|
|||
// Homepage
|
||||
//
|
||||
|
||||
|
||||
|
||||
.bd-header {
|
||||
@include clearfix;
|
||||
padding-bottom: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,.25);
|
||||
|
||||
.bd-header-mark {
|
||||
float: left;
|
||||
padding-top: .6em;
|
||||
padding-bottom: .6em;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-header-nav {
|
||||
float: right;
|
||||
|
||||
.nav-link {
|
||||
float: left;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Masthead (headings and download button)
|
||||
.bs-docs-masthead {
|
||||
position: relative;
|
||||
padding: 2rem 1rem;
|
||||
color: #cdbfe3;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||
background-color: #6f5499;
|
||||
@include gradient-vertical($bs-purple, #6f5499);
|
||||
// color: #cdbfe3;
|
||||
// text-align: center;
|
||||
// text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||
// background-color: #6f5499;
|
||||
// @include gradient-vertical($bs-purple, #6f5499);
|
||||
background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
|
||||
}
|
||||
|
||||
.bs-docs-masthead .bs-docs-booticon {
|
||||
margin: 0 auto 2rem;
|
||||
margin: 0 0 2rem;
|
||||
color: $gray;
|
||||
border-color: $gray;
|
||||
}
|
||||
.bs-docs-masthead h1 {
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
}
|
||||
.bs-docs-masthead .lead {
|
||||
margin: 0 auto 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
}
|
||||
.bs-docs-masthead .version {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 2rem;
|
||||
color: #9783b9;
|
||||
// color: #9783b9;
|
||||
}
|
||||
.bs-docs-masthead .btn {
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: $gray;
|
||||
border-color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
|
|
@ -253,7 +294,11 @@ body {
|
|||
|
||||
@media (min-width: 768px) {
|
||||
.bs-docs-masthead {
|
||||
padding: 5rem 0;
|
||||
padding: 2rem 0 4rem;
|
||||
// padding: 5rem 0;
|
||||
}
|
||||
.bd-header {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.bs-docs-masthead h1 {
|
||||
font-size: 4rem;
|
||||
|
|
@ -408,15 +453,15 @@ body {
|
|||
.bs-docs-masthead {
|
||||
.carbonad {
|
||||
float: none;
|
||||
margin: 0 auto !important;
|
||||
color: $bs-purple-light !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid #866ab3 !important;
|
||||
}
|
||||
.carbonad-text a,
|
||||
.carbonad-tag a {
|
||||
color: #fff !important;
|
||||
margin: 0 !important;
|
||||
// color: $bs-purple-light !important;
|
||||
// background: transparent !important;
|
||||
// border: 1px solid #866ab3 !important;
|
||||
}
|
||||
// .carbonad-text a,
|
||||
// .carbonad-tag a {
|
||||
// color: #fff !important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -450,7 +495,8 @@ body {
|
|||
width: 6rem;
|
||||
margin: 2.5rem auto;
|
||||
}
|
||||
.bs-docs-featurette h3 {
|
||||
.bs-docs-featurette h4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
|
|
@ -701,6 +747,10 @@ body {
|
|||
}
|
||||
|
||||
|
||||
.bs-docs-sidenav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bs-docs-toc-link {
|
||||
display: block;
|
||||
padding: 4px 20px;
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@ Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcd
|
|||
|
||||
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
|
||||
|
||||
**Disabled for v4 during alpha releases.**
|
||||
<div class="alert alert-warning">
|
||||
<strong>Heads up!</strong> Much of this page will be inaccurate during the v4 alpha releases.
|
||||
</div>
|
||||
|
||||
{% comment %}
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}">
|
||||
{% endhighlight %}
|
||||
|
|
@ -47,4 +48,3 @@ Put it all together and your pages should look like this:
|
|||
{% endhighlight %}
|
||||
|
||||
And that's it. Happy Bootstrapping!
|
||||
{% endcomment %}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@ layout: home
|
|||
title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
|
||||
---
|
||||
|
||||
|
||||
<main class="bs-docs-masthead" id="content" role="main" tabindex="-1">
|
||||
<div class="container">
|
||||
{% include nav-home.html %}
|
||||
|
||||
<span class="bs-docs-booticon outline">B</span>
|
||||
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
||||
<p class="lead">
|
||||
|
|
@ -26,17 +27,17 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
|
||||
<h3>Preprocessors</h3>
|
||||
<h4>Preprocessors</h4>
|
||||
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
|
||||
<h3>One framework, every device.</h3>
|
||||
<h4>One framework, every device.</h4>
|
||||
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<img src="assets/img/components.png" alt="Components" class="img-responsive">
|
||||
<h3>Full of features</h3>
|
||||
<h4>Full of features</h4>
|
||||
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue