From dfafb9a60c5f15d341fc8992542aead014114058 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 19 Jul 2021 16:56:05 +0300 Subject: modal: change `data-dismiss` so that it can be outside of a modal using `bs-target` (#33403) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * change data-dismiss, so can be outside modal, using a bs-target * Update site/content/docs/5.0/components/modal.md Co-authored-by: Gaël Poupard --- js/src/modal.js | 10 ++++++++-- js/tests/unit/modal.spec.js | 29 ++++++++++++++++++++++++++++- site/content/docs/5.0/components/modal.md | 18 ++++++++++++++++++ 3 files changed, 54 insertions(+), 3 deletions(-) diff --git a/js/src/modal.js b/js/src/modal.js index 8dac75265..0e8346d6f 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -62,6 +62,7 @@ const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' const CLASS_NAME_STATIC = 'modal-static' +const SELECTOR = '.modal' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' @@ -130,8 +131,6 @@ class Modal extends BaseComponent { this._setEscapeEvent() this._setResizeEvent() - EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event)) - EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => { if (event.target === this._element) { @@ -436,6 +435,13 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( data.toggle(this) }) +EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_DISMISS, function (event) { + const target = getElementFromSelector(this) || this.closest(SELECTOR) + const modal = Modal.getOrCreateInstance(target) + + modal.hide(event) +}) + /** * ------------------------------------------------------------------------ * jQuery diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index e6ef555e7..86b366001 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -249,7 +249,7 @@ describe('Modal', () => { modal.show() }) - it('should close modal when a click occurred on data-bs-dismiss="modal"', done => { + it('should close modal when a click occurred on data-bs-dismiss="modal" inside modal', done => { fixtureEl.innerHTML = [ ' + +{{< /example >}} + +```js +var exampleModal = document.getElementById('exampleModal') +exampleModal.addEventListener('show.bs.modal', function (event) { + // Button that triggered the modal + var button = event.relatedTarget + // Extract info from data-bs-* attributes + var recipient = button.getAttribute('data-bs-whatever') + // If necessary, you could initiate an AJAX request here + // and then do the updating in a callback. + // + // Update the modal's content. + var modalTitle = exampleModal.querySelector('.modal-title') + var modalBodyInput = exampleModal.querySelector('.modal-body input') + + modalTitle.textContent = 'New message to ' + recipient + modalBodyInput.value = recipient +}) +``` + +### Toggle between modals + +Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals. + +{{< example >}} + + +Open first modal +{{< /example >}} + +### Change animation + +The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation. + +If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`. + +### Remove animation + +For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup. + +```html + +``` + +### Dynamic heights + +If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears. + +### Accessibility + +Be sure to add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don't need to add `role="dialog"` since we already add it via JavaScript. + +### Embedding YouTube videos + +Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information. + +## Optional sizes + +Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SizeClassModal max-width
Small.modal-sm300px
DefaultNone500px
Large.modal-lg800px
Extra large.modal-xl1140px
+ +Our default modal without modifier class constitutes the "medium" size modal. + +
+ + + +
+ +```html + + + +``` + + + + + + + +## Fullscreen Modal + +Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassAvailability
.modal-fullscreenAlways
.modal-fullscreen-sm-downBelow 576px
.modal-fullscreen-md-downBelow 768px
.modal-fullscreen-lg-downBelow 992px
.modal-fullscreen-xl-downBelow 1200px
.modal-fullscreen-xxl-downBelow 1400px
+ +
+ + + + + + +
+ +```html + + +``` + + + + + + + + + + + + + +## Sass + +### Variables + +{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} + +### Loop + +[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. + +{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}} + +## Usage + +The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. + +### Via data attributes + +#### Toggle + +Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle. + +```html + +``` + +#### Dismiss + +{{% js-dismiss "modal" %}} + +{{< callout warning >}} +While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk. +{{< /callout >}} + +### Via JavaScript + +Create a modal with a single line of JavaScript: + +```js +var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) +``` + +### Options + +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
backdropboolean or the string 'static'trueIncludes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboardbooleantrueCloses the modal when escape key is pressed
focusbooleantruePuts the focus on the modal when initialized.
+ +### Methods + +{{< callout danger >}} +{{< partial "callout-danger-async-methods.md" >}} +{{< /callout >}} + +#### Passing options + +Activates your content as a modal. Accepts an optional options `object`. + +```js +var myModal = new bootstrap.Modal(document.getElementById('myModal'), { + keyboard: false +}) +``` + +#### toggle + +Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). + +```js +myModal.toggle() +``` + +#### show + +Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). + +```js +myModal.show() +``` + +Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). + +```js +var modalToggle = document.getElementById('toggleMyModal') // relatedTarget +myModal.show(modalToggle) +``` + +#### hide + +Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). + +```js +myModal.hide() +``` + +#### handleUpdate + +Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). + +```js +myModal.handleUpdate() +``` + +#### dispose + +Destroys an element's modal. (Removes stored data on the DOM element) + +```js +myModal.dispose() +``` + +#### getInstance + +*Static* method which allows you to get the modal instance associated with a DOM element + +```js +var myModalEl = document.getElementById('myModal') +var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance +``` + +#### getOrCreateInstance + +*Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var myModalEl = document.querySelector('#myModal') +var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance +``` + +### Events + +Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the ` + +```html +
+ + + + ... + + + + + ... + + + ... + + + + + + + + +
......This cell is aligned to the top....
+
+``` + +## Nesting + +Border styles, active styles, and table variants are not inherited by nested tables. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
+
3Larrythe Bird@twitter
+
+ +```html + + + ... + + + ... + + + + ... + +
+ + ... +
+
+``` + +## How nesting works + +To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables. + +Note that if you add ``s as direct children of a table, those `` will be wrapped in a `` by default, thus making our selectors work as intended. + +## Anatomy + +### Table head + +Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+ +```html + + + ... + + + ... + +
+``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+ +```html + + + ... + + + ... + +
+``` + +### Table foot + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
FooterFooterFooterFooter
+
+ +```html + + + ... + + + ... + + + ... + +
+``` + +### Captions + +A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. + +
+ + + {{< partial "table-content.html" >}} +
List of users
+
+ +```html + + + + ... + + + ... + +
List of users
+``` + +You can also put the `` on the top of the table with `.caption-top`. + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+{{< /example >}} + +## Responsive tables + +Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`. + +{{< callout warning >}} +##### Vertical clipping/truncation + +Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. +{{< /callout >}} + +### Always responsive + +Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
+
+
+ +```html +
+ + ... +
+
+``` + +### Breakpoint specific + +Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. + +**These tables may appear broken until their responsive styles apply at specific viewport widths.** + +{{< tables.inline >}} +{{ range $.Site.Data.breakpoints }} +{{ if not (eq . "xs") }} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
+
+
+{{ end -}} +{{- end -}} +{{< /tables.inline >}} + +{{< highlight html >}} +{{< tables.inline >}} +{{- range $.Site.Data.breakpoints -}} +{{- if not (eq . "xs") }} +
+ + ... +
+
+{{ end -}} +{{- end -}} +{{< /tables.inline >}} +{{< /highlight >}} + +## Sass + +### Variables + +{{< scss-docs name="table-variables" file="scss/_variables.scss" >}} + +### Loop + +{{< scss-docs name="table-loop" file="scss/_variables.scss" >}} + +### Customizing + +- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.1/content/typography.md new file mode 100644 index 000000000..7d41f04de --- /dev/null +++ b/site/content/docs/5.1/content/typography.md @@ -0,0 +1,320 @@ +--- +layout: docs +title: Typography +description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. +group: content +toc: true +--- + +## Global settings + +Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}). + +- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device. +- For a more inclusive and accessible type scale, we use the browser's default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. +- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. +- Set the global link color via `$link-color`. +- Use `$body-bg` to set a `background-color` on the `` (`#fff` by default). + +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. + +## Headings + +All HTML headings, `

` through `

`, are available. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeadingExample
+ {{< markdown >}}`

`{{< /markdown >}} +
h1. Bootstrap heading
+ {{< markdown >}}`

`{{< /markdown >}} +
h2. Bootstrap heading
+ {{< markdown >}}`

`{{< /markdown >}} +
h3. Bootstrap heading
+ {{< markdown >}}`

`{{< /markdown >}} +
h4. Bootstrap heading
+ {{< markdown >}}`
`{{< /markdown >}} +
h5. Bootstrap heading
+ {{< markdown >}}`
`{{< /markdown >}} +
h6. Bootstrap heading
+ +```html +

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+``` + +`.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. + +{{< example >}} +

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+

h5. Bootstrap heading

+

h6. Bootstrap heading

+{{< /example >}} + +### Customizing headings + +Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. + +{{< example >}} +

+ Fancy display heading + With faded secondary text +

+{{< /example >}} + +## Display headings + +Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. + +
+
Display 1
+
Display 2
+
Display 3
+
Display 4
+
Display 5
+
Display 6
+
+ +```html +

Display 1

+

Display 2

+

Display 3

+

Display 4

+

Display 5

+

Display 6

+``` + +Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`. + +{{< scss-docs name="display-headings" file="scss/_variables.scss" >}} + +## Lead + +Make a paragraph stand out by adding `.lead`. + +{{< example >}} +

+ This is a lead paragraph. It stands out from regular paragraphs. +

+{{< /example >}} + +## Inline text elements + +Styling for common inline HTML5 elements. + +{{< example >}} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined.

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+{{< /example >}} + +Beware that those tags should be used for semantic purpose: + +- `` represents text which is marked or highlighted for reference or notation purposes. +- `` represents side-comments and small print, like copyright and legal text. +- `` represents element that are no longer relevant or no longer accurate. +- `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. + +If you want to style your text, you should use the following classes instead: + +- `.mark` will apply the same styles as ``. +- `.small` will apply the same styles as ``. +- `.text-decoration-underline` will apply the same styles as ``. +- `.text-decoration-line-through` will apply the same styles as ``. + +While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc. + +## Text utilities + +Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}). + +## Abbreviations + +Stylized implementation of HTML's `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. + +Add `.initialism` to an abbreviation for a slightly smaller font-size. + +{{< example >}} +

attr

+

HTML

+{{< /example >}} + +## Blockquotes + +For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. + +{{< example >}} +
+

A well-known quote, contained in a blockquote element.

+
+{{< /example >}} + +### Naming a source + +The HTML spec requires that blockquote attribution be placed outside the `
`. When providing attribution, wrap your `
` in a `
` and use a `
` or a block level element (e.g., `

`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well. + +{{< example >}} +

+
+

A well-known quote, contained in a blockquote element.

+
+ +
+{{< /example >}} + +### Alignment + +Use text utilities as needed to change the alignment of your blockquote. + +{{< example >}} +
+
+

A well-known quote, contained in a blockquote element.

+
+ +
+{{< /example >}} + +{{< example >}} +
+
+

A well-known quote, contained in a blockquote element.

+
+ +
+{{< /example >}} + +## Lists + +### Unstyled + +Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well. + +{{< example >}} +
    +
  • This is a list.
  • +
  • It appears completely unstyled.
  • +
  • Structurally, it's still a list.
  • +
  • However, this style only applies to immediate child elements.
  • +
  • Nested lists: +
      +
    • are unaffected by this style
    • +
    • will still show a bullet
    • +
    • and have appropriate left margin
    • +
    +
  • +
  • This may still come in handy in some situations.
  • +
+{{< /example >}} + +### Inline + +Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. + +{{< example >}} +
    +
  • This is a list item.
  • +
  • And another one.
  • +
  • But they're displayed inline.
  • +
+{{< /example >}} + +### Description list alignment + +Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis. + +{{< example >}} +
+
Description lists
+
A description list is perfect for defining terms.
+ +
Term
+
+

Definition for the term.

+

And some more placeholder definition text.

+
+ +
Another term
+
This definition is short, so no extra paragraphs or anything.
+ +
Truncated term is truncated
+
This can be useful when space is tight. Adds an ellipsis at the end.
+ +
Nesting
+
+
+
Nested definition list
+
I heard you like definition lists. Let me put a definition list inside your definition list.
+
+
+
+{{< /example >}} + +## Responsive font sizes + +In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. + +## Sass + +### Variables + +Headings have some dedicated variables for sizing and spacing. + +{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}} + +Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables. + +{{< scss-docs name="type-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md new file mode 100644 index 000000000..63e5d19e6 --- /dev/null +++ b/site/content/docs/5.1/customize/color.md @@ -0,0 +1,150 @@ +--- +layout: docs +title: Color +description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project. +group: customize +toc: true +--- + +## Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file. + +
+ {{< theme-colors.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+
{{ .name | title }}
+
+ {{ end -}} + {{< /theme-colors.inline >}} +
+ +All these colors are available as a Sass map, `$theme-colors`. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. + +## All colors + +All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors). + +Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black. + +
+ {{< theme-colors.inline >}} + {{- range $color := $.Site.Data.colors }} + {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }} +
+
+ ${{ $color.name }} + {{ $color.hex }} +
+ {{ range (seq 100 100 900) }} +
${{ $color.name }}-{{ . }}
+ {{ end }} +
+ {{ end -}} + {{ end -}} + +
+
+ $gray-500 + #adb5bd +
+ {{- range $.Site.Data.grays }} +
$gray-{{ .name }}
+ {{ end -}} +
+ {{< /theme-colors.inline >}} + +
+
+ $black + #000 +
+
+ $white + #fff +
+
+
+ +### Notes on Sass + +Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function. + +Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB). + +Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code. + +## Color Sass maps + +Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values. + +- `$colors` lists all our available base (`500`) colors +- `$theme-colors` lists all semantically named theme colors (shown below) +- `$grays` lists all tints and shades of gray + +Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: + +{{< scss-docs name="colors-map" file="scss/_variables.scss" >}} + +Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. + +### Example + +Here's how you can use these in your Sass: + +```scss +.alpha { color: $purple; } +.beta { + color: $yellow-300; + background-color: $indigo-900; +} +``` + +[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values. + +## Generating utilities + +Added in v5.1.0 + +Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0. + +1. To start, make sure you've imported our functions, variables, mixins, and utilities. +2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map. +3. Merge this new combined map to extend any utility with a `{color}-{level}` class name. + +Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps. + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; + +$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans); + +$utilities: map-merge( + $utilities, + ( + "color": map-merge( + map-get($utilities, "color"), + ( + values: map-merge( + map-get(map-get($utilities, "color"), "values"), + ( + $all-colors + ), + ), + ), + ), + ) +); + +@import "bootstrap/scss/utilities/api"; +``` + +This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well. diff --git a/site/content/docs/5.1/customize/components.md b/site/content/docs/5.1/customize/components.md new file mode 100644 index 000000000..b512a9036 --- /dev/null +++ b/site/content/docs/5.1/customize/components.md @@ -0,0 +1,77 @@ +--- +layout: docs +title: Components +description: Learn how and why we build nearly all our components responsively and with base and modifier classes. +group: customize +toc: true +--- + +## Base classes + +Bootstrap's components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like `.btn`, and then group individual styles for each variant into modifier classes, like `.btn-primary` or `.btn-success`. + +To build our modifier classes, we use Sass's `@each` loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops. + +Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to customize these loops and extend Bootstrap's base-modifier approach to your own code. + +## Modifiers + +Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. + +Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components. + +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} + +{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}} + +## Responsive + +These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. + +{{< scss-docs name="responsive-breakpoints" file="scss/_dropdown.scss" >}} + +Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. + +{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} + +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" >}}). + +## Creating your own + +We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We've extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes. + +
+
+ This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes. +
+
+ +```html +
...
+``` + +In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class. + +```scss +// Base class +.callout {} + +// Modifier classes +.callout-info {} +.callout-warning {} +.callout-danger {} +``` + +For the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family: + +{{< callout info >}} +**This is an info callout.** Example text to show it in action. +{{< /callout >}} + +{{< callout warning >}} +**This is a warning callout.** Example text to show it in action. +{{< /callout >}} + +{{< callout danger >}} +**This is a danger callout.** Example text to show it in action. +{{< /callout >}} diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md new file mode 100644 index 000000000..079f9ad23 --- /dev/null +++ b/site/content/docs/5.1/customize/css-variables.md @@ -0,0 +1,54 @@ +--- +layout: docs +title: CSS variables +description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development. +group: customize +toc: true +--- + +Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping. + +**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS. + +## Root variables + +Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files. + +```css +{{< root.inline >}} +{{- $css := readFile "dist/css/bootstrap.css" -}} +{{- $match := findRE ":root {([^}]*)}" $css 1 -}} + +{{- if (eq (len $match) 0) -}} +{{- errorf "Got no matches for :root in %q!" $.Page.Path -}} +{{- end -}} + +{{- index $match 0 -}} + +{{< /root.inline >}} +``` + +## Component variables + +We're also beginning to make use of custom properties as local variables for various components. This way we can reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. + +Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). + +We're also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future. + +## Examples + +CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables. + +```css +body { + font: 1rem/1.5 var(--bs-font-sans-serif); +} +a { + color: var(--bs-blue); +} +``` + +## Grid breakpoints + +While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript. diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md new file mode 100644 index 000000000..29b152154 --- /dev/null +++ b/site/content/docs/5.1/customize/optimize.md @@ -0,0 +1,93 @@ +--- +layout: docs +title: Optimize +description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs. +group: customize +toc: true +--- + +## Lean Sass imports + +When using Sass in your asset pipeline, make sure you optimize Bootstrap by only `@import`ing the components you need. Your largest optimizations will likely come from the `Layout & Components` section of our `bootstrap.scss`. + +{{< scss-docs name="import-stack" file="scss/bootstrap.scss" >}} + + +If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file. + +## Lean JavaScript + +Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript. + +For instance, assuming you're using your own JavaScript bundler like Webpack or Rollup, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript: + +```js +// Import just what we need + +// import 'bootstrap/js/dist/alert'; +// import 'bootstrap/js/dist/button'; +// import 'bootstrap/js/dist/carousel'; +// import 'bootstrap/js/dist/collapse'; +// import 'bootstrap/js/dist/dropdown'; +import 'bootstrap/js/dist/modal'; +// import 'bootstrap/js/dist/offcanvas'; +// import 'bootstrap/js/dist/popover'; +// import 'bootstrap/js/dist/scrollspy'; +// import 'bootstrap/js/dist/tab'; +// import 'bootstrap/js/dist/toast'; +// import 'bootstrap/js/dist/tooltip'; +``` + +This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file. + +{{< callout info >}} +### Default Exports + +Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following: + +```js +import Modal from 'bootstrap/js/dist/modal' + +const modal = new Modal(document.getElementById('myModal')) +``` +{{< /callout >}} + +## Autoprefixer .browserslistrc + +Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version. + +## Unused CSS + +_Help wanted with this section, please consider opening a PR. Thanks!_ + +While we don't have a prebuilt example for using [PurgeCSS](https://github.com/FullHuman/purgecss) with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options: + +- +- + +Lastly, this [CSS Tricks article on unused CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/) shows how to use PurgeCSS and other similar tools. + +## Minify and gzip + +Whenever possible, be sure to compress all the code you serve to your visitors. If you're using Bootstrap dist files, try to stick to the minified versions (indicated by the `.min.css` and `.min.js` extensions). If you're building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS. + +## Nonblocking files + +While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough. + +If you are using a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. + +You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes. + +This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles. + +If you want to learn more about this, there are already a lot of great articles about it: + +- +- + +## Always use HTTPS + +Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and [there is no such thing as non-sensitive web traffic](https://https.cio.gov/everything/). The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs. + +Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you'll be sending users [mixed active content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content), leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you're getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections. diff --git a/site/content/docs/5.1/customize/options.md b/site/content/docs/5.1/customize/options.md new file mode 100644 index 000000000..0d846270b --- /dev/null +++ b/site/content/docs/5.1/customize/options.md @@ -0,0 +1,29 @@ +--- +layout: docs +title: Options +description: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior. +group: customize +--- + +Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. + +You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file. + +{{< bs-table "table text-start" >}} +| Variable | Values | Description | +| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). | +| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | +| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | +| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | +| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | +| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | +| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | +| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | +| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). | +| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | +| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). | +| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | +| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | +{{< /bs-table >}} diff --git a/site/content/docs/5.1/customize/overview.md b/site/content/docs/5.1/customize/overview.md new file mode 100644 index 000000000..03b4bff33 --- /dev/null +++ b/site/content/docs/5.1/customize/overview.md @@ -0,0 +1,51 @@ +--- +layout: docs +title: Customize +description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more. +group: customize +toc: false +aliases: "/docs/5.1/customize/" +sections: + - title: Sass + description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions. + - title: Options + description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences. + - title: Color + description: Learn about and customize the color systems that support the entire toolkit. + - title: Components + description: Learn how we build nearly all our components responsively and with base and modifier classes. + - title: CSS variables + description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development. + - title: Optimize + description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience. +--- + +## Overview + +There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you're using, browser support, and more. + +Our two preferred methods are: + +1. Using Bootstrap [via package manager]({{< docsref "/getting-started/download#package-managers" >}}) so you can use and extend our source files. +2. Using Bootstrap's compiled distribution files or [jsDelivr]({{< docsref "/getting-started/download#cdn-via-jsdelivr" >}}) so you can add onto or override Bootstrap's styles. + +While we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]({{< docsref "/customize/sass" >}}). + +For those who want to use the distribution files, review the [getting started page]({{< docsref "/getting-started/introduction" >}}) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use. + +As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap. + +## CSPs and embedded SVGs + +Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict CSP configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options. + +- [Accordion]({{< docsref "/components/accordion" >}}) +- [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals) +- [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}}) +- [Form switches]({{< docsref "/forms/checks-radios#switches" >}}) +- [Form validation icons]({{< docsref "/forms/validation#server-side" >}}) +- [Select menus]({{< docsref "/forms/select" >}}) +- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}}) +- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}}) + +Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary. diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md new file mode 100644 index 000000000..137f1cfd8 --- /dev/null +++ b/site/content/docs/5.1/customize/sass.md @@ -0,0 +1,303 @@ +--- +layout: docs +title: Sass +description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project. +group: customize +toc: true +--- + +Utilize our source Sass files to take advantage of variables, maps, mixins, and more. + +## File structure + +Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this: + +```text +your-project/ +├── scss +│ └── custom.scss +└── node_modules/ + └── bootstrap + ├── js + └── scss +``` + +If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own. + +```text +your-project/ +├── scss +│ └── custom.scss +└── bootstrap/ + ├── js + └── scss +``` + +## Importing + +In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. + +```scss +// Custom.scss +// Option A: Include all of Bootstrap + +// Include any default variable overrides here (though functions won't be available) + +@import "../node_modules/bootstrap/scss/bootstrap"; + +// Then add additional custom code here +``` + +```scss +// Custom.scss +// Option B: Include parts of Bootstrap + +// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) +@import "../node_modules/bootstrap/scss/functions"; + +// 2. Include any default variable overrides here + +// 3. Include remainder of required Bootstrap stylesheets +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// 4. Include any optional Bootstrap CSS as needed +@import "../node_modules/bootstrap/scss/utilities"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +@import "../node_modules/bootstrap/scss/images"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/helpers"; + +// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss` +@import "../node_modules/bootstrap/scss/utilities/api"; + +// 6. Add additional custom code here +``` + +With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. + +## Variable defaults + +Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. + +You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. + +Variable overrides must come after our functions are imported, but before the rest of the imports. + +Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: + +```scss +// Required +@import "../node_modules/bootstrap/scss/functions"; + +// Default variable overrides +$body-bg: #000; +$body-color: #111; + +// Required +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// Optional Bootstrap components here +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +// etc +``` + +Repeat as necessary for any variable in Bootstrap, including the global options below. + +{{< callout info >}} +{{< partial "callout-info-npm-starter.md" >}} +{{< /callout >}} + +## Maps and loops + +Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. + +Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult. + +### Modify map + +All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: + +```scss +$primary: #0074d9; +$danger: #ff4136; +``` + +Later on, these variables are set in Bootstrap's `$theme-colors` map: + +```scss +$theme-colors: ( + "primary": $primary, + "danger": $danger +); +``` + +### Add to map + +Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`. + +```scss +// Create your own map +$custom-colors: ( + "custom-color": #900 +); + +// Merge the maps +$theme-colors: map-merge($theme-colors, $custom-colors); +``` + +### Remove from map + +To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options: + +```scss +// Required +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +$theme-colors: map-remove($theme-colors, "info", "light", "dark"); + +// Optional +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +// etc +``` + +## Required keys + +Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used. + +For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values. + +## Functions + +### Colors + +Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`. + +```scss +.custom-element { + color: $gray-100; + background-color: $dark; +} +``` + +You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. + +{{< scss-docs name="color-functions" file="scss/_functions.scss" >}} + +In practice, you'd call the function and pass in the color and weight parameters. + +```scss +.custom-element { + color: tint-color($primary, 10%); +} + +.custom-element-2 { + color: shade-color($danger, 30%); +} +``` + +### Color contrast + +In order to meet [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html), authors **must** provide [a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast), with very few exceptions. + +An additional function we include in Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. + +For example, to generate color swatches from our `$theme-colors` map: + +```scss +@each $color, $value in $theme-colors { + .swatch-#{$color} { + color: color-contrast($value); + } +} +``` + +It can also be used for one-off contrast needs: + +```scss +.custom-element { + color: color-contrast(#000); // returns `color: #fff` +} +``` + +You can also specify a base color with our color map functions: + +```scss +.custom-element { + color: color-contrast($dark); // returns `color: #fff` +} +``` + +### Escape SVG + +We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted. + +### Add and Subtract functions + +We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct. + +Example where the calc is valid: + +```scss +$border-radius: .25rem; +$border-width: 1px; + +.element { + // Output calc(.25rem - 1px) is valid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output the same calc(.25rem - 1px) as above + border-radius: subtract($border-radius, $border-width); +} +``` + +Example where the calc is invalid: + +```scss +$border-radius: .25rem; +$border-width: 0; + +.element { + // Output calc(.25rem - 0) is invalid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output .25rem + border-radius: subtract($border-radius, $border-width); +} +``` + +## Mixins + +Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project. + +### Color schemes + +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. + +{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} + +```scss +.custom-element { + @include color-scheme(dark) { + // Insert dark mode styles here + } + + @include color-scheme(custom-named-scheme) { + // Insert custom color scheme styles here + } +} +``` diff --git a/site/content/docs/5.1/examples/.stylelintrc b/site/content/docs/5.1/examples/.stylelintrc new file mode 100644 index 000000000..dc76dedbd --- /dev/null +++ b/site/content/docs/5.1/examples/.stylelintrc @@ -0,0 +1,15 @@ +{ + "extends": [ + "stylelint-config-twbs-bootstrap/css" + ], + "rules": { + "at-rule-no-vendor-prefix": null, + "comment-empty-line-before": null, + "media-feature-name-no-vendor-prefix": null, + "property-blacklist": null, + "property-no-vendor-prefix": null, + "selector-no-qualifying-type": null, + "selector-no-vendor-prefix": null, + "value-no-vendor-prefix": null + } +} diff --git a/site/content/docs/5.1/examples/_index.md b/site/content/docs/5.1/examples/_index.md new file mode 100644 index 000000000..3d5bfab2f --- /dev/null +++ b/site/content/docs/5.1/examples/_index.md @@ -0,0 +1,36 @@ +--- +layout: single +title: Examples +description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. +aliases: "/examples/" +--- + +{{< list-examples.inline >}} +{{ range $entry := $.Site.Data.examples -}} +

{{ $entry.category }}

+

{{ $entry.description }}

+ {{ if eq $entry.category "RTL" -}} +
+

The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we'd love to get your insights.

+
+ {{ end -}} + + {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}
{{ end }} +
+ + +

{{ $example.name }}

+
+

{{ $example.description }}

+
+ {{ if (eq (add $i 1) $len) }}
{{ end }} + {{ end -}} +{{ end -}} +{{< /list-examples.inline >}} diff --git a/site/content/docs/5.1/examples/album-rtl/index.html b/site/content/docs/5.1/examples/album-rtl/index.html new file mode 100644 index 000000000..3408056bc --- /dev/null +++ b/site/content/docs/5.1/examples/album-rtl/index.html @@ -0,0 +1,209 @@ +--- +layout: examples +title: مثال الألبوم +direction: rtl +--- + +
+ + +
+ +
+ +
+
+
+

مثال الألبوم

+

وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.

+

+ الدعوة الرئيسية للعمل + عمل ثانوي +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.1/examples/album/index.html b/site/content/docs/5.1/examples/album/index.html new file mode 100644 index 000000000..2d25d726a --- /dev/null +++ b/site/content/docs/5.1/examples/album/index.html @@ -0,0 +1,208 @@ +--- +layout: examples +title: Album example +--- + +
+ + +
+ +
+ +
+
+
+

Album example

+

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

+

+ Main call to action + Secondary action +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.1/examples/blog-rtl/index.html b/site/content/docs/5.1/examples/blog-rtl/index.html new file mode 100644 index 000000000..d3b732c64 --- /dev/null +++ b/site/content/docs/5.1/examples/blog-rtl/index.html @@ -0,0 +1,206 @@ +--- +layout: examples +title: قالب المدونة +direction: rtl +extra_css: + - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" + - "../blog/blog.rtl.css" +include_js: false +--- + + + +
+
+
+

عنوان تدوينة مميزة أطول

+

عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.

+

أكمل القراءة...

+
+
+ +
+
+
+
+ العالم +

مشاركة مميزة

+
نوفمبر 12
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

+ أكمل القراءة +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} +
+
+
+
+
+
+ التصميم +

