Bootstrapを部分的に効かせる
どうも〜
いきなりですが、個人アプリ開発中にBootstrapを導入することになりました。
途中からの導入なので、どうしてもCSSが崩れちゃいます。
そんな時にいい方法を残してくれてる方がいました。
特定のdiv要素の中だけBootstrapを適用する - Qiita
自分なり解説したいと思います。
scssを使って解説します。
まず始めに、_bootstrap.scssを作成してください。
その中に下記URLのコードを全てコピペしてください。
https://pgmemo.tokyo/data/filedir/1178_1.css?975
出来上がったら、application.scssへ@importを書くのですが、ここで一工夫。
application.scss
.bootstrap { //実際クラス名はなんでもいいですが、divに付与する名前となります。 @import "bootstrap"; }
処理の流れとしては、今回だとHTML上にbootstrapクラスが書かれていれば、そこだけBootstrapのCSSが適応されるといった流れです。
最初からBootstrapを導入していればよかったのですが、なかなか融通きかない部分もあるようなので、手こずりました。