Bootstrapの基礎②

9641 ワード
HTML 学習記録 デイトラ 備忘録 CSS HTML テキストリンク

デイトラWeb制作コース初級編DAY11の学び

【この記事に書いてあること】

　【学習時間】

1時間45分

　【学び】

1　width/heightの調整
・横幅を変更：w-50→width 50%という意味

・縦幅の変更：h-50→hight 50%という意味

*パーセントの変更は25,50,75,100,autoのみ！

↓

2 padding/marginの調整

・paddingの変更：pt(padding-top) pr(padding-right) pb(padding-bottom) pl(padding-light)＋数字

・paddingの横幅のみ変更；px 0 --;

・paddingの縦幅のみ変更：py -- 0;

*paddign,marginは段階的に1~5までの幅が決まっている

*Bootstrapの大きなルールとして、制御したいプロパティの頭文字＋数字で記述する

↓

3 Gridレイアウト

ルール：①class="container"の中に作る
　　　　②改行はclass="row"で囲うとそこまでが一行
　　　　③一つ一つのブロックはclass="col"をつける

参考サイト: Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

特徴１：Gridレイアウトを使うことで、横幅を整えつつレイアウトを決めることができる！

index.html
    <div class="container">
        <div class="row">
            <div class="col bg-primary">
                1 of 2
            </div>
            <div class="col bg-warning">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col bg-success">
                1 of 3
            </div>
            <div class="col bg-danger">
                2 of 3
            </div>
            <div class="col bg-info">
                3 of 3
            </div>
        </div>
    </div>

↓

特徴２：1行を12分割して横幅を自在に変えることができる

index.html
   <div class="container">
        <div class="row">
            <div class="col-7 bg-primary">
                1 of 2
            </div>
            <div class="col-5 bg-warning">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col-6 bg-success">
                1 of 3
            </div>
            <div class="col-4 bg-danger">
                2 of 3
            </div>
            <div class="col-1 bg-info">
                3 of 3
            </div>
        </div>
    </div>

↓

＊12に満たない部分は空白になる

特徴３：各ブラウザサイズでレイアウトを操作できる

4 Bootstrapでボタン作成する

①　Bootstrapはボタンのレイアウトがすでに決められている

☆共通クラスclass="btn"を忘れずに記入する！

index.html
<button type="button" class="btn btn-primary">Primary</button>

↓

②　ボタンのデザインも決めることができる
class="btn-outline-色を記入

index.html
<button type="button" class="btn btn-outline-success">Success</button><button type="button" class="btn btn-outline-danger">Danger</button>

↓

③　ボタンのサイズも決めることができる

大きくするならclass="btn-lg
小さくするならclass="btn-smを記入

index.html
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>

↓