前回は、学習に必要な環境を準備しました。
今回は、Bootstrapの基礎を勉強しましょう。
<目次>
Bootstrapとは

Bootstrapを学びましょう!
Bootstrapってそもそも何?使えて何が嬉しいの?

まずは、Bootstrapについて、簡単に説明します。
Bootstrapは、「CSSのフレームワーク」です。
従来、私たちがWebデザインを行う時、CSSによるフルスクラッチで実装してきましたが、Bootstrapは特殊なタグを使うことによって、デザインにおける実装を大幅に簡便化させたものになります。
説明は、以上です。
? 何言っているの??


説明がざっくりしすぎてますよね。しかし、「習うより慣れろ」です。手を動かして学んでいきましょう!
事前準備
テキストとカラー

最初は、テキストとカラーをみていきましょう!
Bootstrapを使うと、テキストとカラーがびっくりするほど簡単にデザインできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="title icon" type="image/png" href="images/title-img.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- fontawesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <title>Learning Bootstrap</title> <style> body { background: #eee; } </style> </head> <body> <p class="text-left text-uppercase font-weight-bold">Lorem ipsum, dolor sit amet.</p> <p class="text-center text-lowercase font-weight-normal">Lorem ipsum, dolor sit amet.</p> <p class="text-right text-capitalize font-weight-light">Lorem ipsum, dolor sit amet.</p> <p class="text-justify font-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a perferendis quis, aliquam enim at perspiciatis odio rem numquam nemo adipisci harum dolore magnam tempore? Qui blanditiis aut tenetur accusantium.</p> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
<出力結果>
Lorem ipsum, dolor sit amet.
Lorem ipsum, dolor sit amet.
Lorem ipsum, dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a perferendis quis, aliquam enim at perspiciatis odio rem numquam nemo adipisci harum dolore magnam tempore? Qui blanditiis aut tenetur accusantium.
classに付いている「text-left text-uppercase font-weight-bold」などが、Bootstrapの特殊タグです。
続いて、文字列に色をつけてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="title icon" type="image/png" href="images/title-img.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- fontawesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <title>Learning Bootstrap</title> </head> <body> <p class="text-primary">Lorem ipsum dolor sit amet.</p> <p class="text-secondary">Lorem ipsum dolor sit amet.</p> <p class="text-success">Lorem ipsum dolor sit amet.</p> <p class="text-danger">Lorem ipsum dolor sit amet.</p> <p class="text-warning">Lorem ipsum dolor sit amet.</p> <p class="text-info">Lorem ipsum dolor sit amet.</p> <p class="text-light">Lorem ipsum dolor sit amet.</p> <p class="text-dark">Lorem ipsum dolor sit amet.</p> <p class="text-muted">Lorem ipsum dolor sit amet.</p> <p class="text-white">Lorem ipsum dolor sit amet.</p> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
<出力結果>
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
text-〇〇と指定すると色のデザインができます。便利ですね^^
画面幅の切り替え(ブレイクポイント)

続いては、ブレイクポイントを学びます。
Bootstrapを導入するメリットは、レスポンシブル対応が、驚くほど簡単にできることです。
次に示すのは、画面幅の”単位“です。
単位:ピクセル
xs < 576 <= sm < 768 <= md < 992 <= lg < 1200 <= xl
このxsやxlは、ブラウザの画面幅を表していて、画面幅の拡大・縮小に伴った切り替え(ブレークポイント)を設置できます。
何言ってるのかわからないよ〜


そうですよね。具体例をお見せしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="title icon" type="image/png" href="images/title-img.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- fontawesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <title>Learning Bootstrap</title> </head> <body> <h1 class="text-sm-center">SAMPLE TEXT</h1> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
「text-sm-center」をh1タグに適用しました。画面を表示させてみましょう。

横幅が「740ピクセル」であるため、「sm」のブレークポイントの範囲内です。そのため「SAMPLE TEXT」の文字列が真ん中に表示されています。
この740ピクセルの横幅を縮小してみましょう。

560ピクセルにしたところ、SAMPLE TEXTが左寄せになりましたね。
これがブレークポイントです。
このブレークポイントは、複数指定も可能です。
1 |
<h1 class="text-sm-center text-md-left">SAMPLE TEXT</h1> |
ブレークポイントは、レスポンシブルデザインに必須な要素なので、覚えておきましょう^^
スペースとサイジング

