1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00

Link helpers & use utility API for all utilities

This commit is contained in:
Martijn Cuppens
2019-08-17 20:19:00 +02:00
parent a5cbb5e71a
commit 19ee63ad25
18 changed files with 91 additions and 95 deletions

View File

@@ -0,0 +1,17 @@
---
layout: docs
title: Colored links
description: Colored links with hover states
group: helpers
toc: false
---
You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state.
{{< example >}}
{{< colored-links.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
{{- end -}}
{{< /colored-links.inline >}}
{{< /example >}}

View File

@@ -3,11 +3,9 @@ layout: docs
title: Text truncation
description: Truncate long strings of text with an ellipsis.
group: helpers
toc: true
toc: false
---
## Text truncation
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
{{< example >}}

View File

@@ -60,6 +60,7 @@ Changes to Reboot, typography, tables, and more.
- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
- Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
- Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
## Forms

View File

@@ -8,6 +8,8 @@ toc: true
## Color
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
@@ -21,18 +23,6 @@ toc: true
<p class="text-white-50 bg-dark">.text-white-50</p>
{{< /example >}}
Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no additional link styling beyond underline.**
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<p><a href="#" class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">{{ .name | title }} link</a></p>
{{- end -}}
{{< /colors.inline >}}
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
{{< /example >}}
## Background color
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.