عنوان الوظيفة

+
نوفمبر 11
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

+ أكمل القراءة +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} +
+
+
+
+ +
+
+

+ من Firehose +

+ +
+

مثال على تدوينة

+ + +

تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.

+
+

يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.

+
+

تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية

+
+

تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.

+

عنوان

+

تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!

+

عنوان فرعي

+

ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.

+
Example code block
+

وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.

+

عنوان فرعي

+

بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.

+

يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:

+
    +
  • البروتينات
  • +
  • الكربوهيدرات
  • +
  • الدهون
  • +
+

وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:

+
    +
  1. الكربون
  2. +
  3. الهيدروجين
  4. +
  5. الأكسجين
  6. +
  7. النيتروجين
  8. +
+

ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.

+
+ +
+

تدوينة أخرى

+ + +

في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.

+
+

تم تصنيع اللحوم بأنواع عديدة

+
+

إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.

+

وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.

+
+ +
+

ميزة جديدة

+ + +

كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).

+

وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.

+

وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:

+
    +
  • توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء
  • +
  • تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة
  • +
  • تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م
  • +
+

فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!

+
+ + + +
+ +
+
+
+

حول

+

أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.

+
+ + + +
+

في مكان آخر

+
    +
  1. GitHub
  2. +
  3. Twitter
  4. +
  5. Facebook
  6. +
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.1/examples/blog/blog.css b/site/content/docs/5.1/examples/blog/blog.css new file mode 100644 index 000000000..437a540f6 --- /dev/null +++ b/site/content/docs/5.1/examples/blog/blog.css @@ -0,0 +1,103 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 0 3px 3px 0; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} +.blog-pagination > .btn { + border-radius: 2rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #727272; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/site/content/docs/5.1/examples/blog/blog.rtl.css b/site/content/docs/5.1/examples/blog/blog.rtl.css new file mode 100644 index 000000000..35eac731f --- /dev/null +++ b/site/content/docs/5.1/examples/blog/blog.rtl.css @@ -0,0 +1,103 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: Amiri, Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: Amiri, Georgia, "Times New Roman", serif; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 3px 0 0 3px; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} +.blog-pagination > .btn { + border-radius: 2rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #727272; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/site/content/docs/5.1/examples/blog/index.html b/site/content/docs/5.1/examples/blog/index.html new file mode 100644 index 000000000..13c013b2c --- /dev/null +++ b/site/content/docs/5.1/examples/blog/index.html @@ -0,0 +1,258 @@ +--- +layout: examples +title: Blog Template +extra_css: + - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" + - "blog.css" +include_js: false +--- + +
+
+
+
+ Subscribe +
+
+ +
+ +
+
+ + +
+ +
+
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

Featured post

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+
+
+ Design +

Post title

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+ +
+
+

+ From the Firehose +

+ +
+

Sample blog post

+ + +

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Blockquotes

+

This is an example blockquote in action:

+
+

Quoted text goes here.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example lists

+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

+
    +
  • First list item
  • +
  • Second list item with a longer description
  • +
  • Third list item to close it out
  • +
+

And this is an ordered list:

+
    +
  1. First list item
  2. +
  3. Second list item with a longer description
  4. +
  5. Third list item to close it out
  6. +
+

And this is a definiton list:

+
+
HyperText Markup Language (HTML)
+
The language used to describe and define the content of a Web page
+
Cascading Style Sheets (CSS)
+
Used to describe the appearance of Web content
+
JavaScript (JS)
+
The programming language used to build advanced Web sites and applications
+
+

Inline HTML elements

+

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

+
    +
  • To bold text, use <strong>.
  • +
  • To italicize text, use <em>.
  • +
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
  • +
  • Citations, like — Mark Otto, should use <cite>.
  • +
  • Deleted text should use <del> and inserted text should use <ins>.
  • +
  • Superscript text uses <sup> and subscript text uses <sub>.
  • +
+

Most of these elements are styled by browsers with few modifications on our part.

+

Heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Sub-heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
Example code block
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

Another blog post

+ + +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
+

Longer quote goes here, maybe with some emphasized text in the middle of it.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example table

+

And don't forget about tables in these posts:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUpvotesDownvotes
Alice1011
Bob43
Charlie79
Totals2123
+ +

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

New feature

+ + +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
    +
  • First list item
  • +
  • Second list item with a longer description
  • +
  • Third list item to close it out
  • +
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ + + +
+ +
+
+
+

About

+

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

+
+ + + +
+

Elsewhere

+
    +
  1. GitHub
  2. +
  3. Twitter
  4. +
  5. Facebook
  6. +
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.1/examples/carousel-rtl/index.html b/site/content/docs/5.1/examples/carousel-rtl/index.html new file mode 100644 index 000000000..4e0285686 --- /dev/null +++ b/site/content/docs/5.1/examples/carousel-rtl/index.html @@ -0,0 +1,167 @@ +--- +layout: examples +title: قالب شرائح العرض +direction: rtl +extra_css: + - "../carousel/carousel.rtl.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

عنوان

+

تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.

+

عرض التفاصيل

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

عنوان آخر

+

إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.

+

عرض التفاصيل

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

عنوان ثالث لتأكيد المعلومة

+

بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.

+

عرض التفاصيل

+
+
+ + + + +
+ +
+
+

العنوان الأول المميز. سيذهل عقلك.

+

وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

أوه نعم، هذا جيد. شاهد بنفسك.

+

عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

وأخيرًا، هذا. كش ملك.

+

إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/5.1/examples/carousel/carousel.css b/site/content/docs/5.1/examples/carousel/carousel.css new file mode 100644 index 000000000..f91faec76 --- /dev/null +++ b/site/content/docs/5.1/examples/carousel/carousel.css @@ -0,0 +1,93 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} +.carousel-item > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing h2 { + font-weight: 400; +} +/* rtl:begin:ignore */ +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} +/* rtl:end:ignore */ + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + /* rtl:remove */ + letter-spacing: -.05rem; +} + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/5.1/examples/carousel/carousel.rtl.css b/site/content/docs/5.1/examples/carousel/carousel.rtl.css new file mode 100644 index 000000000..853640b97 --- /dev/null +++ b/site/content/docs/5.1/examples/carousel/carousel.rtl.css @@ -0,0 +1,89 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} +.carousel-item > img { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing h2 { + font-weight: 400; +} +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; +} + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/5.1/examples/carousel/index.html b/site/content/docs/5.1/examples/carousel/index.html new file mode 100644 index 000000000..da5f3ab7a --- /dev/null +++ b/site/content/docs/5.1/examples/carousel/index.html @@ -0,0 +1,166 @@ +--- +layout: examples +title: Carousel Template +extra_css: + - "carousel.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

