はじめに
今お仕事ではBootstrap3を主に使っています。
かれこれ4年くらい同じサイトを触っているため、なかなかBootstrap4,Bootstrap5を試す機会がなかなか訪れないため、このサイトに入れてみよう！と思い立ちました。
利用しているテーマとの整合性をみないと、いけません。
テーマ「Twenty Minutes」にBootstrap5を入れてみる
今私がftpで作業できない環境なので、取り急ぎwordpressの「テーマエディタ」からヘッダーphpファイルtを触ります。↑のキャプチャのオレンジあたりBootstrap5のCSS読み込みのコードを入れてみました。
ブラウザ幅1300pxでカラム落ちしました
CSSでカラム落ちした右サイドメニューを調整します
/* bootstrapを入れたことによりsidebarが段落ちするのでsidebarの幅を小さくした */
@media screen and (min-width: 1300px) {
#sidebar {
width: 230px;
}}
@media screen and (max-width: 767px){ #sidebar {
width: 180px;
}}
上記のcssを追加しました。
はい。なおりました。
ぱっと見て、これでいけそうなので
Bootstrap5でいろいろ試していけそうです。
試しにサンプルを入れてみました。
Bootstrap5のサンプルをいれてみる
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
おお！いけそうですね。
これからいろいろ試してみようと思います。
Bootstrap3→Bootstrap5 と一つとびなので随分便利になっていることでしょう。このブログでもまた記載してみようと思います！
これからいろいろ試してみようと思います。
Bootstrap3→Bootstrap5 と一つとびなので随分便利になっていることでしょう。このブログでもまた記載してみようと思います！