HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件:使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件:使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件:使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件:使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件:使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁_第5頁
已閱讀5頁,還剩80頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁本項(xiàng)目通過使用Bootstrap開源框架完成D清單網(wǎng)頁的宣傳單頁的制作來學(xué)習(xí)Bootstrap前端開源框架。Bootstrap一種可以高效完成頁面制作的前端開源工具,雖然它會(huì)在一定程度上限制網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn),但其移動(dòng)優(yōu)先的響應(yīng)式設(shè)計(jì)框架可以大幅提高制作效率,為設(shè)計(jì)者節(jié)省大量的時(shí)間。項(xiàng)目目標(biāo)項(xiàng)目情境與項(xiàng)目1一致,唯一的區(qū)別是要求你在當(dāng)天就要完成并上線。由于時(shí)間緊迫,公司明確可以使用Bootstrap等免費(fèi)的前端開源框架輔助開發(fā)。D清單頁面效果圖可查看項(xiàng)目1的項(xiàng)目情境。項(xiàng)目情境網(wǎng)頁制作的一般流程如下:項(xiàng)目開發(fā)的基本流程都是一致的。在本次項(xiàng)目中,你唯一不同的是使用了Bootstrap框架作為網(wǎng)頁開發(fā)的技術(shù),以達(dá)到快速開發(fā)的目的。與前面的開發(fā)不一樣的是,HTML標(biāo)簽(網(wǎng)頁內(nèi)容)和CSS樣式設(shè)置是同步進(jìn)行的。其實(shí)在實(shí)際的開發(fā)中,兩種開發(fā)流程互有優(yōu)劣,你可以選擇你需要的方式進(jìn)行。為避免知識(shí)的重復(fù)講解,分析需求和選用并配置開發(fā)環(huán)境在本項(xiàng)目中默認(rèn)你已經(jīng)完成了。我們將直接從學(xué)習(xí)并使用Bootstrap開始,逐步完成D清單網(wǎng)頁的制作!項(xiàng)目分析項(xiàng)目發(fā)布需求分析規(guī)劃設(shè)計(jì)實(shí)施測試交付根據(jù)“移動(dòng)優(yōu)先”原則,我們需要制定項(xiàng)目完成的計(jì)劃:項(xiàng)目分析時(shí)間段1時(shí)間段2時(shí)間段3時(shí)間段4時(shí)間段5分析規(guī)劃實(shí)施階段1移動(dòng)端內(nèi)容制作階段2移動(dòng)端格式制作階段3響應(yīng)式制作測試與交付D清單前端開發(fā)甘特圖時(shí)間進(jìn)度任務(wù)能夠在學(xué)習(xí)Bootstrap幫助文檔的基礎(chǔ)上,下載Bootstrap文件并配置Bootstrap開發(fā)環(huán)境能夠編寫基本的Bootstrap模板頁面,為D清單頁面后續(xù)開發(fā)做準(zhǔn)備。任務(wù)目標(biāo)任務(wù)1配置Bootstrap開發(fā)環(huán)境本次任務(wù)要求通過學(xué)習(xí)Bootstrap的文檔和模板知識(shí),下載并配置用于生產(chǎn)環(huán)境的Bootstrap,并編寫B(tài)ootstrap模板,為后續(xù)的開發(fā)做準(zhǔn)備。任務(wù)描述圖2-1Bootstrap開發(fā)環(huán)境配置后的模板代碼和測試頁面任務(wù)1配置Bootstrap開發(fā)環(huán)境任務(wù)要求下載并配置好用于生產(chǎn)環(huán)境的Bootstrap文件,編寫B(tài)ootstrap模板并進(jìn)行測試,需要:學(xué)習(xí)Bootstrap的由來和作用;學(xué)習(xí)Bootstrap的文檔結(jié)構(gòu)和模板知識(shí);下載Bootstrap文檔;編寫模板頁面,同時(shí)使用該頁面測試配置效果。任務(wù)分析任務(wù)1配置Bootstrap開發(fā)環(huán)境知識(shí)與技能準(zhǔn)備Bootstrap是由Twitter工程師推出的前端開發(fā)框架,是一款強(qiáng)大的開源前端開發(fā)工具包,具有強(qiáng)大的自定義功能,Bootstrap一經(jīng)推出大受歡迎,國內(nèi)也有不少網(wǎng)站開始使用Bootstrap開發(fā)。Bootstrap全部托管于Github(一個(gè)代碼托管平臺(tái)和開發(fā)者社區(qū),開發(fā)者可以在Github上創(chuàng)建自己的開源項(xiàng)目并與其他開發(fā)者協(xié)作編碼。創(chuàng)業(yè)公司可以用它來托管軟件項(xiàng)目。開源項(xiàng)目可以免費(fèi)托管,私有項(xiàng)目需付費(fèi)),用戶可以直接訪問Github項(xiàng)目。Bootstrap在Github托管地地址:

