當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5+Bootstrap 学习笔记 1

發布時間：2025/3/20 HTML 86 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5+Bootstrap 学习笔记 1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML <header> 標簽

<header> 標簽定義文檔的頁眉（介紹信息），是 HTML 5 中的新標簽。

參考資料： HTML <header> 標簽?http://www.w3school.com.cn/tags/tag_header.asp

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 should 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>

參考資料：?HTML5 Custom Data Attributes (data-*)?http://html5doctor.com/html5-custom-data-attributes/

Bootstrap實現折疊效果

一般每個折疊組件都會有一個觸發元素，如：按鈕、超鏈接等，通過點擊觸發元素來控制折疊元素的展開和隱藏。這樣，只要在觸發元素上添加 data-toggle="collapse" 和 data-target 標記就能自動變成可折疊的。 data-target 屬性接受一個css選擇器，指向折疊元素。另外，在折疊元素上需要添加 .collapse 類樣式。如果要默認某折疊元素是打開的，可在折疊元素上添加 .in 。

1 <body> 2 <button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> 3 簡單折疊效果</button> 4 <div id="demo" class="collapse in">前一段時間一個段子說，某國的網民在因國土問題與中國網民爭吵時說，我要打到北京，中國的網民非常淡然地回應，就你那經濟水平，交得起過路費嗎？這兩天新的段子說，李白要是活在今天的話，估計一大半以上他的詩根本寫不出來，因為名山大川的門票他根本買不起。</div> 5 </body> 1 $('#myCollapsible').collapse('toggle') //在折疊和打開間互相切換 1 $('#myCollapsible').collapse('show') //打開 1 $('#myCollapsible').collapse('hide') //折疊

參考資料:?

The data-toggle attributes in Twitter Bootstrap?http://stackoverflow.com/questions/15113537/the-data-toggle-attributes-in-twitter-bootstrap

Bootstrap JS插件使用實例(6)-折疊(手風琴效果)?http://doliangzhe3.iteye.com/blog/1871709?utm_source=tuicool

轉載于:https://www.cnblogs.com/isun/p/4442579.html

總結

以上是生活随笔為你收集整理的HTML5+Bootstrap 学习笔记 1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。