Heading

+

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

Heading

+

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} +

Heading

+

And lastly this, the third column of representative placeholder content.

+

View details »

+
+
+ + + + +
+ +
+
+

First featurette heading. It’ll blow your mind.

+

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

Oh yeah, it’s that good. See for yourself.

+

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

And lastly, this one. Checkmate.

+

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

+
+
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html new file mode 100644 index 000000000..b83e41dd6 --- /dev/null +++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html @@ -0,0 +1,1605 @@ +--- +layout: examples +title: ورقة الغش +extra_css: + - "../cheatsheet/cheatsheet.rtl.css" +extra_js: + - src: "../cheatsheet/cheatsheet.js" +body_class: "bg-light" +direction: rtl +--- + +
+ +
+ +
+
+

المحتوى

+ +
+
+

النصوص

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +

العرض 1

+

العرض 2

+

العرض 3

+

العرض 4

+

العرض 5

+

العرض 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

عنوان 1

+

عنوان 2

+

عنوان 3

+

عنوان 4

+

عنوان 5

+

عنوان 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

يمكنك استخدام تصنيف mark لتحديد نص.

+

من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.

+

من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.

+

من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.

+

سيتم عرض النص في هذا السطر كما وتحته خط.

+

من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.

+

هذا السطر يحوي نص عريض.