。知識(shí)與技能準(zhǔn)備1、認(rèn)識(shí)BootstrapBootstrap是為所有開發(fā)者、所有應(yīng)用場景而設(shè)計(jì)的。Bootstrap讓前端開發(fā)更快速、簡單。所有開發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。Bootstrap包括如下特點(diǎn):1.1預(yù)處理腳本雖然可以直接使用Bootstrap提供的CSS樣式表,但是Bootstrap的源碼是基于最流行的CSS預(yù)處理腳本Less(Less是一門預(yù)處理語言,支持變量、mixin、函數(shù)等額外功能,本書不涉及此知識(shí))和Sass開發(fā)的。你可以采用預(yù)編譯的CSS文件快速開發(fā),也可以從源碼定制自己需要的樣式。1.2一個(gè)框架、多種設(shè)備通過Bootstrap已經(jīng)寫好的CSS媒體查詢(MediaQuery)樣式,所有的網(wǎng)站和應(yīng)用都能在Bootstrap的幫助下通過同一份代碼快速、有效適配手機(jī)、平板、PC設(shè)備。1.3特性齊全Bootstrap提供了全面、美觀的文檔。你能找到關(guān)于HTML元素、HTML和CSS組件、jQuery插件方面的所有詳細(xì)英文文檔(網(wǎng)址

)。由于語言的關(guān)系,可以查閱Bootstrap中文網(wǎng)(非官網(wǎng))的V3版本幫助文檔(

)來詳細(xì)了解,我們?cè)诤罄^的學(xué)習(xí)中會(huì)基于這個(gè)版本來開展。知識(shí)與技能準(zhǔn)備2、Bootstrap文件Bootstrap提供以下幾種方式幫助我們快速上手,每一種方式針對(duì)具有不同技能等級(jí)的開發(fā)者和不同的使用場景。2.1用于生產(chǎn)環(huán)境的Bootstrap用于生產(chǎn)環(huán)境的Bootstrap是編譯好并壓縮后的CSS、JavaScript和字體文件,不包含文檔和源碼文件。下載Bootstrap文件壓縮包之后,將其解壓縮后查看bootstrap文件夾,即可看到以下目錄結(jié)構(gòu)如右圖所示:知識(shí)與技能準(zhǔn)備2、Bootstrap文件上面展示的就是Bootstrap用于生產(chǎn)環(huán)境的基本文件結(jié)構(gòu),預(yù)編譯文件可以直接使用到任何web項(xiàng)目中。生產(chǎn)環(huán)境的Bootstrap提供了:編譯好的CSS和JS(bootstrap.*)文件;經(jīng)過壓縮的CSS和JS(bootstrap.min.*)文件;CSS源碼映射表(bootstrap.*.map),可以在某些瀏覽器的開發(fā)工具中使用;含了來自Glyphicons的圖標(biāo)字體。2.2Bootstrap源碼和Sass項(xiàng)目Bootstrap源碼包括Less、JavaScript和字體文件的源碼,并且?guī)в形臋n。使用時(shí)需要Less編譯器和并做一些設(shè)置工作。Sass項(xiàng)目是Bootstrap從Less到Sass的源碼移植項(xiàng)目,用于快速地在Rails、Compass或只針對(duì)Sass的項(xiàng)目中引入。上述內(nèi)容超出了本項(xiàng)目的內(nèi)容范圍,故在此不做詳細(xì)敘述。(1)分析要下載Bootstrap文檔,最可靠的莫過于在GitHub上下載??梢栽?/p>

(可下載任意版本)或者

