当前阅读教程:Bootstrap4教程 > 让内容默认显示 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 实例解析 | 下一篇: 扩展卡片组件来显示简单的手风琴 |
默认情况下折叠的内容是隐藏的,你可以添加 .show 类让内容默认显示: 实例 <div id="demo" class="collapse show"> Lorem ipsum dolor text.... </div> 完整代码 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例(小白教程网 2d5.net)</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> <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"> 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> 效果图 |
|
上一篇: 实例解析 | 下一篇: 扩展卡片组件来显示简单的手风琴 |