第三次公開(kāi)課課件程序員bootstrap

Bootstrap實(shí)戰(zhàn)講師：辛老師內(nèi)容介紹Bootstrap介紹Bootstrap

css組件Bootstrap

JavaScript插件Bootstrap項(xiàng)目實(shí)戰(zhàn)Bootstrap介紹2011年，Twitter的兩個(gè)工程師Mark

Otto和JacobThornton合作開(kāi)發(fā)，是一個(gè)HTML/CSS框架。該框架基于

HTML5、CSS3和JavaScript。官方網(wǎng)站：Bootstrap中文網(wǎng)：Bootstrap下載與安裝下載地址：安裝：

bootstrap.min.cssjquery.min.jsbootstrap.min.js響應(yīng)式開(kāi)發(fā)注意事項(xiàng)Bootstrap—柵格系統(tǒng)容器的概念 流式布局 固定布局柵格參數(shù)col-lg-col-md-col-sm-col-xs-案例Bootstrap—輔助類文本顏色：text-背景顏色：bg-關(guān)閉按鈕圖標(biāo)三角圖標(biāo)快速浮動(dòng)內(nèi)容塊居中清除浮動(dòng)顯示、隱藏Bootstrap—表格.table類的使用條紋狀表格：.table-striped帶邊框表格：.table-bordered鼠標(biāo)懸停效果:.table-hover表格的顏色：active、success、warning、danger、infoBootstrap—列表效果演示列表徽章:列表顏色：list-group-item-successBootstrap—表單垂直表單水平表單校驗(yàn)狀態(tài)

has-success添加額外圖標(biāo)：form-group

has-feedback支持的控件案例Bootstrap—圖片響應(yīng)式圖片形狀縮略圖Bootstrap—按鈕基本實(shí)例a、button、input轉(zhuǎn)換成按鈕btn-block按鈕尺寸：btn-lg

btn-sm

btn-xs禁用狀態(tài)：disabled

、active按鈕組：btn-group

groupBootstrap—css組件字體圖標(biāo)下拉菜單輸入框組導(dǎo)航分頁(yè)縮略圖警告框面板Bootstrap—字體圖標(biāo)容使用系統(tǒng)的字體圖標(biāo)自定義系統(tǒng)圖標(biāo)Bootstrap—下拉菜單實(shí)例標(biāo)題：dropdown-header分割線：divider

separator按鈕式下拉菜單Bootstrap—輸入框組實(shí)例演示給輸入框的一側(cè)添加元素給輸入框的一側(cè)添加按鈕Bootstrap—導(dǎo)航導(dǎo)航條膠囊式導(dǎo)航條兩端對(duì)齊的導(dǎo)航條nav-justified固定在頂部的導(dǎo)航條面包屑導(dǎo)航:breadcrumbBootstrap—警告框?qū)嵗申P(guān)閉警告框Bootstrap—面板實(shí)例演示面板顏色帶列表的面板Bootstrap—JavaScript插件模態(tài)框下拉菜單滾動(dòng)監(jiān)聽(tīng)手風(fēng)琴輪播圖Bootstrap—模態(tài)框通過(guò)data屬性調(diào)用通過(guò)JavaScript調(diào)用Bootstrap—模態(tài)框通過(guò)data屬性調(diào)用通過(guò)JavaScript調(diào)用Bootstrap—模態(tài)框方法$('#myModal').modal('show');$('#myModal').modal('hide');Bootstrap—模態(tài)框事件Bootstrap—下拉菜單Bootstrap—下拉菜單事件Bootstrap—滾動(dòng)監(jiān)聽(tīng)通過(guò)JavaScript調(diào)用滾動(dòng)監(jiān)聽(tīng)事件Bootstrap—標(biāo)簽頁(yè)通過(guò)JavaScript調(diào)用事件Boots