-
在Bootstrap框架中的提示框，結構非常簡單，常常使用的是按鈕<button>標簽或者鏈接<a>標簽來制作。不管是使用按鈕還是鏈接來制作提示框，他們都有一個共性： 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設置提示信息)。 通過 data-placement 自定義屬性來控制提示信息框的位置，根據四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現的位置在頂部、右邊、底部和左邊。 還有一個最重要的參數不可缺少，data-toggle="tooltip"。 Bootstrap框架中的提示框的觸發不能直接通過自定義的屬性 data- 來觸發。必須得依賴于JavaScript的代碼觸發。查看全部
-
實現下拉菜單原理： Dropdown插件加載時，對所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時， 會觸發JavaScript事件代碼。當用戶點擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類 名，此時下拉菜單將隱藏。 其結構基本如下： <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜單觸發器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果觸發下拉菜單的元素是一個鏈接元素，為了避免點擊鏈接，頁面跳到頂部，可以使用data-target="#"來替代href="#"：查看全部
-
方法二：觸發模態彈出窗也可以是一個鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性， <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模態彈出窗內容 --> </div> </div> </div>查看全部
-
模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態彈出窗內容 --> </div> </div> </div>查看全部
-
彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕查看全部
-
手風琴 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">標題一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body">標題一對應的內容</div> </div> </div> </div> in默認內容展開查看全部
-
Bootstrap V3.2中提供了12種JavaScript插件，他們分別是： 動畫過渡（Transitions）:對應的插件文件“transition.js” 模態彈窗（Modal）:對應的插件文件“modal.js” 下拉菜單（Dropdown）：對應的插件文件“dropdown.js” 滾動偵測（Scrollspy）：對應的插件文件“scrollspy.js” 選項卡（Tab）：對應的插件文件“tab.js” 提示框（Tooltips）：對應的插件文件“tooltop.js” 彈出框（Popover）：對應的插件文件“popover.js” 警告框（Alert）：對應的插件文件“alert.js” 按鈕（Buttons）：對應的插件文件“button.js” 折疊/手風琴（Collapse）：對應的插件文件“collapse.js” 圖片輪播Carousel：對應的插件文件“carousel.js” 自動定位浮標Affix：對應的插件文件“affix.js” 上述單獨插件的下載可到github去下載（https://github.com/twbs/bootstrap）。查看全部
-
事件類型 描述 show.bs.modal 在show方法調用時立即觸發（尚未顯示之前）；如果單擊了一個元素，那么該元素將作為事件的relatedTarget屬性 shown.bs.modal 該事件在模態彈出窗完全顯示給用戶之后（并且等CSS動畫完成之后）觸發；如果單擊了一個元素，那么該元素將作為事件的relatedTarget事件 hide.bs.modal 在hide方法調用時（但還未關閉隱藏）立即觸發 hidden.bs.modal 該事件在模態彈出窗完全隱藏之后（并且CSS動畫漂完成之后）觸發查看全部
-
data-toggle : 標記用于觸發的； data-dismiss：標記點擊后消失； data-target：一般用于button標簽里面，后面的參數是響應的標簽對應的ID查看全部
-
選項卡查看全部
-
這一小節我們先來講“動畫過渡（Transitions）”這個插件的使用，源文件：transition.js Bootstrap框架默認給各個組件提供了基本動畫的過渡效果，如果要使用，有兩種方法： 調用統一編譯的bootstrap.js； 調用單一的過渡動畫的JavaScript插件文件transition.js（右側第29行引入Bootstrap上對外公布的transition.js的地址）。 transition.js文件為Bootstrap具有過渡動畫效果的組件提供了動畫過渡效果。不過需要注意的是，這些過渡動畫都是采用CSS3來實現的，所以IE6-8瀏覽器是不具備這些過渡動畫效果。 默認情況之下，Bootstrap框架中以下組件使用了過渡動畫效果： 模態彈出窗（Modal）的滑動和漸變效果； 選項卡（Tab）的漸變效果； 警告框（Alert）的漸變效果； 圖片輪播（Carousel）的滑動效果。 右側舉了一個“模態彈出窗（Modal）的滑動和漸變效果”源代碼例子。查看全部
-
單獨導入： 為方便單獨導入特效文件，Bootstrap V3.2中提供了12種JavaScript插件，他們分別是： 動畫過渡（Transitions）:對應的插件文件“transition.js” 模態彈窗（Modal）:對應的插件文件“modal.js” 下拉菜單（Dropdown）：對應的插件文件“dropdown.js” 滾動偵測（Scrollspy）：對應的插件文件“scrollspy.js” 選項卡（Tab）：對應的插件文件“tab.js” 提示框（Tooltips）：對應的插件文件“tooltop.js” 彈出框（Popover）：對應的插件文件“popover.js” 警告框（Alert）：對應的插件文件“alert.js” 按鈕（Buttons）：對應的插件文件“button.js” 折疊/手風琴（Collapse）：對應的插件文件“collapse.js” 圖片輪播Carousel：對應的插件文件“carousel.js” 自動定位浮標Affix：對應的插件文件“affix.js” 上述單獨插件的下載可到github去下載（https://github.com/twbs/bootstrap）。查看全部
-
增加類名“fade”為模態彈出框增加過度動畫效果 <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 小的模態彈出窗 </button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>查看全部
-
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分： 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕 模態彈出窗的結構如下： <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4></div> <div class="modal-body"> <p>模態彈出窗主體內容</p></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button></div> </div> </div> </div> 類名show的樣式為 .show{display:block !important;} 聲明了它的優先級，已經把關閉和X的樣式覆蓋掉（去掉這個類名就好了）。查看全部
-
最后一種情況下 如果要連同div之外的button按鈕一起都關閉掉的話，先給button按鈕加個獨有的id或者class屬性，假設button的id="col"，然后設置 data-target="#myAlert,#col"，這樣就可以連同按鈕一起關閉了。當然 除此之外 你還可以通過這個關閉按鈕去關閉其他的東西?？傊?，設置了data-dismiss屬性的時候 通過data-target指向誰 就是關閉誰~查看全部
舉報
0/150
提交
取消