NO IMAGE

1からBootstrapを学ぶ


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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

次に、グリッドの確認
@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にしたら?

<div class="container-fluid">
  <div class="row">
			<div class="col-sm-1" style="background-color:red;">Red</div>
			<div class="col-sm-1" style="background-color:blue;">Blue</div>
			<div class="col-sm-1" style="background-color:yellow;">Yellow</div>
			<div class="col-sm-1" style="background-color:red;">Red</div>
			<div class="col-sm-1" style="background-color:blue;">Blue</div>
			<div class="col-sm-1" style="background-color:yellow;">Yellow</div>
			<div class="col-sm-1" style="background-color:red;">Red</div>
			<div class="col-sm-1" style="background-color:blue;">Blue</div>
			<div class="col-sm-1" style="background-color:yellow;">Yellow</div>
			<div class="col-sm-1" style="background-color:red;">Red</div>
			<div class="col-sm-1" style="background-color:blue;">Blue</div>
			<div class="col-sm-1" style="background-color:yellow;">Yellow</div>
  </div>
</div>

デモ

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

NO IMAGE
最新情報をチェックしよう!

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 37

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 38

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 39

  • Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 83

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 84

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 85
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG