現(xiàn)在的上網(wǎng)設(shè)備十分多，每種設(shè)備的分辨率都不一樣，傳統(tǒng)的網(wǎng)站開發(fā)需要花很大功夫才能實(shí)現(xiàn)不同分辨率下兼容布局，而Bootstrap的出現(xiàn)使得網(wǎng)站開發(fā)更加簡單快捷。Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包，其中的一個(gè)特性就是支持響應(yīng)式布局。

bootstrap響應(yīng)式布局——bootstrap響應(yīng)式布局介紹

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。

首先我們使用的開發(fā)平臺是Windows7+Eclipse for J2EE ，首先要下載Bootstrap3，可以到Bootstrap中文網(wǎng)下載，只需要下載用于生產(chǎn)環(huán)境的 Bootstrap， 另外要注意，要使用Bootstrap必須要有JQuery，可以從Bootstrap中文網(wǎng)的CDN里面保存jquery的壓縮版即可

首先利用Eclipse建立一個(gè)動(dòng)態(tài)Web項(xiàng)目，在WebContent下建立bootstrap文件夾和jquery文件夾，然后把對應(yīng)的文件復(fù)制進(jìn)去即可。

注意：可能你復(fù)制jquery的js文件進(jìn)去后，Eclipse報(bào)錯(cuò)，這個(gè)是因?yàn)镋clipse對Javascript驗(yàn)證出錯(cuò)，可以把這個(gè)文件排除驗(yàn)證，或者直接無視Eclipse的報(bào)錯(cuò)。

接下來建立一個(gè)index.jsp文件，引入Bootstrap3：接下來建立一個(gè)index.jsp文件，引入Bootstrap3。

關(guān)于bootstrap文件包簡單介紹

bootstrap.css 是完整的bootstrap樣式表，未經(jīng)壓縮過的，可供開發(fā)的時(shí)候進(jìn)行調(diào)試用

bootstrap.min.css 是經(jīng)過壓縮后的bootstrap樣式表，內(nèi)容和bootstrap.css完全一樣，但是把中間不必要的空格之類的東西都刪掉了，所以文件大小會比bootstrap.css小，可以在部署網(wǎng)站的時(shí)候引用，如果引用了這個(gè)文件，就沒必要引用bootstrap.css了

bootstrap-responsive.css 這個(gè)是在對bootstrap框架應(yīng)用了響應(yīng)式布局之后所需要的CSS樣式表，如果你的網(wǎng)站項(xiàng)目不準(zhǔn)備做響應(yīng)式設(shè)計(jì)，就不需要引用這個(gè)CSS。

bootstrap-responsive.min.css 和bootstrap.min.css的作用是一樣的，是bootstrap-responsive.css的壓縮版

bootstrap.js 這個(gè)是bootstrap的靈魂所在，是bootstrap的所有js指令的集合，你看到bootstrap里面所有的js效果，都是由這個(gè)文件控制的，這個(gè)文件也是一個(gè)未經(jīng)壓縮的版本，供開發(fā)的時(shí)候進(jìn)行調(diào)試用

bootstrap.min.js 是bootstrap.js的壓縮版，內(nèi)容和bootstrap.js一樣的，但是文件大小會小很多，在部署網(wǎng)站的時(shí)候就可以不引用bootstrap.js，而換成引用這個(gè)文件了~~

Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。其中包括以下組件：下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、面包屑、分頁、排版、縮略圖、警告對話框、進(jìn)度條、媒體對象等，如果大家還想了解更多與之有關(guān)的信息，歡迎關(guān)注我們優(yōu)詞網(wǎng)的官網(wǎng)。