タイポグラフィ

見出し,本文,リストなどの例です。

Headings

HTML の見出し level="1" から level="6" が利用可能です。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
vue
<template>
 <b-h level="1">
  h1. Bootstrap heading
 </b-h>
 <b-h level="2">
  h2. Bootstrap heading
 </b-h>
 <b-h level="3">
  h3. Bootstrap heading
 </b-h>
 <b-h level="4">
  h4. Bootstrap heading
 </b-h>
 <b-h level="5">
  h5. Bootstrap heading
 </b-h>
 <b-h level="6">
  h6. Bootstrap heading
 </b-h>
</template>

headings="1" から headings="6" 属性も利用できます。これは、見出しのフォントスタイリングを一致させたいが、関連する HTML 要素を使用できない場合に利用できます。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

vue
<template>
 <b-p headings="1">
  h1. Bootstrap heading
 </b-p>
 <b-p headings="2">
  h2. Bootstrap heading
 </b-p>
 <b-p headings="3">
  h3. Bootstrap heading
 </b-p>
 <b-p headings="4">
  h4. Bootstrap heading
 </b-p>
 <b-p headings="5">
  h5. Bootstrap heading
 </b-p>
 <b-p headings="6">
  h6. Bootstrap heading
 </b-p>
</template>

Customizing headings

text-color 属性を利用して下記のような見出しを作成できます。

Fancy display heading With faded secondary text

vue
<template>
 <b-h level="3">
  Fancy display heading
  <BInline
   tag="small"
   text-color="body-secondary"
  >
   With faded secondary text
  </BInline>
 </b-h>
</template>

Display headings

見出しを目立たせる必要がある場合は、display-headings 属性を使用することを検討してください。

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

vue
<template>
 <b-h
  level="1"
  display-headings="1"
 >
  Display 1
 </b-h>
 <b-h
  level="1"
  display-headings="2"
 >
  Display 2
 </b-h>
 <b-h
  level="1"
  display-headings="3"
 >
  Display 3
 </b-h>
 <b-h
  level="1"
  display-headings="4"
 >
  Display 4
 </b-h>
 <b-h
  level="1"
  display-headings="5"
 >
  Display 5
 </b-h>
 <b-h
  level="1"
  display-headings="6"
 >
  Display 6
 </b-h>
</template>

Lead

lead属性を追加して目立たせることができます。

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

vue
<template>
 <b-p lead>
  This is a lead paragraph. It stands out from regular paragraphs.
 </b-p>
</template>

Inline text elements

一般的なインライン HTML5 要素のためのスタイリング。

You can use the mark tag to highlight text.

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

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

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.

vue
<template>
 <b-p>
  You can use the mark tag to
  <mark>highlight</mark>
  text.
 </b-p>
 <b-p>
  <del>This line of text is meant to be treated as no longer accurate.</del>
 </b-p>
 <b-p>
  <s>This line of text is meant to be treated as no longer accurate.</s>
 </b-p>
 <b-p>
  <u>This line of text will render as underlined.</u>
 </b-p>
 <b-p>
  <small>This line of text is meant to be treated as fine print.</small>
 </b-p>
 <b-p><strong>This line rendered as bold text.</strong></b-p>
 <b-p><em>This line rendered as italicized text.</em></b-p>
</template>

これらのタグは意味を表す目的で使用する必要があることに注意してください。

  • mark 参照または表記の目的でマークまたは強調表示されたテキストを表します。
  • small 著作権や法的文章のような副次的なコメントや小さな活字を表します。
  • <s> 関連しなくなった要素や正確でなくなった要素を表します。
  • <u> テキスト以外の注釈があることを示す方法でレンダリングされるべきインラインテキストのスパンを表します。

テキストのスタイルを整えたい場合は、代わりに以下のクラスを使用してください。

  • mark 属性は mark コンポーネントと同じスタイルを適用します。
  • small 属性は small コンポーネントと同じスタイルを適用します。
  • textDecoration = "underline" は <u> と同じスタイルを適用します。
  • textDecoration = "line-through" は <s> と同じスタイルを適用します。

