Q&A
codepenで確認する内容ではないような
現在ホームページ作成のためBootstrapを勉強しています。
以下にあるようにBootstrapページにはサンプルがあるのですが、自分がサンプルにあるレイアウトを拝借したい場合どのように使うのでしょうか？
https://getbootstrap.jp/docs/4.3/examples/
調べた中で解説していたのは、例えばProductのレイアウトを拝借したい場合、「ページのソースを表示」し、そのbodyタグの中をまるっとコピーして、
自身のBootstrap適用できているbodyタグの中にペーストすると言っていました。
しかしそれでは表示した際にデザインが崩れています。
https://codepen.io/sludepec/pen/poEMMQw
もちろん全てがhttpsで取得できるものでなく、パスでしているしているものもあるので、うまく表示できないのはもちろんです。
ということは**要所要所を書き換える必要があるということでしょうか。**なんとなくそんなやり方ではない気がしています。
ソースコードをダウンロードしたら、その中にテンプレートのProduct.htmlやjs,cssファイルが入っているものが落ちてくるのかと思ったら、
Gemfileなどが格納されているフォルダが落ちてき、どのように使っていいかわかりませんでした。
もし本来のこのサンプルの拝借の仕方がわかる方がいれば教えていただきたいです。
Prodcustではないですね。Product。
回答2件
0
すでに出来上がっているページに適用するのは相当の労力が必要になります。まずこの質問をしている時点で困難と判断できます。
自身で組み込んだCSSなどがあれば多分に影響があります。
サンプルをベースとしてページを作っていったほうが良いです。
※それぞれのテンプレートの個別ソースの場所は既にある回答の通り
あとGemfile関連はRuby on Railsのパッケージ管理に使うものなので、想定の環境になければおそらく不要です。composerなども同様。
README.mdは読んでおきましょう。
ただ、4.3はちょっと前のバージョンです。4系最新は4.5ですし、機会があれば現時点（2021/1）で安定版ではないですがjQuery依存のなくなった5にも手を出してみては。
投稿2021/01/27 23:36
総合スコア80875
0
ベストアンサー
Bootstrapのすべてをダウンロードしているため、Bootstrap本体のファイルが多数あります。「Prodcustのレイアウト」をproductの誤りではないかと予想して説明します。フォルダ構成として、site→docs→4.3→examplesにproductフォルダがあり、そこにhtmlとCSSがあります。
投稿2021/01/27 15:47
総合スコア19
あなたの回答
tips
プレビュー