(提供了直觀的web文檔)??紤]到語言的關(guān)系,也可以在非官方授權(quán)的Bootstrap中文網(wǎng)(

)下載。(2)參考步驟如下:打開Bootstrap中文網(wǎng)(網(wǎng)址

,也可直接進(jìn)入Bootstrap3中文文檔(v3),網(wǎng)址

),單擊“Bootstrap3中文文檔(v3.3.7)”(注:版本會(huì)持續(xù)更新)按鈕,進(jìn)入Bootstrap3中文文檔(v3.3.7)頁面,單擊“下載Bootstrap”按鈕,跳轉(zhuǎn)到下載頁面(如圖2-1-1)。課堂練習(xí)2-1-1下載用于生產(chǎn)環(huán)境的Bootstrap單擊“用于生產(chǎn)環(huán)境的Bootstrap”下方的“下載Bootstrap”按鈕,在彈出的打開對(duì)話框中(如圖2-1-2),選擇“保存文件”,并通過“瀏覽”按鈕選擇保存路徑,單擊“確定”按鈕,完成Bootstrap文件的下載。將下載的“bootstrap-3.3.7-dist.zip”文件解壓,在解壓的“dist”文件夾下有css、js、fonts文件夾,在文件夾中即可看到上文提到的目錄結(jié)構(gòu)中的文件。課堂練習(xí)2-1-1下載用于生產(chǎn)環(huán)境的Bootstrap圖2-1-1Bootstrap下載頁面圖2-1-2打開文件對(duì)話框知識(shí)與技能準(zhǔn)備3、Bootstrap模板Bootstrap模板是指使用Bootstrap框架的通用頁面,其有基礎(chǔ)的html代碼,并在此基礎(chǔ)上關(guān)聯(lián)好了Bootstrap的CSS、JavaScript文件。任務(wù)實(shí)施本次的任務(wù)主要是完成開發(fā)工作環(huán)境的部署,由于項(xiàng)目1中已經(jīng)學(xué)習(xí)了開發(fā)環(huán)境的開發(fā)工具部署,所以這里就只考慮怎樣部署B(yǎng)ootstrap了。1、下載Bootstrap文件在課堂練習(xí)2-1-1中你已經(jīng)下載好了,這里就不在敘述。2、創(chuàng)建首頁,并引用Bootstrap文件(1)在你的盤符(如D盤)新建文件夾,命名為“web_bootstrap”,將下載并解壓好的“dist”文件夾下的3個(gè)文件夾(包括css、fonts、js中的所有文件)復(fù)制到此。(2)用VisualStudioCode軟件打開上面創(chuàng)建的文件夾,并在文件夾根目錄新建一個(gè)網(wǎng)頁,命名為“index.html”。(3)在頁面中輸入如下代碼,完成一個(gè)基本的HTML5頁的編寫。(4)在頁面中添加IE兼容性設(shè)置(5)在頁面中引入Bootstrap的CSS文件和JS文件(6)至此,Bootstrap的首頁創(chuàng)建完成。前面我們介紹了怎么下載和使用用于生產(chǎn)環(huán)境的Bootsrap,也提到了Bootstrap源碼和Sass項(xiàng)目。請(qǐng)網(wǎng)上了解Bootstrap、Less和Sass的補(bǔ)充知識(shí)。任務(wù)拓展任務(wù)1配置Bootstrap開發(fā)環(huán)境HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠使用Bootstrap的刪格系統(tǒng)完成頁面的流式布局;能夠根據(jù)網(wǎng)頁元素選擇合適的刪格系統(tǒng)樣式以響應(yīng)不同視口;能夠使用Bootstrap對(duì)D清單頁面進(jìn)行響應(yīng)式頁面布局。任務(wù)目標(biāo)任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局D清單頁面本次任務(wù)要求通過學(xué)習(xí)Bootstrap的刪格系統(tǒng)知識(shí)和流式布局知識(shí),完成D清單頁面的整體布局。完成后的頁面測試效果圖如2-2所示。任務(wù)描述任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局頁面圖2-2移動(dòng)端和電腦端布局測試頁面截圖在學(xué)習(xí)以下知識(shí)技能的基礎(chǔ)上,完成頁面布局框架代碼的編寫,并對(duì)布局結(jié)果進(jìn)行測試。需要:Bootstrap的刪格系統(tǒng)知識(shí);Bootstrap的布局容器、行和列等相關(guān)知識(shí)。根據(jù)D清單頁面效果圖使用Bootstrap完成頁面布局,并測試移動(dòng)端和電腦端的布局效果。任務(wù)分析任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局頁面知識(shí)與技能準(zhǔn)備Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列,即Bootstrap將頁面的每一行劃分為12列的方式進(jìn)行頁面布局。知識(shí)與技能準(zhǔn)備1、刪格系統(tǒng)Bootstrap的刪格參數(shù)如下表:表2-2-1Bootstrap刪格參數(shù)表知識(shí)與技能準(zhǔn)備2、布局容器Bootstrap為了保證刪格布局的正常應(yīng)用,需要使用布局容器(添加.container或.container-fluid類的標(biāo)簽)來完成頁面布局。其中.container類是用于固定寬度(各視口最大寬度可參考表2-2-1)并支持響應(yīng)式布局的容器。.container-fluid類是用于100%的寬度,可占據(jù)全部視口的容器。由于padding等css屬性的原因,.container和.container-fluid類的標(biāo)簽不能互相嵌套。知識(shí)與技能準(zhǔn)備3、rowBootstrap為刪格添加了一個(gè)獨(dú)立的類.row,以適用我們的先創(chuàng)建行(row),然后在行中創(chuàng)建列(.col-xs-*等Bootstrap刪格類預(yù)定的列)的布局,同時(shí)通過為.row元素設(shè)置負(fù)值margin從而抵消了布局容器(.container-fluid和.container類)設(shè)置的左右兩邊padding,也就間接保留了“行(row)”所包含的“列(column)”(刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*)設(shè)置的padding值(左右各15px),.row類在Bootstrap的定義如下:“行(row)”必須包含在.container(固定寬度)或.container-fluid(100%寬度)中,以便為其賦予合適的排列(aligment)和內(nèi)補(bǔ)(padding),通常我們會(huì)通過“行(row)”在水平方向創(chuàng)建一組“列(column)”,然后將內(nèi)容放置于“列(column,刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*)”內(nèi),并且,只有“列(column)”可以作為行(row)”的直接子元素。1234.row{margin-right:-15px;margin-left:-15px;}打開2.2-1素材文件夾中的web_bootstrap文件夾,在已經(jīng)配置好Bootstrap的index.html頁面編寫一個(gè)布局框架頁面,要求如下:(1)采用100%寬度的容器(2)在行(row)中創(chuàng)建一個(gè)大桌面視口下是4列、桌面視口下是2列、平板是2列、手機(jī)是1列的布局框架。課堂練習(xí)的部分代碼可參考如下示例:課堂練習(xí)2-2-1創(chuàng)建一個(gè)響應(yīng)式的刪格頁面12345678<divclass="container-fluid"><divclass="row"><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>知識(shí)與技能準(zhǔn)備4、列偏移Bootstrap處理定義了刪格,還為刪格的左留白定義了一套“留白刪格”,我們把它叫做列偏移樣式。如使用.col-md-offset-*類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用*選擇器為當(dāng)前元素增加了左側(cè)的邊距(margin)。打開2.2-1完成的文件,在練習(xí)2.2-1的基礎(chǔ)上,在row內(nèi)的布局框架元素上方增加標(biāo)題和說明文字,要求如下:(1)標(biāo)題在任何顯示視口都是獨(dú)立的一行顯示(2)說明文字在大桌面視口、桌面視口占頁面的8等分,并居中對(duì)齊。課堂練習(xí)的部分代碼可參考如下示例:課堂練習(xí)2-2-2創(chuàng)建一個(gè)“居中”的刪格列12345678910<divclass="container-fluid"><divclass="row"><h2>標(biāo)題</h2><divclass="col-lg-8col-lg-offset-2col-md-8col-md-offset-2>說明文字</div><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>任務(wù)實(shí)施在任務(wù)1的基礎(chǔ)上,我們需要完成頁面的基本布局框架,以便在任務(wù)三中加入對(duì)應(yīng)內(nèi)容。通過分析效果圖片,我們不難發(fā)現(xiàn),除了移動(dòng)視口,其它視口下左右兩邊的內(nèi)容與瀏覽器都保持著一定的邊界(padding),所以我們可以判斷頁面布局時(shí)應(yīng)該選用固定寬度容器.container。由于container是有左右留白的,針對(duì)非白色背景,為了保證有色背景是通欄,需要在其外圍添加一個(gè)標(biāo)簽來包含它,如功能介紹、下載應(yīng)用、高級(jí)會(huì)員、聯(lián)系我們,這幾個(gè)模塊都需要在container的外圍添加一個(gè)標(biāo)簽。由于本任務(wù)主要考慮布局,所以以下各步驟的參考代碼并沒有完全包含頁面的所有內(nèi)容,我們會(huì)在后續(xù)任務(wù)中再進(jìn)行完善。1、菜單欄因?yàn)椴藛螜诓糠质亲笥医Y(jié)構(gòu),使用可以在<body>標(biāo)簽中編寫左右布局代碼。2、關(guān)于關(guān)于區(qū)域?yàn)橥冢]有分列),故只需要單獨(dú)創(chuàng)建一行就可以了。3、應(yīng)用特征此欄為“品”字形,標(biāo)題獨(dú)立一行,下方為左右結(jié)構(gòu)。在大桌面視口和桌面視口端采用左右5:7的結(jié)構(gòu),平板和手機(jī)端為上下結(jié)構(gòu)(占12列),默認(rèn)即占12列,故不用編寫,只需要編寫大桌面視口和桌面視口端兩個(gè)端口的。任務(wù)實(shí)施4、下載此欄內(nèi)容在在大桌面視口和桌面視口端為也是“品”字結(jié)構(gòu),上面為標(biāo)題+段落,下面是左中右結(jié)構(gòu)的布局,在平板和手機(jī)端不存在左右結(jié)構(gòu),是垂直排列的標(biāo)題+段落+垂直的軟件特征介紹。5、會(huì)員功能該欄目標(biāo)題部分與上一欄目類似,下方是表格。6、幫助中心該欄目內(nèi)容為通欄標(biāo)題-三列內(nèi)容-通欄視頻的結(jié)構(gòu)。7、聯(lián)系我們欄目內(nèi)容為左右結(jié)構(gòu),為了讓右邊的表單靠右,我們對(duì)其左右結(jié)構(gòu)的比例做了調(diào)整。8、版權(quán)欄目內(nèi)容為簡單的通欄結(jié)構(gòu)。9、測試在完成上述內(nèi)容后,我們需要對(duì)完成的結(jié)果進(jìn)行測試,重點(diǎn)測試在臨界值區(qū)域各刪格系統(tǒng)的變化。在網(wǎng)頁制作過程中,會(huì)出現(xiàn)同行相似元素不等高的現(xiàn)象,為此,Bootstrap提供了專門的換行解決方案來解決這一問題。Bootstrap還為列提供了排序樣式。任務(wù)拓展任務(wù)2使用Bootstrap柵格系統(tǒng)快速布局頁面HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠?qū)W習(xí)Bootstrap的導(dǎo)航條組件,利用Bootstrap導(dǎo)航條組件相關(guān)內(nèi)容,完成不同樣式導(dǎo)航條的制作;能夠利用Bootstrap的JavaScript插件,對(duì)導(dǎo)航條進(jìn)行移動(dòng)化(響應(yīng)式)改造。任務(wù)目標(biāo)任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條本次任務(wù)要求通過學(xué)習(xí)Bootstrap的導(dǎo)航條及相關(guān)組件,完成項(xiàng)目網(wǎng)頁的導(dǎo)航條制作。完成后的導(dǎo)航條如圖2-3所示。任務(wù)描述圖2-3移動(dòng)端和電腦端導(dǎo)航條測試效果圖任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條在上一任務(wù)的基礎(chǔ)上,完成D清單頁面導(dǎo)航條制作。需要:學(xué)習(xí)Bootstrap的菜單框架、菜單樣式、字體圖標(biāo)等知識(shí);學(xué)習(xí)Bootstrap的響應(yīng)式菜單、下拉菜單等JavaScript插件知識(shí);綜合運(yùn)用Bootstrap相關(guān)知識(shí),完成D清單頁面響應(yīng)式導(dǎo)航條制作。任務(wù)分析任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條知識(shí)與技能準(zhǔn)備網(wǎng)頁的組件,是指包括下拉菜單、導(dǎo)航、警告框、彈出框等可以在各個(gè)網(wǎng)頁上常見的一般可以復(fù)用的頁面元素。為了完成頁面導(dǎo)航條的制作,需要學(xué)習(xí)Bootstrap組件部分的相關(guān)知識(shí),可以查閱Bootstrap框架中文網(wǎng)址

