0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00

update layout pages

This commit is contained in:
Mark Otto 2017-05-27 22:12:00 -07:00
parent 1f43d9c066
commit fa2731b626
4 changed files with 8 additions and 30 deletions

View File

@ -1,17 +1,11 @@
---
layout: docs
title: Grid system
description: Documentation and examples for using Bootstrap's responsive flexbox grid system.
description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
group: layout
toc: true
---
Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and has multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/overview/#responsive-breakpoints). You can use it with Sass mixins or our predefined classes.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## How it works
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

View File

@ -3,17 +3,13 @@ layout: docs
title: Media object
description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
group: layout
toc: true
---
The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Example
The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox.
Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/utilities/spacing/).
{% example html %}

View File

@ -4,15 +4,9 @@ title: Overview
description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
group: layout
redirect_from: "/layout/"
toc: true
---
Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Containers
Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time).

View File

@ -1,17 +1,11 @@
---
layout: docs
title: Utilities for layout
description: Use any of our dozens of responsive utility classes for showing, hiding, aligning, and spacing content.
description: For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
group: layout
toc: true
---
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. Below is a primer on what's included in Bootstrap and how these utilities can help you with layout.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Changing `display`
Use our `display` utilities for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.