docs: switch to fenced codeblocks (#31806)

2026-06-14 18:42:30 +03:00 · 2020-10-19 12:56:49 +03:00
parent 48177c946f
commit e6618a6ebb
43 changed files with 494 additions and 446 deletions
@@ -47,9 +47,9 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})

 If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.

-{{< highlight html >}}
+```html
 <picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>
-{{< /highlight >}}
+```
@@ -31,7 +31,7 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau

 Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).

-{{< highlight scss >}}
+```scss
 $font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
@@ -49,7 +49,7 @@ $font-family-sans-serif:
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-{{< /highlight >}}
+```

 This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.

@@ -437,9 +437,9 @@ The default `cursor` on summary is `text`, so we reset that to `pointer` to conv

 HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.

-{{< highlight html >}}
+```html
 <input type="text" hidden>
-{{< /highlight >}}
+```

 {{< callout warning >}}
 ##### jQuery incompatibility
@@ -134,7 +134,7 @@ Highlight a table row or cell by adding a `.table-active` class.
  </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table">
  <thead>
    ...
@@ -153,7 +153,7 @@ Highlight a table row or cell by adding a `.table-active` class.
    </tr>
  </tbody>
 </table>
-{{< /highlight >}}
+```

 <div class="bd-example">
  <table class="table table-dark">
@@ -187,7 +187,7 @@ Highlight a table row or cell by adding a `.table-active` class.
  </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table table-dark">
  <thead>
    ...
@@ -206,7 +206,7 @@ Highlight a table row or cell by adding a `.table-active` class.
    </tr>
  </tbody>
 </table>
-{{< /highlight >}}
+```

 ## How do the variants and accented tables work?

@@ -289,7 +289,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
  </div>
 </div>

-{{< highlight html >}}
+```html
 <table class="table table-sm table-dark">
  <div class="table-responsive">
    <table class="table align-middle">
@@ -315,7 +315,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
    </table>
  </div>
 </table>
-{{< /highlight >}}
+```

 ## Nesting

@@ -378,7 +378,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
 </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table table-striped">
  <thead>
    ...
@@ -395,7 +395,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
    ...
  </tbody>
 </table>
-{{< /highlight >}}
+```

 ## How nesting works

@@ -442,7 +442,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table">
  <thead class="table-light">
    ...
@@ -451,7 +451,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
    ...
  </tbody>
 </table>
-{{< /highlight >}}
+```

 <div class="bd-example">
 <table class="table">
@@ -486,7 +486,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table">
  <thead class="table-dark">
    ...
@@ -495,7 +495,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
    ...
  </tbody>
 </table>
-{{< /highlight >}}
+```


 ### Table foot
@@ -541,7 +541,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table">
  <thead>
    ...
@@ -553,7 +553,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
    ...
  </tfoot>
 </table>
-{{< /highlight >}}
+```

 ### Captions

@@ -566,7 +566,7 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
  </table>
 </div>

-{{< highlight html >}}
+```html
 <table class="table table-sm">
  <caption>List of users</caption>
  <thead>
@@ -576,7 +576,7 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
    ...
  </tbody>
 </table>
-{{< /highlight >}}
+```

 You can also put the `<caption>` on the top of the table with `.caption-top`.

@@ -687,13 +687,13 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
  </div>
 </div>

-{{< highlight html >}}
+```html
 <div class="table-responsive">
  <table class="table">
    ...
  </table>
 </div>
-{{< /highlight >}}
+```

 ### Breakpoint specific

@@ -69,14 +69,14 @@ All HTML headings, `<h1>` through `<h6>`, are available.
  </tbody>
 </table>

-{{< highlight html >}}
+```html
 <h1>h1. Bootstrap heading</h1>
 <h2>h2. Bootstrap heading</h2>
 <h3>h3. Bootstrap heading</h3>
 <h4>h4. Bootstrap heading</h4>
 <h5>h5. Bootstrap heading</h5>
 <h6>h6. Bootstrap heading</h6>
-{{< /highlight >}}
+```

 `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

@@ -113,14 +113,14 @@ Traditional heading elements are designed to work best in the meat of your page
  <div class="display-6">Display 6</div>
 </div>

-{{< highlight html >}}
+```html
 <h1 class="display-1">Display 1</h1>
 <h1 class="display-2">Display 2</h1>
 <h1 class="display-3">Display 3</h1>
 <h1 class="display-4">Display 4</h1>
 <h1 class="display-5">Display 5</h1>
 <h1 class="display-6">Display 6</h1>
-{{< /highlight >}}
+```

 Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.