Bootstrap4 折疊

Bootstrap4 折疊可以很容易的實現(xiàn)內(nèi)容的顯示與隱藏。

示例

<!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>點擊按鈕內(nèi)容會再顯示與隱藏之間切換。</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">簡單的折疊</button>
  <div id="demo" class="collapse">
    我為你祈禱，為你奉獻，
我們在工作和生活中都有過偶然的經(jīng)歷。我們有一個小小的生命，
我現(xiàn)在正在做一份不適合我的實習工作。
  </div>
</div>
</body>
</html>

測試看看 ?/?

圖片.png

示例解析

.collapse 類用于指定一個折疊元素 (示例中的 <div>); 點擊按鈕后會在隱藏與顯示之間切換。

控制內(nèi)容的隱藏與顯示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性。 data-target="#id" 屬性是對應(yīng)折疊的內(nèi)容 (<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">
    我為你祈禱，為你奉獻，
我們在工作和生活中都有過偶然的經(jīng)歷。我們有一個小小的生命，
我現(xiàn)在正在做一份不適合我的實習工作。
  </div>
</div>
</body>
</html>

測試看看 ?/?

默認情況下折疊的內(nèi)容是隱藏的，你可以添加 .show 類讓內(nèi)容默認顯示:

示例

<!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 類讓內(nèi)容默認顯示:</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">簡單的折疊</button>
  <div id="demo" class="collapse show">
    我為你祈禱，為你奉獻，
我們在工作和生活中都有過偶然的經(jīng)歷。我們有一個小小的生命，
我現(xiàn)在正在做一份不適合我的實習工作。
  </div>
</div>
</body>
</html>

測試看看 ?/?

以下示例通過擴展卡片組件來顯示簡單的手風琴。

注意: 使用 data-parent 屬性來確保所有的折疊元素在指定的父元素下，這樣就能實現(xiàn)在一個折疊選項顯示時其他選項就隱藏。

示例

<!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>data-parent</strong> 屬性來確保所有的折疊元素在指定的父元素下，這樣就能實現(xiàn)在一個折疊選項顯示時其他選項就隱藏。</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 內(nèi)容：菜鳥教程(cainiaoplus.com) -- 學好基礎(chǔ),才能走的更遠！??！
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        選項二
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          #2 內(nèi)容：菜鳥教程(cainiaoplus.com) -- 學好基礎(chǔ),才能走的更遠?。?！
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          選項三
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          #3 內(nèi)容：菜鳥教程(cainiaoplus.com) -- 學好基礎(chǔ),才能走的更遠?。。?
        </div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>

測試看看 ?/?

Bootstrap4 導航 Bootstrap4 下拉菜單

Bootstrap4 菜鳥教程

Bootstrap4 折疊

示例解析