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 column編

Posted at

注意書き

自分用のメモなのでかなり雑です。初めてbulma使うので公式サイトを適当にまとめとく。英語は大嫌いなので超ガバ翻訳です。間違えてたら教えてください。
公式

column

basic
まず横に並べたい内容をcolumnsでかこってcolumnで一つずつ書く。特に指定しなければ均等の幅になる。
size
1~5分の1~5まで指定できる。例えば一つを画面の1/3にしたいならis-one-third。念のため英語で数字も書いておく。
分子 one,two,three,four,five
分母 (half),third(s),quarter(s),fifth(s)、分子が2以上なら複数形、指定してないところは均等に分けられる。
またis-数字 (数字は1~12)とすると数字/12の幅が割り当てられる。
is-narrowこれを使うと必要な分だけスペースをとってくれる。そのほかは埋めるようにスペースを割り当てられる。公式見たほうがわかりやすい。
responsiveness
-mobile,-tablet,-desktop,-widescreen,-fullhdで端末ごとに違うsizeに出来たりする
Nesting
ネストもできる。公式見たほうが早い
gap
それぞれの間のスペースも調整できる。is-gaplessとかだとスペースがなくなる。

  

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?