English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 折り畳みは、コンテンツの表示と隠しを簡単に実現できます。
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>シンプルな折り畳み</h2> <p>ボタンをクリックすると、表示と隠しの間で切り替わります。</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">簡単な折りたたみ</button> <div id="demo" class="collapse"> 私はあなたのために祈り、あなたに捧げます。 私たちは仕事や生活で偶然の経験を多く持ちます。私たちは小さな命を持っています。 私は自分に合わないインターンシップをしています。 </div> </div> </body> </html>テストをしてみる‹/›
.collapseクラスは、折り畳み要素を指定するために使用されます（例：<div>）； ボタンをクリックすると、隠しと表示の間で切り替わります。
コンテンツの隠しと表示を制御するには、<a>または<button>要素にdata属性を追加する必要があります：-toggle="collapse"属性。 data-target="#id"属性は、折り畳みのコンテンツに対応しています（例：<div id="demo">）。
注意: <a> 要素上で、href属性を使用してdata属性を置き換えることができます：-target 属性：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>シンプルな折り畳み</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">シンプルな折り畳み</a> <div id="demo" class="collapse"> 私はあなたのために祈り、あなたに捧げます。 私たちは仕事や生活で偶然の経験を多く持ちます。私たちは小さな命を持っています。 私は自分に合わないインターンシップをしています。 </div> </div> </body> </html>テストをしてみる‹/›
デフォルトでは、折り畳みのコンテンツは非表示になっています。あなたは.showクラスを追加して、デフォルトでコンテンツを表示することができます：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>シンプルな折り畳み</h2> <p>あなたは.showクラスを追加して、デフォルトでコンテンツを表示することができます：</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">簡単な折りたたみ</button> <div id="demo" class="collapse show"> 私はあなたのために祈り、あなたに捧げます。 私たちは仕事や生活で偶然の経験を多く持ちます。私たちは小さな命を持っています。 私は自分に合わないインターンシップをしています。 </div> </div> </body> </html>テストをしてみる‹/›
以下のサンプルでは、カードコンポーネントを拡張してシンプルな手風琴を表示しています。
注意: を使用して data-parent 属性で、すべての折りたたみ要素が指定された親要素の下に配置されることを確保し、これにより、1つの折りたたみオプションが表示されているときに他のオプションが非表示になることを実現できます。
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>手風琴の例</h2> <p><strong>注意:</strong>/strong> を使用して <strong>data-parent</strong> 属性で、すべての折りたたみ要素が指定された親要素の下に配置されることを確保し、これにより、1つの折りたたみオプションが表示されているときに他のオプションが非表示になることを実現できます。</p> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> オプション１ </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> #1 内容：基本チュートリアル(oldtoolbag.com) -- 基礎を学ぶことができれば、もっと遠くへ行ける！！！ </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> オプション2 </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> #2 内容：基本チュートリアル(oldtoolbag.com) -- 基礎を学ぶことができれば、もっと遠くへ行ける！！！ </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> オプション3 </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> #3 内容：基本チュートリアル(oldtoolbag.com) -- 基礎を学ぶことができれば、もっと遠くへ行ける！！！ </div> </div> </div> </div> </div> </body> </html>テストをしてみる‹/›