Bulma-modifiers-syntax-responsive-helpers

提供：Dev Guides
移動先:案内、検索

Bulma-修飾子の構文とレスポンシブヘルパー

説明

修飾子クラスを使用して要素の代替スタイルを作成し、レスポンシブクラスを使用してスタイルを変更できます。 修飾子クラスは_is-ClassName_または_has-ClassName_で始まり、これらのクラスを使用して、要素にさまざまなタイプのスタイルを提供できます。

例

is-small _、 is-medium_および_is-large_クラスを使用して、is-primary _、 is-info 、 is-success 、 is-warning 、 is-danger_、およびさまざまな種類のボタンサイズなどの修飾子クラスとともに簡単なボタンを作成しましょう以下に示すように- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Modifiers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Simple Button
            </span>
            <br>
            <br>

            <a class = "button">
               Button
            </a>
         </div>
         <br>

         <div class = "container">
            <span class = "title">
               Using Modifier Classes
            </span>
            <br>
            <br>

            <a class = "button is-primary">is-primary</a>
            <a class = "button is-link">is-link</a>
            <a class = "button is-info">is-info</a>
            <a class = "button is-success">is-success</a>
            <a class = "button is-warning">is-warning</a>
            <a class = "button is-danger">is-danger</a>
         </div>
         <br>

          <div class = "container">
            <span class = "title">
            Resized Button
            </span>
            <br>
            <br>

            <a class = "button is-small">is-small</a>
            <a class = "button is-medium">is-medium</a>
            <a class = "button is-large">is-large</a>
         </div>
      </section>

   </body>
</html>

上記のコードをHTMLファイルに保存し、ブラウザーで開きます。 以下に示すように出力が表示されます-

以下に示すように、is-primary _、 is-outlined 、 is-loading 、 is-large_クラスを使用して、ボタンの_style_または_state_を変更することもできます- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Modifiers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               State of Button
            </span>
            <br>
            <br>

            <a class = "button is-primary is-outlined">
               is-outlined
            </a>

            <a class = "button is-info is-loading">
               is-loading
            </a>

            <a class = "button" disabled>
               disabled
            </a>

            <a class = "button is-danger is-outlined is-large">
               is-outlined & is-large
            </a>
         </div>
      </section>
   </body>
</html>

上記のコードを実行すると、次のように出力が得られます-

ヘルパー

以下のヘルパークラスを使用して、要素のスタイルを変更できます-

S.No.

ヘルパー

説明

1

is-clearfix

コンテナ内のフローティングコンテンツをクリアします。

2

左引き

要素を左側に移動します。

3

右引きです

要素を右側に移動します。

4

縁なし

マージンを削除します。

5

パディングレス

パディングを削除します。

6

オーバーレイ

背景を透明にすることで、要素のオーバーレイ効果を作成します。

7

クリッピングされている

隠されたオーバーフローを追加します。

8

無半径

半径を削除します。

9

影のない

影を取り除きます。

10

選択不可

クリックすると、要素が選択できなくなります。

11

見えない

可視性機能を隠します。

12

is-sr-only

要素を視覚的に隠しますが、スクリーンリーダーで使用できます。

レスポンシブヘルパー

以下の表示クラスを使用して、ビューポートの幅に基づいてコンテンツを_show_できます-

  • ブロック
  • flex
  • 列をなして
  • インラインブロック
  • インラインフレックス

ここでは、is-flex_ヘルパーを使用して、さまざまなタイプのクラスを一緒に表します。 _is-flex_クラスを_is-block _、 is-inline 、 is-inline-block 、 is-inline-flex_に置き換えることで、他のオプションを使用できます。

S.No. Class Mobile (till 768px) Tablet (769px to 1023px) Desktop (1024px to 1215px) Widescreen (1216px to 1407px) FullHD (above 1408px)
1 is-flex-mobile flex un-changed un-changed un-changed un-changed
2 is-flex-tablet-only un-changed flex un-changed un-changed un-changed
3 is-flex-desktop-only un-changed un-changed flex un-changed un-changed
4 is-flex-widescreen-only un-changed un-changed un-changed flex un-changed

以下のクラスを使用して、特定のブレークポイントまでまたは特定のブレークポイントから要素を表示できます-

S.No. Class Mobile (till 768px) Tablet (from 769px to 1023px) Desktop (from 1024px to 1215px) Widescreen (from 1216px to 1407px) FullHD (above 1408px)
1 is-flex-touch flex flex un-changed un-changed un-changed
2 is-flex-tablet un-changed flex flex flex flex
3 is-flex-desktop un-changed un-changed flex flex flex
4 is-flex-widescreen un-changed un-changed un-changed flex flex
5 is-flex-fullhd un-changed un-changed un-changed un-changed flex

以下のクラスを使用して、ビューポートの幅に基づいてコンテンツを_hide_できます-

S.No. Class Mobile (till 768px) Tablet (from 769px to 1023px) Desktop (from 1024px to 1215px) Widescreen (from 1216px to 1407px) FullHD (above 1408px)
1 is-hidden-mobile hidden visible visible visible visible
2 is-hidden-tablet-only visible hidden visible visible visible
3 is-hidden-desktop-only visible visible hidden visible visible
4 is-hidden-widescreen-only visible visible visible hidden visible

以下のクラスを使用して、特定のブレークポイントまでまたは特定のブレークポイントから要素を非表示にできます-

S.No. Class Mobile (till 768px) Tablet (from 769px to 1023px) Desktop (from 1024px to 1215px) Widescreen (from 1216px to 1407px) FullHD (above 1408px)
1 is-hidden-touch hidden hidden visible visible visible
2 is-hidden-tablet visible hidden hidden hidden hidden
3 is-hidden-desktop visible visible hidden hidden hidden
4 is-hidden-widescreen visible visible visible hidden hidden
5 is-hidden-fullhd visible visible visible visible hidden
「https://www.finddevguides.com/index.php?title=Bulma-modifiers-syntax-responsive-helpers&oldid=20506」から取得
Powered by MediaWiki