Bootstrap チュートリアル3〜W3schools: グリッドシステム〜

今回はBootstrapでのグリッドシステムを学びます。大雑把に下の様に表示するときのやり方と言うことです。

f:id:Takunoji:20191012174729p:plain — グリッドシステム

グリッドシステム

この様な表示をするときは多くの場合データを表示することが多いと思います。

なのでこちらも何かのデータを表示したいと思うのですが。。。

その前に、仕組みの方を理解する必要がありました。

とりあえずはサンプルコードをコピーして表示して見ました。

f:id:Takunoji:20191012180554p:plain — サンプルコードの表示

「columns」の表示がやたらと小さいです。それもそのはず、下の様なコードで表示しているからです。

<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="utf-8">
    <metaname="viewport"content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="jumbotron text-center">
        <h1>MyFirstBootstrapPage</h1>
        <p>Resizethisresponsivepagetoseetheeffect!</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-*-*">columns1</div>
            <div class="col-*-*">columns2</div>
        </div>
        <div class="row">
            <div class="col-*-*">columns3</div>
            <div class="col-*-*">columns4</div>
            <div class="col-*-*">columns5</div>
        </div>
    </div>
</body>
</html>

上のコードの「class="col-*-*」の部分に適当な値を入れる必要があります。
その部分に対する記載がこちらです。