基于Bootstrap的響應式網頁設計與實現

熊慧 武漢交通職業學院電子與信息工程學院

移動互聯網技術在不斷發展，已進入互聯網新時代。移動通信技術的進步和發展，各行各業對智能移動終端的應用更加廣泛，使互聯網的應用技術為適應社會和用戶的需要，將轉變方向到移動平臺。目前在市面上和用戶手中的移動終端類型較多，如各種智能手機和各種平板電腦等。移動終端與PC段存在著較大的差異，設備的屏幕尺寸差距較大是最明顯的特征，同一網址在PC端和移動終端顯示的網頁頁面也有所差異。并且移動終端的設備種類繁多且其屏幕尺寸、分辨率等也有所差別。為了滿足用戶使用不同設備訪問頁面時的良好體驗，開發人員提出了以Bootstrap框架為基礎的響應式網頁設計思想和理念，充分利用現有的較為通用的網頁框架設計模板，為用戶提供和設計開發出能適用于不同設備的頁面，提升用戶的網頁瀏覽體驗。

1 響應式網頁設計

響應式網頁設計是指在設計研發網頁頁面的工作中，根據應用設備的不同尺寸大小、不同的系統、不同的屏幕分辨率等，以及用戶對頁面在設備上顯示布局和瀏覽體驗的要求。由響應式設計的網頁頁面，能夠滿足用戶在不同設備上的使用和需要，根據用戶設備的系統類型、屏幕分辨率、屏幕尺寸大小等要素對頁面顯示布局進行自動調節，用戶也可根據自身的需要在屏幕上對頁面進行手動調節，為用戶提供良好的瀏覽體驗。

響應式網頁研發設計的中心設計理念和思想是:優先考慮移動終端、效果逐漸加強。在進行頁面的研發和設計的時候，設計優先考慮和滿足移動終端，移動終端的屏幕顯示尺寸大小有多種類型，其屏幕分辨率也有多種規格，設計開發和滿足移動終端的頁面顯示效果，適應不同移動終端的頁面布局，這樣的設計安排方式有益于提高網頁設計開發的效率和效果。

在優先考慮和滿足移動終端的頁面布局顯示效果的基礎上，在滿足移動終端小尺寸屏幕頁面布局的顯示效果的前提下，逐步開發設計和滿足更大尺寸屏幕的頁面布局的顯示效果。在小尺寸屏幕的顯示范圍內，將頁面應有的內容顯示出來，但內容的顯示形式則較為簡約。隨著屏幕尺寸的增大，可顯示頁面內容的空間增大，在不改變頁面顯示內容的基礎上，提高頁面內容的顯示效果。

2 Bootstrap簡介

Bootstrap由Twitter的MarkOtto和Jacob Thornton合作研究設計與開發的，其包括了HTML、CSS和JavaScript的響應式網頁設計開發框架。Bootstrap設計的最重要目的是為了使所設計的頁面能夠良好的顯示在不同屏幕尺寸的設備上，使頁面能夠兼容于各種屏幕尺寸的設備。傳統的網頁設計開發技術，難以實現其頁面兼容不同屏幕尺寸設備。Bootstrap為網頁設計提供多種類型的模板或樣式，并且適用于響應式網頁設計開發，Bootstrap框架的使用，可減輕設計兼容于各種屏幕尺寸設備的網頁的工作量。并且，以Bootstrap框架為基礎開發設計的響應式網頁，有著很好的可維護的性能和擴展的性能。以這些良好特點為基礎，Bootstrap技術得到迅速推廣和發展，為網頁設計提供更多類型的模板或樣式，為網頁開發設計人員提供了良好輔助。

3 網頁設計與實現

3.1 網頁設計

本文以研究分析響應式網頁設計為基礎，與Bootstrap框架相結合，以響應式設計研發個人博客頁面為例子，簡要講述網頁的響應式設計理念和思想。網站的界面設計應滿足于各種屏幕尺寸設備的瀏覽，并且要有良好的顯示效果。在網頁開發設計的過程中，優先考慮和滿足移動終端的頁面布局顯示效果，例如用戶常用的智能手機和平板電腦等，在滿足移動終端小尺寸屏幕頁面布局的顯示效果的前提下，逐步開發設計和滿足更大尺寸屏幕的頁面布局的顯示效果，即PC端的頁面設計和開發。

本文以PC端的頁面顯示效果設計為主，網頁的使用環境主要是考慮在PC機上，因此頁面顯示界面的適應要求如下:尺寸大于768px的采用PC端的頁面顯示布局，小于768px的采用小尺寸頁面顯示布局。

3.2 網頁實現

3.2.1 HTML5結構的搭建。

Bootstrap框架是基于HTML5來完成，包括CSS和JavaScript內容。因此網站界面的結構設計要以HTML5為基本結構依據。

3.2.2 Bootstrap引入

本網站是以Bootstrap框架為基礎進行響應式網站界面的設計，若要符合Bootstrap框架的相關結構形式和內容，必須將相應的文件或內容引入到網站頁面中。

3.2.3 移動設備兼容

如要使網站頁面能夠適應不同屏幕尺寸設備，展現出良好的顯示效果，成為響應式的網頁頁面，則要在標簽中加入相對應的代碼。

通過加入相對應的代碼，當網站頁面在不同屏幕尺寸設備上顯示時，頁面的內容和元素會根據屏幕大小進行比例性的顯示。

4 結束語

用戶在工作、生活中或因條件的限制，其無論使用何種設備或系統，都希望所訪問的頁面有良好的瀏覽性，網頁設計的開發人員也應該滿足各種設備對訪問頁面的兼容性和良好的布局性。設計研發人員可利用成熟的前端框架——Bootstrap進行響應式頁面設計工作，使網站頁面適用于不同屏幕尺寸大小的設備，為用戶提供良好的顯示服務。

[1] 舒后,熊一帆,葛雪嬌.基于Bootstrap框架的響應式網頁設計與實現[J].北京印刷學院學報,2016, 24(2):47-52.

[2] 何秀全.基于Bootstrap的響應式網頁設計[J].軟件導刊,2017,16(6):104-105.

[3] 汪紅宇,劉雄輝, 喬波. 基于Bootstrap框架實現響應式布局[J].電腦與信息技術,2017,25(5):19-22.