的“組件”

來學(xué)習(xí)Bootstrap的組件。根據(jù)本次任務(wù)的要求,為了能夠順利應(yīng)用Bootstrap組件來制作招生頁面的導(dǎo)航條,我們需要先學(xué)習(xí)Bootstrap的導(dǎo)航條組件和字體圖標(biāo)等相關(guān)知識(shí)。Bootstrap中的導(dǎo)航組件都共同使用一個(gè)已經(jīng)寫好了的nav類,狀態(tài)類也是共用的。通過修改nav類的樣式我們就可以得到我們想要的樣式。知識(shí)與技能準(zhǔn)備1、導(dǎo)航條的框架樣式導(dǎo)航條框架包括創(chuàng)建一個(gè)導(dǎo)航條欄底色和布局容器,Bootstrap為導(dǎo)航條設(shè)置了.navbar和.navbar-default類預(yù)定義樣式來設(shè)置導(dǎo)航條的高寬、邊框、邊距和導(dǎo)航項(xiàng)背景色等格式,.container布局容器則已經(jīng)在任務(wù)2中學(xué)習(xí)了。1234567891011121314.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1pxsolidtransparent;}/*在平板以上設(shè)備增加了border-radius:4px;*/.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7;}/*設(shè)置導(dǎo)航條底色,反色樣式為.navbar-inverse,你也可以自己設(shè)置*/.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px;}/*用于抵消.container和.container-fluid布局容器設(shè)置的兩個(gè)邊距,一般用于導(dǎo)航條的左右兩端*/知識(shí)與技能準(zhǔn)備1、導(dǎo)航條的框架樣式應(yīng)用時(shí)可以參考如下代碼:完成后的效果圖如下:12345<navclass="navbarnavbar-default"> <divclass="container"> <divclass="navbar-header">頭部</div> </div></nav>圖2-3-1導(dǎo)航條框架效果圖知識(shí)與技能準(zhǔn)備2、導(dǎo)航條內(nèi)容優(yōu)化樣式在搭建好框架后,我們需要在導(dǎo)航條中創(chuàng)建各種內(nèi)容。2.1列表導(dǎo)航使用<ul>列表來創(chuàng)建導(dǎo)航是行業(yè)的習(xí)慣,為此,Bootstrap也為使用<ul>創(chuàng)建導(dǎo)航條創(chuàng)建了各種樣式,主要以.nav和.navbar-bar類為主,且一般會(huì)同時(shí)使用。2.2常用格式優(yōu)化為了保證導(dǎo)航容器內(nèi)的相關(guān)內(nèi)容有正確的行距和顏色等格式,Bootstrap預(yù)設(shè)了一些常用的樣式格式。某網(wǎng)站導(dǎo)航條效果圖如圖2-3-3所示,請(qǐng)使用Bootstrap導(dǎo)航條組件完成其網(wǎng)頁效果的實(shí)現(xiàn)。可參考如下方式實(shí)現(xiàn):(1)搭建導(dǎo)航框架;(2)創(chuàng)建列表,并輸入相應(yīng)內(nèi)容;(3)利用Bootstrap的導(dǎo)航條格式優(yōu)化樣式來設(shè)置內(nèi)容樣式。課堂練習(xí)2-3-1使用Bootstrap制作如下導(dǎo)航條圖2-3-3課堂練習(xí)2-3-1效果圖知識(shí)與技能準(zhǔn)備3、字體圖標(biāo)或品牌圖片3.1字體圖標(biāo)在配置環(huán)境的時(shí)候,也許你已經(jīng)留意到了Bootstrap存放字體的文件夾,Bootstrap提供了Glyphicons字體圖標(biāo),包括250多個(gè)來自GlyphiconHalflings的字體圖標(biāo)。GlyphiconsHalflings一般是收費(fèi)的,但是他們的作者允許Bootstrap免費(fèi)使用。部分圖標(biāo)樣式可以看下圖,你也可以在

