當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5+Bootstrap 学习笔记 1

發(fā)布時(shí)間：2025/3/20 HTML 79 豆豆

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

HTML <header> 標(biāo)簽

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

參考資料： HTML <header> 標(biāo)簽?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實(shí)現(xiàn)折疊效果

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

1 <body> 2 <button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> 3 簡單折疊效果</button> 4 <div id="demo" class="collapse in">前一段時(shí)間一個(gè)段子說，某國的網(wǎng)民在因國土問題與中國網(wǎng)民爭吵時(shí)說，我要打到北京，中國的網(wǎng)民非常淡然地回應(yīng)，就你那經(jīng)濟(jì)水平，交得起過路費(fèi)嗎？這兩天新的段子說，李白要是活在今天的話，估計(jì)一大半以上他的詩根本寫不出來，因?yàn)槊酱蟠ǖ拈T票他根本買不起。</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插件使用實(shí)例(6)-折疊(手風(fēng)琴效果)?http://doliangzhe3.iteye.com/blog/1871709?utm_source=tuicool

轉(zhuǎn)載于:https://www.cnblogs.com/isun/p/4442579.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。