bootstrap collapse用法 bootstrapcollapse|Bootstrap教程

本文概述

自举折叠示例

如果要隐藏和显示大量内容，则使用Bootstrap折叠。
“ .collapse”类用于指定可折叠元素。
自举折叠示例

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Basic Collapse Example< /h2> < button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible< /button> < div id="demo" class="collapse"> Tigers and Lions are the most ferocious animals on the earth. They belong to the felidae(cat) family. They are both from the four big cats. These four big cats are Lion, Tiger, Leopard, and Jaguar. These animals reside on the top of the food chain and don't have any predators. < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1600035247-1.jpg">< /script> < /body> < /html>

Bootstrap可折叠面板
你也可以折叠面板。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Collapsible Panel< /h2> < div class="panel-group"> < div class="panel panel-default"> < div class="panel-heading"> < h4 class="panel-title"> < a data-toggle="collapse" href="http://www.srcmini.com/#collapse1">Collapsible panel< /a> < /h4> < /div> < div id="collapse1" class="panel-collapse collapse"> < div class="panel-body">Panel Body< /div> < div class="panel-footer">Panel Footer< /div> < /div> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1600035247-1.jpg">< /script> < /body> < /html>

Bootstrap可折叠列表组
你还可以创建一个内部包含列表组的可折叠面板。
【bootstrap collapse用法】请参阅以下示例：

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Collapsible List Group< /h2> < div class="panel-group"> < div class="panel panel-default"> < div class="panel-heading"> < h4 class="panel-title"> < a data-toggle="collapse" href="http://www.srcmini.com/#collapse1">Collapsible list group< /a> < /h4> < /div> < div id="collapse1" class="panel-collapse collapse"> < ul class="list-group"> < li class="list-group-item">One< /li> < li class="list-group-item">Two< /li> < li class="list-group-item">Three< /li> < /ul> < div class="panel-footer">Footer< /div> < /div> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1600035247-1.jpg">< /script> < /body> < /html>