查看所有的圖標(biāo)樣式。圖2-3-4Bootstrap提供的字體圖標(biāo)知識(shí)與技能準(zhǔn)備3、字體圖標(biāo)或品牌圖片每一個(gè)圖標(biāo)都有一個(gè)獨(dú)立的類,圖標(biāo)類不能和其它組件直接聯(lián)合使用,它們不能在同一個(gè)元素上與其他類共同存在。所以,要使用圖標(biāo)必須創(chuàng)建一個(gè)嵌套的<span>標(biāo)簽,并將圖標(biāo)類應(yīng)用到這個(gè)<span>標(biāo)簽上。為了有正確的padding值,務(wù)必在圖標(biāo)和文本之間添加一個(gè)空格??蓞⒖既缦麓a:aria-hidden=“true”為無障礙屬性,在項(xiàng)目5中會(huì)介紹。3.2品牌圖片將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方(頭部)替換為<img>元素即可展示自己的品牌圖標(biāo)。由于.navbar-brand已經(jīng)被設(shè)置了內(nèi)補(bǔ)(padding)和高度(height),所以在使用時(shí)需要設(shè)置自己的CSS代碼來替換默認(rèn)的樣式。可參考如下CSS樣式代碼:1<spanclass="glyphiconglyphicon-search"aria-hidden="true"></span>12.navbar-brand{padding:5px!important;}.navbar-brand>img{height:40px;}在上一個(gè)課堂練習(xí)的基礎(chǔ)上,完成如下效果圖:在Login前面添加字體圖標(biāo),在OlimpiaTrucks前面添加品牌圖片??蓞⒖既缦路绞綄?shí)現(xiàn):(1)添加品牌圖片刪除原有的文字品牌標(biāo)志,添加<img>標(biāo)簽,圖片文件在4.3-2文件夾中;修改<img>的格式,讓其在導(dǎo)航條上有正確的大小和邊距,CSS代碼可參考上面品牌圖片內(nèi)容中涉及的代碼;(2)添加字體圖標(biāo)參考字體圖標(biāo)內(nèi)容中的<span>標(biāo)簽代碼,修改相應(yīng)的樣式即可。課堂練習(xí)2-3-2在導(dǎo)航條添加圖標(biāo)和品牌圖片圖2-3-5帶logo和圖標(biāo)的導(dǎo)航條知識(shí)與技能準(zhǔn)備4、為手機(jī)端創(chuàng)建菜單圖標(biāo)將課堂練習(xí)2-3-2中完成的導(dǎo)航條在手機(jī)端(<768px),我們會(huì)發(fā)現(xiàn)導(dǎo)航條全部垂直排列了,如下圖:很明顯,這個(gè)并不是我們要的效果。Bootstrap已經(jīng)為我們想好了一切,為此,你只需要添加適當(dāng)?shù)腍TML代碼即可得到你要的結(jié)果。圖2-3-6移動(dòng)端導(dǎo)航條初始化效果知識(shí)與技能準(zhǔn)備4、為手機(jī)端創(chuàng)建菜單圖標(biāo)(1)在navbar-header類的<div>標(biāo)簽中添加<button>按鈕,并為其添加navbar-toggle和collapsed類;(2)用<div>將要隱藏的列表包裹,并為其添加collapse和navbar-collapse類;(3)Bootstrap采用的是通過單擊鼠標(biāo)按鈕來顯示和隱藏的下拉菜單,所以其依賴于jquery.js和bootstrap.js文件。為此,我們需要在<button>中添加如下參數(shù):data-toggle="collapse":觸發(fā)事件data-target="#bs-example-navbar-collapse-1":觸發(fā)事件的目標(biāo)aria-expanded="false":用于無障礙設(shè)備檢查切換動(dòng)作的擴(kuò)張屬性data屬性是Bootstrap的API,是我們使用BootstrapJS的首選方式,你可以僅僅通過data屬性API就能使用所有Bootstrap中的插件,而不用寫一行JavaScript代碼,此處應(yīng)用了BootstrapJS的collapse插件。aria-expanded是W3CWAI-ARIA(無障礙)的一個(gè)擴(kuò)展屬性,目前還是草案,可查看W3C文檔