上記には示していませんが、HTML5では <b> や <i> を自由に使ってください。

<b> は追加の重要性を伝えずに単語やフレーズを強調するためのもので、<i> は主に音声や専門用語などのためのものです。

You can use the mark tag to highlight text.

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

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

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.

vue
<template>
 <b-p>
  You can use the mark tag to
  <BInline mark>
   highlight
  </BInline>
  text.
 </b-p>
 <b-p>
  <BInline text-decoration="line-through">
   This line of text is meant to be treated as no longer accurate.
  </BInline>
 </b-p>
 <b-p>
  <BInline tag="del">
   This line of text is meant to be treated as deleted text.
  </BInline>
 </b-p>
 <b-p>
  <BInline text-decoration="underline">
   This line of text will render as underlined.
  </BInline>
 </b-p>
 <b-p>
  <BInline small>
   This line of text is meant to be treated as fine print.
  </BInline>
 </b-p>
 <b-p>
  <BInline tag="strgong">
   This line rendered as bold text.
  </BInline>
 </b-p>
 <b-p>
  <BInline tag="em">
   This line rendered as italicized text.
  </BInline>
 </b-p>
</template>

Text utilities

text utilities と color utilities で、テキストの整列、変形、スタイル、太さ、線の高さ、装飾、色を変更できます。

Abbreviations

<abbr> 要素で、略語と頭字語を表します。ホバーした際に省略されていないテキストを表示します。

デフォルトで下線が引かれ、ホバーしたときや支援技術のユーザーに追加の文脈を提供するためのヘルプカーソルが表示されます。

文字サイズを少し小さくするための略語に initialism 属性を追加できます。

attr

HTML

vue
<template>
 <b-p>
  <abbr title="attribute">
   attr
  </abbr>
 </b-p>
 <b-p>
  <BInline
   tag="abbr"
   title="HyperText Markup Language"
   initialism
  >
   HTML
  </BInline>
 </b-p>
</template>

Lists

Unstyled

list-style, margin-left は削除されています。(直後の子のみ)

  • This is a ListItemst.
  • It appears completely unstyled.
  • Structurally, it's still a ListItemst.
  • However, this style only appListItemes to immediate child elements.
  • Nested ListItemsts:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
vue
<template>
 <List unstyled>
  <ListItem>This is a ListItemst.</ListItem>
  <ListItem>It appears completely unstyled.</ListItem>
  <ListItem>Structurally, it's still a ListItemst.</ListItem>
  <ListItem>However, this style only appListItemes to immediate child elements.</ListItem>
  <ListItem>
   Nested ListItemsts:
   <List>
    <ListItem>are unaffected by this style</ListItem>
    <ListItem>will still show a bullet</ListItem>
    <ListItem>and have appropriate left margin</ListItem>
   </List>
  </ListItem>
  <ListItem>This may still come in handy in some situations.</ListItem>
 </List>
</template>

Inline

箇条書きの黒丸がなくなり, inline 属性により margin が適用されます。

  • This is a list item.
  • And another one.
  • But they're displayed inline.
vue
<template>
 <List inline>
  <ListItem inline>
   This is a list item.
  </ListItem>
  <ListItem inline>
   And another one.
  </ListItem>
  <ListItem inline>
   But they're displayed inline.
  </ListItem>
 </List>
</template>

Description list alignment

グリッドシステム(または semantic mixins )を使用して, 用語と説明リストを水平方向に配置します。