+

هذا السطر يحوي نص مائل.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

إقتباس مبهر، موضوع في عنصر blockquote

+
شخص مشهور في عنوان المصدر
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • هذه قائمة عناصر.
  • +
  • بالرغم من أنها مصممة كي لا تظهر كذلك.
  • +
  • إلا أنها مجهزة كـ قائمة خلف الكواليس
  • +
  • هذا التصميم ينطبق فقد على القائمة الرئيسية
  • +
  • القوائم الفرعية +
      +
    • لا تتأثر بهذا التصميم
    • +
    • فهي تظهر عليها علامات الترقيم
    • +
    • وتحتوي على مساحة فارغة بجوارها
    • +
    +
  • +
  • قد يكون هذا التصميم مفيدًا في بعض الأحيان.
  • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • هذا عنصر في قائمة.
  • +
  • وهذا أيضًا.
  • +
  • لكنهم يظهرون متجاورين.
  • +
+ {{< /example >}} +
+
+
+ + +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}} + {{< /example >}} +
+
+
+
+

الجداول

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةالاسم المستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةالاسم المستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
Classعنوانعنوان
Defaultخليةخلية
{{ .name | title }}خليةخلية
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةالاسم المستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

النماذج البيانية

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
شرح للصورة أعلاه.
+
+ {{< /example >}} +
+
+
+ +
+

النماذج

+ +
+
+

نظرة عامة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.
+
+
+ + +
+
+ + +
+
+ أزرار الاختيار الأحادي +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

الحقول المعطلة

+ }}#disabled-forms">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ أزرار اختيار أحادي معطلين +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+ + +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

مجموعة الإدخال

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+ أنا اسمي + +
+
+ + وغيرها +
+ +
+ + https://example.com/users/ +
+
+ .00 + + $ +
+
+ مع textarea + +
+ {{< /example >}} +
+
+
+
+

الحقول ذوي العناوين العائمة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

التحقق

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ يبدو صحيحًا! +
+
+
+ + +
+ يبدو صحيحًا! +
+
+
+ +
+ + @ +
+ يرجى اختيار اسم مستخدم. +
+
+
+
+ + +
+ يرجى إدخال مدينة صحيحة. +
+
+
+ + +
+ يرجى اختيار ولاية صحيحة. +
+
+
+ + +
+ يرجى إدخال رمز بريدي صحيح. +
+
+
+
+ + +
+ تجب الموافقة قبل إرسال النموذج. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

العناصر

+ +
+
+

المطوية

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ هذا هو محتوى عنصر المطوية الأول. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. +
+
+
+
+

+ +

+
+
+ هذا هو محتوى عنصر المطوية الثاني. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. +
+
+
+
+

+ +

+
+
+ هذا هو محتوى عنصر المطوية الثالث. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. +
+
+
+
+ {{< /example >}} +
+
+
+
+

الإنذارات

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

الشارة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

الأزرار

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

مجموعة الأزرار

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

البطاقة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}} +
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+ اذهب لمكان ما +
+
+
+
+
+
+ متميز +
+
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+ اذهب لمكان ما +
+ +
+
+
+
+
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+
+
    +
  • عنصر
  • +
  • عنصر آخر
  • +
  • عنصر ثالث
  • +
+ +
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="صورة" >}} +
+
+
+
عنوان البطاقة
+

هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+

آخر تحديث منذ 3 دقائق

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

مجموعة العناصر

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
    +
  • عنصر معطل
  • +
  • عنصر ثاني
  • +
  • عنصر ثالث
  • +
  • عنصر رابع
  • +
  • وعنصر خامس أيضًا
  • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • عنصر
  • +
  • عنصر ثاني
  • +
  • عنصر ثالث
  • +
  • عنصر رابع
  • +
  • وعنصر خامس أيضًا
  • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ عنصر مجموعة قائمة default بسيط + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + عنصر مجموعة قائمة {{ .name }} بسيط + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + + +
+
+

الصناديق المنبثقة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

شريط التقدم

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+ {{< /example >}} +
+
+
+
+

المخطوطة

+ }}">دليل الإستخدام +
+ +
+
+ +
+

@fat

+

محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

+

@mdo

+

بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

+

واحد

+

وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

+

اثنان

+

مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

+

ثلاثة

+

وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

+

ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

+
+
+
+
+
+
+

الدوائر المتحركة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+ جار التحميل... +
+ {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+ جار التحميل... +
+ {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

الإشعارات

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

التلميحات

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css new file mode 100644 index 000000000..77aa0f23c --- /dev/null +++ b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css @@ -0,0 +1,169 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-right: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: .3125rem; + color: rgba(0, 0, 0, .65); + text-decoration: none; +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + border: 0; +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .btn:focus { + box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); +} + +.bd-aside .btn::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + + /* rtl:raw: + transform: rotate(180deg) translateX(-2px); + */ + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg)/* rtl:ignore */; +} + + +/* Examples */ +.scrollspy-example { + position: relative; + height: 200px; + margin-top: .5rem; + overflow: auto; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 1rem 1rem 0; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + gap: 1rem; + grid-template-columns: 1fr 4fr 1fr; + grid-template-rows: auto; + } + + .bd-header { + position: fixed; + top: 0; + /* rtl:begin:ignore */ + right: 0; + left: 0; + /* rtl:end:ignore */ + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + gap: inherit; /* 1 */ + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + grid-template-rows: auto; + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .bd-cheatsheet section > h2::before { + position: absolute; + /* rtl:begin:ignore */ + top: 0; + right: 0; + bottom: -2rem; + left: 0; + /* rtl:end:ignore */ + z-index: -1; + content: ""; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js new file mode 100644 index 000000000..0a50258b9 --- /dev/null +++ b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js @@ -0,0 +1,73 @@ +/* global bootstrap: false */ + +(function () { + 'use strict' + + // Tooltip and popover demos + document.querySelectorAll('.tooltip-demo') + .forEach(function (tooltip) { + new bootstrap.Tooltip(tooltip, { + selector: '[data-bs-toggle="tooltip"]' + }) + }) + + document.querySelectorAll('[data-bs-toggle="popover"]') + .forEach(function (popover) { + new bootstrap.Popover(popover) + }) + + document.querySelectorAll('.toast') + .forEach(function (toastNode) { + var toast = new bootstrap.Toast(toastNode, { + autohide: false + }) + + toast.show() + }) + + // Disable empty links and submit buttons + document.querySelectorAll('[href="#"], [type="submit"]') + .forEach(function (link) { + link.addEventListener('click', function (event) { + event.preventDefault() + }) + }) + + function setActiveItem() { + var hash = window.location.hash + + if (hash === '') { + return + } + + var link = document.querySelector('.bd-aside a[href="' + hash + '"]') + + if (!link) { + return + } + + var active = document.querySelector('.bd-aside .active') + var parent = link.parentNode.parentNode.previousElementSibling + + link.classList.add('active') + + if (parent.classList.contains('collapsed')) { + parent.click() + } + + if (!active) { + return + } + + var expanded = active.parentNode.parentNode.previousElementSibling + + active.classList.remove('active') + + if (expanded && parent !== expanded) { + expanded.click() + } + } + + setActiveItem() + window.addEventListener('hashchange', setActiveItem) +})() diff --git a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css new file mode 100644 index 000000000..c1a4a1ccc --- /dev/null +++ b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css @@ -0,0 +1,162 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-left: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-right: .3125rem; + color: rgba(0, 0, 0, .65); + text-decoration: none; +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + border: 0; +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .btn:focus { + box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); +} + +.bd-aside .btn::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform: rotate(180deg) translateX(-2px); + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg); +} + + +/* Examples */ +.scrollspy-example { + position: relative; + height: 200px; + margin-top: .5rem; + overflow: auto; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 0 1rem 1rem; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + gap: 1rem; + grid-template-columns: 1fr 4fr 1fr; + grid-template-rows: auto; + } + + .bd-header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + gap: inherit; /* 1 */ + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + grid-template-rows: auto; + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .bd-cheatsheet section > h2::before { + position: absolute; + top: 0; + right: 0; + bottom: -2rem; + left: 0; + z-index: -1; + content: ""; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html new file mode 100644 index 000000000..1df5ca792 --- /dev/null +++ b/site/content/docs/5.1/examples/cheatsheet/index.html @@ -0,0 +1,1589 @@ +--- +layout: examples +title: Cheatsheet +extra_css: + - "cheatsheet.css" +extra_js: + - src: "cheatsheet.js" +body_class: "bg-light" +--- + +
+ +
+ +
+
+

Contents

+ +
+
+

Typography

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Display 1

+

Display 2

+

Display 3

+

Display 4

+

Display 5

+

Display 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Heading 5

+

Heading 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ This is a lead paragraph. It stands out from regular paragraphs. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined.

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

A well-known quote, contained in a blockquote element.

+
Someone famous in Source Title
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list.
  • +
  • It appears completely unstyled.
  • +
  • Structurally, it's still a list.
  • +
  • However, this style only applies to immediate child elements.
  • +
  • Nested lists: +
      +
    • are unaffected by this style
    • +
    • will still show a bullet
    • +
    • and have appropriate left margin
    • +
    +
  • +
  • This may still come in handy in some situations.
  • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list item.
  • +
  • And another one.
  • +
  • But they're displayed inline.
  • +
+ {{< /example >}} +
+
+
+
+

Images

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} + {{< /example >}} +
+
+
+
+

Tables

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
ClassHeadingHeading
DefaultCellCell
{{ .name | title }}CellCell
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

Figures

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
A caption for the above image.
+
+ {{< /example >}} +
+
+
+ +
+

Forms

+ +
+
+

Overview

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+
+ Radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

Disabled forms

+ }}#disabled-forms">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ Disabled radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+ + +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

Input group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ @ + +
+
+ + @example.com +
+ +
+ https://example.com/users/ + +
+
+ $ + + .00 +
+
+ With textarea + +
+ {{< /example >}} +
+
+
+
+

Floating labels

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

Validation

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

Components

+ +
+
+

Accordion

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+ {{< /example >}} +
+
+
+
+

Alerts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Badge

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

Buttons

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

Button group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Card

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+ Featured +
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+ +
+
+
+
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
  • +
  • A second item
  • +
  • A third item
  • +
+ +
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="Image" >}} +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

List group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
    +
  • A disabled item
  • +
  • A second item
  • +
  • A third item
  • +
  • A fourth item
  • +
  • And a fifth one
  • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • An item
  • +
  • A second item
  • +
  • A third item
  • +
  • A fourth item
  • +
  • And a fifth one
  • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ A simple default list group item + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + A simple {{ .name }} list group item + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + +
+
+

Pagination

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Popovers

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

Progress

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+ {{< /example >}} +
+
+
+
+

Scrollspy

+ }}">Documentation +
+ +
+
+ +
+

First heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Second heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Third heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Fourth heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Fifth heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+
+
+
+
+
+
+

Spinners

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+ Loading... +
+ {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+ Loading... +
+ {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

Toasts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

Tooltips

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/5.1/examples/checkout-rtl/index.html b/site/content/docs/5.1/examples/checkout-rtl/index.html new file mode 100644 index 000000000..e0ca621b1 --- /dev/null +++ b/site/content/docs/5.1/examples/checkout-rtl/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: مثال إتمام الشراء +direction: rtl +extra_css: + - "../checkout/form-validation.css" +extra_js: + - src: "../checkout/form-validation.js" +body_class: "bg-light" +--- + +
+
+
+ +

نموذج إتمام الشراء

+

فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.

+
+ +
+
+

+ عربة التسوق + 3 +

+
    +
  • +
    +
    اسم المنتج
    + وصف مختصر +
    + $12 +
  • +
  • +
    +
    المنتج الثاني
    + وصف مختصر +
    + $8 +
  • +
  • +
    +
    البند الثالث
    + وصف مختصر +
    + $5 +
  • +
  • +
    +
    رمز ترويجي
    + EXAMPLECODE +
    + -$5 +
  • +
  • + مجموع (USD) + $20 +
  • +
+ +
+
+ + +
+
+
+
+

عنوان الفوترة

+
+
+
+ + +
+ يرجى إدخال اسم أول صحيح. +
+
+ +
+ + +
+ يرجى إدخال اسم عائلة صحيح. +
+
+ +
+ +
+ @ + +
+ اسم المستخدم الخاص بك مطلوب. +
+
+
+ +
+ + +
+ يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن. +
+
+ +
+ + +
+ يرجى إدخال عنوان الشحن الخاص بك. +
+
+ +
+ + +
+ +
+ + +
+ يرجى اختيار بلد صحيح. +
+
+ +
+ + +
+ يرجى اختيار اسم منطقة صحيح. +
+
+ +
+ + +
+ الرمز البريدي مطلوب. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

طريقة الدفع

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + الاسم الكامل كما هو معروض على البطاقة +
+ الاسم على البطاقة مطلوب +
+
+ +
+ + +
+ رقم بطاقة الائتمان مطلوب +
+
+ +
+ + +
+ تاريخ انتهاء الصلاحية مطلوب +
+
+ +
+ + +
+ رمز الحماية مطلوب +
+
+
+ +
+ + +
+
+
+
+ +
diff --git a/site/content/docs/5.1/examples/checkout/form-validation.css b/site/content/docs/5.1/examples/checkout/form-validation.css new file mode 100644 index 000000000..e5ea31c40 --- /dev/null +++ b/site/content/docs/5.1/examples/checkout/form-validation.css @@ -0,0 +1,3 @@ +.container { + max-width: 960px; +} diff --git a/site/content/docs/5.1/examples/checkout/form-validation.js b/site/content/docs/5.1/examples/checkout/form-validation.js new file mode 100644 index 000000000..f8fd583de --- /dev/null +++ b/site/content/docs/5.1/examples/checkout/form-validation.js @@ -0,0 +1,20 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(function () { + 'use strict' + + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.querySelectorAll('.needs-validation') + + // Loop over them and prevent submission + Array.prototype.slice.call(forms) + .forEach(function (form) { + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) +})() diff --git a/site/content/docs/5.1/examples/checkout/index.html b/site/content/docs/5.1/examples/checkout/index.html new file mode 100644 index 000000000..4809dc4bb --- /dev/null +++ b/site/content/docs/5.1/examples/checkout/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: Checkout example +extra_css: + - "form-validation.css" +extra_js: + - src: "form-validation.js" +body_class: "bg-light" +--- + +
+
+
+ +

Checkout form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
  • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
  • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
  • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + −$5 +
  • +
  • + Total (USD) + $20 +
  • +
+ +
+
+ + +
+
+
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required. +
+
+ +
+ + +
+ Valid last name is required. +
+
+ +
+ +
+ @ + +
+ Your username is required. +
+
+
+ +
+ + +
+ Please enter a valid email address for shipping updates. +
+
+ +
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+ + +
+ Please select a valid country. +
+
+ +
+ + +
+ Please provide a valid state. +
+
+ +
+ + +
+ Zip code required. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+ +
+ + +
+ Credit card number is required +
+
+ +
+ + +
+ Expiration date required +
+
+ +
+ + +
+ Security code required +
+
+
+ +
+ + +
+
+
+
+ + +
diff --git a/site/content/docs/5.1/examples/cover/cover.css b/site/content/docs/5.1/examples/cover/cover.css new file mode 100644 index 000000000..87afc3be9 --- /dev/null +++ b/site/content/docs/5.1/examples/cover/cover.css @@ -0,0 +1,53 @@ +/* + * Globals + */ + + +/* Custom default button */ +.btn-secondary, +.btn-secondary:hover, +.btn-secondary:focus { + color: #333; + text-shadow: none; /* Prevent inheritance from `body` */ +} + + +/* + * Base structure + */ + +body { + text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); + box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); +} + +.cover-container { + max-width: 42em; +} + + +/* + * Header + */ + +.nav-masthead .nav-link { + padding: .25rem 0; + font-weight: 700; + color: rgba(255, 255, 255, .5); + background-color: transparent; + border-bottom: .25rem solid transparent; +} + +.nav-masthead .nav-link:hover, +.nav-masthead .nav-link:focus { + border-bottom-color: rgba(255, 255, 255, .25); +} + +.nav-masthead .nav-link + .nav-link { + margin-left: 1rem; +} + +.nav-masthead .active { + color: #fff; + border-bottom-color: #fff; +} diff --git a/site/content/docs/5.1/examples/cover/index.html b/site/content/docs/5.1/examples/cover/index.html new file mode 100644 index 000000000..10362083e --- /dev/null +++ b/site/content/docs/5.1/examples/cover/index.html @@ -0,0 +1,34 @@ +--- +layout: examples +title: Cover Template +extra_css: + - "cover.css" +html_class: "h-100" +body_class: "d-flex h-100 text-center text-white bg-dark" +include_js: false +--- + +
+
+
+

Cover

+ +
+
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ + +
diff --git a/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js new file mode 100644 index 000000000..7831fa9d0 --- /dev/null +++ b/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace({ 'aria-hidden': 'true' }) + + // Graphs + var ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'الأحد', + 'الإثنين', + 'الثلاثاء', + 'الأربعاء', + 'الخميس', + 'الجمعة', + 'السبت' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/site/content/docs/5.1/examples/dashboard-rtl/index.html b/site/content/docs/5.1/examples/dashboard-rtl/index.html new file mode 100644 index 000000000..daef89a14 --- /dev/null +++ b/site/content/docs/5.1/examples/dashboard-rtl/index.html @@ -0,0 +1,253 @@ +--- +layout: examples +title: قالب لوحة القيادة +direction: rtl +extra_css: + - "../dashboard/dashboard.rtl.css" +extra_js: + - src: "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" + integrity: "sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" + - src: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" + integrity: "sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" + - src: "dashboard.js" +--- + + + +
+
+ + +
+
+

لوحة القيادة

+
+
+ + +
+ +
+
+ + + +

عنوان القسم

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#عنوانعنوانعنوانعنوان
1,001بياناتعشوائيةتثريالجدول
1,002تثريمبهةتصميمتنسيق
1,003عشوائيةغنيةقيمةمفيدة
1,003معلوماتتثريتوضيحيةعشوائية
1,004الجدولبياناتتنسيققيمة
1,005قيمةمبهةالجدولتثري
1,006قيمةتوضيحيةغنيةعشوائية
1,007تثريمفيدةمعلوماتمبهة
1,008بياناتعشوائيةتثريالجدول
1,009تثريمبهةتصميمتنسيق
1,010عشوائيةغنيةقيمةمفيدة
1,011معلوماتتثريتوضيحيةعشوائية
1,012الجدولتثريتنسيققيمة
1,013قيمةمبهةالجدولتصميم
1,014قيمةتوضيحيةغنيةعشوائية
1,015بياناتمفيدةمعلوماتالجدول
+
+
+
+
diff --git a/site/content/docs/5.1/examples/dashboard/dashboard.css b/site/content/docs/5.1/examples/dashboard/dashboard.css new file mode 100644 index 000000000..e1099fbb3 --- /dev/null +++ b/site/content/docs/5.1/examples/dashboard/dashboard.css @@ -0,0 +1,100 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + /* rtl:raw: + right: 0; + */ + bottom: 0; + /* rtl:remove */ + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + right: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/site/content/docs/5.1/examples/dashboard/dashboard.js b/site/content/docs/5.1/examples/dashboard/dashboard.js new file mode 100644 index 000000000..7c2402ae2 --- /dev/null +++ b/site/content/docs/5.1/examples/dashboard/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace({ 'aria-hidden': 'true' }) + + // Graphs + var ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css new file mode 100644 index 000000000..a88226ecf --- /dev/null +++ b/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css @@ -0,0 +1,96 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + right: 0; + bottom: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-left: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + left: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/site/content/docs/5.1/examples/dashboard/index.html b/site/content/docs/5.1/examples/dashboard/index.html new file mode 100644 index 000000000..04c187dbc --- /dev/null +++ b/site/content/docs/5.1/examples/dashboard/index.html @@ -0,0 +1,252 @@ +--- +layout: examples +title: Dashboard Template +extra_css: + - "dashboard.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" + integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" + - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" + integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" + - src: "dashboard.js" +--- + + + +
+
+ + +
+
+

Dashboard

+
+
+ + +
+ +
+
+ + + +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001randomdataplaceholdertext
1,002placeholderirrelevantvisuallayout
1,003datarichdashboardtabular
1,003informationplaceholderillustrativedata
1,004textrandomlayoutdashboard
1,005dashboardirrelevanttextplaceholder
1,006dashboardillustrativerichdata
1,007placeholdertabularinformationirrelevant
1,008randomdataplaceholdertext
1,009placeholderirrelevantvisuallayout
1,010datarichdashboardtabular
1,011informationplaceholderillustrativedata
1,012textplaceholderlayoutdashboard
1,013dashboardirrelevanttextvisual
1,014dashboardillustrativerichdata
1,015randomtabularinformationtext
+
+
+
+
diff --git a/site/content/docs/5.1/examples/dropdowns/dropdowns.css b/site/content/docs/5.1/examples/dropdowns/dropdowns.css new file mode 100644 index 000000000..4341c59ea --- /dev/null +++ b/site/content/docs/5.1/examples/dropdowns/dropdowns.css @@ -0,0 +1,89 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.dropdown-menu { + position: static; + display: block; + width: auto; + margin: 4rem auto; +} + +.dropdown-menu-macos { + display: grid; + gap: .25rem; + padding: .5rem; + border-radius: .5rem; +} +.dropdown-menu-macos .dropdown-item { + border-radius: .25rem; +} + +.dropdown-item-danger { + color: var(--bs-red); +} +.dropdown-item-danger:hover, +.dropdown-item-danger:focus { + color: #fff; + background-color: var(--bs-red); +} +.dropdown-item-danger.active { + background-color: var(--bs-red); +} + +.btn-hover-light { + text-align: left; + background-color: var(--bs-white); + border-radius: .25rem; +} +.btn-hover-light:hover, +.btn-hover-light:focus { + color: var(--bs-blue); + background-color: var(--bs-light); +} + +.cal-month, +.cal-days, +.cal-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + align-items: center; +} +.cal-month-name { + grid-column-start: 2; + grid-column-end: 7; + text-align: center; +} +.cal-weekday, +.cal-btn { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + height: 3rem; + padding: 0; +} +.cal-btn:not([disabled]) { + font-weight: 500; +} +.cal-btn:hover, +.cal-btn:focus { + background-color: rgba(0, 0, 0, .05); +} +.cal-btn[disabled] { + opacity: .5; +} + +.form-control-dark { + background-color: rgba(255, 255, 255, .05); + border-color: rgba(255, 255, 255, .15); +} diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html new file mode 100644 index 000000000..5296d1507 --- /dev/null +++ b/site/content/docs/5.1/examples/dropdowns/index.html @@ -0,0 +1,339 @@ +--- +layout: examples +title: Dropdowns +extra_css: + - "dropdowns.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + + +
+ + + +
+ + \ No newline at end of file diff --git a/site/content/docs/5.1/examples/features/features.css b/site/content/docs/5.1/examples/features/features.css new file mode 100644 index 000000000..33942f7f1 --- /dev/null +++ b/site/content/docs/5.1/examples/features/features.css @@ -0,0 +1,61 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.feature-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 4rem; + margin-bottom: 1rem; + font-size: 2rem; + color: #fff; + border-radius: .75rem; +} + +.icon-link { + display: inline-flex; + align-items: center; +} +.icon-link > .bi { + margin-top: .125rem; + margin-left: .125rem; + transition: transform .25s ease-in-out; + fill: currentColor; +} +.icon-link:hover > .bi { + transform: translate(.25rem); +} + +.icon-square { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + font-size: 1.5rem; + border-radius: .75rem; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: 1rem; } + +.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } +.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } +.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + +.card-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} diff --git a/site/content/docs/5.1/examples/features/index.html b/site/content/docs/5.1/examples/features/index.html new file mode 100644 index 000000000..1e331f00a --- /dev/null +++ b/site/content/docs/5.1/examples/features/index.html @@ -0,0 +1,288 @@ +--- +layout: examples +title: Features +extra_css: + - "features.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Features examples

+ + + +
+ +
+

Hanging icons

+
+
+
+ +
+
+

Featured title

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ + Primary button + +
+
+
+
+ +
+
+

Featured title

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ + Primary button + +
+
+
+
+ +
+
+

Featured title

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ + Primary button + +
+
+
+
+ +
+ +
+

Custom cards

+ +
+
+
+
+

Short title, long jacket

+
    +
  • + Bootstrap +
  • +
  • + + Earth +
  • +
  • + + 3d +
  • +
+
+
+
+ +
+
+
+

Much longer title that wraps to multiple lines

+
    +
  • + Bootstrap +
  • +
  • + + Pakistan +
  • +
  • + + 4d +
  • +
+
+
+
+ +
+
+
+

Another longer title belongs here

+
    +
  • + Bootstrap +
  • +
  • + + California +
  • +
  • + + 5d +
  • +
+
+
+
+
+
+ +
+ +
+

Icon grid

+ +
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+
+
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg new file mode 100644 index 000000000..ed2e36a78 Binary files /dev/null and b/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg differ diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg new file mode 100644 index 000000000..b66864a00 Binary files /dev/null and b/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg differ diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg new file mode 100644 index 000000000..c411b17ec Binary files /dev/null and b/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg differ diff --git a/site/content/docs/5.1/examples/footers/footers.css b/site/content/docs/5.1/examples/footers/footers.css new file mode 100644 index 000000000..4e826827e --- /dev/null +++ b/site/content/docs/5.1/examples/footers/footers.css @@ -0,0 +1,12 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html new file mode 100644 index 000000000..b26909574 --- /dev/null +++ b/site/content/docs/5.1/examples/footers/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Footers +extra_css: + - "footers.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+ + + + © {{< year >}} Company, Inc +
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
diff --git a/site/content/docs/5.1/examples/grid/grid.css b/site/content/docs/5.1/examples/grid/grid.css new file mode 100644 index 000000000..18e3568b1 --- /dev/null +++ b/site/content/docs/5.1/examples/grid/grid.css @@ -0,0 +1,13 @@ +.themed-grid-col { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); +} + +.themed-container { + padding: .75rem; + margin-bottom: 1.5rem; + background-color: rgba(0, 123, 255, .15); + border: 1px solid rgba(0, 123, 255, .2); +} diff --git a/site/content/docs/5.1/examples/grid/index.html b/site/content/docs/5.1/examples/grid/index.html new file mode 100644 index 000000000..f26829b4f --- /dev/null +++ b/site/content/docs/5.1/examples/grid/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Grid Template +extra_css: + - "grid.css" +body_class: "py-4" +include_js: false +--- + +
+
+ +

Bootstrap grid examples

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

+ +

Five grid tiers

+

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

+ +
+
.col-4
+
.col-4
+
.col-4
+
+ +
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+ +
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+ +
+
.col-xxl-4
+
.col-xxl-4
+
.col-xxl-4
+
+ +

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +

Three equal columns alternative

+

By using the .row-cols-* classes, you can easily create a grid with equal columns.

+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+ +

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+ +

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

+
+
.col-md-8
+
.col-md-4
+
+ +

Full width, single column

+

+ No grid classes are necessary for full-width elements. +

+ +
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

+
+
+
+ .col-md-8 +
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+ +
+ +

Mixed: mobile and desktop

+

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

+
+
.col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+ +
+ +

Mixed: mobile, tablet, and desktop

+
+
.col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+ +
+ +

Gutters

+

With .gx-* classes, the horizontal gutters can be adjusted.

+
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
+

Use the .gy-* classes to control the vertical gutters.

+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+

With .g-* classes, the gutters in both directions can be adjusted.

+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+ +
+
+ +

Containers

+

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

+
+ +
.container
+
.container-sm
+
.container-md
+
.container-lg
+
.container-xl
+
.container-xxl
+
.container-fluid
+
diff --git a/site/content/docs/5.1/examples/headers/headers.css b/site/content/docs/5.1/examples/headers/headers.css new file mode 100644 index 000000000..661a74d55 --- /dev/null +++ b/site/content/docs/5.1/examples/headers/headers.css @@ -0,0 +1,32 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.form-control-dark { + color: #fff; + background-color: var(--bs-dark); + border-color: var(--bs-gray); +} +.form-control-dark:focus { + color: #fff; + background-color: var(--bs-dark); + border-color: #fff; + box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.text-small { + font-size: 85%; +} + +.dropdown-toggle { + outline: 0; +} diff --git a/site/content/docs/5.1/examples/headers/index.html b/site/content/docs/5.1/examples/headers/index.html new file mode 100644 index 000000000..e15b47e5f --- /dev/null +++ b/site/content/docs/5.1/examples/headers/index.html @@ -0,0 +1,295 @@ +--- +layout: examples +title: Headers +extra_css: + - "headers.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + +
+

Headers examples

+ + + +
+ +
+
+ +
+
+ +
+ +
+
+ + + + + + +
+ + +
+
+
+ +
+ +
+
+
+ + + + + + +
+ +
+ +
+ + +
+
+
+
+ +
+ +
+
+
+ + + + + + +
+ +
+ + +
+
+
+ +
+ +
+
+ + +
+
+ +
+ + +
+
+
+ +
+
+
+









+
+
+









+
+
+
+ +
+ + +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ + +
+
+
+
+ +
+
diff --git a/site/content/docs/5.1/examples/heroes/bootstrap-docs.png b/site/content/docs/5.1/examples/heroes/bootstrap-docs.png new file mode 100644 index 000000000..471a9eddf Binary files /dev/null and b/site/content/docs/5.1/examples/heroes/bootstrap-docs.png differ diff --git a/site/content/docs/5.1/examples/heroes/bootstrap-themes.png b/site/content/docs/5.1/examples/heroes/bootstrap-themes.png new file mode 100644 index 000000000..13c32337d Binary files /dev/null and b/site/content/docs/5.1/examples/heroes/bootstrap-themes.png differ diff --git a/site/content/docs/5.1/examples/heroes/heroes.css b/site/content/docs/5.1/examples/heroes/heroes.css new file mode 100644 index 000000000..380b70a4a --- /dev/null +++ b/site/content/docs/5.1/examples/heroes/heroes.css @@ -0,0 +1,11 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +@media (min-width: 992px) { + .rounded-lg-3 { border-radius: .3rem; } +} diff --git a/site/content/docs/5.1/examples/heroes/index.html b/site/content/docs/5.1/examples/heroes/index.html new file mode 100644 index 000000000..ef621fd50 --- /dev/null +++ b/site/content/docs/5.1/examples/heroes/index.html @@ -0,0 +1,125 @@ +--- +layout: examples +title: Heroes +extra_css: + - "heroes.css" +body_class: "" +--- + +
+

Heroes examples

+ +
+ +

Centered hero

+
+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
+
+
+ +
+ +
+

Centered screenshot

+
+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
+
+
+
+ Example image +
+
+
+ +
+ +
+
+
+ Bootstrap Themes +
+
+

Responsive left-aligned hero with image

+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
+
+
+
+ +
+ +
+
+
+

Vertically centered hero sign-up form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+ By clicking Sign up, you agree to the terms of use. +
+
+
+
+ +
+ +
+
+
+

Border hero with cropped image and shadows

+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
+
+
+ +
+
+
+ +
+ +
+
+

Dark mode hero

+
+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
+
+
+
+ +
+
diff --git a/site/content/docs/5.1/examples/jumbotron/index.html b/site/content/docs/5.1/examples/jumbotron/index.html new file mode 100644 index 000000000..99cc61dee --- /dev/null +++ b/site/content/docs/5.1/examples/jumbotron/index.html @@ -0,0 +1,45 @@ +--- +layout: examples +title: Jumbotron example +include_js: false +--- + +
+
+
+ + Bootstrap + Jumbotron example + +
+ +
+
+

Custom jumbotron

+

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

+ +
+
+ +
+
+
+

Change the background

+

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

+ +
+
+
+
+

Add borders

+

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

+ +
+
+
+ +
+ © {{< year >}} +
+
+
diff --git a/site/content/docs/5.1/examples/list-groups/index.html b/site/content/docs/5.1/examples/list-groups/index.html new file mode 100644 index 000000000..c16bad944 --- /dev/null +++ b/site/content/docs/5.1/examples/list-groups/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: List groups +extra_css: + - "list-groups.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+ +
+ + + +
+
+ +
+ +
+ + + + +
+ +
+ +
+ + + + + + + + + + + +
\ No newline at end of file diff --git a/site/content/docs/5.1/examples/list-groups/list-groups.css b/site/content/docs/5.1/examples/list-groups/list-groups.css new file mode 100644 index 000000000..11351f87e --- /dev/null +++ b/site/content/docs/5.1/examples/list-groups/list-groups.css @@ -0,0 +1,61 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.opacity-50 { opacity: .5; } +.opacity-75 { opacity: .75; } + +.list-group { + width: auto; + max-width: 460px; + margin: 4rem auto; +} + +.form-check-input:checked + .form-checked-content { + opacity: .5; +} + +.form-check-input-placeholder { + pointer-events: none; + border-style: dashed; +} +[contenteditable]:focus { + outline: 0; +} + +.list-group-checkable { + display: grid; + gap: .5rem; + border: 0; +} +.list-group-checkable .list-group-item { + cursor: pointer; + border-radius: .5rem; +} +.list-group-item-check { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.list-group-item-check:hover + .list-group-item { + background-color: var(--bs-light); +} +.list-group-item-check:checked + .list-group-item { + color: #fff; + background-color: var(--bs-blue); +} +.list-group-item-check[disabled] + .list-group-item, +.list-group-item-check:disabled + .list-group-item { + pointer-events: none; + filter: none; + opacity: .5; +} diff --git a/site/content/docs/5.1/examples/masonry/index.html b/site/content/docs/5.1/examples/masonry/index.html new file mode 100644 index 000000000..9061d7cce --- /dev/null +++ b/site/content/docs/5.1/examples/masonry/index.html @@ -0,0 +1,105 @@ +--- +layout: examples +title: Masonry example +extra_js: + - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" + integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" + async: true +--- + +
+

Bootstrap and Masonry

+

Integrate Masonry with the Bootstrap grid system and cards component.

+ +

Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:

+ +

+<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+  
+ +

By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

+ +
+ +
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
+
Card title that wraps to a new line
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+ +
+
+
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+ +
+
+
+
+
+
+
Card title
+

This card has a regular title and short paragraph of text below it.

+

Last updated 3 mins ago

+
+
+
+
+
+ {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} +
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+ +
+
+
+
+
+
+
Card title
+

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

+

Last updated 3 mins ago

+
+
+
+
+ +
diff --git a/site/content/docs/5.1/examples/modals/index.html b/site/content/docs/5.1/examples/modals/index.html new file mode 100644 index 000000000..cc0feff87 --- /dev/null +++ b/site/content/docs/5.1/examples/modals/index.html @@ -0,0 +1,173 @@ +--- +layout: examples +title: Modals +extra_css: + - "modals.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
diff --git a/site/content/docs/5.1/examples/modals/modals.css b/site/content/docs/5.1/examples/modals/modals.css new file mode 100644 index 000000000..8fda8212a --- /dev/null +++ b/site/content/docs/5.1/examples/modals/modals.css @@ -0,0 +1,34 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: .75rem; } +.rounded-6 { border-radius: 1rem; } + +.modal-sheet .modal-dialog { + width: 380px; + transition: bottom .75s ease-in-out; +} +.modal-sheet .modal-footer { + padding-bottom: 2rem; +} + +.modal-alert .modal-dialog { + width: 380px; +} + +.border-right { border-right: 1px solid #eee; } + +.modal-tour .modal-dialog { + width: 380px; +} diff --git a/site/content/docs/5.1/examples/navbar-bottom/index.html b/site/content/docs/5.1/examples/navbar-bottom/index.html new file mode 100644 index 000000000..aee772e20 --- /dev/null +++ b/site/content/docs/5.1/examples/navbar-bottom/index.html @@ -0,0 +1,41 @@ +--- +layout: examples +title: Bottom navbar example +--- + +
+
+

Bottom Navbar example

+

This example is a quick exercise to illustrate how the bottom navbar works.

+ }}" role="button">View navbar docs » +
+
+ diff --git a/site/content/docs/5.1/examples/navbar-fixed/index.html b/site/content/docs/5.1/examples/navbar-fixed/index.html new file mode 100644 index 000000000..848137eff --- /dev/null +++ b/site/content/docs/5.1/examples/navbar-fixed/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Fixed top navbar example +extra_css: + - "navbar-top-fixed.css" +--- + + + +
+
+

Navbar example

+

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.

+ }}" role="button">View navbar docs » +
+
diff --git a/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css new file mode 100644 index 000000000..c77c0c147 --- /dev/null +++ b/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css @@ -0,0 +1,5 @@ +/* Show it is fixed to the top */ +body { + min-height: 75rem; + padding-top: 4.5rem; +} diff --git a/site/content/docs/5.1/examples/navbar-static/index.html b/site/content/docs/5.1/examples/navbar-static/index.html new file mode 100644 index 000000000..fe95dab47 --- /dev/null +++ b/site/content/docs/5.1/examples/navbar-static/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Top navbar example +extra_css: + - "navbar-top.css" +--- + + + +
+
+

Navbar example

+

This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

+ }}" role="button">View navbar docs » +
+
diff --git a/site/content/docs/5.1/examples/navbar-static/navbar-top.css b/site/content/docs/5.1/examples/navbar-static/navbar-top.css new file mode 100644 index 000000000..25bbdde09 --- /dev/null +++ b/site/content/docs/5.1/examples/navbar-static/navbar-top.css @@ -0,0 +1,4 @@ +/* Show it's not fixed to the top */ +body { + min-height: 75rem; +} diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html new file mode 100644 index 000000000..38281f3dd --- /dev/null +++ b/site/content/docs/5.1/examples/navbars/index.html @@ -0,0 +1,416 @@ +--- +layout: examples +title: Navbar Template +extra_css: + - "navbar.css" +--- + +
+ + + + + + + + + + + + + + + + + + +
+

Matching .container-xl...

+
+ + + +
+ + + + +
+
+
+

Navbar examples

+

This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the }}">top and }}">fixed top examples.

