mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Get rid of unneeded divs. (#29563)
Use our example shortcode's `class` parameter instead.
This commit is contained in:
XhmikosR
Mark Otto
parent
6e214b0241
commit
3251de8d57
@ -12,8 +12,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
|
||||
|
||||
**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
@ -28,7 +27,6 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
|
||||
|
||||
@ -123,8 +121,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
|
||||
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -147,7 +144,6 @@ For example, here are two grid layouts that apply to every device and viewport,
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Equal-width multi-line
|
||||
|
||||
@ -155,8 +151,7 @@ Create equal-width columns that span multiple lines by inserting a `.w-100` wher
|
||||
|
||||
There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if your target browsers don't fall into the buggy versions.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
@ -167,14 +162,12 @@ There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbu
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Setting one column width
|
||||
|
||||
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -200,14 +193,12 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Variable width content
|
||||
|
||||
Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col col-lg-2">
|
||||
@ -233,7 +224,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Responsive classes
|
||||
|
||||
@ -243,8 +233,7 @@ Bootstrap's grid includes five tiers of predefined classes for building complex
|
||||
|
||||
For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
@ -258,14 +247,12 @@ For grids that are the same from the smallest of devices to the largest, use the
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Stacked to horizontal
|
||||
|
||||
Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">col-sm-8</div>
|
||||
@ -278,14 +265,12 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Mix and match
|
||||
|
||||
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
|
||||
<div class="row">
|
||||
@ -307,7 +292,6 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Gutters
|
||||
|
||||
@ -330,8 +314,7 @@ Use the responsive `.row-cols-*` classes to quickly set the number of columns th
|
||||
|
||||
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-2">
|
||||
<div class="col">Column</div>
|
||||
@ -341,10 +324,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-3">
|
||||
<div class="col">Column</div>
|
||||
@ -354,10 +335,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-4">
|
||||
<div class="col">Column</div>
|
||||
@ -367,10 +346,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-4">
|
||||
<div class="col">Column</div>
|
||||
@ -380,10 +357,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
|
||||
<div class="col">Column</div>
|
||||
@ -393,7 +368,6 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
You can also use the accompanying Sass mixin, `row-cols()`:
|
||||
|
||||
@ -415,8 +389,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
|
||||
### Vertical alignment
|
||||
|
||||
<div class="bd-example-row bd-example-row-flex-cols">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
|
||||
<div class="container">
|
||||
<div class="row align-items-start">
|
||||
<div class="col">
|
||||
@ -453,10 +426,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row bd-example-row-flex-cols">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col align-self-start">
|
||||
@ -471,12 +442,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Horizontal alignment
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row justify-content-start">
|
||||
<div class="col-4">
|
||||
@ -520,7 +489,6 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### No gutters
|
||||
|
||||
@ -545,21 +513,18 @@ Here's the source code for creating these styles. Note that column overrides are
|
||||
|
||||
In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="row no-gutters">
|
||||
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
|
||||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Column wrapping
|
||||
|
||||
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-9">.col-9</div>
|
||||
@ -568,14 +533,12 @@ If more than 12 columns are placed within a single row, each group of extra colu
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Column breaks
|
||||
|
||||
Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
@ -589,12 +552,10 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||||
@ -608,7 +569,6 @@ You may also apply this break at specific breakpoints with our [responsive displ
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Reordering
|
||||
|
||||
@ -616,8 +576,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
|
||||
|
||||
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all five grid tiers.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -632,12 +591,10 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col order-last">
|
||||
@ -652,7 +609,6 @@ There are also responsive `.order-first` and `.order-last` classes that change t
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Offsetting columns
|
||||
|
||||
@ -662,8 +618,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes
|
||||
|
||||
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
@ -678,12 +633,10 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
||||
@ -695,14 +648,12 @@ In addition to column clearing at responsive breakpoints, you may need to reset
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
#### Margin utilities
|
||||
|
||||
With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
@ -718,14 +669,12 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Nesting
|
||||
|
||||
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
@ -742,7 +691,6 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Sass mixins
|
||||
|
||||
|
||||
@ -12,34 +12,29 @@ Use border utilities to add or remove an element's borders. Choose from all bord
|
||||
|
||||
### Additive
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-border-utils" >}}
|
||||
<span class="border"></span>
|
||||
<span class="border-top"></span>
|
||||
<span class="border-right"></span>
|
||||
<span class="border-bottom"></span>
|
||||
<span class="border-left"></span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Subtractive
|
||||
|
||||
<div class="bd-example-border-utils bd-example-border-utils-0">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
|
||||
<span class="border-0"></span>
|
||||
<span class="border-top-0"></span>
|
||||
<span class="border-right-0"></span>
|
||||
<span class="border-bottom-0"></span>
|
||||
<span class="border-left-0"></span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Border color
|
||||
|
||||
Change the border color using utilities built on our theme colors.
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-border-utils" >}}
|
||||
{{< border.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<span class="border border-{{ .name }}"></span>
|
||||
@ -47,7 +42,6 @@ Change the border color using utilities built on our theme colors.
|
||||
{{< /border.inline >}}
|
||||
<span class="border border-white"></span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Border-radius
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user