-
手風琴--聲明式觸發(fā)手風琴（三） 第五步，激活手風琴交互行為。要完成交互行為，需要在標題鏈接中自定義兩個屬性，一個是data-toggle，并且取值為collapse；另一個是data-target，取值為各個面板內容區(qū)的標識符，比如說ID，在這個例子分別是#panel1、#panel2和#panel3： 到此，實現(xiàn)了單個面板的“顯示/隱藏”的切換。但離手風琴效果還略有差距。 注意：在這個案例中不加入data-target="#panel1"也可以，因為前面已經(jīng)有了href="#panel1"，但如是button按鈕作為觸發(fā)器就必須使用data-target="#panel1"語句了。 第六步，定義data-parent屬性，實現(xiàn)點擊一個其中一個元素時，關閉所有的折疊區(qū)，再打開所單擊的區(qū)域（如果所單擊區(qū)域是展示的，則會關閉）。這個data-parent取值與手風琴面板容器的標識符相匹配，比如這個例子是指 #myAccordion：查看全部
-
手風琴--聲明式觸發(fā)手風琴（二） 第三步，為了把標題和內容區(qū)捆綁在一起，可以通過錨鏈接的方法，把標題區(qū)域和面板區(qū)連在一起： <h4 class="panel-title"><a href="#panel1">標題一</a></h4> </div> <div class="panel-collapse" id="panel1"> 第四步，控制面板內容區(qū)是否可視。在Bootstrap框架中，如果你想讓內容區(qū)域不可視，只需要在 panel-collapse 樣式上添加 collapse： <div class="panel-collapse collapse" id="panel1"> <div class="panel-body">折疊區(qū)內容...</div> </div>查看全部
-
手風琴--聲明式觸發(fā)手風琴（二） 第三步，為了把標題和內容區(qū)捆綁在一起，可以通過錨鏈接的方法，把標題區(qū)域和面板區(qū)連在一起： <h4 class="panel-title"><a href="#panel1">標題一</a></h4> </div> <div class="panel-collapse" id="panel1"> 第四步，控制面板內容區(qū)是否可視。在Bootstrap框架中，如果你想讓內容區(qū)域不可視，只需要在 panel-collapse 樣式上添加 collapse： <div class="panel-collapse collapse" id="panel1"> <div class="panel-body">折疊區(qū)內容...</div> </div> 每個面板的內容區(qū)都被隱藏起來了，變成不可視，但有時候希望默認第一個面板內容是可視的，需要怎么辦？其實Bootstrap作者早就為大家做了這方面的考慮，你只需要在collapse基礎上再追加 in 樣式：查看全部
-
手風琴--聲明式觸發(fā)手風琴（一） 觸發(fā)手風琴可以通過自定義的 data-toggle 屬性來觸發(fā)。其中data-toggle值設置為 collapse，data-target="#折疊區(qū)標識符"。接下來我們來看一個簡單的示例：（六步） 第一步，設計一個面板組合，里面有三個折疊區(qū)： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> </div> 第二步：給面板添加內容，每個面板包括兩個部分，第一個是面板標題 panel-heading，并且在這里面添加標題 panel-title。第二個部分是面板內容，也就是折疊區(qū)，使用 panel-collapse 樣式。 <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">標題一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折疊區(qū)內容...</div> </div> </div>查看全部
-
手風琴--手風琴結構 手風琴最關鍵的部分，就是每個標題對應有一個內容，在Bootstrap框架中將這兩個部分組合起來稱為一個panel頁板，如右邊效果所示，他就有三個panel面板，將這三個面板組合在一起，就是一個面板組合 panel-group，也就是手風琴的結構。如：查看全部
-
手風琴（Collapse） 插件源文件：collapse.js 引用地址： <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script> Bootstrap 框架中 Collapse插件(折疊)其實就是我們常見的手風琴效果。點擊標題，可以讓其對應的內容顯示或隱藏。查看全部
-
下拉菜單--屬性聲明式方法（二) 從上一節(jié)的兩個示例，我們可以知道，用戶只需要點擊有向下三角形的按鈕鏈接或者直接點擊三角形就會彈出下拉菜單。實現(xiàn)這個效果，都是依賴于HTML相關元素自定義的屬性完成。所以在編寫HTML結構的時候必須滿足下面的規(guī)則： 按照制作菜單的結構編寫結構，如前面“下拉菜單”一節(jié)(5-21)所介紹 被點擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown" 實現(xiàn)下拉菜單原理： Dropdown插件加載時，對所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時， 會觸發(fā)JavaScript事件代碼。當用戶點擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類 名，此時下拉菜單將隱藏。 如果觸發(fā)下拉菜單的元素是一個鏈接元素，為了避免點擊鏈接，頁面跳到頂部，可以使用data-target="#"來替代href="#"：查看全部
-
下拉菜單（Dropdown） 插件對應的源文件：dropdown.js(使用單獨引入的方法可使用下面鏈接) （官方發(fā)布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js） 樣式代碼： LESS版本：對應的源文件dropdowns.less 編譯后的Bootstrap版本：對應bootstrap.css文件第3122行～第3251行 在介紹Bootstrap的組件的時候，只介紹了下拉菜單的結構和表現(xiàn)形式（樣式風格），在這一節(jié)中主要介紹怎么結合JavaScript代碼實現(xiàn)交互效果。 和模態(tài)彈出窗一樣，觸發(fā)下拉菜單方式有兩種，一種是屬性聲明式用法，另一種是JavaScript方法。下面幾個小節(jié)分別來看這兩種方法是如何觸發(fā)下拉菜單。查看全部
-
模態(tài)彈出框--實現(xiàn)原理解析（一） 實現(xiàn)原理解析： bootstrap中的“模態(tài)彈出框”有以下幾個特點： 1、模態(tài)彈出窗是固定在瀏覽器中的。 2、單擊右側全屏按鈕，在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應的，而且modal-dialog水平居中。 3、當瀏覽器視窗大于768px時，模態(tài)彈出窗的寬度為600px。查看全部
-
動畫過渡（Transitions） 這一小節(jié)我們先來講“動畫過渡（Transitions）”這個插件的使用，源文件：transition.js 調用單一的過渡動畫的JavaScript插件文件transition.js（右側第29行引入Bootstrap上對外公布的transition.js的地址）。 transition.js文件為Bootstrap具有過渡動畫效果的組件提供了動畫過渡效果。不過需要注意的是，這些過渡動畫都是采用CSS3來實現(xiàn)的，所以IE6-8瀏覽器是不具備這些過渡動畫效果。 默認情況之下，Bootstrap框架中以下組件使用了過渡動畫效果： 模態(tài)彈出窗（Modal）的滑動和漸變效果； 選項卡（Tab）的漸變效果； 警告框（Alert）的漸變效果； 圖片輪播（Carousel）的滑動效果。查看全部
-
導入JavaScript插件 具體使用如下（或見右側代碼編輯器28-29行）： <!—導入jQuery版本庫，因為Bootstrap的JavaScript插件依賴于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性導入所有Bootstrap的JavaScript插件（壓縮版本） --> <script src="js/bootstrap.min.js"></script> 特別聲明：jQuery版本庫也可以加載你本地的jQuery版本。 單獨導入： 為方便單獨導入特效文件，Bootstrap V3.2中提供了12種JavaScript插件，他們分別是： 動畫過渡（Transitions）:對應的插件文件“transition.js” 模態(tài)彈窗（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）。 注意：在后面的例子中我們?yōu)榱朔奖愣疾捎靡淮涡詫氲姆椒ǎ匆搿癰ootstrap.min.js”文件（小伙伴們可以在自己的項目中跟據(jù)需要選擇單獨導入還是一次性導入）。查看全部
-
data-dismiss="modal":用于關閉模態(tài)窗口查看全部
-
模態(tài)彈出框的特點:1)模態(tài)彈出框固定在瀏覽器中 2)模態(tài)彈出框的寬度是自適應的,且modal-dialog水平適中 3)當瀏覽器視窗大于768px時,模態(tài)彈出框的寬度為600px查看全部
-
模態(tài)彈出框:分別運用modal,modal-dialog,modal-content樣式 真正內容放在modal-content中，其主要包括三部分1)modal-header 2)modal-body 3)modal-footer查看全部
-
模態(tài)彈出窗還支持四種類型的事件，分別是模態(tài)彈出窗的彈出前、彈出后，關閉前、關閉后查看全部
舉報
0/150
提交
取消