Bootstrap基礎 – テックメモ

Gridシステムについて

containerクラスで囲うと余白ができる

全体の横幅12に分割すると考える。

先ず、rowクラスを作り、その中に
col-sm-12クラスのようにして追加いく。

col-sm-12のsmの部分は、該当px以下のときに適応される。
xs = auto
sm = 750px
md = 970px
lg = 1170px
が種類。

hidden-xs
visible-xs
のように該当サイズになると見せたり消したりもできる。

tableタグ

tableタグにtableクラスを付けるだけで見た目が変わる。
その他にも、tableクラスと合わせて
table-stripedクラス（色分）
table-borderedクラス（枠線）
table-hoverクラス（カーソル反応）
table-condensed（縮小）
などがある。

trタグではwarningクラスと付けると行に色が付く。

formタグ

先ずform-groupクラスで囲う。
その中にlabelタグとinputタグを入れる。
labeタグにはcontrol-labelクラスを付けて、
inputタグには、form-controlクラスを付ける。

buttonタグには、
btn btn-primaryクラス等を付ける。

formタグにform-inlineクラスを付けと横並び。

glyphiconsとボタン

<i class=”glyphicon glyphicon-book”></i>
のように使う。

btn btn-primaryクラス等でボタンとなる。

ボタンをグループ化スル場合、要素を
btn-groupクラスで囲う。

dropdown

ボタングループを作って、ボタンを入れて、そのボタンに、
dropdown-toggleクラスを付けのと、
data-toggle属性にdropdownを付ける。

メニューは、ulタグにdropdown-menuクラスを付ける。

<button class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown” >
xxx <span class=”caret”></span>
</button>
<ul>
<li class=”dropdown-menu”>xxx</li>
</ul>
のような感じ。

最大幅を固定

@media(min-width:750px){.container{max-width:750px;}}
この場合750pxより大きい場合に適用。

グリッドのネスト

ネストさせる場合。
.row > .col > .row > .col
にする。

子になった方も12で分割される。

適当に実験

<!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">
    <title>Bootstrap 101 Template</title>
    <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>

  <?php
  if(array_key_exists("n",$_GET) && $_GET["n"] !== ""){
    echo $_GET["n"];
  }
  ?>

  <div class="container">
  <div class="row">
  <div class="col-sm-4" style="background:red;">

    <form method="get" class="form-horizontal row">

      <div class="form-group">
        <label class="control-label col-sm-4">名前</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" name="n">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-12">
          <input type="submit" class="btn">
        </div>
      </div>

    </form>

  </div>
  <div class="col-sm-8" style="background:gray;">right</div>
  </div>
  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 101 Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<?php

if(array_key_exists("n",$_GET) && $_GET["n"] !== ""){

echo $_GET["n"];

}

</div>

</div>

</form>

</div>

<div class="col-sm-8" style="background:gray;">right</div>

</div>

</body>

</html>