列表組的使用

ul.list-group > li.list-group-item *5...
列表組中可以放置徽標: 在li中放置 span.badge.

bootstrap中的情景類: 實際上就是所謂的顏色類, 如 .list-group-item-success 等類.

列表組的鏈接
還是list-group, list-group-item類, 只是將ul換成 div, li換成 a標簽

div.list-groupa.list-group-item

列表組中的定制內(nèi)容:
還是上面的 div.list-group > a.list-group-item> h3和p標簽內(nèi)容....

面板的使用

一個div.panel 包括: 一個 div.heading , 一個 div.body, 一個 div.footer
必須給 要給panel以情景類 div.panel .panel-default/.panel-primary/info/warning/danger/info等.
body中可以放置任何內(nèi)容和東西..

(改造bootstrap自帶的類的樣式, 方法是: 在 ff中, 找到 顯示該樣式的 類的 內(nèi)容, 然后在 style標簽中, 重載這些類 的樣式 !!)

面板中的表格, 注意這里的表格不是指嵌套在 div.panel-body中的表格, 而是指跟 panel的邊框直接 相接的表格, 方法是: 把表格的標簽元素, 放在 div.panel-body和 div.panel-footer之間, 即 放在 div.panel-body的 外部的.

面板中的其他東西, 仍然是寫在 div.panel-body的外面, 如列表組 等.

對于標題標簽, h2等, 如果想要在 標題的下方顯示一條小的, 細的橫線, 對標題元素本身使用 page-header, 如: h2.page-header

well被稱為 "墻"? 還是 井?

骨架是: div.well .well-lg等...

整個bootstrap 分成3大塊 , css全局樣式, 組件 , 和 javascript插件.

modal模態(tài)框

model 模型,
module: 模塊
modal: 模態(tài)
一定要注意這三個單詞的寫法區(qū)別, 不要把modal寫錯了, 寫成model了, 否則 modal-dialog就不會顯示 bootstrap默認的css樣式: {width: 600px; margin: 30px auto} . 還是上面的方法, 就是看這些類, 這些css樣式來自哪里, 來自哪個類, 從而, 可以查看是什么地方類寫錯了(用于排錯), 哪里的類的樣式是怎么樣的. 從而可以重載 bootstrap 默認的類樣式...

模態(tài)框的寫法

模態(tài)框分成靜態(tài)模態(tài)框和動態(tài)觸發(fā)的模態(tài)框, 模態(tài)框本身來說, 只是包含那個模態(tài)框面板對話框. 動態(tài)觸發(fā)的那個按鈕, 不是包含在模態(tài)框中的, 即, 觸發(fā)按鈕不是模態(tài)框本身的一部分!!

觸發(fā)按鈕 button.btn .btn-primay [data-toggle=modal data-target=#mymodal]

模態(tài)框的骨架, 包括三個層次類: div.modal .fade .in > div.modal-dialog > div .content 注意這里的div. modal-content 不要和其中的 modal-body類相混淆了

其中, div.modal-content 才分為 三個部分:

div.modal id="mymodal" // 這里一定給modal div寫上id, 供上面的那個觸發(fā)按鈕使用div.modal-dialogdiv.modal-content // 模態(tài)框的對話框由三個部分組成:div.modal-header (頭部, 包括hx, p標簽內(nèi)容, 關(guān)閉按鈕)button.close [data-dismiss=modal] {×} //右上角的關(guān)閉按鈕, 由于他的樣式是, 往所在行的 右下角漂移, 注意是右下角, 所以要把這個 colse類的button 寫在h2.modal-title的前面...h2.modal-title{內(nèi)容...}div.modal-body (模態(tài)對話框的內(nèi)容部分) // 注意這里是modal-body類, 而不是 modal-content類, 不要把 這兩個 類 搞反了...p...div.modal-footer (模態(tài)對話框的頁腳部分)buttonbutton [data-dismiss=modal] close按鈕...

除了直接用button觸發(fā) 通過 data-toggle="modal" data-target="#mymodal" 來觸發(fā)顯示模態(tài)框之外, 也可以用 bs本身提供的modal框的 函數(shù), 要將摸個div.modal 模態(tài)框作為modal顯示出來, 調(diào)用它的函數(shù)方法: $('#mymodal).modal(), 注意是modal本身的id, 不是觸發(fā)按鈕的id

bs中的類, 分為, 基類, 修飾類, 狀態(tài)類, 顏色類等等

bs中的標簽頁, 沒有 專門的單獨的 tab標簽, 它是基于 導(dǎo)航組件 而派生的, 所以 要加導(dǎo)航類: ul.nav nav-tabs.....

注意, bs中的導(dǎo)航和 導(dǎo)航欄是兩個根本就不同的東西, 導(dǎo)航欄通常是放在最頂端, banner , 或底部的東西, 而 導(dǎo)航 nav, 通常是和 .nav-tabs 和 .nav-pills 相結(jié)合而生產(chǎn)的東西. 用在網(wǎng)頁中的任何地方....

有人說, 感覺bs的用法有點亂, 它的組件的 使用方式并不是全局一致的, 有的時候, 是這樣的, 但是, 有的時候, 對于類似的東西, 它又是另外一種不同的方式了...

如: modal框的js, modal() 方法, 是加在 modal框的 本身的div上的, 而后面的 標簽頁的 js方法 $("a:last") .tab('show')/.tab('hide') , 等這個方法tab, 又是 加在 a標簽上上面 的了, 不是加載 跟他相關(guān)聯(lián)的 div.content > div.pane 上面了.

注意pane和panel的區(qū)別

pane是窗格, 是一個窗口中的某一部分子區(qū)域, 而panel是用來 分組控件和對象的.

A pane is a (usually) independently scrollable subsection of a window, A pane is a (usually) independently scrollable subsection of a window. It's what you get, for example, if you drag the splitter bar in a Word window. A panel is an object that is used to group controls and other objects.

帶js 切換到tabs標簽頁:

分成兩個部分, 一個是上面的 標簽頁導(dǎo)航樣式, 另一個是下面的 tab窗格, 使用類 div.tab-content > (div.pane...)*3 , 然后將這兩個部分 相關(guān)聯(lián)起來...

關(guān)聯(lián)的方法, 一是,使用屬性法, 在 .nav.nav-tabs中的li>中的>a 標簽中 ,使用 data-toggle="tab" href="#Profile" ,這里的#Profile 就是下面的 tab 窗格...

注意, bs中的 data-target, href中, 使用目標, 其實是 鏈接的一個 錨點, 所以 要加上 # 井號. 這里的 a標簽, 要進行鏈接, 不是用data-target ,而是使用 href屬性...

二是, 使用js方法, 這個時候的js就是:

$('a').click(function(){$(this).tab('show'); // 注意這里的tab方法是直接放在 a鏈接上的...} );

工具提示欄的使用

這個單詞真的 就叫做 tooltip: = tool 工具, tip= 提示. 真的就叫做 工具提示欄
它是一個比較 "不正式" "不正規(guī)"的類, 因為類的名字叫做: div.tooltip-demo
用法是: 直接在元素(不只是button元素吧)中, 添加屬性: data-toggle="tooltip" data-placement="top"(默認在上方) title="title中的內(nèi)容就是tooltip中要顯示的東西"

也可以用純js的方式: $("被依附的元素").tooltip(option), 這里特別要注意到是, option要使用 js對象或json的方式, 即 要在選項組的外面加上 大括號{ ...}

好像不能使用 data-toggle的方式, 只能使用 純js 的方式

<button class="btn btn-primary">tooltip top</button><script> $('button').tooltip({ title: 'tooltip on bottom', placement: 'auto', top|bottom|left|right trigger: click|hover|focus|manual });

bs中的彈出框popover

popover的用法跟 tooltip的用法完全相同, 類似
屬性: data-toggle="popover" title="title title, 不是data-title, 因為這個是標準屬性" data-content="...."
也可以用js, 其中{placement=也有四個位置, trigger:... , title:...., html: true/false這個表示data-content中的html標簽是否解析}

為什么好像也不能使用data-方式 只能使用 純js的方式: $('...').tooltip({....});

bs中的警告框alert

跟前面的tooltip, popover等是一樣的用法, 純js的寫法是 $('...').alert('close');

bs中按鈕的補充類

顯示正在加載的類: button.btn.btn-primary 加上屬性data-loading-text="文字如:loading...", 還必須加上 id="fat-btn"

可以一直被按下的按鈕: button 加上屬性: data-toggle="button"

帶checkbox或 radio功能的 按鈕組:
實現(xiàn)方法是:
先寫一個input checkbox或radio ,可以預(yù)選上checked
然后將這個input放在label中, 同時給label以 btn類樣式 預(yù)選的話, 需要加active類

然后將多個這樣的 label>input[type=checkbox/radio] 放在一個btn組 div.btn-group中即可.

關(guān)于setTimeout的使用: // code someother ......; setTimeout(function_callback(){....}, ms_number); someother code here....;設(shè)置等待多少時間后, 執(zhí)行回調(diào)函數(shù). 這個是一個全局函數(shù), 所以你想什么時候用, 就什么時候用,不需要 對象的 . 作用也很明顯, 就相當于等于c++ , java中的 sleep, usleep 函數(shù), 等待多少時間后, 執(zhí)行動作.... 可以放在其他函數(shù)的外面單獨使用, 就是等前面的函數(shù)完全執(zhí)行完了之后 睡眠多少時間后執(zhí)行回調(diào), 也可以放在 其他函數(shù)的內(nèi)部 使用....就是 從setTimeout語句的上一語句開始執(zhí)行時開始算起, 等待多少ms后, 就執(zhí)行回調(diào) (不一定要等到上一語句完全執(zhí)行完畢!!). 兩者的含義肯定是不同的!!

注意在使用js時, 多個回調(diào)函數(shù)中的js對象$(this)的變化. 就是說, 當使用多個回調(diào)函數(shù)時, 要注意在 多個回調(diào)函數(shù)中的 $(this) 可能不是指的 同一個元素. 特別是在使用 setTimeout函數(shù)時, 它其實是有對象的, 就是window 窗口對象. 只是這里的window可以省略不寫. 所以在setTimeout函數(shù)中的 $(this)就是指的 window, 不再是之前的 $('button') 什么的.. 要想一直使用前面的元素, 可以先把那個元素保存下來, 供后面一直使用: var obj=$(this);

使用 data-xxx-text="..."屬性可以定制 按鈕中的文本... 注意 用js方法中的"loading" "complete"是關(guān)鍵字, 不能隨便亂寫. obj.button('loading'); 因為這個就是在按鈕上顯示 loading /complete 文字. 要定制這些文本, 可以 在button中使用 屬性: data-loading-text="..." data-complete-text="...."

按鈕的狀態(tài)定制:

可以讓按鈕顯示 "正在加載", "加載完成"等 狀態(tài)..
注意, 調(diào)用方法 $('.stateful-btn').button('loading') 后, 按鈕的文字 會一直顯示 data-loading-text="..." 中定制的加載內(nèi)容. 不會自動改變, 不會自動恢復(fù)..., 而且按鈕是被 灰色 禁用的!

要想恢復(fù)按鈕的 可用狀態(tài), 及按鈕內(nèi)地文字, 必須你自己顯式的 調(diào)用方法: obj.button('reset'), 當然也可以調(diào)用 obj.button('complete')方法.
注意: 好像, button('complete')方法和 button('reset')方法最好不要同時使用, 而且, 如果同時使用時, 好像總是在最后 執(zhí)行complete, 先執(zhí)行'reset'方法...

<h3 style="color: red;">按鈕附加功能和樣式的使用</h3> <button class="btn btn-danger btn-lg stateful-btn" data-loading-text="正在加載, 3秒后加載完成..." data-complete-text="加載完成">顯示狀態(tài)變化的按鈕</button> <br><br> <script> $('.stateful-btn').click( function(){var obj=$(this);obj.button('loading');// wait for business logic ....setTimeout(function(){obj.button('complete'); // 注意, 這里,不要使用 $(this), 原因如上所述, 因為, setTimeout函數(shù)中的$(this) 將會引用到window瀏覽器窗口對象...}, 3000);}); </script>

firefox中的F12的調(diào)試器中 "查看" 中顯示的 ev是什么?

ev是指當載入這個dom 元素節(jié)點的時候, 發(fā)生了指定的 event事件, 其中ev就是 event 事件的意思.

單擊ev點開 事件列表, 可以看到載入了那些事件 , 執(zhí)行了哪些js腳本 中的第幾行 js代碼 等等...

http://www.tudou.com/programs/view/bFEHdKQWl8M/ 第15集

http://www.tudou.com/programs/view/A-7lavN56ss/ 第14集

總結(jié)

以上是生活随笔為你收集整理的bootstrap5的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。