移動済み: 返信先: BS4対応版タブやアコーディオンの挙動について

このトピックには2件の返信、2人の参加者があり、最後にmomoにより5年、 3ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2019年8月22日 9:19 AM #19158

momo
閲覧者

これもSlackから再投稿です。

ーーー以下ーーー
BS4対応origin2を自分のテストサイトに入れて、ちょっとだけ問題が出てしまいました。

今気が付いたのは、下記の2点だけですが、私が独自にCSSなどを追加した訳ではなかったので、もしかしたら、どこかで見つけた参考サイトの装飾方法はBS3用で書いてあったのかも知れません。（今思えば今まで動いていたんだからBS3用だった？）

だとすると、BSバージョンアップは、BSバージョンに依存するCSSを知らずに使っているとBS4対応で影響が出てくる場合もあるんですね。

明日時間が取れたらBS4対応で同じ機能のサンプルを探そうとは思ってますが、でも次回からそれを避けたいので、Lightningに同じ機能があったのならこの際だからそっちを使いたい気持ちです。

Lightningとしては、クリックしたら開くブロックとか、タブで内容を切り替えるブロックは登場予定は無いでしょうか？
あるいは、そうなるCSSが元からLightningに入っていたりしないですよね？

１、クリックすると開くブロックで枠が表示されなくなってしまった。
<div class=“panel-group” id=“accordion”>
<div class=“panel panel-default”>
<div class=“panel-heading”>
<h4 class=“panel-title”>
Q1:/a>
</h4>
</div>
<div id=“collapse3” class=“panel-collapse collapse”>
<div class=“panel-body”>A1:</div>
</div>
</div>

２、タブで内容を切り替えるブロックでも枠が表示されなくなってしまった。
<div role=“tabpanel”>
<!– Nav tabs –>
<ul class=“nav nav-tabs” role=“tablist”>
<li role=“presentation” class=“active”>
電話

<li role=“presentation”>
メール

<li role=“presentation”>
フォーム

<!– Tab panes –>
<div class=“tab-content”>
<div role=“tabpanel” class=“tab-pane active” id=“contents1″>
<br>

以上の２点が変になってしまった事例でした。
これはVektorさんが悪いのではなく、私の使ったclassとかがBS３専用だったんだと思いますが、参考までにご報告でした。

2019年8月23日 8:42 PM #19244

石川＠Vektor,Inc.
キーマスター
制作実績

そうですね、Bootstrap3とBootstrap4では使えるクラス名が異なります。

それを考慮して、「Lightningをバージョンアップする事によって、LightningのBootstrapバージョンが４に自動的に上がって、Bootstrap3のコンポーネントを使っているサイトが軒並み崩れる」という事を回避するために、Bootstrap4用スキンに意図的に切り替える処理をしなければ、従来通りのスキンでBootstrap3をベースに出力されるという方式を採用しています。
（同じスキンでBootstrapを３と４切り替えても弊害なく出来るような調整は工数がかかりすぎて現実的ではない）

タブやアコーディオンのブロックは現状では他に優先実装事項が溜まっているので、11月移行の検討となります。

ご希望に沿える回答ができずに恐れ入ります。

2019年8月23日 9:14 PM #19245

momo
閲覧者

素晴らしい仕様だと思います。
意図的に切り替えたら崩れる覚悟。
それで良いと思います。
せっかく新しいバージョンに上がるのに既存サイトが足枷になって、性能が生かされないのは勿体ないですから。
私はWordpress採用したのは、自分が勉強しなくても新技術の導入が出来そうだと考えた為でした。
なので、ドンドン新しい技術が入って、デザイン崩れても構わない派です。
仕事で他人の会社のサイトを管理している方はそうは行かないでしょうけど。
投稿者

投稿