mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

docs(examples): new cheatsheet and RTL examples

Browse Source
This commit is contained in:
Gaël Poupard
2020-06-09 16:44:20 +03:00
committed by XhmikosR
parent 9488978fb5
commit aaff11a0b3
95 changed files with 5206 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/utilities/api.md
+30 -1
View File
@@ -11,7 +11,7 @@ Bootstrap utilities are generated with our utility API and can be used to modify
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
{{< bs-table "table text-left" >}}
{{< bs-table "table text-start" >}}
| Option | Type | Description |
| --- | --- | --- |
| `property` | **Required** | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
@@ -21,6 +21,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
| `responsive` | Optional | Boolean indicating if responsive classes need to be generated. `false` by default. |
| `rfs` | Optional | Boolean to enable fluid rescaling. Have a look at the [RFS]({{< docsref "/getting-started/rfs" >}}) page to find out how this works. `false` by default. |
| `print` | Optional | Boolean indicating if print classes need to be generated. `false` by default. |
| `rtl` | Optional | Boolean indicating if utility should be kept in RTL. `true` by default. |
{{< /bs-table >}}
## API explained
@@ -298,3 +299,31 @@ $utilities: map-merge(
)
);
```
#### Remove utility in RTL
Some edge cases make [RTL styling difficult](https://rtlstyling.com/posts/rtl-styling#common-things-that-might-not-work-for-rtl), such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the `rtl` option to `false`:
```scss
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
```
Output:
```css
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
```
This doesn't output anything in RTL, thanks to [the RTLCSS `remove` control directive](https://rtlcss.com/learn/usage-guide/control-directives/#remove).
site/content/docs/5.0/utilities/borders.md
+6 -6
View File
@@ -15,9 +15,9 @@ Use border utilities to add or remove an element's borders. Choose from all bord
{{< example class="bd-example-border-utils" >}}
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border-start"></span>
{{< /example >}}
### Subtractive
@@ -25,9 +25,9 @@ Use border utilities to add or remove an element's borders. Choose from all bord
{{< 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-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
<span class="border-start-0"></span>
{{< /example >}}
## Border color
@@ -60,9 +60,9 @@ Add classes to an element to easily round its corners.
{{< example class="bd-example-rounded-utils" >}}
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
{{< /example >}}
site/content/docs/5.0/utilities/flex.md
+3 -3
View File
@@ -301,7 +301,7 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
## Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
{{< example >}}
<div class="d-flex bd-highlight mb-3">
@@ -311,7 +311,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
@@ -319,7 +319,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>
{{< /example >}}
site/content/docs/5.0/utilities/float.md
+8 -8
View File
@@ -11,8 +11,8 @@ toc: true
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
{{< example >}}
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
{{< /example >}}
@@ -21,10 +21,10 @@ These utility classes float an element to the left or right, or disable floating
Responsive variations also exist for each `float` value.
{{< example >}}
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
{{< /example >}}
Here are all the support classes:
@@ -32,8 +32,8 @@ Here are all the support classes:
{{< markdown >}}
{{< float.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.float{{ .abbr }}-left`
- `.float{{ .abbr }}-right`
- `.float{{ .abbr }}-start`
- `.float{{ .abbr }}-end`
- `.float{{ .abbr }}-none`
{{- end -}}
{{< /float.inline >}}
site/content/docs/5.0/utilities/overflow.md
+3 -3
View File
@@ -8,13 +8,13 @@ group: utilities
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
</div>
<div class="overflow-hidden p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
</div>
<div class="overflow-visible p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
</div>
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
site/content/docs/5.0/utilities/position.md
+23 -23
View File
@@ -25,9 +25,9 @@ Arrange elements easily with the edge positioning utilities. The format is `{pro
Where *property* is one of:
- `top` - for the vertical `top` position
- `left` - for the horizontal `left` position
- `start` - for the horizontal `left` position (in LTR)
- `bottom` - for the vertical `bottom` position
- `right` - for the horizontal `right` position
- `end` - for the horizontal `right` position (in LTR)
Where *position* is one of:
@@ -39,12 +39,12 @@ Where *position* is one of:
{{< example class="bd-example-position-utils" >}}
<div class="position-relative">
<div class="position-absolute top-0 left-0"></div>
<div class="position-absolute top-0 right-0"></div>
<div class="position-absolute top-50 left-50"></div>
<div class="position-absolute bottom-50 right-50"></div>
<div class="position-absolute bottom-0 left-0"></div>
<div class="position-absolute bottom-0 right-0"></div>
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-50"></div>
<div class="position-absolute bottom-50 end-50"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
{{< /example >}}
@@ -56,15 +56,15 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)`
{{< example class="bd-example-position-utils" >}}
<div class="position-relative">
<div class="position-absolute top-0 left-0 translate-middle"></div>
<div class="position-absolute top-0 left-50 translate-middle"></div>
<div class="position-absolute top-0 left-100 translate-middle"></div>
<div class="position-absolute top-50 left-0 translate-middle"></div>
<div class="position-absolute top-50 left-50 translate-middle"></div>
<div class="position-absolute top-50 left-100 translate-middle"></div>
<div class="position-absolute top-100 left-0 translate-middle"></div>
<div class="position-absolute top-100 left-50 translate-middle"></div>
<div class="position-absolute top-100 left-100 translate-middle"></div>
<div class="position-absolute top-0 start-0 translate-middle"></div>
<div class="position-absolute top-0 start-50 translate-middle"></div>
<div class="position-absolute top-0 start-100 translate-middle"></div>
<div class="position-absolute top-50 start-0 translate-middle"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 start-100 translate-middle"></div>
<div class="position-absolute top-100 start-0 translate-middle"></div>
<div class="position-absolute top-100 start-50 translate-middle"></div>
<div class="position-absolute top-100 start-100 translate-middle"></div>
</div>
{{< /example >}}
@@ -74,15 +74,15 @@ Here are some real life examples of these classes:
{{< example class="bd-example-position-examples d-flex justify-content-around" >}}
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 left-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>
<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 left-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
{{< /example >}}
@@ -93,9 +93,9 @@ You can use these classes with existing components to create new ones. Remember
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" class="position-absolute top-0 left-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 left-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 left-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>
{{< /example >}}
site/content/docs/5.0/utilities/spacing.md
+3 -3
View File
@@ -27,8 +27,8 @@ Where *sides* is one of:
- `t` - for classes that set `margin-top` or `padding-top`
- `b` - for classes that set `margin-bottom` or `padding-bottom`
- `l` - for classes that set `margin-left` or `padding-left`
- `r` - for classes that set `margin-right` or `padding-right`
- `s` - for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
- `e` - for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
- `x` - for classes that set both `*-left` and `*-right`
- `y` - for classes that set both `*-top` and `*-bottom`
- blank - for classes that set a `margin` or `padding` on all 4 sides of the element
@@ -54,7 +54,7 @@ Here are some representative examples of these classes:
margin-top: 0 !important;
}
.ml-1 {
.ms-1 {
margin-left: ($spacer * .25) !important;
}
site/content/docs/5.0/utilities/text.md
+11 -7
View File
@@ -8,17 +8,17 @@ toc: true
## Text alignment
Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{{< example >}}
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
{{< /example >}}
{{< callout info >}}
@@ -51,6 +51,10 @@ Prevent long strings of text from breaking your components' layout by using `.te
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
{{< /example >}}
{{< callout warning >}}
Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS.
{{< /callout >}}
## Text transform
Transform text in components with text capitalization classes.