【Bootstrap5】カード→ガター→タブの実装 切り替えまで
つまみつまみながら実装しているため最適かどうかはわからないというか、最適じゃねぇな！
・完成品
これの上にヘッダーがあるけど恥ずかしいから載せない。いや草じゃないから！
手順
まず公式を確認しながらカードを実装。
こんな感じ。英語は公式から変えてないっす。
次にガター実装
こんな感じになる。
最終的にカードのみ表示にする。
多分、サイズとかマージンとかを弄っておかないといけないと思うけど、今はこれでOK。
画像の大きさを統一するようにしたいので明日はそこか。
次に、下記サイトを参考にタブメニュー実装
今見たら公式にも載ってた・・・そりゃあそうじゃ
切り替え前
「Much longer nav link」をクリックすると・・・
切り替え成功！
最終的には、
初期表示するときに表示するデータをSQLで取ってきて表示できるようにしたい。(タブごとに分ける)
めんどくさそうなので、後回し屋根
これ書いてるときに思ったけど、仕事でもプライベートでもコード書いてるの頭おかしいだろ！！
オチがないのでビリー兄貴のAA載せます。
,,,,､､､､､､､､､,,
,.ｨミミヽ川jﾚ'彡ミﾐヽ
,' ミﾐヽい州ｲ彡云ﾐj!
i彡r'"´ ﾞﾞﾞ｀´¨¨`ヾﾐﾐ!
i彡! ';ミ!
i彡! ＝= ,rﾆﾆヽﾐﾊ
ﾊV'.,ｨ.t:ﾃﾐ、,ft:ﾃﾐ i 1
いj! . ::. ﾚ′
ヽj ,;:`ｰ‐'｀ : : .!
！ _r_ ‐ァ´ﾉﾉ,′
',ヽ､ ｀ﾆ´ ,ハ
', ヽ.., ; .., ｲ ｀ヽ､
! .:;'ﾞﾞﾞ´ ＼
ノ ,:;´ ＞.､
,. '"´ ｀`y' ,rrん'´ﾉX(､ ｀ヽ
,rィィ'´ ,. ´ ,rん'´ ,f8 ｀ヽ＼ ＼
,.ｲ ﾉﾉ/ / ,rん'´ ,f8 ＼＼. ヽ
/ ﾉﾚ' い / ,rん'´ ,f8 .:: ＼1 ｝
,′ﾘ い ,rん'´ ,lﾉ‐､/ .:: ﾚ′
,′ ! ヽ( )ｿ .:; ;:. / / / .:: ﾘ
ﾉ !:｡;. l0.l.l ｀ ., .: ﾟ .:. ｛ / / :: j
,. '´ ヽ .l::::l:l レ′‐ ､ .: /
／ ！ l:0:ﾘ ,． '"´ .: /
／ ,r-‐─┴┤［.:0.:0.:0フ´ ) /
/ ´￣｀`＞く .l l l__ﾉ ￣"´ ,. ,.. イ /
/ ／ ノ⌒i ; l l ,.... ´￣ ノ ／
′ / "´ し' l し' ,.ィ´
,′ ヽ Y´ し' ＜ﾆﾆ二二￣￣ ´ ,.. イィ´
｛ ﾊ Y´ ／￣ ｀` ¨¨¨ー＝＝＝==---‐ '´「
ヽ / ﾉL_ ＿,. イ .: ;;;;, .: ; L
｀ﾞﾞﾞ´ ！ .: ｀ﾞ′ ; ,. =＝ﾆﾆヽ
！ ..:. ; ,.ィ´ﾆ二三三三ヽ
