バージョン選択

フォーラム

メニュー

オンライン状況

80 人のユーザが現在オンラインです。 (54 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 80
もっと...

サイト内検索

質問 > フロント機能 > EC-CUBE4でBootstrap4を利用したい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
madcapsule
投稿日時: 2019/11/23 8:58
対応状況: −−−
新米
登録日: 2019/11/23
居住地:
投稿: 2
EC-CUBE4でBootstrap4を利用したい
お世話になります。
EC-CUBE4系を使っているのですが、Bootstrapが3.3.7になっているのをBootstrap4に変えたいのですがどのようにすればよろしいでしょうか?

以下の部分の数字を4系(4.3.1)に変更し自分なりに試しましたが、見た目は4系になりますが、ドロップダウンなどのjsが機能しませんでした。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

宜しくお願い致します。
468
投稿日時: 2019/11/25 9:57
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 1918
Re: EC-CUBE4でBootstrap4を利用したい
js自体の読込は問題なく行われているのでしょうか?
(URLの打ち間違えなドによる404エラー等は発生していませんか)

>ドロップダウンなどのjsが機能しませんでした。
とありますが、ドロップダウン等の記述をtwigに追記されて
その箇所が正常に動作しないという事でしょうか?
(あまり記憶にないのですが、デフォルトのデザインテンプレートでBootstrapのドロップダウン等を利用している箇所はありましたか?)


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

madcapsule
投稿日時: 2019/11/25 11:08
対応状況: −−−
新米
登録日: 2019/11/23
居住地:
投稿: 2
Re: EC-CUBE4でBootstrap4を利用したい
ご返信ありがとうございます。

色々試しましたが、普通にBootstrapをHTMLで使うように以下に、
元々EC-CUBEに記載があった
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
を削除し、

以下を貼り付け
!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

で実装できました。
また何かございましたら宜しくお願い致します。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は54,400名です
総投稿数は94,215件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
nanasess
2015
4
468
1918
5
yuh
1610
6
umebius
1414
7
red
1376
8
h_tanaka
940
9
fukap
907
10
tsuji
856
11
shutta
835
12 ramrun 789
13
tao_s
781
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.