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