Bootstrap 折叠.pdfVIP

Bootstrap 折叠 Bootstrap允许我们在不使⽤accordion标记和JavaScript代码的情况下扩展和折叠元素。 通过data属性扩展和折叠 将data-toggle =“collapse”添加到控制器元素 （例如按钮或锚点）以及⽤于按钮的data- target或⽤于锚点的href 以⾃动分配可折叠元素的控制。 data-target或href 性接受CSS选择器以将折叠应⽤于特定元素。 将类“collapse”添加到可折叠元素。如果你希望它默认打开，可添加额外的类“in” 。 !DOCTYPE html html lang=en head link rel=stylesheet href=https://ma /boots link rel=stylesheet href=https://ma /boots script src=https://aja ./aja /libs/jquery/1.11.1/j script src=https://ma /bootstrap/3.3.1/js/bo style type=te t/css p{ background: #F9F9F9; border: 1p solid #E1E1E8; margin: 10p 0; padding: 8p ; } .bs-e ample{ margin: 20p ; } /style /head body div class=bs-e ample !-- Trigger Button HTML -- input type=button class=btn btn-primary data-toggle=coll !-- Collapsible Element HTML -- div id=toggleDemo class=collapse inpThis is a simple e /div /body /html 通过JavaScript扩展和折叠元素 我们可以通过JavaScript⼿动扩展和折叠单个元素，使⽤JavaScript代码中可折叠元素 的“id”或“class”选择器调⽤collapse()⽅法。 !DOCTYPE html html lang=en head link rel=stylesheet href=https://ma /boots link rel=stylesheet href=https://ma /boots script src=https://aja ./aja /libs/jquery/1.11.1/j script src=https://ma /bootstrap/3.3.1/js/bo script type=te t/javascript $(document).ready(function(){ $(.btn).click(function(){ $(#toggleDemo).collapse(toggle); }); }); /script style type=te t/css p{ background: #F9F9F9; border: 1p solid #E1E1E8; margin: 10p 0; padding: 8p ; } .bs-e ample{ margin: 20p ; } /style /head body div class=bs-e ample !-- Trigger Button HTML -- input type=button class=btn btn-primary value=Toggle But !-- Collapsible Element HTML -- div id=toggleDemo class=collapse inp this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. Click on the bToggle Button/b button to see th