筆記壓縮力學(xué)day

1、復(fù)習(xí)：Bootstrap 是一個(gè)HTML/CSS/JS 框架，適用于移動(dòng)設(shè)備優(yōu)先的響應(yīng)式網(wǎng)頁開發(fā)。主要涉及：(1)HTML：為 H5 已有的擴(kuò)展了自定義屬性data-*(2)CSS： CSS Reset + 幾千個(gè)class (3)JS：基于 jQuery 提供了十幾個(gè)插件函數(shù) oggle=dropdownoggle=tabda da分為五部分：(1)起步：模板 Bootl示例 禁用、文本、排版、表格、柵格系統(tǒng)、表單(2)全局CSS 樣式：按鈕、(3)組件：圖標(biāo)字體、下拉菜單、按鈕組、導(dǎo)航、面包屑、分頁、徽章、水井、巨幕、頁頭、導(dǎo)航條jQuery 插件定制1.復(fù)習(xí)：組件響應(yīng)式導(dǎo)航條2.插件概述

2、Bootstrap 基于jQuery 提供了十幾個(gè)插件函數(shù)（類似于 jQueryUI 插件庫），每個(gè)插件對應(yīng)一個(gè).js 文件，可以單獨(dú)，也可以整體(bootstrap.js)。調(diào)用上述十幾個(gè)插件可以用兩種格式：(1)傳統(tǒng)的 JS 方式調(diào)用： $(.).dropdown();$().tab(.);(2)使用data-*擴(kuò)展屬性方式調(diào)用： 3.插件下拉菜單 (1)$().dropdown( );(2)4.插件 (1) $().tab();(2) 行業(yè)小知識(shí)：盲人、智力低下、行動(dòng).H5中有兩類屬性與“無閱讀”相關(guān)：(1)VDA (2)5.插件Bootstrap 提供的彈出框(1)工具提示框(tool

3、tip) (2)彈出框(popover) (3)警告框(alert) x(4)模態(tài)框(modal) 小重點(diǎn)出一個(gè)子窗體，子窗體若不關(guān)閉，父窗體就無法獲得焦點(diǎn)，同時(shí)父子窗體模態(tài)框定義：在父窗體間還可以傳遞數(shù)據(jù)。window.alert()/confirm()/prompt()就是典型例子。模態(tài)框必需的結(jié)構(gòu)：頭部主體尾部顯示一個(gè)模態(tài)框：1) 2) 插件折疊效果(collapse)觸發(fā)一個(gè)折疊效果：2) 折疊組件的兩個(gè)擴(kuò)展用途：(1)Accordion（手風(fēng)琴）(2)響應(yīng)式導(dǎo)航條在屏幕中的效果7.插件輪播(carousel)小重點(diǎn)本身結(jié)構(gòu)較復(fù)雜，編寫時(shí)只需要記住根 class: .carousel8.插件附加導(dǎo)航（Affix）9.插件滾動(dòng)（scrollspy）了解隨著頁面內(nèi)容的滾動(dòng)，某個(gè)導(dǎo)航中的項(xiàng)目，會(huì)自動(dòng)的更改.active 位置。實(shí)現(xiàn)思路：(1)頁面中必須首先有一個(gè)導(dǎo)航菜單(.nav)其中可以定義一個(gè)菜單項(xiàng)為.active(2)導(dǎo)航菜單中的超的href 屬性值必須和頁面中的某個(gè)名一樣(3)為頁面添加滾動(dòng)事件的函數(shù)body.onscroll= function()if(body 滾動(dòng)的距離 = 某個(gè)距離頂端的距離)此對應(yīng)的超的父元素 li 添加.active；作業(yè)：(1)復(fù)習(xí)Bootstrap 提