Bootstrapを部分的に適用したい
Bootstrapを部分的に適用したいと考えています。
ご教授いただければ幸いです。
どうぞよろしくお願いいたします。
(SCSSのスキルがありません)
前提
こちらを参考にしてみましたが、うまくいきませんでした。
https://www.fullmarks.co.jp/wp-content/uploads/2021/01/6faa020ce4d2b562cb16074009711ad1-20210128161434.pdf
● BootstrapのCSSスタイルを<div>タグの中にだけ適用する方法(手っ取り早くする場合)
https://pgmemo.tokyo/data/archives/1178.html
発生している問題・エラーメッセージ
<div class="bootstrap">~</div>にスタイルが適用されません。
該当のソースコード(html)
<!DOCTYPE html> <html lang="ja-jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/assets/css/bootstrap.css"> </head> <div class="normal"> <h1>特定のdiv要素の中だけBootstrapを適用しようとした</h1> <p>ここはふつうのHTML</p> </div> <hr /> <!-- ここだけ Bootstrap --> <div class="bootstrap"> <div class="container-fluid"> <div class="col-sm-6"> <p> Partial bootstrap </p> <a href="#" class="btn btn-success">ここだけ Bootstrap</a> </div> <div class="col-sm-6"> <p> グリッド </p> </div> </div> </div> </body> </html>
該当のソースコード(css)
https://pgmemo.tokyo/data/filedir/1178_1.css?975 をダウンロードし、 bootstrap.cssとリネーム。 内容の記述は変更なしでそのまま利用。
試したこと
index.html に
head内で<link rel="stylesheet" href="/assets/css/bootstrap.css">を読み込み、
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

0 コメント