-
除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。比如說:是否有灰色背景modal-backdrop，是否可以按ESC鍵關閉模態彈出窗查看全部
-
fade,增加過度效果查看全部
-
方法一：模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。 方法二：觸發模態彈出窗也可以是一個鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性。查看全部
-
在添加modal-lg/sm的父元素上也要添加bs-example-modal-lg/sm，不然模態彈出窗將無法顯示查看全部
-
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
動畫過渡（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”查看全部
-
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分： 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕查看全部
-
動畫過渡（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” 類 描述 .btn 為按鈕添加基本樣式 .btn-default 默認/標準按鈕 .btn-primary 原始按鈕樣式（未被操作) .btn-success 表示成功的動作 .btn-info 該樣式可用于要彈出信息的按鈕 .btn-warning 表示需要謹慎操作的按鈕 .btn-danger 表示一個危險動作的按鈕操作 .btn-link 讓按鈕看起來像個鏈接 (仍然保留按鈕行為) .btn-lg 制作一個大按鈕 .btn-sm 制作一個小按鈕 .btn-xs 制作一個超小按鈕 .btn-block 塊級按鈕(拉伸至父元素100%的寬度) .active 按鈕被點擊 .disabled查看全部
-
Bootstrap框架中的提示框的觸發方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發。必須得依賴于JavaScript的代碼觸發。 最簡單的觸發方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以單獨指定一個元素，在該元素上調用提示框，并且可能通過JavaScript的各種參數來實現，無需定義一些 data 屬性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一個提示框，我在頂部出現", placement:'top' }); });查看全部
-
因為 div.carousel-inner 設置了 width:100%，所以需要在 div.carousel 外用一個設置了寬度的 div 容器包裹。這個問題花了好長時間。。查看全部
-
自定義Bootstrap 使用 Bootstrap 框架的不方便： 很多時候在創建 Web 頁面或應用的時，需要自己獨立的 UI 界面效果，此時僅僅使用 Bootstrap 框架并不能滿足我們自身 UI 的需求，也造成要寫很多的樣式代碼來覆蓋 Bootstrap 框架提供的樣式代碼。如此一來，這也失去使用 Bootstrap 框架的意義。 很多同學會問，我要使用Bootstrap框架，而且還要讓其出來的 UI 界面效果能和滿足自己的UI設計效果。 解決方法： 在 Bootstrap 框架中提供多種方式來自定義 Bootstrap，讓 Bootstrap 框架適合自己的需求，接下來，簡單的向大家介紹怎樣自定義 Bootstrap 框架。 自定義Bootstrap框架主要有兩種方式來實現： 使用 CSS 預處理器語言 使用在線自定義設置 1.使用 CSS 預處理器語言 在學習 Bootstrap 框架的使用時，可以看到 Bootstrap 框架中很多組件的 UI 效果都有對應的 LESS 版本和 Sass 版本源碼。其實需要自定義 Bootstrap 框架，完全可以在這些組件的 LESS 或 Sass 源碼文件上進行修改，然后將修改好的源碼重新編譯出 bootstrap.css 文件，從而實現適合自己的 UI 界面風格。 使用 CSS 預處理器語言來重新定義 Bootstrap 框架有一個前提條件，那就是開發人員會使用 LESS 或 Sass 預處理器語言，否則要在此基礎上實現 Bootstrap 框架自定義不是一件容易的事情。不過大家不用擔心，就算你不懂 LESS 或 Sass 也不用怕，可以通過在線自定義設置來實現自定義 Bootstrap 框架。 2.使用在線自定義設置 在Bootstrap框架的官網為大家提供了一個在線自定義 Bootstrap 框架的配置頁面 http://getbootstrap.com/customize/ ，可以通過這里進行配置。 在線自定義設置主要包括三個部分： Bootstrap 組件 Bootstrap 插件 Bootstrap 的 LESS 版本變量設置 我們只需要根據自己的需求設置完成之后，點擊最底部的下載按鈕就可以得到自定義后的 Bootstrap 框架。查看全部
-
<div class="col-xs-3" id="sidebarMenu"> 加了id="sidebarMenu"后就有了對應的選中狀態查看全部
-
按鈕插件--JavaScript用法 除了上面介紹的屬性聲明使用方法之外，按鈕插件還可以通過調用button函數，然后給button函數傳入具體的參數，實現不同的效果。而其中有兩個參數是固定不變的，即toggle和reset。其他的都可以隨意定義： 1、切換按鈕狀態（得到焦點）： $("#mybutton").button("toggle") 2、重新恢復按鈕： $("#mybutton").button("reset") 如下代碼： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); 3、任意參數： $("#mybutton").button("任意字符參數名") 上面代碼作用：替換 data-任意字符參數名-text 的屬性值為“按鈕上顯示的文本值”。如下代碼： html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >確認</button> js代碼： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });查看全部
-
注意，這里自定義屬性是 data-toggle="button"，而不是 data-toggle="buttons"。查看全部
-
mark查看全部
舉報
0/150
提交
取消