1からBootstrapを学ぶ


どうもBootstrap基本を覚えてないので、再度勉強。
現在のバージョンは2017年3月17日  v3.3.7

まずは基本のサイト構成
公式サイトの基本を書いて保存してみる。
デモ

次に、グリッドの確認
@see https://techacademy.jp/magazine/6270

デモ

  • Extra small / 画面幅 極小(544px未満)
  • Small / 画面幅 小(544px以上 768px未満)
  • Medium / 画面幅 中 (768px以上 992px未満)
  • large / 画面幅 大 (992px以上 1200px未満)
  • Extra large / 画面幅 特大 (1200px以上)

上記になってるとの事。
@See http://websae.net/twitter-bootstrap-grid-system-21060224/

種別 Extra small Small Medium Large
略称 xs sm md lg
デバイス スマートフォンなど タブレット 中型ディスプレイ 大型ディスプレイ
画面サイズ 768px未満 768~991px 992~1199px 1200px以上

なるほど、
疑問?

画面幅を12で切ってるなら、全て1にしたら?

デモ

1でそうなるのか?

このxs,sm,md,lg の使い方が分からないな。

col-デバイス-カラム数で分けるというのは分かるが、
visible-{prefix} や hidden-{prefix} で消えるというのかではテスト

X3設定したら消えるな……なんだこれは

デモ5


◆「lg・md・sm・xs」というブレイクポイントの定義がある。
◆指定したブレイクポイント以下のサイズになると、とにかく1カラム縦積みになる。
◆「xs」だけ例外で、指定したカラム数のまま表示されつづける

◆カラム分割は各カラムの数字が合計すると12になるよう指定する。
◆合計12を超えるとカラム落ちが発生する

@See http://tonari-it.com/bootstrap-column/

これか……
何かサンプルのテンプレートが欲しいところだが、

つづく(´・ω・) ス

 

 

@https://medium.com/coiney-product-team/%E3%81%86%E3%82%8F%E3%81%A3-%E7%A7%81%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88bootstrap%E3%81%8F%E3%81%95%E3%81%99%E3%81%8E-%E3%81%9F%E3%81%A3%E3%81%9F%E6%95%B0%E6%96%87%E5%AD%97%E5%A4%89%E3%81%88%E3%82%8B%E3%81%A0%E3%81%91%E3%81%A7bootstrap%E3%81%AE%E3%81%8F%E3%81%95%E3%81%BF%E3%81%8C%E6%8A%9C%E3%81%91%E3%82%8B7%E3%81%A4%E3%81%AEcss%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-6cd1c3b8410a

Follow me!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA