Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhengchun
zhengchun committed Oct 20, 2023
1 parent 0982784 commit 420db60
Show file tree
Hide file tree
Showing 20 changed files with 638 additions and 653 deletions.
397 changes: 17 additions & 380 deletions dist/css/fastbootstrap.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.min.css.map
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions dist/css/fastbootstrap.rtl.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.rtl.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.rtl.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.rtl.min.css.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions site/content/docs/content/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ menu:

{{< class-api "content" >}}

## Basic examples
## Basic usage

### Remove the `::before` and `::after` Pseudo-element

Use `content-none` to disable the `::before` and `::after` pseudo-elements appear on the child of current element.

{{< example >}}
{{< example class="bg-grid-slate-100" >}}
<div class="content-none">The quick brown fox jumps over the lazy dog.</div>
{{</ example >}}
5 changes: 4 additions & 1 deletion site/content/docs/font-family/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,12 @@ menu:

Change a selection to our monospace font stack with `.font-monospace`.

<div class="bd-example">
{{< example class="bg-grid-slate-100" show_source="false" >}}
<div>
<span class="text-muted fa-sm fw-medium mb-3">font-monospace</span>
<p class="font-monospace fw-semibold fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
{{</ example >}}

```html
<p class="font-monospace">The quick brown fox ...</p>
Expand Down
61 changes: 37 additions & 24 deletions site/content/docs/font-size/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,30 @@ Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`

Control the font size of an element using the `fs-{size}` utilities.

<div class="bd-example">
<span class="text-muted">fs-sm</span>
<p class="fs-sm fw-semibold">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fs-6</span>
<p class="fs-6 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fs-5</span>
<p class="fs-5 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fs-4</span>
<p class="fs-4 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fs-3</span>
<p class="fs-3 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
{{< example class="bg-grid-slate-100" show_source="false" >}}
<div class="d-flex flex-column gap-5">
<div>
<span class="text-muted fa-sm fw-medium mb-3">fs-sm</span>
<p class="fs-sm fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted fa-sm fw-medium mb-3">fs-6</span>
<p class="fs-6 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted fa-sm fw-medium mb-3">fs-5</span>
<p class="fs-5 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted fa-sm fw-medium mb-3">fs-4</span>
<p class="fs-4 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted fa-sm fw-medium mb-3">fs-3</span>
<p class="fs-3 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
{{</ example >}}

```html
<p class="fs-sm ...">The quick brown fox ...</p>
Expand All @@ -41,11 +53,22 @@ Control the font size of an element using the `fs-{size}` utilities.
<p class="fs-3 ...">The quick brown fox ...</p>
```

### Headings

### Lead

Make a paragraph stand out by adding `.lead`.

{{< example class="bg-grid-slate-100" >}}
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
{{</ example >}}

## Headings

Use the `<h1> ~ <h6>`HTML tag or the `.h1 ~ .h6` utilities to scale the font size, weight and line height of an element.

{{< example >}}
{{< example class="bg-grid-slate-100">}}
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
Expand All @@ -56,7 +79,7 @@ Use the `<h1> ~ <h6>`HTML tag or the `.h1 ~ .h6` utilities to scale the font siz

Use the `.h1 ~ .h6` classes for when you want to match the font styling of a heading but cannot use the associated HTML element.

{{< example >}}
{{< example class="bg-grid-slate-100" >}}
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
Expand All @@ -80,16 +103,6 @@ When you need a heading to stand out, consider using a display heading — a lar
<h1 class="display-6">Display 6</h1>
{{</ example >}}

### Lead

Make a paragraph stand out by adding `.lead`.

{{< example >}}
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
{{</ 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](https://getbootstrap.com/docs/5.2/getting-started/rfs/) to find out how this works.
18 changes: 12 additions & 6 deletions site/content/docs/font-style/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,24 @@ Quickly change the `font-style` of text using the font style utilities.

{{< class-api "font-style" >}}

### Basic examples
### Basic usage

### Italicizing text

The `fst-italic` utility can be used to make text italic. Likewise, the `fst-normal` utility can be used to display text normally — typically to reset italic text at different breakpoints.

<div class="bd-example">
<span class="text-muted">fst-italic</span>
<p class="fst-italic fs-5 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fst-normal</span>
<p class="fst-normal fs-5 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
{{< example class="bg-grid-slate-100" show_source="false" >}}
<div class="d-flex flex-column gap-5">
<div>
<span class="text-muted fa-sm fw-semibold mb-3 font-monospace">fst-italic</span>
<p class="fst-italic fs-5 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted mb-3 fa-sm fw-semibold font-monospace">fst-normal</span>
<p class="fst-normal fs-5 fw-semibold">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
{{</ example >}}

```html
<p class="fst-italic ...">The quick brown fox ...</p>
Expand Down
38 changes: 27 additions & 11 deletions site/content/docs/font-weight/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,34 @@ Quickly change the `font-weight` of text with the font weight utilities.

Control the font weight of an element using the `fw-{weight}` utilities.

<div class="bd-example">
<span class="text-muted">fw-light</span>
<p class="fw-light fs-5">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fw-normal</span>
<p class="fw-normal fs-5">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fw-semibold</span>
<p class="fw-semibold fs-5">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fw-bold</span>
<p class="fw-bold fs-5">The quick brown fox jumps over the lazy dog.</p>
<span class="text-muted">fw-bolder</span>
<p class="fw-bolder fs-5">The quick brown fox jumps over the lazy dog.</p>
{{< example class="bg-grid-slate-100" show_source="false" >}}
<div class="d-flex flex-column gap-4">
<div>
<span class="text-muted mb-3">fw-light</span>
<p class="fw-light fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted mb-3">fw-normal</span>
<p class="fw-normal fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted mb-3">fw-medium</span>
<p class="fw-medium fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted mb-3">fw-semibold</span>
<p class="fw-semibold fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted mb-3">fw-bold</span>
<p class="fw-bold fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="text-muted mb-3">fw-bolder</span>
<p class="fw-bolder fs-5">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
{{</ example >}}

```html
<p class="fw-light ...">The quick brown fox ...</p>
Expand Down
Loading

0 comments on commit 420db60

Please sign in to comment.