ドットインストール学習記録 Bootstrap

いつの間にかAtomに慣れて一番使いやすくなっている。

Bootstrap 4入門 グリッドレイアウト

【旧版】Bootstrap 4入門 (全22回) - プログラミングならドットインストール
効率的にUIやレイアウトを作ることができるBootstrapの使い方を見ていきます。

ファイルは Dropbox > Hp > bootstrap

<div class="row">
<div class="col-8 bg-primary">1</div>
<div class="col-1 bg-secondary">2</div>
</div>
<div class="row mb-3">
<div class="col-4 bg-danger">1</div>
<div class="col-6 bg-warning">2</div>
<div class="col-6 bg-dark">3</div>
</div>

レスポンシブの仕組み

#10 レスポンシブの仕組みを理解しよう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
レスポンシブ対応のためにBootstrapが設定しているブレイクポイントについて見ていきます。

Bootstrapのブレイクポイント
576px and up: sm small
768px : md medium
992px : lg large
1200px: xl extra large

レスポンシブレイアウトを作ろう

#11 レスポンシブレイアウトを作ろう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
Bootstrapを使ってレスポンシブレイアウトを作る方法を見ていきます。

mediumになったら幅反転
<div class="row">
<div class="col-10 col-md-2 bg-primary">1</div>
<div class="col-2 col-md-10 bg-secondary">2</div>
</div>

medum以上になったら非表示

<div class="row">
<div class="col-10 bg-primary">1</div>
<div class="col-2 d-md-none bg-secondary">2</div>
</div>

medium以上になったら表示

<div class="row">
<div class="col-10 bg-primary">1</div>
<div class="d-none d-md-block col-2 bg-secondary">2</div>
</div>

d-none display none
d-md-block display medium block

今までの知識を応用してみよう

#12 今までの知識を応用してみよう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
今までの知識を応用して、レスポンシブ対応のページを作っていきます。

background-size: cover;

<div class="cover text-white text-center py-5">

py-5 上下の余白

簡単にイイ感じ

特徴セクションを作ろう

#13 特徴セクションを作ろう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
特徴セクションを作成する方法を見ていきます。

スマホ表示から考える

<img src="img/phone.png" class="w-100 rounded-circle">

w-100 witdth 100%
rounded-circle 円にする

paddingの設定

[p/m][location]-[size]
padding
margin

location 何もつけない場合全方向
t b l r 上 下 左 右
x y 左右 上下

size
0-5
1=0.25rem
2=0.5rem
3=1rem
4=1.5rem
5=3rem
auto

padding-top 1rem
pt-3

margin 0 auto
my-0 mx-auto

py padding y(上下)

特徴セクションを完成させよう

#14 特徴セクションを完成させよう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
特徴セクションのレスポンシブ対応を行います。

8:2の横並べ
入れ物をrowにしつつ、
タイトルとテキスト col
画像 col

今回のブレークポイントはsmall
col-sm-4 , col-sm-8 8:4

左右の入れ替えは
order-sm-1, order-sm-2

<div class="row">
<div class="col-sm-8 order-sm-2">
<h3>Awesome</h3>
<p>Hello Hello Hello Hello Hello Hello </p>
</div>
<div class="col-sm-4 order-sm-1">
<img src="img/movie.png" class="w-100 rounded-circle">
</div>
</div>

テーブルを作ってみよう

#15 テーブルを作ってみよう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
Bootstrapを使ってテーブルのスタイリングをしていきます。

containerクラスは中身を画面の中央に幅を固定するクラス

<div class="container">
<table class="table table-hover">

タブメニュー

#16 タブメニューを作っていこう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
タブメニューに必要な要素のマークアップをしていきます。
#17 タブメニューを完成させよう | 【旧版】Bootstrap 4入門 - プログラミングならドットインストール
Bootstrapを使ってタブメニューを実装していきます。

<ul class="nav nav-tabs">
<li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li>
<li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li>
</ul>

<div class="tab-content py-5">
<div class="tab-pane active" id="ios">

data-toggle=”tab”
タブクリック時の動作 javaScriptも実装されている

タイトルとURLをコピーしました