Commit fed0d8a2 authored by Mark Otto's avatar Mark Otto

restore page headers, use partial and page frontmatter to organize it

parent be3f8d9b
......@@ -50,25 +50,25 @@
- title: Carousel
- title: Utilities
- title: Examples
pages:
- title: Starter template
- title: Grid
- title: Jumbotron
- title: Narrow jumbotron
- title: Navbar
- title: Navbar top
- title: Navbar top fixed
- title: Cover
- title: Album
- title: Carousel
- title: Blog
- title: Dashboard
- title: Sign-in page
- title: Justified nav
- title: Sticky footer
- title: Sticky footer with navbar
- title: Offcanvas
# - title: Examples
# pages:
# - title: Starter template
# - title: Grid
# - title: Jumbotron
# - title: Narrow jumbotron
# - title: Navbar
# - title: Navbar top
# - title: Navbar top fixed
# - title: Cover
# - title: Album
# - title: Carousel
# - title: Blog
# - title: Dashboard
# - title: Sign-in page
# - title: Justified nav
# - title: Sticky footer
# - title: Sticky footer with navbar
# - title: Offcanvas
# - title: Extend
# pages:
......
{% if page.group == "getting-started" %}
<h1>Getting started</h1>
<p class="lead">
An overview of Bootstrap, how to download and use, basic templates and examples, and more.
</p>
{% elsif page.group == "layout" %}
<h1>Layout</h1>
<p class="lead">
Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.
</p>
{% elsif page.group == "components" %}
<h1>Components</h1>
<p class="lead">
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
</p>
{% elsif page.group == "javascript" %}
<h1>JavaScript plugins</h1>
<p class="lead">
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
</p>
{% elsif page.group == "about" %}
<h1>About</h1>
<p class="lead">
Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
</p>
{% elsif page.group == "migration" %}
<h1>Migration</h1>
<p class="lead">
Guidance on how to upgrade from Bootstrap v3.x to v4.x with emphasis on major changes, what's new, and what's been removed.
</p>
{% endif %}
......@@ -2,13 +2,19 @@
layout: default
---
<div class="bd-pageheader">
<div class="container">
{% include ads.html %}
{% include page-headers.html %}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-push-9 bd-sidebar">
{% include nav-docs.html %}
</div>
<div class="col-sm-9 col-sm-pull-3 bd-content">
{% include ads.html %}
<h1 class="bd-title">{{ page.title }}</h1>
{{ content }}
</div>
......
---
layout: page
title: Brand guidelines
group: about
---
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](http://mailchimp.com/about/brand-assets/).
......
---
layout: page
title: History
group: about
---
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
Originally [released](https://blog.twitter.com/2011/bootstrap-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
\ No newline at end of file
Originally [released](https://blog.twitter.com/2011/bootstrap-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
---
layout: page
title: License FAQs
group: about
---
Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
......
---
layout: page
title: Team
group: about
---
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
......
---
layout: page
title: Translations
group: about
---
Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
......
......@@ -5,7 +5,7 @@
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
.bd-docs {
padding-top: 5rem; }
padding-top: 3.65rem; }
.bd-container {
position: relative;
......@@ -41,7 +41,26 @@
.bd-container > table td:first-child > code {
white-space: nowrap; }
.bd-content > h2 {
.bd-pageheader {
margin-bottom: 3rem;
padding-top: 2rem;
padding-bottom: 2rem;
color: #cdbfe3;
background-color: #563d7c; }
.bd-pageheader h1 {
font-size: 4rem;
font-weight: normal;
color: #fff; }
.bd-pageheader p {
font-size: 1.5rem; }
@media (min-width: 34em) {
.bd-pageheader {
padding-top: 4rem;
padding-bottom: 4rem; }
.bd-pageheader .carbonad {
float: right; } }
.bd-content > h2:not(:first-child) {
margin-top: 3rem; }
.bd-content > h3 {
......@@ -53,9 +72,9 @@
@media (min-width: 34em) {
.bd-title {
font-size: 4rem; }
font-size: 3rem; }
.bd-title + p {
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 300; } }
#markdown-toc > li:first-child {
......
This diff was suppressed by a .gitattributes entry.
.bd-docs {
padding-top: 5rem;
padding-top: 3.65rem;
}
// Custom container
......@@ -59,12 +59,39 @@
}
.bd-pageheader {
margin-bottom: 3rem;
padding-top: 2rem;
padding-bottom: 2rem;
color: $bd-purple-light;
background-color: $bd-purple;
h1 {
font-size: 4rem;
font-weight: normal;
color: #fff;
}
p {
font-size: 1.5rem;
}
@include media-breakpoint-up(sm) {
padding-top: 4rem;
padding-bottom: 4rem;
.carbonad {
float: right;
}
}
}
//
// Docs sections
//
.bd-content {
> h2 {
> h2:not(:first-child) {
margin-top: 3rem;
}
......@@ -80,10 +107,10 @@
.bd-title {
@include media-breakpoint-up(sm) {
font-size: 4rem;
font-size: 3rem;
+ p {
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 300;
}
}
......
---
layout: page
title: Alerts
group: components
---
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
......
---
layout: page
title: Breadcrumb
group: components
---
Indicate the current page's location within a navigational hierarchy.
......
---
layout: page
title: Button dropdown
group: components
---
Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
......
---
layout: page
title: Button group
group: components
---
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
......
---
layout: page
title: Buttons
group: components
---
Buttons are used to execute actions in forms, dialogs, and more. Use any of the available button classes to quickly create a styled button.
......
---
layout: page
title: Cards
group: components
---
A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
......
---
layout: page
title: Carousel
group: components
---
A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.**
......
---
layout: page
title: Code
group: components
---
Styles for inline code snippets and longer, multiline blocks of code.
......
---
layout: page
title: Collapse
group: components
---
Flexible plugin that utilizes a handful of classes for easy toggle behavior.
......
---
layout: page
title: Dropdowns
group: components
---
Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin.
......
---
layout: page
title: Forms
group: components
---
Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
......
---
layout: page
title: Images
group: components
---
Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
......
---
layout: page
title: Input group
group: components
---
Easily extend form controls by adding text, buttons, or button groups on either side of textual `<input>`s.
......
---
layout: page
title: Jumbotron
group: components
---
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
......
---
layout: page
title: Labels
group: components
---
Small and adaptive tag for adding context to just about any content.
......
---
layout: page
title: List group
group: components
---
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
......
---
layout: page
title: Modal
group: components
---
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
......
---
layout: page
title: Navbar
group: components
---
The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
......
---
layout: page
title: Navs
group: components
---
Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
......
---
layout: page
title: Pagination
group: components
---
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pagination-pager).
......
---
layout: page
title: Popovers
group: components
---
Add small overlays of content, like those found in iOS, to any element for housing secondary information.
......
---
layout: page
title: Progress
group: components
---
Stylize the HTML5 `<progress>` element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.
......
---
layout: page
title: Reboot
group: components
---
Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
......
---
layout: page
title: Srollspy
group: components
---
## Contents
......
---
layout: page
title: Tables
group: components
---
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
......
---
layout: page
title: Tooltips
group: components
---
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
......
---
layout: page
title: Typography
group: components
---
Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/).
......
---
layout: page
title: Utility classes
group: components
---
Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development.
......
---
layout: page
title: Accessibility
group: getting-started
---
Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.
......
---
layout: page
title: Community
group: getting-started
---
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
......
---
layout: page
title: Compiling
group: getting-started
---
Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.
......
---
layout: page
title: Contents
group: getting-started
---
Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
......
---
layout: page
title: Customize CSS
group: getting-started
---
New to Bootstrap 4, variable-based customization is a way for folks to quickly enable or disable global styles across all of Bootstrap's CSS. Simply update a variable's value and recompile using our Gruntfile.
......
---
layout: page
title: Download
group: getting-started
---
Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
......
---
layout: page
title: Flexbox
group: getting-started
---
Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.
......
---
layout: page
title: JavaScript
group: getting-started
---
Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more.
......@@ -103,4 +104,3 @@ Bootstrap's plugins don't fall back particularly gracefully when JavaScript is d
For simple transition effects, include `transition.js` once alongside the other JS files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there.
Transition.js is a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.
---
layout: page
title: Getting started
title: Start using Bootstrap
group: getting-started
---
Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks.
Quickly add Bootstrap to your project via the Bootstrap CDN, graciously provided by the MaxCDN folks.
## Include CSS and JS
......
---
layout: page
title: Supported platforms
group: getting-started
---
Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.
......
---
layout: page
title: Basic template
group: getting-started
---
Start with this basic HTML template, or modify [these examples](../examples/). We hope you'll customize our templates and examples, adapting them to suit your needs.
......
---
layout: page
title: Third party support
group: getting-started
---
While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.
......
---
layout: page
title: Containers
group: layout
---
Bootstrap requires a containing element to wrap site contents and house our grid system. Choose from the fixed or fluid width variation.
......
---
layout: page
title: Grid system
group: layout
---
Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes based on a 12 column layout.
......
---
layout: page
title: Media queries
group: layout
---
Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components.
......
---
layout: page
title: Media
group: layout
---
Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
......
---
layout: page
title: Responsive utilities
group: layout
---
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
......
---
layout: page
title: Scaffolding
group: layout
---
The scaffolding of Bootstrap refers to our general approach to building the project. It outlines the basic document requirements and project dependencies.
......
---
layout: page
title: Migrating to v4
group: migration
---
Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment