文稿說明成果day

1、復(fù)習(xí)：響應(yīng)式頁面：(1)viewport 元(2)容器盡量使用相對尺寸 (3)文字盡量使用相對大小(4)盡量使用相對尺寸布局使用流式布局使用CSS3 Media QueryBootstrap 是一個(gè)HTML/CSS/JS 框架，適用于響應(yīng)式 Web 頁面開發(fā)。內(nèi)容分為五部分：起步、基本模板、實(shí)例、Bootl、兼容性全局 CSS 樣式組件 (4)JS 插件(5)定制全局CSS 樣式：按鈕：.btn .btn-default.btn-danger/warning/suc.btn-lg/默認(rèn)/sm/xs.btn-block：.img-rounded.img-circle.img-thumbnail.

2、img-responsive列表：.list-unstyled.list-inline文本：.text-五種顏色.bg-五種顏色.text-left/right/center/justifys/info/primary.text-uppercase/lowercase/capitalize今日目標(biāo)：全局 CSS 樣式表格、柵格布局、表單組件簡單的組件1.Boostrap 第二部分：全局CSS 樣式輔助類.pull-left.pull-right.caret.close.center-block2.Boostrap 第二部分：全局CSS 樣式排版&代碼3.Boostrap 第二部分：全局CSS

3、樣式表格.table.tabordered帶邊框的表格 隔行變色的表格鼠標(biāo)懸停變色的表格響應(yīng)式表格，用于TABEL 父元素DIV.table-striped.table-hover.table-responsive練習(xí)：如何為 tr 和 td 修改背景顏色 自己查看手冊Boostrap 第二部分：全局CSS 樣式柵格布局系統(tǒng)重點(diǎn)頁面內(nèi)容布局的三種方式：TABLE 布局好處：簡單容易控制問題：語義錯(cuò)誤，渲染效率低DIV+CSS 布局好處：語義正確，渲染效率高問題：不容易控制Bootstrap 柵格布局系統(tǒng)好處：語義正確，渲染效率高，簡單容易控制，實(shí)現(xiàn)了響應(yīng)式：沒有！柵格布局系統(tǒng)的使用方法：(1)

4、柵格系統(tǒng)的父元素必須是：div.container - 定寬容器LG:1170px MD:970px SM: 750px XS:100%div.container-fluid - 變寬容器width:100%(2)在容器中“行”div.container div.row(3)在“行”中“列”div.container div.row div.col-*-*列根據(jù)不同的屏幕尺寸分為四組：.col-lg-*.col-md-*.col-sm-*.col-xs-*一行均分為 12 等份，每個(gè)列必須指定自己的占比：Bootl：提供的一個(gè)用于檢查 HTML/CSS 使用方面錯(cuò)誤的工具。.col-lg-1.

5、col-lg-2.col-lg-3.col-lg-.col-lg-12(6)列可以向后“偏移”指定的寬度.col-lg-offset-1.col-lg-offset-2.col-lg-offset-.col-lg-offset-12(7)不同屏幕寬度下的列寬度占比適用于指定屏幕以及更大屏幕.col-xs-*.col-sm-*.col-md-*.col-lg-*適用于xs/sm/md/lg 屏幕適用于sm/md/lg 屏幕適用于md/lg 屏幕適用于 lg 屏幕一個(gè)列可以指定不同屏幕下的不同寬度占比可以指定列在特定的屏幕下實(shí)現(xiàn)隱藏.hidden-lg.hidden-md.hidden-sm.hi

6、dden-xs.hidden注意：隱藏只對指定屏幕有效！柵格系統(tǒng)可以嵌套使用(11)列的排序問題待續(xù)午間練習(xí)：使用柵格系統(tǒng)實(shí)現(xiàn)如下頁面布局：重點(diǎn)練習(xí)：響應(yīng)式網(wǎng)頁示例： (UUYZXGV 第二部分：全局 )99 樣式表單難點(diǎn)難點(diǎn)： 相關(guān) IRGYY 較多:32 結(jié)構(gòu)復(fù)雜.:32 規(guī)范(UUZYZXGV 提供了三種形式的表單： 默認(rèn)表單LUXS$JO IRGYY# LUXS MXUV $RGHKR IRGYY# IUTZXUR RGHKR $ RGHKR$ OTVZ IRGYY# LUXS IUTZXUR $YVGT IRGYY# NKRV HRUIQ $ YVGT$ JO$ LUXS$ 行內(nèi)表單

7、LUXS IRGYY# LUXS OTROTK $ JO IRGYY# LUXS MXUV $RGHKR IRGYY# YX UTR_ $ RGHKR$ OTVZ IRGYY# LUXS IUTZXUR $ JO$(3)水平表單提示：水平表單指在一行中放置label、input、span，需要整合柵格布局系統(tǒng)(變種) 和 表單相關(guān)內(nèi)容。inplass=form-control練習(xí)：如何在輸入框中放置一個(gè)對勾、叉號、放大鏡？8.Bootstrap 第三部分：組件 下拉菜單下拉菜單必需的三級結(jié)構(gòu)：觸發(fā)元素ul class=dropdown-隱藏的菜單提示：后面必需引入 bootstrap.js，其中會查找da數(shù)。oggle=dropdown元素，為其綁定事件函9. Bootstrap 第三部分：組件 警告框任意文本內(nèi)容標(biāo)準(zhǔn)柵格系統(tǒng)水平表單中柵格外層容器div.container 或div.container-fluidform.form-horizon