了解詳細(xì),如果你的網(wǎng)頁不針對(duì)網(wǎng)頁無障礙進(jìn)行設(shè)計(jì)的,則可省略此屬性。在navbar-collapse類的<div>標(biāo)簽中添加id屬性,并對(duì)應(yīng)data-target的值:id="bs-example-navbar-collapse-1"當(dāng)然你也可以自己定義屬性值,只需要與data-target的屬性對(duì)應(yīng)即可。將課堂練習(xí)2-3-2的導(dǎo)航條進(jìn)行響應(yīng)式處理,讓其在移動(dòng)端時(shí)按下圖效果顯示,且在單擊圖標(biāo)時(shí)能夠按下拉的方式顯示隱藏的導(dǎo)航條??蓞⒖既缦麓a:課堂練習(xí)2-3-3導(dǎo)航條的移動(dòng)化1234567<!--在navbar-header類的<div>標(biāo)簽中添加--><buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button>1234<!--用此div包裹要隱藏的內(nèi)容--><divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"><!--隱藏的內(nèi)容--></div>圖2-3-7移動(dòng)端導(dǎo)航條知識(shí)與技能準(zhǔn)備5、滾動(dòng)監(jiān)聽滾動(dòng)監(jiān)聽插件是用來根據(jù)滾動(dòng)條所處的位置來自動(dòng)更新導(dǎo)航項(xiàng)的。當(dāng)滾動(dòng)導(dǎo)航條項(xiàng)對(duì)應(yīng)的內(nèi)容區(qū)域時(shí)該導(dǎo)航條項(xiàng)目會(huì)高亮顯示。該插件依賴于Bootstrap的scrollspy.js,該js文件已經(jīng)集成在了bootstrap.js中。在完成ID屬性來實(shí)現(xiàn)頁面內(nèi)鏈接的導(dǎo)航方式后,通過調(diào)用data屬性,即可完成對(duì)<body>內(nèi)相對(duì)定位元素的滾動(dòng)監(jiān)聽。為此,你需要將<body>設(shè)置為相對(duì)定位,同時(shí)為該標(biāo)簽添加data-spy="scroll"和data-target="#navbar-example"兩個(gè)屬性(#navbar-example可以根據(jù)具體情況修改,并與id值對(duì)應(yīng))。(測試內(nèi)容部分可以只寫標(biāo)題,以添加高度的方式來占位)(1)添加樣式,將<body>設(shè)置為相對(duì)定位:(2)為<body>標(biāo)簽添加兩個(gè)data屬性:(3)將data-target="#navbar-example"屬性與滾動(dòng)監(jiān)聽對(duì)象——導(dǎo)航條組件進(jìn)行關(guān)聯(lián),即在<nav>中加入id="navbar-example",并將導(dǎo)航條固定在頂部(添加.navbar-fixed-top,并為body添加“padding-top:70px;”樣式屬性)。(4)為菜單列表添加高亮顯示樣式.nav-tabs,并設(shè)置列表的href屬性。課堂練習(xí)2-3-4在練習(xí)2.3-2的基礎(chǔ)上,為導(dǎo)航條制作滾動(dòng)監(jiān)聽效果1body{position:relative;}123456<ulclass="navnavbar-navnav-tabs"> <liclass="active"><ahref="#start">Start</a></li> <li><ahref="#trucks">OurTrucks</a></li> <li><ahref="#about">Aboutus</a></li> <li><ahref="#impressum">Impressum</a></li></ul>1<bodydata-spy="scroll"data-target="#navbar-example">1<navid="navbar-example"class="navbarnavbar-defaultnavbar-fixed-top">(5)在<nav>標(biāo)簽后添加測試代碼,為了效果明顯,建議為測試代碼添加邊框和高度。HTML測試代碼:為測試代碼添加CSS樣式:至此,滾動(dòng)監(jiān)聽練習(xí)完成。由于導(dǎo)航條固定在頂部的原因,我們會(huì)發(fā)現(xiàn)監(jiān)聽內(nèi)容與導(dǎo)航條項(xiàng)有70px的高度誤差。為解決此誤差,可以將body的“padding-top:70px;”樣式屬性添加到測試代碼各div的css樣式中。課堂練習(xí)2-3-4在練習(xí)2.3-2的基礎(chǔ)上,為導(dǎo)航條制作滾動(dòng)監(jiān)聽效果1234<divid="start">Start</div><divid="trucks">OurTrucks</div><divid="about">Aboutus</div><divid="impressum">Impressum</div>1234#start,#trucks,#about,#impressum{ border:1pxsolid#000; height:500px;}任務(wù)實(shí)施在任務(wù)2中,我們已經(jīng)對(duì)整個(gè)頁面進(jìn)行了布局,其中導(dǎo)航條的代碼如下:很明顯,這是利用Bootstrap的刪格系統(tǒng)進(jìn)行的左右布局,通過前面知識(shí)的學(xué)習(xí),我們知道利用Bootstrap的導(dǎo)航條來完成任務(wù),不需要進(jìn)行左右布局。為了快速完成任務(wù),我們要使用用Bootstrap的導(dǎo)航條來完成本次任務(wù),以提高開發(fā)速度,當(dāng)然代價(jià)是我要犧牲部分的設(shè)計(jì)功能,所以此任務(wù)完成的導(dǎo)航條與項(xiàng)目1完成的會(huì)有些許差別。我們發(fā)現(xiàn),我們要做的導(dǎo)航條比較簡單,并不是Bootstrap提供的參考樣式。12345678<headerclass="header"> <navclass="container"> <divclass="row"> <divclass="col-lg-3col-md-3col-sm-4">logo</div> <divclass="col-lg-9col-md-9col-sm-8">nav</div> </div> </nav></header>任務(wù)實(shí)施1、搭建導(dǎo)航條框架由于任務(wù)中的導(dǎo)航條并沒有圓角邊框,所以要修改navbar-default樣式。另外導(dǎo)航條在1440px狀態(tài)下我們發(fā)現(xiàn)并不是占滿整行的,而是有一個(gè)最大的寬度,據(jù)此可以判斷采用的是container容器而不是container-fluid容器??蓞⒖既缦麓a來搭建導(dǎo)航條框架:2、為導(dǎo)航條添加LOGO在navbar-henader中加入圖片即可。123456<headerclass="headernavbarnavbar-default"> <navclass="container"> <divclass="navbar-header">logo和圖標(biāo)</div> <ulclass="navnavbar-navnavbar-right">li</ul> </nav></header>123<aclass="navbar-brandmylogo"href="#"> <imgalt="D清單"src="img/logo.png"height="45px"></a>任務(wù)實(shí)施3、制作導(dǎo)航條列表列表信息根據(jù)內(nèi)容輸入即可,由于導(dǎo)航條是在右邊的,所以需要加入navbar-right樣式。4、修改樣式(1)我們需要去掉導(dǎo)航條的邊框,所以可以通過修改.navbar-default來實(shí)現(xiàn)。新建一個(gè)css樣式表,取名為mystyle.css,保存到css文件夾,并與index.html頁面建立關(guān)聯(lián),即在該頁面<head>中加入<link>引入樣式文件:123456789<ulclass="navnavbar-navnavbar-right"> <liclass="active"><ahref="">首頁</a></li> <li><ahref="">關(guān)于</a></li> <li><ahref="">應(yīng)用特征</a></li> <li><ahref="">下載</a></li> <li><ahref="">幫助</a></li> <li><ahref="">高級(jí)會(huì)員</a></li> <li><ahref="">聯(lián)系我們</a></li></ul>1<linkhref="css/mystyle.css"rel="stylesheet">任務(wù)實(shí)施并在mystyle.css文件中添加如下樣式:(2)為了讓LOGO圖片與導(dǎo)航條有一定的留白,我們?cè)黾恿艘粋€(gè).mylogo的樣式:(3)增加導(dǎo)航條的留白1.navbar-default{

