隨著網(wǎng)頁愈來愈多元化，現(xiàn)在製作網(wǎng)頁已從前相比，難度高了許多，以前只要table就可搞定一切，現(xiàn)在得透過CSS、jQuery，才能讓網(wǎng)頁變得更靈活，因此無論是程式設(shè)計(jì)師，還是網(wǎng)頁視覺設(shè)計(jì)師，都需具備十八般武藝，程式設(shè)計(jì)師已不再單純的寫後端，就連前端的程式，與CSS也需一手包辦，而視覺設(shè)計(jì)師也不再只單純的寫CSS，有時(shí)一些簡單的jQuery互動(dòng)，就得自已動(dòng)手來，但這真是一件二難的事，要程式設(shè)計(jì)師來配色排版，要視覺設(shè)計(jì)師寫程式，那可真是要命的，因此往往會(huì)發(fā)生，程式要等視覺頁面出來才能做，而視覺要的效果，總是與當(dāng)初想有所落差，因此這時(shí)候，不妨可試試Bootstrap，讓程式設(shè)計(jì)師也能配出有品味的配色，視覺設(shè)計(jì)師也能作出理想的互動(dòng)效果，而這個(gè)Bootstrap套件相當(dāng)?shù)姆奖愫糜?，只要將它的元件載入，立即就可套用它的CSS樣式，或jQuery的互動(dòng)效果，讓程式與視覺能同步進(jìn)行，加速專案的製作。
Bootstrap：
套件名稱：Bootstrap
下載網(wǎng)址：
http://twitter.github.io/bootstrap/示範(fàn)範(fàn)例：
本站下載Bootstrap－下載與載入：
Step1
將Bootstrap下載與解壓縮後，分別會(huì)看到css、img、js三個(gè)資料夾。
Step2
由於Bootstrap中所使用的互動(dòng)效果，需要用到j(luò)Query，所以得自行到j(luò)Query官網(wǎng)下載jQuery元件，再放到j(luò)s資料夾中。
Step3
元件都下載完畢後，開啟網(wǎng)頁在<head>~</head>之間，將css與js載入。
Bootstrap－套用CSS樣式：
Step4
載入完畢後，到Bootstrap網(wǎng)頁站，點(diǎn)上方的選單，進(jìn)到CSS後，左邊會(huì)有類別可選擇，右邊是該類別可套用的樣式。
Step5
將要套用的css類別名稱，加到網(wǎng)頁的標(biāo)籤語法中。
Step6
鏘~鏘~立馬就將一個(gè)平凡的按鈕，變得有特色。
Bootstrap－套用JS互動(dòng)效果：
Step7
接著要介紹的是JS部分，往往當(dāng)視覺設(shè)計(jì)師，要自已弄個(gè)下拉選單、頁籤，總是用的一把眼淚一把鼻涕的，現(xiàn)在只要選擇想要的效果。
Step8
將下方的HTML碼複製下來。
Step9
貼到網(wǎng)頁中，再把要啟用的js碼貼到<head>~</head>就大功告成啦!
Step10
哈~這樣就完成啦!夠簡單吧!
這個(gè)套件的概念相當(dāng)很好，所以CSS的部分就可由視覺設(shè)計(jì)師來自定，而js互動(dòng)就可由程式設(shè)計(jì)師先設(shè)計(jì)，之後在執(zhí)行專案時(shí)，不但不會(huì)跟別人撞到，同時(shí)還可加速專案的製作。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點(diǎn)擊舉報(bào)。
