-
按鈕插件（Button） 首先要說的是這一節(jié)，討論的不是按鈕組件的制作，前面我們專門花了一節(jié)的篇幅介紹了Bootstrap框架中的“按鈕Buttons”的制作。在此處我們要討論的是Bootstrap框架中的“按鈕插件”。 大家在平時制作Web頁面時，或多或少碰到過下列這些情形： 點擊按鈕時，按鈕文字變?yōu)椤罢诩虞d…”，一旦加載完之后又變回“獲取數(shù)據(jù)”。簡單點說就是控制按鈕狀態(tài)，比如禁用狀態(tài)、正在加載狀態(tài)、正常狀態(tài)等； 按鈕切換狀態(tài) 按鈕模仿單選按鈕 按鈕模仿復選按鈕查看全部
-
警告框--JavaScript觸發(fā)警告框 除了通過自定義data-dismiss="alert"屬性來觸發(fā)警告框關閉之外，還可以通過JavaScript方法。只需要在關閉按鈕上綁定一個事件。如下所示： html代碼: <div class="alert alert-warning" role="alert" id="myAlert"> <h4>謹防被騙</h4> <p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p> <button type="button" class="btn btn-danger" id="close">關閉</button> </div> 通過下面的JavaScript代碼來觸發(fā)： $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
警告框--使用聲明式觸發(fā)警告框 如果通過自定義的HTML屬性（聲明式）來觸發(fā)警告框，需要在關閉按鈕上設置自定義屬性data-dismiss="alert" <h3>使用a標簽作為關閉按鈕</h3> <div class="alert alert-warning" role="alert"> <h4>謹防被騙</h4> <p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert">關閉</a> </div> <h3>使用button按鈕作為關閉按鈕</h3> <div class="alert alert-warning" role="alert" id="myAlert"> <h4>謹防被騙</h4> <p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">關閉</button>查看全部
-
警告框--結構與樣式 在介紹警告框結構之前，我們先來看看警告框插件的效果與警告框的效果在樣式風格展示上有何不同： 相比之下，唯一不同的區(qū)別正如前面開頭所言，警告框插件就是在“警示框組件”基礎上添加了一個關閉的按鈕，外形上就是一個X。所以其結構只需要在警示框組件的基礎上添加一個按鈕即可： <div class="alert " role="alert"> <buttonclass="close" type="button" >×</button> 恭喜您操作成功！ </div> 除此差別之外，警告框插件與警示框沒有其他的區(qū)別。查看全部
-
<h3>示例</h3> <div class="alert alert-success" role="alert"> <button class="close" data-dismiss="alert" type="button" >×</button> <p>恭喜您操作成功！</p> </div>查看全部
-
彈出框--提示框和彈出框的異同 從之前的學習可知，彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎上增加了一個 data-content 屬性，用來設置彈出框的內容。其實兩插件也有略微的不同： 提示框 tooltip 的默認觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click 提示框 tooltip 只有一個內容(title)，而彈出框不僅可以設置標題（title）還可以設置內容(content) 兩個插件的顯示模板不同： 提示框tooltip的模板： <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 彈出框popover的模板： <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>查看全部
-
彈出框--自定義結構屬性 <button type="button" class="btn btn-default" data-toggle="popover" title="提示框居左" data-content="我是彈出框的內容" data-trigger="hover" data-delay="2000"> 猛擊我吧 </button>查看全部
-
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="提示框居左" data-content="我是彈出框的內容"> 猛擊我吧 </button> <!--下面是代碼任務部分--> <button type="button" class="btn btn-default" id="myPopover"> 猛擊我吧 </button> $(function(){ $('[data-toggle="popover"]').popover(); }); $(function(){ $("#myPopover").popover({ title:"彈出框的標題", content:"彈出框的內容", placement:"right" }); });查看全部
-
彈出框--彈出框的結構 簡單回憶一下，在制作提示框（tooltip）時，可以使用<button>或者<a>標簽元素，而且通過 data- 屬性來聲明提示框的信息，如下所示： <button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="我是一個提示框tooltip"> 鼠標移上來 </button> 而彈出框Popover和提示框tooltip相比，就多了一個content內容，那么在此使用 data-content 來定義彈出框中的內容。同樣可以使用<button>或者<a>標簽來制作，如下： <button type="button" class="btnbtn-default" data-container="body" data-placement="bottom" data-toggle="popover" data-original-title="Bootstrap彈出框標題" data-content="Bootstrap彈出框的內容" > 猛擊我吧 </button> <a href="#" class="btnbtn-default" data-container="body" data-placement="right" data-toggle="popover" title="Bootstrap彈出框標題" data-content="Bootstrap彈出框的內容"> 猛擊我吧 </a>查看全部
-
彈出框（Popover） 彈出框除了有標題 title 以外還增加了內容 content 部分。這個在提示框中是沒有的。查看全部
-
提示框--JS設置參數(shù)方法 除了在 html 代碼中使用 data- 設置提示框參數(shù)，還可以使用 JavaScript 來設置提示框參數(shù)。 <script> $(function(){ $('#myTooltip1').tooltip({ title:"我是一個提示框，我在頂部出現(xiàn)", placement:"top" }); }); </script>查看全部
-
提示框--其他的自定義屬性： <h4>data-delay="500"</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="data-delay='500'" data-delay="500"> 提示框延時500毫秒出現(xiàn) </button>查看全部
-
提示框--JS觸發(fā)提示框方法 Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。 最簡單的觸發(fā)方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以單獨指定一個元素，在該元素上調用提示框，并且可能通過JavaScript的各種參數(shù)來實現(xiàn)，無需定義一些 data 屬性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一個提示框，我在頂部出現(xiàn)", placement:'top' }); });查看全部
-
提示框--結構 Bootstrap框架中的tooltip的插件提供了四種不同的風格： 在Bootstrap框架中的提示框，結構非常簡單，常常使用的是按鈕<button>標簽或者鏈接<a>標簽來制作。不管是使用按鈕還是鏈接來制作提示框，他們都有一個共性： 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設置提示信息)。 通過 data-placement 自定義屬性來控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。 還有一個最重要的參數(shù)不可缺少，data-toggle="tooltip"。查看全部
-
提示框(Tooltip) <h3>按鈕做的提示框</h3> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title=""> 提示框居左 </button> <h3>鏈接制作的提示框</h3> <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示框居左"> 提示框居左 </a> <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一個提示框，我在頂部出現(xiàn)", placement:'top' }); }); </script>查看全部
舉報
0/150
提交
取消