border:none;}12345678910/*擴(kuò)大導(dǎo)航條的上下留白*//*為了確保導(dǎo)航條在隱藏和顯示時(shí)不會(huì)出現(xiàn)留白錯(cuò)位,此樣式選擇應(yīng)用到導(dǎo)航條左右兩個(gè)容器而不是導(dǎo)航條容器中*/.mynav{ margin:1.25rem0;}.mynav_bottommargin{ margin-bottom:0; font-weight:600; background-color:#FFFFFF; box-shadow:01px2pxrgba(43,48,51,.08);/*導(dǎo)航條底部加陰影*/}123/*如果logo圖片高度超過25px,則需要根據(jù)圖片大小重新設(shè)置.navbar-brand的內(nèi)補(bǔ),超過50px還需要修改圖片高度,避免不能垂直居中對(duì)齊*/.mylogo{ padding:0.625rem20px;}任務(wù)實(shí)施5、為導(dǎo)航條創(chuàng)建響應(yīng)式按鈕以適應(yīng)手機(jī)端參考知識(shí)與技能準(zhǔn)備第4部分的知識(shí)。6、為導(dǎo)航條增加滾動(dòng)監(jiān)聽參考知識(shí)與技能準(zhǔn)備2.3-4。全部導(dǎo)航條完成后,可參考代碼請(qǐng)看書。自此,導(dǎo)航條已經(jīng)完成。了解下拉菜單的制作方法,和將導(dǎo)航條固定在頂部和底部的方法。任務(wù)拓展任務(wù)3使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠使用Bootstrap的縮略圖、巨幕、表單、表格等相關(guān)組件,完成D清單頁面元素的制作;測試D清單頁面響應(yīng)式效果,完善頁面細(xì)節(jié)。任務(wù)目標(biāo)任務(wù)4使用Bootstrap和JS插件組件制作網(wǎng)頁內(nèi)容本次任務(wù)要求在完成導(dǎo)航條制作的基礎(chǔ)上,繼續(xù)完成網(wǎng)頁內(nèi)容的制作。完成后的效果圖如圖2-4所示。任務(wù)描述圖2-4完成后的移動(dòng)端和電腦端頁面測試效果圖任務(wù)4使用Bootstrap和JS插件組件制作網(wǎng)頁內(nèi)容在上一任務(wù)完成效果的基礎(chǔ)上,完成D清單網(wǎng)頁各個(gè)欄目內(nèi)容的制作。需要:學(xué)習(xí)Bootstrap的縮略圖、巨幕、表單、表格等相關(guān)組件;學(xué)習(xí)Bootstrap的輪播和模態(tài)框(彈出框)等相關(guān)JavaScript插件;綜合運(yùn)用Bootstrap相關(guān)組件,完成D清單頁面的制作并測試完成效果。任務(wù)分析任務(wù)4使用Bootstrap和JS插件組件制作網(wǎng)頁內(nèi)容知識(shí)與技能準(zhǔn)備如果你把我們要完成的網(wǎng)頁與Bootstrap的組件效果進(jìn)行對(duì)比,你會(huì)發(fā)現(xiàn),為完成接下來的任務(wù),我們需要學(xué)習(xí)如下Bootstrap知識(shí):知識(shí)與技能準(zhǔn)備1、縮略圖組件Bootstrap的縮略圖是利用Bootstrap的刪格系統(tǒng)的一個(gè)圖片應(yīng)用場景,僅需要最少的標(biāo)簽就能展示帶鏈接的圖片。1.1圖片Bootstrap縮略圖默認(rèn)樣式如下圖:要實(shí)現(xiàn)上圖效果,可以參考代碼如下:圖2-4-1默認(rèn)縮略圖12345678<divclass="row"><divclass="col-xs-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="..."alt="..."></a></div><!--此處重復(fù)4個(gè)col-xs-6col-md-3類的div--></div>知識(shí)與技能準(zhǔn)備1、縮略圖組件通過分析上述代碼,我們知道縮略圖因?yàn)閼?yīng)用了Bootstrap的刪格系統(tǒng),所以是支持響應(yīng)式的,能夠在平板端只顯示2欄圖片,在手機(jī)端顯示1欄圖片,電腦及寬屏端顯示4欄圖片。Bootstrap對(duì)thumbnail類定義了如下樣式:該樣式代碼設(shè)置了圖片的邊框和對(duì)齊方式等格式,并設(shè)置了響應(yīng)式圖片。123456789101112.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1pxsolid#ddd;border-radius:4px;-webkit-transition:border.2sease-in-out;-o-transition:border.2sease-in-out;transition:border.2sease-in-out;}.thumbnail>img,.thumbnaila>img{display:block;max-width:100%;height:auto;margin-right:auto;margin-left:auto;}知識(shí)與技能準(zhǔn)備1、縮略圖組件1.2自定義縮略圖通過組合圖片、標(biāo)題、段落和按鈕,我們就可以實(shí)現(xiàn)比較常見的網(wǎng)頁布局形式了,如下圖:圖2-4-2自定義縮略圖知識(shí)與技能準(zhǔn)備1、縮略圖組件要實(shí)現(xiàn)上圖效果,可以參考代碼如下:圖2-4-2自定義縮略圖12345678910111213141516<divclass="row"><divclass="col-sm-6col-md-4"><divclass="thumbnail"><imgsrc="..."alt="..."><divclass="caption"><h3>Thumbnaillabel</h3><p>...</p><p><ahref="#"class="btnbtn-primary"role="button">Button</a><ahref="#"class="btnbtn-default"role="button">Button</a></p></div></div></div><!--此處重復(fù)2個(gè)col-sm-6col-md-4類的div--></div>效果圖如下:(1)分析:通過效果圖,我們可以做到,可以利用Bootstrap的自定義縮略圖來實(shí)現(xiàn)。在任務(wù)2的學(xué)習(xí)中,我們知道,row類是要與布局容器.container或.container-fluid結(jié)合使用才可以避免不對(duì)稱邊界的產(chǎn)生。另外,為了縮略圖圖片的排版美觀和適應(yīng)響應(yīng)式圖片寬度的變化,圖片應(yīng)該是等高和等寬的。課堂練習(xí)2-4-1使用Bootstrap縮略圖,完成某卡車網(wǎng)站縮略圖的效果圖制作圖2-4-3課堂練習(xí)2-4-1效果圖知識(shí)與技能準(zhǔn)備2、巨幕組件Bootstrap的巨幕是一個(gè)輕量的靈活組件,可以利用這個(gè)組件實(shí)現(xiàn)以布滿整個(gè)瀏覽器橫向視口的方式來展現(xiàn)重要關(guān)鍵內(nèi)容。參考代碼如下:圖2-4-4巨幕效果圖123456<divclass="jumbotron"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"href="#"role="button">Learnmore</a></p></div>知識(shí)與技能準(zhǔn)備2、巨幕組件如果不需要圓角,寬度與瀏覽器寬度一致,則可以把此組件放在所有.container元素(.container類用于固定寬度并支持響應(yīng)式布局的容器,詳見任務(wù)2)的外面,并在組件內(nèi)部添加一個(gè).container元素。12345678<divclass="jumbotron"><divclass="container"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"href="#"role="button">Learnmore</a></p></div></div>使用Bootstrap巨幕組件完成如下效果圖的制作。(1)分析:效果圖與Bootstrap默認(rèn)巨幕組件的區(qū)別在于添加了背景圖片,文本是居中的,文字的顏色也有變化,所以我們只需要使用不需要圓角的巨幕組件,并對(duì)樣式稍作修改即可。課堂練習(xí)2-4-2使用Bootstrap巨幕組件,完成某卡車網(wǎng)站巨幕效果圖的制作圖2-4-5課堂練習(xí)2-4-2巨幕效果圖知識(shí)與技能準(zhǔn)備3、表格Bootstrap的表格內(nèi)容屬于全局CSS樣式,Bootstrap表格基礎(chǔ)式樣只是為表格增加了少量的內(nèi)補(bǔ)(padding)和水平方向的分割線,效果如下圖:要實(shí)現(xiàn)上述效果,是需要在<table>標(biāo)簽中添加.table類:123<tableclass=”table”><!--此處表格代碼省略--><table>圖2-4-6表格效果圖知識(shí)與技能準(zhǔn)備4、表單Bootstrap對(duì)所用的表單控件都編寫了全局樣式。所有設(shè)置了.form-control類的<input>、<textarea>和<select>元素都將被默認(rèn)設(shè)置寬度屬性為width:100%;將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列。效果如下圖:圖2-4-7表單效果圖知識(shí)與技能準(zhǔn)備4、表單Bootstrap還設(shè)置了水平排列的表單,通過為<form>添加.form-horizontal類,并結(jié)合Bootstrap刪格系統(tǒng),就可以實(shí)現(xiàn)label與表單控件水平排列的布局。添加了.form-horizontal后會(huì)對(duì).form-group類進(jìn)行了修改,使其擁有.row類的格式,使用在使用時(shí)就可以實(shí)現(xiàn)獨(dú)立行顯示即.row的效果。效果如下:圖2-4-8水平排列表單

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論