[英語deIT] Bootstrap4(ブートストラップ)超入門編

今回は IT×英語留学で学んだ

Bootstrap 4について説明したいと思います。

 

もちろん、英語ベースで!

Carrie
わたしが勉強した事の復習です

 

こんな方におすすめ
  • IT×英語で学びたい。
  • ITの超入門レベル。
  • IT知識ゼロ
  • PC=Mac/テキストエディター=Sublime
 

Bootstrap4とは

2018年2月に最新版として出されたのがBootstrap4

 

初めてみた時に

Carrie
かわいい!
って思いました。

Bootstrapの特徴
  1. 用途が広い
  2. デザイン性がいい
  3. レスポンシブWebデザイン
  4. 初心者向け

みんなレスポンシブルというのをスマホ対応のWebデザインだと思っていますが違います。

 

実はResponsible(レスポンシブル)は

”信頼できる・責任がある”という意味です。×ブー

responsive(レスポンシブ):

”すぐ反応する。(応答する)画面サイズに合わせてサイズが変わる”

という意味のこっちが正解です..

 

Carrie
間違えないようにね

 

 Bootstrap4の使い方

まずはBootstrapのホームページへLet’s go!

 


 

Step1:【新規フォルダ作成 】デスクトップを右クリック

STEP:新規フォルダの作成


 

 

Step2:テキストエディターでhtmlファイル作成(Sublimeを使ってます)

STEP2:htmlファイル作成



 

 

Step3:Bootstrapのサイトに戻りリンクを全てコピペします(CSS Only)

STEP3:Bootstrapのサイトに戻る


 

 

Step4:テキストエディタに<link〜をコピー&ペースト


Carrie
画像には他のリンク先も添付してしまったので念のため説明しますね

 

 

このコードは見てる画面サイズに合わせてサイズを変化させるためのコード
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
コピペしたコードはこれだけです

 

 

(練習するだけならこのコードだけでもBootstrapは使えました。)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
この下のコードはJS Poppor,js and JQueryの部分のコピーです

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
これでBootstrap4が使えるようになりました。

 

 

補足ですがBootstrapでは何が使えるのかルールが決まっています。ルールを見るためにサイトにアクセスする方法があります。

 


 

 

Carrie
たくさんコードが出てきて嫌になっちゃうけど授業でも使いますからね。毎回コピペするのが面倒なのでボタンを作りました

 

Bootstrap4 の色について

色の種類は8種類が基本になります。

 

この8種類を知っておくと便利です。

 

Carrie
バッジの方がみやすいのでバッジで説明します

  1. Primary(プライマリー):blue ブルー
  2. Secondary(セカンダリー):grayグレー
  3. Success(サクセス): greenグリーン
  4. Danger(デンジャー):redレッド
  5. Warning(ワーニング):yellowイエロー
  6. info(インフォ):tealティール
  7. Light(ライト):ライト 明るい色
  8. Dark(ダーク):ダーク   暗い色

outcome(アウトカム)


 

 

HTML
<div class="container">
  <h2>Contextual Badges</h2>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>
</div>
 

grayとgrey

同じ”灰色”という意味ですがテキストエディターでは

基本的にアメリカ 英語
  • Gray:アメリカ○
  • Grey:イギリス×
他にも
  • Color:アメリカ○
  • Colour:イギリス×
などがあります。

 

Bootstrap4のテキストの色

muted(ミュート)”は色が薄い感じ…

 

Text(文字)10種類一番下の

text-white“は文字が見えてません。(白文字の白背景)

下から2番目は”text-light”は薄いグレーに白背景

 

 

文字の色


 

HTML
<p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
 

そして、聞きなれないjumbotron(ジャンボトロン)

 

名前の通りジャンボになるクラス(class)のことですが

 

ジャンボトロンというソニーの大型テレビのイメージでしょうか?

Carrie
幅が広くなってますね..

 

jumbotron(ジャンボトロン)だけだと左右の横幅に隙間ができます。

jumbotron(ジャンボトロン)+jumbotron(ジャンボトロン)-fluid(フルイド)

 

 

をつける事で横幅いっぱいになります。

ジャンボトロン/jumbotron


 

W3Cのサイトはみんなよく使います。参考までに

 


英語のサイトですがとてもわかりやすいです。

 

Carrie
英語で勉強したい人にはオススメのサイトです

 

ここのサイトのコードをコピペすればアウトカムも同じになります。

独学である程度このサイトを全部勉強してみるのも時間とお金の節約になると思います。

 

まとめ

超入門編として自分の復習も兼ねて書いてみました。

 

画像の部分はコピペができないですがアウトカム(コードを入れた結果)とHTMLが一緒に見れるようにしてみました。

皆さんのお役に立てたら嬉しいです!



[英語deIT]よく使うfont awesome5について 超入門編



コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください