Bootstrap 组件---折叠

xiaoxiao2021-03-01  12

<!--控制内容的隐藏和显示,在<a>或<button>元素上添加data-toggle="collapse"属性。data-target="#id"属性是对应折叠的内容。

 注意:<a>元素上可以使用href属性来代替data-target属性。

    ex:

    <a href="#demo1" class="btn btn-warning" data-toggle="collapse">折叠效果2</a>

     <div id="demo1" class="collapse">

         这是折叠内容

     </div>-->

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>

    <title></title>

    <link rel="stylesheet" href="css/bootstrap.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/popper.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</head>

<body>

 <div class="container">

     <h1>折叠1</h1>

<!--toggle切换键  collapse折叠-->

     <button data-toggle="collapse" data-target="#demo">折叠效果</button>

     <div id="demo" class="collapse">这是折叠1 Lorem </div>

     <h1>折叠2</h1>

     <a href="#demo1" class="btn btn-warning" data-toggle="collapse">折叠效果2</a>

     <div id="demo1" class="collapse">

         这是折叠2:Lorem </div>

 </div>

 <br/><br/><br/><br/><br/><br/>

</body>

</html>

转载请注明原文地址: https://www.6miu.com/read-3650261.html

最新回复(0)