bootstrap筆記總結(jié)

1、Bootstrap知識(shí)總結(jié)BaseCSS1、布局（柵格系統(tǒng)）固定居中使用 class=”container”，流體布局使用class=”container-fluid”,默認(rèn)940px,可定制（本頁(yè)面設(shè)置為1170px）2、默認(rèn)設(shè)置BODY：全局默認(rèn)font-size:14px，line-height:20px，p默認(rèn)底邊距10px（也就是上下居中，margin-bottom:10px）在段落中醒目效果使用 class=”lead”，小號(hào)字用 ，加粗使用 斜體使用 字體顏色class=”muted” class=”text-waring”class=”text-error” class=”te

2、xt-info”class=”text-success” 其他鼠標(biāo)提示信息鼠標(biāo)放上去試試 title 是提示消息，class=initialism 是”鼠標(biāo)放上去試試”的字體略小引用-blockquote 左浮動(dòng)，右浮動(dòng)， 字體顏色為#999999， 清除浮動(dòng)ul或ol 中不需要樣式的時(shí)候 class=”unstyle”Description lists A description list is perfect for defining terms. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia od

3、io sem nec elit.以上dl 使用水平描述 class=”dl-horiziontal” 可以多選顯示，增加 class=”pre-scrollable” 設(shè)置max-height:300px; 超出會(huì)增加滾動(dòng)條3、表格默認(rèn)樣式：class=”table”，隔行變色：class=”table-striped”，增加邊框：class=”table-bordered”鼠標(biāo)懸浮變色：class=”table-hover” 表格中的tbody設(shè)置row顏色：class=”success error warning info”4、表單Legendplaceholder=” 為默認(rèn)值，clas

4、s=”help-block” 說明搜索框默認(rèn)樣式：class=”form-search”，輸入框長(zhǎng)度：class=”input-large”，輸入樣式：class=”search-query”表單內(nèi)聯(lián)布局所有左邊對(duì)齊：水平對(duì)齊（Horizontal）首先添加，labels and controls添加，每個(gè)，每個(gè)標(biāo)簽控件添加Checkboxes and radioscheckbox為 class=”checkbox”，radio為 class=”radio” tips：radio必須添加的name=”optionRadios”表單擴(kuò)展class=”input-prepend” class=”a

5、dd-on”class=”input-append” class=”input-append”Tips:設(shè)置ID，重寫dropdown-menu的min-width #drop-width .dropdown-menumin-width:75px;class=”input-block-level” 只針對(duì)textarea和inputclass=”controls-rows” 自動(dòng)調(diào)整class之間的間距tips：class=form-actions 放置在class=form-horizontal 里，按鈕會(huì)自動(dòng)縮進(jìn)在一個(gè)水平線上。Tips：只需要在input里添加disabled，即按鈕ti

6、ps:class=btn-group，class=btn-toolbar 也可以作用于radio和checkbox但是不顯示值class=btn-group class=btn-toolbar 整行顯示ImagesJavaScript1、 概述開關(guān)$(body).off(.data-api); /設(shè)置$(.data-api)關(guān)閉$(body).off(.alert.data-api);編程API$(#myModal).modal(); /初始化默認(rèn)設(shè)置$(#myModal).modal(keyboard:false); /鍵值設(shè)置$(#myModal).modal(show); /初始化，立即

7、調(diào)用show插件調(diào)試$.fn.popover.Constructor(); /查看插件的構(gòu)造函數(shù)$(rel=popover).data(popover);/查看插件的特定元素自定義事件$(#myModal).on(show,function()If(!data) return e.preventDefault(); /stops modal from begin shown);以上一個(gè)動(dòng)詞和去過去式，比如：show是觸發(fā)一個(gè)事件開發(fā)，shown是觸發(fā)一個(gè)事件的結(jié)束。每個(gè)工具提示都可以單獨(dú)通過設(shè)置data-屬性以實(shí)現(xiàn)與javascript調(diào)用同樣的功能。過濾 bootstrap-transition.jstips:在實(shí)現(xiàn)模糊滑動(dòng)或褪色、淡出標(biāo)簽、淡出警示、滑動(dòng)旋轉(zhuǎn)木馬窗格等效果時(shí)需要加載bootstrap-transition.jsModal bootstrap-modal.jsTIPS:默認(rèn)位置是在頂部class=modal 包含class=modal-header 和 class=modal-body 和class=modal-footer用法首先在一