bootstrap5
列表組的使用
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標簽
列表組中的定制內(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)容, 關閉按鈕)button.close [data-dismiss=modal] {×} //右上角的關閉按鈕, 由于他的樣式是, 往所在行的 右下角漂移, 注意是右下角, 所以要把這個 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標簽, 它是基于 導航組件 而派生的, 所以 要加導航類: ul.nav nav-tabs.....
注意, bs中的導航和 導航欄是兩個根本就不同的東西, 導航欄通常是放在最頂端, banner , 或底部的東西, 而 導航 nav, 通常是和 .nav-tabs 和 .nav-pills 相結合而生產(chǎn)的東西. 用在網(wǎng)頁中的任何地方....
有人說, 感覺bs的用法有點亂, 它的組件的 使用方式并不是全局一致的, 有的時候, 是這樣的, 但是, 有的時候, 對于類似的東西, 它又是另外一種不同的方式了...
如: modal框的js, modal() 方法, 是加在 modal框的 本身的div上的, 而后面的 標簽頁的 js方法 $("a:last") .tab('show')/.tab('hide') , 等這個方法tab, 又是 加在 a標簽上上面 的了, 不是加載 跟他相關聯(lián)的 div.content > div.pane 上面了.
注意pane和panel的區(qū)別
帶js 切換到tabs標簽頁:
分成兩個部分, 一個是上面的 標簽頁導航樣式, 另一個是下面的 tab窗格, 使用類 div.tab-content > (div.pane...)*3 , 然后將這兩個部分 相關聯(lián)起來...
注意, bs中的 data-target, href中, 使用目標, 其實是 鏈接的一個 錨點, 所以 要加上 # 井號. 這里的 a標簽, 要進行鏈接, 不是用data-target ,而是使用 href屬性...
工具提示欄的使用
這個單詞真的 就叫做 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 ,可以預選上checked
然后將這個input放在label中, 同時給label以 btn類樣式 預選的話, 需要加active類
然后將多個這樣的 label>input[type=checkbox/radio] 放在一個btn組 div.btn-group中即可.
關于setTimeout的使用: // code someother ......; setTimeout(function_callback(){....}, ms_number); someother code here....;設置等待多少時間后, 執(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"是關鍵字, 不能隨便亂寫. 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)容. 不會自動改變, 不會自動恢復..., 而且按鈕是被 灰色 禁用的!
要想恢復按鈕的 可用狀態(tài), 及按鈕內(nèi)地文字, 必須你自己顯式的 調(diào)用方法: obj.button('reset'), 當然也可以調(diào)用 obj.button('complete')方法.
注意: 好像, button('complete')方法和 button('reset')方法最好不要同時使用, 而且, 如果同時使用時, 好像總是在最后 執(zhí)行complete, 先執(zhí)行'reset'方法...
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集
總結
以上是生活随笔為你收集整理的bootstrap5的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： trigger自动执行事件
- 下一篇： MVC ---- EF高级增删改