0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

bulma componet編

Last updated at Posted at 2021-02-01
class="breadcrumb"
俗にいうパンくずリスト(〇〇/××/△△みたいにスラッシュで区切られてるやつ)。自分のwebサイトを作ったことがないのでパンくずリスト自体よく知らないがどっかで聞いたことがある。現在ページを表示させたりできるのだろう。home/user/yukky みたいに。使う時が来たら追記する。
class="card"
The card component comprises several elements that you can mix and match
色んな要素を組み合わせて一つのカードを作るよ。公式にわかりやすい具体例があるのでそれ見るのが早い。
class="dropdown"
dropdown これがメインの容器
dropdown-trigger これがトリガー。押すと一覧が出てくる。
dropdown-menu トリガーを押すと出てくる一覧の容器
dropdown-content これも容器。menuとの違いがよくわからない。サンプルではdropdown-menuの次に書かいてるので書かなきゃいけない感じかな?
dropdown-item これが一覧一つ一つのやつ。aタグがdivタグにつけろよって書いてある
dropdown-divider これは一覧を区切ってくれる線。
class="menu"
縦型のメニューを作れる。要素はシンプル。
menu これがメインの容器
menu-label これがラベル。pタグにクラスでつける
menu-list これが内容。ulタグにクラスでつけて中にliタグを並べれば完成。
class="modal"
modal これがメインの容器
modal-background これを入れとくと×ボタンじゃなくて画面のどこかをタッチするだけで閉じれるようになる。みたいな感じかな?
modal-content これが内容。縦横すべて中央ぞろえにしてくれる。
modal-close ×ボタン
class="navbar"
画像、リンク、ボタン、ドロップダウンを横に表示できる。
navbar これがメインの容器
navbar-brand 常に表示されるやつ。ロゴとかにしとけって書いてある。
navbar-burger ハンバーガーリストを作ってくれる。空のスパンタグを3つ入れろって書いてある。
navbar-menu navbar-brandのとなりに表示されるやつの容器。画面が小さいと非表示になるから消したくないならis-activをつけろって書いてある。
navbar-start 左側に追加されてく容器。navbar-menuの子要素
navbar-end 右側に追加されてく容器。navbar-menuの子要素
navbar-item 実際に表示したい内容を入れるところ。上二つのさらに子要素
class="pagination"

  

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?