閱讀(7.4k) 書簽贊(0) 我要糾錯

Bootstrap4 折疊板

2018-05-30 10:17 更新

折疊板可以實現(xiàn)內(nèi)容的顯示與隱藏，讓頁面排版更加簡潔。那么在Bootstrap4中，如何實現(xiàn)折疊板功能呢？

簡單折疊板

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

控制內(nèi)容的隱藏與顯示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性。 data-target="#id" 屬性是對應(yīng)折疊的內(nèi)容 (<div id="demo">)。

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
</body>
</html>

注意： <a> 元素上你可以使用 href 屬性來代替 data-target 屬性:

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>簡單的折疊</h2>
  <a href="#demo" class="btn btn-primary" data-toggle="collapse">簡單的折疊</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
</body>
</html>

默認(rèn)顯示內(nèi)容

在Bootstrap4中，折疊的內(nèi)容是默認(rèn)隱藏的，我們可以通過添加 .show 類讓內(nèi)容默認(rèn)顯示:

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>簡單的折疊</h2>
  <p>你可以添加 .show 類讓內(nèi)容默認(rèn)顯示:</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">簡單的折疊</button>
  <div id="demo" class="collapse show">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
</body>
</html>

手風(fēng)琴實例

以下實例通過擴(kuò)展卡片組件來顯示簡單的手風(fēng)琴。

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>手風(fēng)琴實例</h2>
  <p><strong>注意:</strong>  使用 data-parent 屬性來確保所有的折疊元素在指定的父元素下，這樣就能實現(xiàn)在一個折疊選項顯示時其他選項就隱藏。</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show">
        <div class="card-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse">
        <div class="card-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse">
        <div class="card-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

以上內(nèi)容是否對您有幫助：

← Bootstrap4 下拉菜單

Bootstrap4 導(dǎo)航 →

寫筆記

我要補(bǔ)充