次は、margin、padding、サイジングについて学びましょう!
ブロックレベルの要素には、margin, paddingの設定ができます。以下の図は、Chromeのデベロッパーツールから切り出してきたものです。

marginは、要素の外側の幅、paddingは要素の内側の幅を設定できます。
Bootstrapには、これらの要素を簡単に扱える機能も存在します。
Where property is one of:
Bootstrap公式サイトよりm
– for classes that setmargin
p
– for classes that setpadding
Where sides is one of:t
– for classes that setmargin-top
orpadding-top
b
– for classes that setmargin-bottom
orpadding-bottom
l
– for classes that setmargin-left
orpadding-left
r
– for classes that setmargin-right
orpadding-right
x
– for classes that set both*-left
and*-right
y
– for classes that set both*-top
and*-bottom
blank – for classes that set amargin
orpadding
on all 4 sides of the element
Where size is one of:0
– for classes that eliminate themargin
orpadding
by setting it to0
1
– (by default) for classes that set themargin
orpadding
to$spacer * .25
2
– (by default) for classes that set themargin
orpadding
to$spacer * .5
3
– (by default) for classes that set themargin
orpadding
to$spacer
4
– (by default) for classes that set themargin
orpadding
to$spacer * 1.5
5
– (by default) for classes that set themargin
orpadding
to$spacer * 3
auto
– for classes that set themargin
to auto
$spacer は、Bootstrapがデフォルトで用意している変数名です。通常は1rem
(デフォルトは16ピクセル)です。
「1」 を指定すると 16 * 0.25 = 4ピクセルになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="title icon" type="image/png" href="images/title-img.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- fontawesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <title>Learning Bootstrap</title> </head> <body> <div class="bg-secondary" style="width: 100%; height: 600px"> <p class="bg-primary text-light mb-5">Lorem ipsum dolor sit amet.</p> <p class="bg-info text-white m-2">Lorem ipsum dolor sit amet.</p> <p class="bg-warning text-white m-5 p-5">Lorem ipsum dolor sit amet.</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
意味がわかると全然難しくないですね。
FloatとPosition
Bootstrapは、FloatとPositionのユーティリティも備えています。
まず、Floatですが、画面の要素の位置を制御できるものです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="title icon" type="image/png" href="images/title-img.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- fontawesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <title>Learning Bootstrap</title> </head> <body> <div class="bg-secondary text-center p-1"> <p class="bg-success p-1 float-left">FIRST</p> <p class="bg-primary p-1 float-right">SECOND</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
FIRST
SECOND
この例では、親要素上に、FIRSTとSECONDの要素を左右に移動させました。
BootstrapにはCSSのclearと似た機能もありまして、親要素に「clearfix」をつけます。
1 2 3 4 |
<div class="bg-secondary text-center p-1 clearfix"> <p class="bg-success p-1 float-left">FIRST</p> <p class="bg-primary p-1 float-right">SECOND</p> </div> |
FIRST
SECOND
このプロパティは、先に出てきたsm等のブレークポイントとも組み合わせることができるので、覚えておきましょう。
Bootstrap公式サイトより
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none
positionも若干面白いです。
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
Bootstra公式サイトより
<div class="position-sticky">...</div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="title icon" type="image/png" href="images/title-img.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- fontawesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <title>Learning Bootstrap</title> </head> <body> <div class="bg-secondary text-center p-1 clearfix fixed-top"> <p class="bg-success p-1 float-md-left">FIRST</p> <p class="bg-primary p-1 float-md-right">SECOND</p> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil illum tenetur eligendi harum sunt aut alias modi dolorem praesentium accusantium culpa molestias voluptas, enim quisquam officia beatae minima veniam eum. Perferendis saepe accusantium adipisci? A voluptatem, nisi sunt nemo eius tenetur alias illum architecto ut corrupti pariatur eligendi nostrum aliquid maiores illo quidem sed voluptas porro quis eos officia. Laboriosam. Quisquam, explicabo, minus hic sunt cupiditate unde dolorem eum excepturi recusandae minima eaque a officiis voluptas? Incidunt pariatur explicabo aliquam blanditiis quia vero, earum sapiente officia iure natus optio eum! Delectus ipsam aspernatur repellat magnam veniam! Suscipit facilis accusamus asperiores minus cumque. Nihil soluta eum deserunt! Aliquid, voluptatem labore. Earum saepe corrupti aliquid fugiat quasi sunt sapiente sint animi magni. Impedit minima sit dicta architecto nisi, adipisci aut ipsa esse animi iste dolores odit libero ab magnam quasi, totam assumenda eos maiores! Odit officia, quis aliquid dicta delectus blanditiis labore? Atque consequatur voluptates reprehenderit alias ipsam molestias, quisquam necessitatibus, nobis voluptatibus mollitia nihil expedita. Suscipit velit repellat, vero ullam id voluptas consequatur! Commodi iure quam eos esse atque quos placeat. Excepturi tempora, maiores officiis molestias nihil corporis hic asperiores ut officia. Accusantium sit repellendus mollitia eveniet quia, expedita, nulla illum quibusdam dolorum incidunt ratione pariatur voluptas iste, iusto dolore molestias. Culpa rerum laboriosam iure unde, non corrupti eum est, nemo nesciunt magnam expedita aut consequuntur et in. Ab, eum. Ad maxime dolore accusamus harum iusto a doloremque iste, assumenda officia! Voluptatem, porro, consectetur maiores corrupti iste eius soluta ratione, quasi totam est amet accusamus assumenda ad repellendus impedit nostrum delectus dignissimos. Inventore velit repellat amet maxime deserunt voluptates tempore eos. Consectetur quia sequi quos voluptatibus accusamus iure, vitae asperiores a, sed aut ab optio deserunt id doloremque maiores quae reiciendis iste modi consequuntur soluta? Cum ad quo totam laudantium non! Tempore quasi harum asperiores consectetur exercitationem nulla earum fugiat dolorum nisi veniam dolor eius, quisquam natus vero odio. Sequi maxime quas quaerat aliquid nemo architecto ullam minus suscipit illo necessitatibus! Hic a, minima eaque maiores quasi et libero laudantium reiciendis dolorem debitis possimus voluptatum est cupiditate saepe itaque fugiat, aliquam consequatur quo officia aspernatur quam tempora distinctio! Quos, cum a. Ipsum error, obcaecati facere sit adipisci ipsam sunt nobis accusamus veritatis a dolores voluptatibus, fuga sequi cum laboriosam fugit omnis sapiente? Voluptate, aut ullam temporibus ex molestiae harum veritatis facere! Id, commodi ut! Nemo fugiat animi, natus aliquid reiciendis doloremque expedita! Perspiciatis porro inventore neque aliquid laudantium quam aliquam amet unde incidunt minus culpa et quaerat eos, praesentium quis eaque. Adipisci dignissimos quia autem provident, minus dicta distinctio laboriosam ratione sapiente, eius tempore consequatur odit animi. Laborum, officiis placeat nesciunt eveniet, quasi suscipit adipisci unde quidem commodi maiores veritatis. Magnam? Commodi incidunt nobis nostrum, sit repellendus temporibus nisi officiis minus provident explicabo ab at? Totam expedita cumque ducimus, quidem quos facilis. Adipisci laudantium consequuntur sed? Eos doloremque laborum natus dolores. Impedit laboriosam doloribus natus illo earum eveniet officia nemo enim iste ratione rerum veritatis recusandae accusamus assumenda necessitatibus beatae, fugit ad iusto maxime eum pariatur sequi. Nam ut debitis ullam. Inventore et incidunt sapiente unde. Sit suscipit praesentium accusantium veritatis! Mollitia, repudiandae tempora doloribus voluptatem placeat assumenda totam nisi, dolorum saepe minus obcaecati unde porro illum accusantium asperiores exercitationem et? Natus dolore minus nobis itaque repudiandae odio pariatur libero! Aperiam, cum. Quo dolores ratione maiores dolorem esse harum optio. Cumque deleniti velit neque reprehenderit. Expedita porro obcaecati veritatis consequatur quo. Quod, consequatur pariatur. Voluptas numquam nobis facilis dolores ipsam omnis beatae minima. Saepe labore sit, a non fuga quidem odit sapiente quia incidunt? Dolores blanditiis quo enim illum dolore voluptates?</p> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
画面で確認してみると、先ほどのFIRST、SECONDがヘッダーみたいに画面上に固定化されています。

引用にも書きましたが、色々と種類があるので、試してみてください。
次回
次回は、レイアウト(CSS FlexboxとBootstrap Grid)を学びましょう。
コメントを残す
コメントを投稿するにはログインしてください。