+

At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.

+

+ }}" role="button">View navbar docs » +

+
+
+
+
+
diff --git a/site/content/docs/5.1/examples/navbars/navbar.css b/site/content/docs/5.1/examples/navbars/navbar.css new file mode 100644 index 000000000..70d209409 --- /dev/null +++ b/site/content/docs/5.1/examples/navbars/navbar.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/index.html b/site/content/docs/5.1/examples/offcanvas-navbar/index.html new file mode 100644 index 000000000..5af7e2ea2 --- /dev/null +++ b/site/content/docs/5.1/examples/offcanvas-navbar/index.html @@ -0,0 +1,140 @@ +--- +layout: examples +title: Offcanvas navbar template +extra_css: + - "offcanvas.css" +extra_js: + - src: "offcanvas.js" +body_class: "bg-light" +aliases: "/docs/5.1/examples/offcanvas/" +--- + + + + + +
+
+ +
+

Bootstrap

+ Since 2011 +
+
+ +
+
Recent updates
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? +

+
+
+ {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + Some more representative placeholder content, related to this other user. Another status update, perhaps. +

+
+
+ {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates. +

+
+ + All updates + +
+ +
+
Suggestions
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+ + All suggestions + +
+
diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css new file mode 100644 index 000000000..97fe8399c --- /dev/null +++ b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css @@ -0,0 +1,67 @@ +html, +body { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} + +body { + padding-top: 56px; +} + +@media (max-width: 991.98px) { + .offcanvas-collapse { + position: fixed; + top: 56px; /* Height of navbar */ + bottom: 0; + left: 100%; + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + overflow-y: auto; + visibility: hidden; + background-color: #343a40; + transition: transform .3s ease-in-out, visibility .3s ease-in-out; + } + .offcanvas-collapse.open { + visibility: visible; + transform: translateX(-100%); + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + color: rgba(255, 255, 255, .75); + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-underline .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; + color: #6c757d; +} + +.nav-underline .nav-link:hover { + color: #007bff; +} + +.nav-underline .active { + font-weight: 500; + color: #343a40; +} + +.bg-purple { + background-color: #6f42c1; +} diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js new file mode 100644 index 000000000..91103b1c4 --- /dev/null +++ b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js @@ -0,0 +1,7 @@ +(function () { + 'use strict' + + document.querySelector('#navbarSideCollapse').addEventListener('click', function () { + document.querySelector('.offcanvas-collapse').classList.toggle('open') + }) +})() diff --git a/site/content/docs/5.1/examples/pricing/index.html b/site/content/docs/5.1/examples/pricing/index.html new file mode 100644 index 000000000..c62c68c70 --- /dev/null +++ b/site/content/docs/5.1/examples/pricing/index.html @@ -0,0 +1,187 @@ +--- +layout: examples +title: Pricing example +extra_css: + - "pricing.css" +include_js: false +--- + + + + Check + + + + +
+
+ + +
+

Pricing

+

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

+
+
+ +
+
+
+
+
+

Free

+
+
+

$0/mo

+
    +
  • 10 users included
  • +
  • 2 GB of storage
  • +
  • Email support
  • +
  • Help center access
  • +
+ +
+
+
+
+
+
+

Pro

+
+
+

$15/mo

+
    +
  • 20 users included
  • +
  • 10 GB of storage
  • +
  • Priority email support
  • +
  • Help center access
  • +
+ +
+
+
+
+
+
+

Enterprise

+
+
+

$29/mo

+
    +
  • 30 users included
  • +
  • 15 GB of storage
  • +
  • Phone and email support
  • +
  • Help center access
  • +
+ +
+
+
+
+ +

Compare plans

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FreeProEnterprise
Public
Private
Permissions
Sharing
Unlimited members
Extra security
+
+
+ + +
diff --git a/site/content/docs/5.1/examples/pricing/pricing.css b/site/content/docs/5.1/examples/pricing/pricing.css new file mode 100644 index 000000000..c7304d10b --- /dev/null +++ b/site/content/docs/5.1/examples/pricing/pricing.css @@ -0,0 +1,11 @@ +body { + background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); +} + +.container { + max-width: 960px; +} + +.pricing-header { + max-width: 700px; +} diff --git a/site/content/docs/5.1/examples/product/index.html b/site/content/docs/5.1/examples/product/index.html new file mode 100644 index 000000000..291901efa --- /dev/null +++ b/site/content/docs/5.1/examples/product/index.html @@ -0,0 +1,148 @@ +--- +layout: examples +title: Product example +extra_css: + - "product.css" +--- + + + +
+
+
+

Punny headline

+

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.

+ Coming soon +
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+ + diff --git a/site/content/docs/5.1/examples/product/product.css b/site/content/docs/5.1/examples/product/product.css new file mode 100644 index 000000000..5fcb582b4 --- /dev/null +++ b/site/content/docs/5.1/examples/product/product.css @@ -0,0 +1,69 @@ +.container { + max-width: 960px; +} + +/* + * Custom translucent site header + */ + +.site-header { + background-color: rgba(0, 0, 0, .85); + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); +} +.site-header a { + color: #8e8e8e; + transition: color .15s ease-in-out; +} +.site-header a:hover { + color: #fff; + text-decoration: none; +} + +/* + * Dummy devices (replace them with your own or something else entirely!) + */ + +.product-device { + position: absolute; + right: 10%; + bottom: -30%; + width: 300px; + height: 540px; + background-color: #333; + border-radius: 21px; + transform: rotate(30deg); +} + +.product-device::before { + position: absolute; + top: 10%; + right: 10px; + bottom: 10%; + left: 10px; + content: ""; + background-color: rgba(255, 255, 255, .1); + border-radius: 5px; +} + +.product-device-2 { + top: -25%; + right: auto; + bottom: 0; + left: 5%; + background-color: #e5e5e5; +} + + +/* + * Extra utilities + */ + +.flex-equal > * { + flex: 1; +} +@media (min-width: 768px) { + .flex-md-equal > * { + flex: 1; + } +} diff --git a/site/content/docs/5.1/examples/sidebars/index.html b/site/content/docs/5.1/examples/sidebars/index.html new file mode 100644 index 000000000..4d628f1c0 --- /dev/null +++ b/site/content/docs/5.1/examples/sidebars/index.html @@ -0,0 +1,391 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Sidebars examples

+ + + +
+ + + +
+ +
+ + + Icon-only + + + +
+ +
+ +
+ + + Collapsible + + +
+ +
+ + + +
+
diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.css b/site/content/docs/5.1/examples/sidebars/sidebars.css new file mode 100644 index 000000000..6949a379e --- /dev/null +++ b/site/content/docs/5.1/examples/sidebars/sidebars.css @@ -0,0 +1,89 @@ +body { + min-height: 100vh; + min-height: -webkit-fill-available; +} + +html { + height: -webkit-fill-available; +} + +main { + display: flex; + flex-wrap: nowrap; + height: 100vh; + height: -webkit-fill-available; + max-height: 100vh; + overflow-x: auto; + overflow-y: hidden; +} + +.b-example-divider { + flex-shrink: 0; + width: 1.5rem; + height: 100vh; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + pointer-events: none; + fill: currentColor; +} + +.dropdown-toggle { outline: 0; } + +.nav-flush .nav-link { + border-radius: 0; +} + +.btn-toggle { + display: inline-flex; + align-items: center; + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + background-color: transparent; + border: 0; +} +.btn-toggle:hover, +.btn-toggle:focus { + color: rgba(0, 0, 0, .85); + background-color: #d2f4ea; +} + +.btn-toggle::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform-origin: .5em 50%; +} + +.btn-toggle[aria-expanded="true"] { + color: rgba(0, 0, 0, .85); +} +.btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +.btn-toggle-nav a { + display: inline-flex; + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.25rem; + text-decoration: none; +} +.btn-toggle-nav a:hover, +.btn-toggle-nav a:focus { + background-color: #d2f4ea; +} + +.scrollarea { + overflow-y: auto; +} + +.fw-semibold { font-weight: 600; } +.lh-tight { line-height: 1.25; } diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.js b/site/content/docs/5.1/examples/sidebars/sidebars.js new file mode 100644 index 000000000..68384c163 --- /dev/null +++ b/site/content/docs/5.1/examples/sidebars/sidebars.js @@ -0,0 +1,8 @@ +/* global bootstrap: false */ +(function () { + 'use strict' + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + tooltipTriggerList.forEach(function (tooltipTriggerEl) { + new bootstrap.Tooltip(tooltipTriggerEl) + }) +})() diff --git a/site/content/docs/5.1/examples/sign-in/index.html b/site/content/docs/5.1/examples/sign-in/index.html new file mode 100644 index 000000000..fb885ba41 --- /dev/null +++ b/site/content/docs/5.1/examples/sign-in/index.html @@ -0,0 +1,32 @@ +--- +layout: examples +title: Signin Template +extra_css: + - "signin.css" +body_class: "text-center" +include_js: false +--- + +
+
+ +

Please sign in

+ +
+ + +
+
+ + +
+ +
+ +
+ +

© 2017–{{< year >}}

+
+
diff --git a/site/content/docs/5.1/examples/sign-in/signin.css b/site/content/docs/5.1/examples/sign-in/signin.css new file mode 100644 index 000000000..4732d1fb9 --- /dev/null +++ b/site/content/docs/5.1/examples/sign-in/signin.css @@ -0,0 +1,39 @@ +html, +body { + height: 100%; +} + +body { + display: flex; + align-items: center; + padding-top: 40px; + padding-bottom: 40px; + background-color: #f5f5f5; +} + +.form-signin { + width: 100%; + max-width: 330px; + padding: 15px; + margin: auto; +} + +.form-signin .checkbox { + font-weight: 400; +} + +.form-signin .form-floating:focus-within { + z-index: 2; +} + +.form-signin input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/site/content/docs/5.1/examples/starter-template/index.html b/site/content/docs/5.1/examples/starter-template/index.html new file mode 100644 index 000000000..3623ff180 --- /dev/null +++ b/site/content/docs/5.1/examples/starter-template/index.html @@ -0,0 +1,51 @@ +--- +layout: examples +title: Starter Template +extra_css: + - "starter-template.css" +--- + +
+
+ + Bootstrap + Starter template + +
+ +
+

Get started with Bootstrap

+

Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.

+ + + +
+ +
+
+

Starter projects

+

Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.

+ +
+ +
+

Guides

+

Read more detailed instructions and documentation on using or contributing to Bootstrap.

+ +
+
+
+
+ Created by the Bootstrap team · © {{< year >}} +
+
diff --git a/site/content/docs/5.1/examples/starter-template/starter-template.css b/site/content/docs/5.1/examples/starter-template/starter-template.css new file mode 100644 index 000000000..d03436db0 --- /dev/null +++ b/site/content/docs/5.1/examples/starter-template/starter-template.css @@ -0,0 +1,18 @@ +.icon-list { + padding-left: 0; + list-style: none; +} +.icon-list li { + display: flex; + align-items: flex-start; + margin-bottom: .25rem; +} +.icon-list li::before { + display: block; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + margin-right: .5rem; + content: ""; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; +} diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html new file mode 100644 index 000000000..ce036dc09 --- /dev/null +++ b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html @@ -0,0 +1,52 @@ +--- +layout: examples +title: Sticky Footer Navbar Template +extra_css: + - "sticky-footer-navbar.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + +
+ + +
+ + +
+
+

Sticky footer with fixed navbar

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

+

Back to }}">the default sticky footer minus the navbar.

+
+
+ +
+
+ Place sticky footer content here. +
+
diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css new file mode 100644 index 000000000..3087ead7d --- /dev/null +++ b/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -0,0 +1,7 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +main > .container { + padding: 60px 15px 0; +} diff --git a/site/content/docs/5.1/examples/sticky-footer/index.html b/site/content/docs/5.1/examples/sticky-footer/index.html new file mode 100644 index 000000000..7a6e127cd --- /dev/null +++ b/site/content/docs/5.1/examples/sticky-footer/index.html @@ -0,0 +1,24 @@ +--- +layout: examples +title: Sticky Footer Template +extra_css: + - "sticky-footer.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +include_js: false +--- + + +
+
+

Sticky footer

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

+

Use }}">the sticky footer with a fixed navbar if need be, too.

+
+
+ +
+
+ Place sticky footer content here. +
+
diff --git a/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css new file mode 100644 index 000000000..f8be43729 --- /dev/null +++ b/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css @@ -0,0 +1,9 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +.container { + width: auto; + max-width: 680px; + padding: 0 15px; +} diff --git a/site/content/docs/5.1/extend/approach.md b/site/content/docs/5.1/extend/approach.md new file mode 100644 index 000000000..4b9dd4994 --- /dev/null +++ b/site/content/docs/5.1/extend/approach.md @@ -0,0 +1,86 @@ +--- +layout: docs +title: Approach +description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself. +group: extend +aliases: + - "/docs/5.1/extend/" +--- + +While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve. + +See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new)—we'd love to discuss it with you. + +## Summary + +We'll dive into each of these more throughout, but at a high level, here's what guides our approach. + +- Components should be responsive and mobile-first +- Components should be built with a base class and extended via modifier classes +- Component states should obey a common z-index scale +- Whenever possible, prefer a HTML and CSS implementation over JavaScript +- Whenever possible, use utilities over custom styles +- Whenever possible, avoid enforcing strict HTML requirements (children selectors) + +## Responsive + +Bootstrap's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger. + +Across Bootstrap, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up. + +At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time. + +## Classes + +Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type="text"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override. + +As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc. + +Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you're actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants. + +## z-index scales + +There are two `z-index` scales in Bootstrap—elements within a component and overlay components. + +### Component elements + +- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination. +- These components share a standard `z-index` scale of `0` through `3`. +- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and `3` is `:focus`. +- This approach matches our expectations of highest user priority. If an element is focused, it's in view and at the user's attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered. + +### Overlay components + +Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project's custom styles. + +Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars. + +Learn more about this in our [`z-index` layout page]({{< docsref "/layout/z-index" >}}). + +## HTML and CSS over JS + +Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you. + +This principle is our first-class JavaScript API using `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}). + +Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use ` + + +{{< /example >}} + +## File input + +{{< example >}} +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+{{< /example >}} + +## Color + +{{< example >}} + + +{{< /example >}} + +## Datalists + +Datalists allow you to create a group of `
+ + + + +{{< /example >}} + +## Segmented buttons + +{{< example >}} +
+ + + + +
+ +
+ + + + +
+{{< /example >}} + +## Custom forms + +Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. + +### Custom select + +{{< example >}} +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+{{< /example >}} + +### Custom file input + +{{< example >}} +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+{{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/forms/layout.md b/site/content/docs/5.1/forms/layout.md new file mode 100644 index 000000000..47e2f8ab7 --- /dev/null +++ b/site/content/docs/5.1/forms/layout.md @@ -0,0 +1,330 @@ +--- +layout: docs +title: Layout +description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options. +group: forms +toc: true +--- + +## Forms + +Every group of form fields should reside in a `
` element. Bootstrap provides no default styling for the `` element, but there are some powerful browser features that are provided by default. + +- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes. +- ` + +
+{{< /example >}} + +## Horizontal form + +Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `