Home > Developer > Web Develop
HTML
The
reference : HTML
HTML5 Custom Data Attributes (data-*)
Thanks to HTML5, we are now having the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of the parts:
Attribute name: The data Attribute name must is at least one character long and must is prefixed with ' data-'. It should not contain any uppercase letters.
Attribute value: The Attribute value can be any string.
1 <ulID= "Vegetable-seeds">2 <Lidata-spacing= "10cm"Data-sowing-time= "March to June">Carrots</Li>3 <bindata-spacing= "30cm"Data-sowing-time= "February to March">Celery</Li>4 <Lidata-spacing= "3cm"Data-sowing-time= "March to September">Radishes</Li>5 </ul>
reference : HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Bootstrap to achieve folding effect
Typically, each collapsed component has a trigger element, such as a button, hyperlink, and so on, which controls the unfolding and hiding of collapsed elements by clicking on the trigger element. This will automatically become collapsible as long as the data-toggle= "collapse" and data-target markers are added to the triggering element. The Data-target property accepts a CSS selector, pointing to the collapsed element. In addition, you need to add the. Collapse class style on the collapsed element. If you want a collapsed element to be open by default, you can add. In to the collapsed element.
1 <Body> 2 <Buttonclass= "Btn Btn-danger"Data-toggle= "Collapse"Data-target= "#demo"> 3Simple folding effect</Button> 4 <DivID= "Demo"class= "collapse in">A time ago a joke said that a country's netizens in the land issue and Chinese netizens quarrel, said, I want to hit Beijing, Chinese netizens very indifferent response, on your economic level, to pay for the tolls? The two days of new jokes said, if Li Bai live in today's words, estimated more than half above his poem simply can't write, because famous mountains tickets he can't afford.</Div> 5 </Body>
1 $ (' #myCollapsible '). Collapse (' toggle ') // switch between folding and opening1 $ (' #myCollapsible '). Collapse (' show ') // open1 $ (' #myCollapsible '). Collapse (' hide ') // foldingReferences :
The Data-toggle attributes in Twitter Bootstrap http://stackoverflow.com/questions/15113537/ The-data-toggle-attributes-in-twitter-bootstrap
Bootstrap JS Plugin Usage example (6)-folding (accordion effect) Http://doliangzhe3.iteye.com/blog/1871709?utm_source=tuicool
Html5+bootstrap Study Notes 1
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