文字が長い場合は場合は text-truncate 属性を追加してテキストを省略できます。

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.
vue
<template>
 <b-dl>
  <b-dt col="sm-3">
   Description lists
  </b-dt>
  <b-dd col="sm-9">
   A description list is perfect for defining terms.
  </b-dd>
  <b-dt col="sm-3">
   Term
  </b-dt>
  <b-dd col="sm-9">
   <b-p>Definition for the term.</b-p>
   <b-p>And some more placeholder definition text.</b-p>
  </b-dd>
  <b-dt col="sm-3">
   Another term
  </b-dt>
  <b-dd col="sm-9">
   This definition is short, so no extra paragraphs or anything.
  </b-dd>
  <b-dt
   col="sm-3"
   text-truncate
  >
   Truncated term is truncated
  </b-dt>
  <b-dd col="sm-9">
   This can be useful when space is tight. Adds an ellipsis at the end.
  </b-dd>
  <b-dt col="sm-3">
   Nesting
  </b-dt>
  <b-dd col="sm-9">
   <b-dl>
    <b-dt col="sm-4">
     Nested definition list
    </b-dt>
    <b-dd col="sm-8">
     I heard you like definition lists. Let me put a definition list inside
     your definition list.
    </b-dd>
   </b-dl>
  </b-dd>
 </b-dl>
</template>

Extend

ListItem Icon

Master the art of building websites with modern tools

  • Real-time collaboration
  • News and updates
  • Workshops and seminars
Edge App

Edge App makes browsing on Android more efficient.

  • In-depth Analytics
  • Online Advertising
  • Project Management
Discover more
Wave App

Wave App simplifies your daily tasks on iOS.

  • User Engagement
  • Content Creation
  • Team Collaboration
Learn more
Pulse App

Pulse App helps you stay connected on the go.

  • Instant Messaging
  • Social Media Integration
  • Event Scheduling
Explore more
vue
<template>
 <HeroRow
  text-alignment="center"
  size="md-8"
 >
  <b-div
   margin="x-auto"
  >
   <b-h level="2">
    Master the art of building websites with modern tools
   </b-h>
  </b-div>
 </HeroRow>
 <HeroRow text-alignment="center">
  <List inline>
   <ListItem
    inline
    icon="bi:check"
    icon-color="primary"
   >
    Real-time collaboration
   </ListItem>
   <ListItem
    inline
    icon="bi:check"
    icon-color="primary"
   >
    News and updates
   </ListItem>
   <ListItem
    inline
    icon="bi:check"
    icon-color="primary"
   >
    Workshops and seminars
   </ListItem>
  </List>
 </HeroRow>
 <Row columns="1 md-3">
  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop src="/unsplash/image/480x220/redd-f-5U_28ojjgms-unsplash.jpg" />
    <CardBody>
     <CardTitle>Edge App</Cardtitle>
     <CardText>Edge App makes browsing on Android more efficient.</CardText>
     <List unstyled>
      <ListItem icon="bi:chevron-right">
       In-depth Analytics
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Online Advertising
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Project Management
      </ListItem>
     </List>
    </CardBody>

    <CardFooter>
     <CardLink
      stretched
      to="/"
      icon="bi:chevron-right"
      icon-end
     >
      Discover more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg" />
    <CardBody>
     <CardTitle>Wave App</CardTitle>
     <CardText>Wave App simplifies your daily tasks on iOS.</CardText>

     <List unstyled>
      <ListItem icon="bi:chevron-right">
       User Engagement
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Content Creation
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Team Collaboration
      </ListItem>
     </List>
    </CardBody>

    <CardFooter>
     <CardLink
      stretched
      to="/"
      icon="bi:chevron-right"
      icon-end
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop src="/unsplash/image/480x220/unseen-studio-s9CC2SKySJM-unsplash.jpg" />
    <CardBody>
     <CardTitle>Pulse App</CardTitle>
     <CardText>Pulse App helps you stay connected on the go.</CardText>
     <List unstyled>
      <ListItem icon="bi:chevron-right">
       Instant Messaging
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Social Media Integration
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Event Scheduling
      </ListItem>
     </List>
    </CardBody>

    <CardFooter>
     <CardLink
      stretched
      to="/"
      icon="bi:chevron-right"
      icon-end
     >
      Explore more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
 </Row>
</template>

See Also