用Bootstrap編寫你的作品集網(wǎng)頁

時間：2023-06-09 21:27:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-06-09 21:27:01 來源：網(wǎng)站運(yùn)營

用Bootstrap編寫你的作品集網(wǎng)頁：不知不覺學(xué)習(xí)Udacity 前端開發(fā)（入門）課程已經(jīng)一個月了，總體感覺難度還是比較適合從零開始學(xué)習(xí)的。最近剛完成了第三個項(xiàng)目:P3: 編寫你的作品集網(wǎng)頁，我是通過使用Bootstrap完成的，下面分享下我是如何根據(jù)設(shè)計原型編寫出具有響應(yīng)性的網(wǎng)頁。

一、分解設(shè)計原型

這個項(xiàng)目的設(shè)計原型如下：


由于一切網(wǎng)頁都是由若干個矩形組成的，看到原型后，我首先將它分為三大塊，分別是標(biāo)題欄，中間大圖，和最后三幅小圖的區(qū)域。然后再從三個大塊中再分解，例如標(biāo)題欄可以分解成LOGO+兩段標(biāo)題；最后三幅小圖可分成三塊等。這個過程有助于后面網(wǎng)頁HTML的編寫。

二、使用Bootstrap構(gòu)建大體網(wǎng)頁

接下來，就是使用Bootstrap簡單的構(gòu)建一個大體網(wǎng)頁。下載好需要用到的Bootstrap壓縮包，然后放到相應(yīng)的目錄下就可以開始使用了，這方面還是相當(dāng)方便的。

Bootstrap還提供了一個基本模板和各種精選實(shí)例供你使用。但如果原型跟精選實(shí)例相差太遠(yuǎn)還是用基本模板作為開始比較好?；灸０迦缦拢?br>
首先使用基本模板作為開始，改改title然后就可以在body下面開始編寫。Bootstrap有一個非常好用的柵格系統(tǒng)，由于Bootstrap 有移動設(shè)備優(yōu)先的特性，使用這個的同時也就符合響應(yīng)式設(shè)計的要求。使用格柵系統(tǒng)創(chuàng)建一個header作為一個組，然后在其中加入LOGO圖，寬度占50%，兩段文字標(biāo)題寬度亦占50%。如圖

這里可以很方便的使用預(yù)定義的類.row 和 .col-md-x等創(chuàng)建你想要的布局，另外.text-right可以將標(biāo)題文字右置。

然后加個hr作為分割線，接著用同樣方法通過格柵系統(tǒng)加入中間大圖和第二標(biāo)題，寬度占100%。

預(yù)定義的類.img-responsive可以使圖片具有不錯的響應(yīng)性

最后就是可以作為一個section的三幅圖文，寬度各占33%，也是使用格柵系統(tǒng)構(gòu)建。

最后整個基本結(jié)構(gòu)出來了效果如圖：


基本上跟設(shè)計原型類似了，就是有點(diǎn)細(xì)節(jié)要修改下，然后在手機(jī)屏幕上的表現(xiàn)也不錯。

三、自定義細(xì)節(jié)修改

最后加入自定義的css來修改細(xì)節(jié)，使效果看起來跟設(shè)計原型差不多并改進(jìn)響應(yīng)性。

有些地方不知道如何解決的話，我主要參考了Mozilla中Web 技術(shù)文檔的CSS 參考，部分通過GOOGLE解決。

細(xì)節(jié)修改的地方其實(shí)不算太多，但改起來比構(gòu)建大體網(wǎng)頁更加耗時間.....因?yàn)槊總€參數(shù)要逐個嘗試，具體就不多敘述了。但有一點(diǎn)在代碼審閱時被提醒需要注意的是文字內(nèi)容會溢出。

以下是代碼審閱的建議原文：

嗯，有一個地方有點(diǎn)小問題，就是當(dāng)屏幕尺寸為桌面設(shè)備時，“Featured Work” 里的 <p> 標(biāo)簽里的文字內(nèi)容會溢出，假如文本內(nèi)容再多一些，這就更加不用戶友好啦（請看下方截圖，我多輸入了一些文字，就會看到與它右邊的內(nèi)容重疊了呢）。
解決方法有很多種，例如可以考慮添加一個 overflow 或者 word-wrap 屬性。記得改一改呢。:)

閱讀更多：
word-wrap (by Mozilla)
overflow (by Mozilla)




最后改完出來的效果如題圖，手機(jī)上效果如下：

ipad效果如下：

四、總結(jié)

1. Bootstrap 實(shí)在是太好用了，格柵系統(tǒng)可以輕松實(shí)現(xiàn)排版和解決響應(yīng)性問題。
2. 這個網(wǎng)頁只用到基本的HTML和CSS功能，Bootstrap其實(shí)還有更多功能可以使用。
3. Udacity代碼審閱這個功能相當(dāng)不錯，可以從中學(xué)到很多，有些問題甚至自己之前都沒注意到。