項(xiàng)目10 用Bootstrap重構(gòu)網(wǎng)頁_第1頁
項(xiàng)目10 用Bootstrap重構(gòu)網(wǎng)頁_第2頁
項(xiàng)目10 用Bootstrap重構(gòu)網(wǎng)頁_第3頁
項(xiàng)目10 用Bootstrap重構(gòu)網(wǎng)頁_第4頁
項(xiàng)目10 用Bootstrap重構(gòu)網(wǎng)頁_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1項(xiàng)目10用Bootstrap重構(gòu)網(wǎng)頁《HTML5網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)》『作者』徐琴『時(shí)間』2015.6用Bootstrap重構(gòu)網(wǎng)頁——學(xué)習(xí)情境冰天美帝公司的小黃在網(wǎng)頁學(xué)習(xí)的過程中，了解到目前有很多成熟的前端開發(fā)框架。因?yàn)槔每蚣芗夹g(shù)可以極大地提高開發(fā)效率，所以小黃希望繼續(xù)學(xué)習(xí)前端框架技術(shù)，能夠利用框架快速布局頁面、設(shè)置樣式和添加動(dòng)態(tài)效果。2前端開發(fā)框架隨著Web技術(shù)的不斷發(fā)展，前端開發(fā)框架層出不窮，各有千秋。目前比較流行的框架有Bootstrap、Foundation、jQueryUI、jQueryMobile、SenchaExtJS等。3BootstrapBootstrap是由Twitter推出的Web前端框架。它是目前最受歡迎的HTML、CSS和JS框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB項(xiàng)目。它讓前端開發(fā)更快速、簡(jiǎn)單，利用該框架開發(fā)者能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都能適用。4BootstrapBootstrap源文件下載好后，就可以將Bootstrap提供的編譯好的CSS文件和JS文件（本項(xiàng)目將這些文件存放在css和js文件夾中）引入到<head>中了：<!--新Bootstrap核心CSS文件--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--可選的Bootstrap主題文件（一般不用引入）--><linkrel="stylesheet"href="css/bootstrap-theme.min.css"><!--jQuery文件。務(wù)必在bootstrap.min.js之前引入--><scriptsrc="js/jquery-1.11.2.min.js"></script><!--最新的Bootstrap核心JavaScript文件--><scriptsrc="js/bootstrap.min.js"></script>5柵格系統(tǒng)（GridSystem）Bootstrap為我們提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，它將你的頁面最多劃分為12列，如果你的頁面寬度是960px，最小的單元要素寬度就是80px。6Bootstrap的柵格參數(shù)超小屏幕手機(jī)

(<768px)小屏幕平板

(≥768px)中等屏幕桌面顯示器

(≥992px)大屏幕大桌面顯示器

(≥1200px)柵格系統(tǒng)行為總是水平排列開始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧.container最大寬度None（自動(dòng)）750px970px1170px類前綴.col-xs-.col-sm-.col-md-.col-lg-列（column）數(shù)12最大列（column）寬自動(dòng)~62px~81px~97px槽（gutter）寬30px（每列左右均有

15px）可嵌套是偏移（Offsets）是列排序是7布局容器Bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器，或者.container-fluid。.container類用于固定寬度并支持響應(yīng)式布局的容器。<divclass="container">...</div>.container-fluid類用于100%寬度，占據(jù)全部視口（viewport）的容器。<divclass="container-fluid">...</div>8樣式及組件在Bootstrap中，通過為圖片添加.img-responsive類可以讓圖片支持響應(yīng)式布局;.img-rounded可以設(shè)置圓角邊框圖片效果；.img-sircle設(shè)置圓形圖片效果；.img-thumbnail設(shè)置白邊框效果。.center-block的效果是讓內(nèi)容塊居中。.clearfix的效果是清除浮動(dòng)。Bootstrap使用的是

GlyphiconHalflings的圖標(biāo)字體。9JS插件Bootstrap自帶12種jQuery插件，擴(kuò)展了功能，可以給站點(diǎn)添加更多的互動(dòng)，可以簡(jiǎn)單地一次性引入所有插件，或者逐個(gè)引入到頁面中。10練習(xí)題11利用Bootstrap框架制作出如下

溫馨提示

  • 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)論