docs: switch to fenced codeblocks (#31806)

2026-06-17 19:21:23 +03:00 · 2020-10-19 12:56:49 +03:00
parent 48177c946f
commit e6618a6ebb
43 changed files with 494 additions and 446 deletions
@@ -77,7 +77,7 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer

 Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

-{{< highlight scss >}}
+```scss
 // Source mixins

 // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@@ -98,11 +98,11 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
    display: block;
  }
 }
-{{< /highlight >}}
+```

 These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:

-{{< highlight scss >}}
+```scss
 // X-Small devices (portrait phones, less than 576px)
 // No media query for `xs` since this is the default in Bootstrap

@@ -120,13 +120,13 @@ These Sass mixins translate in our compiled CSS using the values declared in our

 // XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
-{{< /highlight >}}
+```

 ### Max-width

 We occasionally use media queries that go in the other direction (the given screen size *or smaller*):

-{{< highlight scss >}}
+```scss
 // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@@ -140,11 +140,11 @@ We occasionally use media queries that go in the other direction (the given scre
    display: block;
  }
 }
-{{< /highlight >}}
+```

 These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example:

-{{< highlight scss >}}
+```scss
 // X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

@@ -162,7 +162,7 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us

 // XX-Large devices (larger desktops)
 // No media query since the xxl breakpoint has no upper bound on its width
-{{< /highlight >}}
+```

 {{< callout warning >}}
 {{< partial "callout-info-mediaqueries-breakpoints.md" >}}
@@ -172,33 +172,33 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us

 There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

-{{< highlight scss >}}
+```scss
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
-{{< /highlight >}}
+```

 For example the `@include media-breakpoint-only(md) { ... }` will result in :

-{{< highlight scss >}}
+```scss
@media (min-width: 768px) and (max-width: 991.98px) { ... }
-{{< /highlight >}}
+```

 ### Between breakpoints

 Similarly, media queries may span multiple breakpoint widths:

-{{< highlight scss >}}
+```scss
@include media-breakpoint-between(md, xl) { ... }
-{{< /highlight >}}
+```

 Which results in:

-{{< highlight scss >}}
+```scss
 // Example
 // Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
-{{< /highlight >}}
+```
@@ -121,33 +121,33 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples

 Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.

-{{< highlight html >}}
+```html
 <div class="container">
  <!-- Content here -->
 </div>
-{{< /highlight >}}
+```

 ## Responsive containers

 Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.

-{{< highlight html >}}
+```html
 <div class="container-sm">100% wide until small breakpoint</div>
 <div class="container-md">100% wide until medium breakpoint</div>
 <div class="container-lg">100% wide until large breakpoint</div>
 <div class="container-xl">100% wide until extra large breakpoint</div>
 <div class="container-xxl">100% wide until extra extra large breakpoint</div>
-{{< /highlight >}}
+```

 ## Fluid containers

 Use `.container-fluid` for a full width container, spanning the entire width of the viewport.

-{{< highlight html >}}
+```html
 <div class="container-fluid">
  ...
 </div>
-{{< /highlight >}}
+```

 ## Sass

@@ -157,7 +157,7 @@ As shown above, Bootstrap generates a series of predefined container classes to

 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.

-{{< highlight scss >}}
+```scss
 // Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
@@ -171,6 +171,6 @@ In addition to customizing the Sass, you can also create your own containers wit
 .custom-container {
  @include make-container();
 }
-{{< /highlight >}}
+```

 For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
@@ -371,7 +371,7 @@ Use these row columns classes to quickly create basic grid layouts or to control

 You can also use the accompanying Sass mixin, `row-cols()`:

-{{< highlight scss >}}
+```scss
 .element {
  // Three columns to start
  @include row-cols(3);
@@ -381,7 +381,7 @@ You can also use the accompanying Sass mixin, `row-cols()`:
    @include row-cols(5);
  }
 }
-{{< /highlight >}}
+```

 ## Nesting

@@ -415,10 +415,10 @@ When using Bootstrap's source Sass files, you have the option of using Sass vari

 Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

-{{< highlight scss >}}
+```scss
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
-{{< /highlight >}}
+```

 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}

@@ -428,7 +428,7 @@ $grid-gutter-width: 1.5rem;

 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

-{{< highlight scss >}}
+```scss
 // Creates a wrapper for a series of columns
@include make-row();

@@ -438,13 +438,13 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS

 // Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
-{{< /highlight >}}
+```

 ### Example usage

 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

-{{< highlight scss >}}
+```scss
 .example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
@@ -477,7 +477,7 @@ You can modify the variables to your own custom values, or just use the mixins w
    @include make-col(4);
  }
 }
-{{< /highlight >}}
+```

 {{< example >}}
 <div class="example-container">
@@ -496,16 +496,16 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus

 The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.

-{{< highlight scss >}}
+```scss
 $grid-columns: 12 !default;
 $grid-gutter-width: 1.5rem !default;
-{{< /highlight >}}
+```

 ### Grid tiers

 Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:

-{{< highlight scss >}}
+```scss
 $grid-breakpoints: (
  xs: 0,
  sm: 480px,
@@ -518,6 +518,6 @@ $container-max-widths: (
  md: 720px,
  lg: 960px
 );
-{{< /highlight >}}
+```

 When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).