👻

Bootstrap④

2022/12/09に公開

Bootstrap

tech

Bootstrap

フォトギャラリー作成完了！！

http://127.0.0.1:5500/index.html

前回やったものの復習になるので、新しいトピックのみメモ！

ナビゲーションバー
基本的にはBootstrapのnavbarのテンプレートからコピペしてきたもの

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">

shadow-smは
シャドーをつけるもの

fluid
ウィンドウサイズを変えても常に画面いっぱいに広がるようになる

pxは左右のpadding
pyは上下のpaddingをつけるクラス

<div class="px-3 py-5 bg-img">
            <div class="container">
                <h1>フォトギャラリー</h1>
                <p>かわいい猫たちのフォトギャラリーをご覧ください。</p>
            </div>
        </div>

imgタグに .img-thumbnail を入れると画像に丸みを帯びた1pxの境界線の持つスタイルを使用できる

<img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/C0zDWAPFT9A.jpg
        " alt="cat" class="img-thumbnail">

mt-4
margin-top 1.5remと同等の動き
数字を0~5の範囲で変えることでmarginの量を調整できる

Gutters
溝の意味
グリッドシステムのコンテンツの間隔を調整するのに用いられる

gy-３（1rem）
配下の全てのカラム要素に対して上下方向のpaddingが設定される

<div class="row gy-3">
</div>

BootstrapIcons

https://icons.getbootstrap.com/

CDNのリンクをコピー
Bootstrapの読み込みの次に入れる
希望のアイコンを探して利用するためのHTMLコードを取得

検索窓にワードを入れる
希望のアイコンをクリック
iタグの方をコピー
入れたいところにペースト

me-1
margin-lightが2.5remtつく

sticky-top
ヘッダーの固定

明日は勉強お休み！
土曜からJavaScriptに入るぞ
朝８時出勤だから雑メモだけど後日修正します
おやすみなさい

フォトギャラリー作成完了！！

BootstrapIcons

Discussion