mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Remove custom example plugin. (#25784)
This commit is contained in:
m5o
@@ -14,25 +14,27 @@ Use border utilities to add or remove an element's borders. Choose from all bord
|
||||
### Additive
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<span class="border"></span>
|
||||
<span class="border-top"></span>
|
||||
<span class="border-right"></span>
|
||||
<span class="border-bottom"></span>
|
||||
<span class="border-left"></span>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
</div>
|
||||
|
||||
### Subtractive
|
||||
|
||||
<div class="bd-example-border-utils bd-example-border-utils-0">
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<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>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
</div>
|
||||
|
||||
## Border color
|
||||
@@ -40,11 +42,12 @@ Use border utilities to add or remove an element's borders. Choose from all bord
|
||||
Change the border color using utilities built on our theme colors.
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<span class="border border-{{ color.name }}"></span>{% endfor %}
|
||||
<span class="border border-white"></span>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
</div>
|
||||
|
||||
## Border-radius
|
||||
|
||||
@@ -30,9 +30,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also
|
||||
|
||||
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="bg-info clearfix">
|
||||
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
|
||||
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
@@ -8,8 +8,9 @@ toc: true
|
||||
|
||||
**Be sure to include text for screen readers**, as we've done with `aria-label`.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
@@ -8,40 +8,44 @@ toc: true
|
||||
|
||||
## Color
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<p class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">.text-{{ color.name }}</p>{% endfor %}
|
||||
<p class="text-muted">.text-muted</p>
|
||||
<p class="text-white bg-dark">.text-white</p>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no link styling.**
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
|
||||
<p><a href="#" class="text-muted">Muted link</a></p>
|
||||
<p><a href="#" class="text-white bg-dark">White link</a></p>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Background color
|
||||
|
||||
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
|
||||
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Background gradient
|
||||
|
||||
When `$enable-gradients` is set to true, you'll be able to use `.bg-gradient-` utility classes. **By default, `$enable-gradients` is disabled and the example below is intentionally broken.** This is done for easier customization from the moment you start using Bootstrap. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<div class="p-3 mb-2 bg-gradient-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-gradient-{{ color.name }}</div>{% endfor %}
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% capture callout %}
|
||||
#### Dealing with specificity
|
||||
|
||||
@@ -35,15 +35,17 @@ The media queries effect screen widths with the given breakpoint *or larger*. Fo
|
||||
|
||||
## Examples
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
|
||||
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<span class="d-block p-2 bg-primary text-white">d-block</span>
|
||||
<span class="d-block p-2 bg-dark text-white">d-block</span>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Hiding elements
|
||||
|
||||
@@ -68,10 +70,11 @@ To show an element only on a given interval of screen sizes you can combine one
|
||||
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
|
||||
| Visible only on xl | `.d-none .d-xl-block` |
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-lg-none">hide on screens wider than lg</div>
|
||||
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Display in print
|
||||
|
||||
@@ -89,8 +92,9 @@ Change the `display` value of elements when printing with our print display util
|
||||
|
||||
The print and display classes can be combined.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-print-none">Screen Only (Hide on print only)</div>
|
||||
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
|
||||
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
@@ -16,11 +16,12 @@ Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` e
|
||||
|
||||
Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` and an aspect ratio. The `.embed-responsive-item` isn't strictly required, but we encourage it.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
|
||||
+24
-16
@@ -10,13 +10,15 @@ toc: true
|
||||
|
||||
Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
|
||||
|
||||
@@ -30,7 +32,7 @@ Set the direction of flex items in a flex container with direction utilities. In
|
||||
|
||||
Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-flex flex-row bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item 1</div>
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
@@ -41,11 +43,12 @@ Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-r
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-flex flex-column bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item 1</div>
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
@@ -56,7 +59,8 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Responsive variations also exist for `flex-direction`.
|
||||
|
||||
@@ -217,13 +221,14 @@ Responsive variations also exist for `align-self`.
|
||||
|
||||
Use the `.flex-fill` class on a series of sibling elements to force them into equal widths while taking up all available horizontal space. [Especially useful for equal-width, or justified, navigation.]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/#working-with-flex-utilities)
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-flex bd-highlight">
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Responsive variations also exist for `flex-fill`.
|
||||
|
||||
@@ -236,7 +241,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
|
||||
|
||||
**Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<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>
|
||||
@@ -254,13 +259,14 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="ml-auto p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### With align-items
|
||||
|
||||
Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
|
||||
<div class="mb-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -272,7 +278,8 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="mt-auto p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Wrap
|
||||
|
||||
@@ -358,13 +365,14 @@ Responsive variations also exist for `flex-wrap`.
|
||||
|
||||
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="d-flex flex-nowrap bd-highlight">
|
||||
<div class="order-3 p-2 bd-highlight">First flex item</div>
|
||||
<div class="order-2 p-2 bd-highlight">Second flex item</div>
|
||||
<div class="order-1 p-2 bd-highlight">Third flex item</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Responsive variations also exist for `order`.
|
||||
|
||||
|
||||
@@ -14,11 +14,12 @@ These utility classes float an element to the left or right, or disable floating
|
||||
|
||||
Toggle a float with a class:
|
||||
|
||||
{% example html %}
|
||||
{% capture 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-none">Don't float on all viewport sizes</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Mixins
|
||||
|
||||
@@ -40,12 +41,13 @@ Or by Sass mixin:
|
||||
|
||||
Responsive variations also exist for each `float` value.
|
||||
|
||||
{% example html %}
|
||||
{% capture 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>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Here are all the support classes;
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten
|
||||
|
||||
Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
@@ -12,9 +12,10 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin
|
||||
Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
|
||||
{%- endcomment -%}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% highlight scss %}
|
||||
// Usage as a mixin
|
||||
|
||||
@@ -8,15 +8,16 @@ toc: true
|
||||
|
||||
Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
|
||||
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
|
||||
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
|
||||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
||||
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
|
||||
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
|
||||
@@ -24,16 +25,19 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
|
||||
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
|
||||
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
||||
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
+18
-12
@@ -10,13 +10,14 @@ toc: true
|
||||
|
||||
Easily realign text to components with text alignment classes.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<p class="text-left">Left 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>
|
||||
@@ -25,21 +26,23 @@ For left, right, and center alignment, responsive classes are available that use
|
||||
<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>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Text wrapping and overflow
|
||||
|
||||
Prevent text from wrapping with a `.text-nowrap` class.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="text-nowrap bd-highlight" style="width: 8rem;">
|
||||
This text should overflow the parent.
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<!-- Block level -->
|
||||
<div class="row">
|
||||
<div class="col-2 text-truncate">
|
||||
@@ -51,17 +54,19 @@ For longer content, you can add a `.text-truncate` class to truncate the text wi
|
||||
<span class="d-inline-block text-truncate" style="max-width: 150px;">
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
</span>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Text transform
|
||||
|
||||
Transform text in components with text capitalization classes.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<p class="text-lowercase">Lowercased text.</p>
|
||||
<p class="text-uppercase">Uppercased text.</p>
|
||||
<p class="text-capitalize">CapiTaliZed text.</p>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
|
||||
|
||||
@@ -69,9 +74,10 @@ Note how `text-capitalize` only changes the first letter of each word, leaving t
|
||||
|
||||
Quickly change the weight (boldness) of text or italicize text.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<p class="font-weight-bold">Bold text.</p>
|
||||
<p class="font-weight-normal">Normal weight text.</p>
|
||||
<p class="font-weight-light">Light weight text.</p>
|
||||
<p class="font-italic">Italic text.</p>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
@@ -11,18 +11,19 @@ Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `
|
||||
|
||||
With inline elements:
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<span class="align-baseline">baseline</span>
|
||||
<span class="align-top">top</span>
|
||||
<span class="align-middle">middle</span>
|
||||
<span class="align-bottom">bottom</span>
|
||||
<span class="align-text-top">text-top</span>
|
||||
<span class="align-text-bottom">text-bottom</span>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
With table cells:
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<table style="height: 100px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -35,4 +36,5 @@ With table cells:
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Reference in New Issue
Block a user