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

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

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

403 Forbidden

ファイルは 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>

レスポンシブの仕組み

403 Forbidden

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

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

403 Forbidden

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

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

403 Forbidden

background-size: cover;

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

py-5 上下の余白

簡単にイイ感じ

特徴セクションを作ろう

403 Forbidden

スマホ表示から考える

<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(上下)

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

403 Forbidden

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>

テーブルを作ってみよう

403 Forbidden

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

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

タブメニュー

403 Forbidden
403 Forbidden

<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をコピーしました