Bulma-responsiveness-colors
提供：Dev Guides
ブルマ-応答性と色
説明
レスポンシブデザインでは、ワイドスクリーンモニターから携帯電話まで、ウェブサイトの見栄えがよくなるように指定されています。 Bulmaはモバイル対応の開発であり、大規模、小規模、および中規模のデバイスと組み合わせることができます。 したがって、それは_mobile-first_フレームワークとして知られています。
デフォルトでは、Bulmaはモバイルでの垂直読み取りを指定し、以下のポイントが含まれています-
- _columns_は垂直形式で配置されます。
- levelコンポーネントの子は垂直に配置されます。
- _nav_メニューは表示されません。
ブレークポイント
ブルマには5つのブレークポイントが含まれています-
| S.No. | Device | Breakpoint |
|---|---|---|
| 1 | mobile | up to 768px |
| 2 | tablet | starts from 769px |
| 3 | desktop | starts from 1024px |
| 4 | widescreen | starts from 1216px |
| 5 | fullhd | starts from 1408px |
Bulmaには9個のレスポンシブミックスインが含まれています-
| S.No. | Mixin | Breakpoint |
|---|---|---|
| 1 | =mobile | up to 768px |
| 2 | =tablet | from 769px |
| 3 | =tablet-only | from 769px to 1023px |
| 4 | =touch | up to 1023px |
| 5 | =desktop | from 1024px |
| 6 | =desktop-only | from 1024px to 1215px |
| 7 | =widescreen | from 1216px |
| 8 | =widescreen-only | from 1216px to 1407px |
| 9 | =fullhd | from 1408px |
_ $ widescreen_および_ $ fullhd_ブレークポイントを無効にするには、それらをfalse値に設定します。
//Disabling the widescreen breakpoint
$widescreen-enabled: false
//Disabling the fullhd breakpoint
$fullhd-enabled: false色
Bulmaの要素とコンポーネントには、_。is- $ color_構文（たとえば、is-info、is-successなど）のさまざまなタイプのカラーバリアントが含まれています。
以下の表は、さまざまな種類の色とその反転値を示しています-
| S.No. | Color | Variable | Value | Computed value | Invert value | Computed invert value |
|---|---|---|---|---|---|---|
| 1 | White | $white | $white | hsl(0, 0%, 100%) | $black | hsl(0, 0%, 4%) |
| 2 | Black | $black | $black | hsl(0, 0%, 4%) | $white | hsl(0, 0%, 100%) |
| 3 | Light | $light | $white-ter | hsl(0, 0%, 96%) | $grey-darker | hsl(0, 0%, 21%) |
| 4 | Dark | $dark | $grey-darker | hsl(0, 0%, 21%) | $white-ter | hsl(0, 0%, 96%) |
| 5 | Primary | $primary | $turquoise | hsl(171, 100%, 41%) | #fff | #fff |
| 6 | Link | $link | $blue | hsl(217, 71%, 53%) | #fff | #fff |
| 7 | Info | $info | $cyan | hsl(204, 86%, 53%) | #fff | #fff |
| 8 | Success | $success | $green | hsl(141, 71%, 48%) | #fff | #fff |
| 9 | Warning | $warning | $yellow | hsl(48, 100%, 67%) | rgba(0, 0, 0, 0.7) | rgba(0, 0, 0, 0.7) |
| 10 | Danger | $danger | $red | hsl(348, 100%, 61%) | #fff | #fff |
ブルマは、以下に示すように、要素の黒と白の間にグレーの陰影を提供します-
| S.No. | Color | Variable | Value |
|---|---|---|---|
| 1 | Black bis | $black-bis | hsl(0, 0%, 7%) |
| 2 | Black ter | $black-ter | hsl(0, 0%, 14%) |
| 3 | Grey darker | $grey-darker | hsl(0, 0%, 21%) |
| 4 | Grey dark | $grey-dark | hsl(0, 0%, 29%) |
| 5 | Grey light | $grey-light | hsl(0, 0%, 71%) |
| 6 | Grey lighter | $grey-lighter | hsl(0, 0%, 86%) |
| 7 | White ter | $white-ter | hsl(0, 0%, 96%) |
| 8 | White bis | $white-bis | hsl(0, 0%, 98%) |
