YouTubeのチャンネル登録はこちら

『これからWebをはじめる人の HTML&CSS, JavaScriptのきほんのきほん』 Bootstrap4対応サンプル

2019 4/29
『これからWebをはじめる人の HTML&CSS, JavaScriptのきほんのきほん』 Bootstrap4対応サンプル

たにぐち まことの著書『これからWebをはじめる人の HTML&CSS, JavaScriptのきほんのきほん』は、2017年の発刊であるため、書籍内で利用している Bootstrapのバージョンが 3シリーズとなっています。

Bootstrap 4を利用してサンプルをそのまま作成すると、一部再現されない箇所があるため、以下を参考に書き換えていただけると幸いです。

目次

オフセットの書き方が変わりました

グリッドシステムを利用するときに、左右の余白を取りたい場合の「オフセット」の書き方が変わりました。

col-XX-offset-X

offset-XX-X

サンプルの「index.html」にある 33行目付近を次のように書き換えます。

<div class="col-sm-8 col-sm-offset-2">
↓
<div class="col-sm-8 offset-sm-2">

「btn-default」が廃止されました

ボタンのスタイルから「btn-default」が廃止されました。まったく同じスタイルのものは存在しませんが「btn-secondary」が近い存在なので、index.htmlの 91行目付近を以下のように書き換えてください。

<button type="submit" class="btn btn-default"> 送信する</button>
↓
<button type="submit" class="btn btn-secondary"> 送信する</button>

「label」クラスが「badge」クラスに変わりました

labelクラスが廃止され、代わりに「badge」クラスに変わりました。index.htmlの 37行目付近を以下のように書き換えてください。

<label for="name"> お名前<span class="label label-danger">必須</span></label>
↓
<label for="name"> お名前<span class="badge badge-danger">必須</span></label>

フォームのラベルが太字ではなくなりました

フォームのラベル部分から「font-weight」の指定がなくなり、太字ではなくなりました。「style.css」に次のように追加して、太字になるように指定してください。

.form-group>label {
    font-weight: bold;
}

インラインラジオボタンの余白がなくなりました

インラインラジオボタンにした場合、左に余白があったのがなくなりました。「style.css」に次のように追加して、余白を設定してください。

.radio-inline {
    margin-right: 10px;
}

以上で、本書と同じような見た目に変わります。変更後のサンプルファイルを以下に設置していますので、ダウンロードしていただけると幸いです。

サンプルをダウンロードする

この記事が気に入ったら
フォローしてね!

目次