HTML5 + Bootstrap study Note 1, html5bootstrap
HTML
<Header> the header (description) of the tag definition document is a new tag in HTML 5.
References: HTML
HTML5 Custom Data Attributes (data -*)
Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:
Attribute Name: The data attribute name must be at least one character long and must be prefixed with 'data-'. It shoshould not contain any uppercase letters.
Attribute Value:The attribute value can be any string.
1 <ul id="vegetable-seeds">2 <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>3 <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>4 <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>5 </ul>
References: HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Bootstrap for folding
Generally, each folding component has a trigger element, such as a button or hyperlink. You can click the trigger element to control the expansion and hiding of the folding element. In this way, you only need to add data-toggle = "collapse" and data-target tags to the trigger element to automatically become foldable. The data-target attribute accepts a css selector pointing to the folding element. In addition, you need to add a. collapse style to the folding element. If you want to enable a collapsed element by default, you can add. in to the collapsed element.
1 <body> 2 <button class = "btn-danger" data-toggle = "collapse" data-target = "# demo"> 3 simple folding effect </button> 4 <div id = "demo" class = "collapse in"> some time ago, when a netizen in a country quarreling with Chinese netizens over land, he said, "If I want to hit Beijing, Chinese netizens will respond very calmly. Can you afford to pay a toll on your economy? According to the new paragraph of the past two days, if Li Bai lives today, it is estimated that more than half of his poems cannot be written, because he cannot afford tickets to the famous mountains and rivers. </Div> 5 </body>
1 $ ('# myCollapsible'). collapse ('toggle ') // switch between folding and opening 1 $ ('# myCollapsible'). collapse ('show') // open 1 $ ('# myCollapsible'). collapse ('hide ') // fold References:
The data-toggle attributes in Twitter Bootstrap http://stackoverflow.com/questions/15113537/the-data-toggle-attributes-in-twitter-bootstrap
Bootstrap JS plug-in using instance (6)-folding (Accordion effect) http://doliangzhe3.iteye.com/blog/1871709? Utm_source = tuicool
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
