mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Mark Otto
52 lines
1.1 KiB
Markdown
52 lines
1.1 KiB
Markdown
---
|
|
layout: docs
|
|
title: Snippets
|
|
description: Extend Bootstrap with some common snippets of source code not included in the main project.
|
|
group: extend
|
|
---
|
|
|
|
## Components
|
|
|
|
### Light badges
|
|
|
|
{{< example >}}
|
|
{{< badge.inline >}}
|
|
{{- range (index $.Site.Data "theme-colors") }}
|
|
<span class="badge badge-light-{{ .name }} text-dark">{{ .name | title }}</span>{{- end -}}
|
|
{{< /badge.inline >}}
|
|
{{< /example >}}
|
|
|
|
```scss
|
|
@each $color, $value in $theme-colors {
|
|
$badge-light-bg: shift-color($value, -80%);
|
|
.badge-light-#{$color} {
|
|
background-color: $badge-light-bg;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Light buttons
|
|
|
|
{{< example >}}
|
|
{{< buttons.inline >}}
|
|
{{- range (index $.Site.Data "theme-colors") }}
|
|
<button type="button" class="btn btn-light-{{ .name }}">{{ .name | title }}</button>
|
|
{{- end -}}
|
|
{{< /buttons.inline >}}
|
|
{{< /example >}}
|
|
|
|
```scss
|
|
@each $color, $value in $theme-colors {
|
|
$btn-light-bg: shift-color($value, -80%);
|
|
$btn-light-border: shift-color($value, -80%);
|
|
.btn-light-#{$color} {
|
|
@include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%));
|
|
}
|
|
}
|
|
```
|
|
|
|
## Utilities
|
|
|
|
- Opacity
|
|
- Expanded widths/heights
|