【學習筆記】Bootstrap外掛 滾動監聽+彈出框+選項卡
阿新 • • 發佈:2019-02-13
--滾動監聽
依賴導航元件步驟:
1.寫一個導航元件
2.data-target="#test"執行滾動監聽的目標
data-spy="scroll" 向想要監聽的元素 新增滾動監聽
<nav id="test" class="navbar navbar-default"> <div class="container"> <ul class="nav navbar-nav"> <li><a href="#ios">ios</a></li> <li><a href="#php">php</a></li> <li><a href="#java">java</a></li> </ul> </div> </nav> <div data-target="#test" data-spy="scroll" style="height:100px;overflow:auto;position:relative"> <h4 id="ios">ios</h4> <p>這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容</p> <h4 id="php">php</h4> <p>這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容</p> <h4 id="java">java</h4> <p>這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容</p> </div>
--彈出框popover
data-container 向指定元素追加彈出框
data-toggle="popover"指定彈出框執行
data-placement 規定如何定位top bottom left right
data-content 彈出框內容
data-trigger: focus 點選彈出框消失
物件.popover()手動初始化彈出框
<div class="container" style="padding:100px 50px 10px;"> <button class="btn btn-default" type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="彈出框" data-trigger="focus">彈出框</button> </div> <script> $(function(){ $("[data-toggle='popover']").popover(); }) </script>
--選項卡(標籤頁)
tab-content bs中用來定義選項卡的父級元素
fade 指定透明度和漸變效果
fade in 透明度,第一個標籤頁必須新增 .in 類,以便淡入顯示初始內容.fade.in{opacity:1;}
tab-pane 隱藏元素
active 顯示元素
<ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">home</a></li> <li><a href="#ios" data-toggle="tab">ios</a></li> <li><a href="#java" data-toggle="tab">java</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active">home</div> <div id="ios" class="tab-pane fade">ios</div> <div id="java" class="tab-pane fade">java</div> </div>