“歡迎來(lái)到響應(yīng)性網(wǎng)絡(luò)!”在過(guò)去的一年中，這一術(shù)語(yǔ)到處都是，以至于我的很多客戶(hù)都在要求一個(gè)響應(yīng)式的設(shè)計(jì)。對(duì)我來(lái)說(shuō)，這真的很有趣，因?yàn)樗麄儚膩?lái)沒(méi)有要求過(guò)手機(jī)或平板電腦的版本。

有人會(huì)說(shuō)，手機(jī)并不是主流，每個(gè)人都試圖模仿網(wǎng)絡(luò)上的IOS界面，我同意，這很糟糕，但這不是客戶(hù)要求響應(yīng)的*原因!不知怎么的，他們認(rèn)為我們會(huì)按我們的要求進(jìn)行響應(yīng)式設(shè)計(jì)，這是正常的，所以?xún)r(jià)格應(yīng)該保持不變。嗯，沒(méi)那么容易。

如何使用Twitter引導(dǎo)創(chuàng)建一個(gè)響應(yīng)性網(wǎng)站設(shè)計(jì)?

如何使用Twitter引導(dǎo)創(chuàng)建一個(gè)響應(yīng)性網(wǎng)站設(shè)計(jì)?
響應(yīng)式web設(shè)計(jì)是一種方法，我經(jīng)常稱(chēng)之為“心態(tài)”，因?yàn)槟惚仨毟淖兡愕乃季S方式。它背后的基本理念是:一個(gè)設(shè)計(jì)來(lái)管理它們——沒(méi)有m.domain.com，沒(méi)有touch.domain.com，沒(méi)有3個(gè)單獨(dú)的CSS文件，每個(gè)設(shè)備或每個(gè)方向都沒(méi)有7個(gè)PSD文件——只是“domain.com”在桌面、平板和手機(jī)上看起來(lái)是一樣的。

響應(yīng)式設(shè)計(jì)的理念依賴(lài)于針對(duì)特定屏幕分辨率和大小的CSS3媒體查詢(xún)?，F(xiàn)在媒體查詢(xún)已經(jīng)有一段時(shí)間了，但我們主要是用它們來(lái)實(shí)現(xiàn)打印樣式。隨著CSS3的發(fā)展，它們變得非常有用。

有趣的事實(shí):今天你甚至可以為那些重量為3KG的設(shè)備寫(xiě)一個(gè)媒體查詢(xún)。瘋狂的,對(duì)嗎?

有兩件事是肯定的，如果你開(kāi)始創(chuàng)建響應(yīng)式設(shè)計(jì):

更多的工作——更多的是CSS代碼，經(jīng)常是一些JS，但也有很多關(guān)于UI本身的思考和計(jì)劃，它是如何擴(kuò)展的，用戶(hù)如何與它交互等等。
大量的測(cè)試——這是更大的缺點(diǎn)。測(cè)試響應(yīng)性設(shè)計(jì)的*真正的方法就是在設(shè)備上使用它，你可以想象寫(xiě)5行CSS然后抓取iPad，加載網(wǎng)頁(yè)，旋轉(zhuǎn)它的風(fēng)景，糟糕的是，在風(fēng)景中它看起來(lái)不那么熱，所以回到代碼…你懂的。
這里有一個(gè)很好的部分，有一種近乎神奇的方式開(kāi)始創(chuàng)建響應(yīng)性設(shè)計(jì)，它的名字是Twitter引導(dǎo)。

Twitter引導(dǎo)-你的新BFF。
Twitter引導(dǎo)

推特是由Twitter上的兩個(gè)家伙創(chuàng)建的，他們想要加速并引導(dǎo)他們的工作量和代碼。如果你訪問(wèn)Twitter Bootstrap的主頁(yè)，他們將其定義為:“光滑、直觀、強(qiáng)大的前端框架，以更快更輕松地開(kāi)發(fā)web”，而他們并沒(méi)有對(duì)你撒謊!

我通常不會(huì)在框架上大做文章，并且喜歡盡可能多地編寫(xiě)代碼，因?yàn)楦鞣N原因，所以請(qǐng)相信我，當(dāng)我說(shuō)它值得每一分鐘的時(shí)候，你會(huì)花很多時(shí)間去學(xué)習(xí)它，這不會(huì)太久。

Twitter提供了很多神奇的東西:

全球風(fēng)格的身體重置類(lèi)型和背景，鏈接風(fēng)格，網(wǎng)格系統(tǒng)，和兩個(gè)簡(jiǎn)單的布局。
用于常見(jiàn)HTML元素的樣式，如排版、代碼、表格、表單和按鈕，以及一個(gè)很棒的小圖標(biāo)集。
通用接口組件的基本樣式，如標(biāo)簽和藥片，導(dǎo)航條，警報(bào)，頁(yè)眉，等等。
Javascript插件，比如工具提示、彈出窗口、modals等等。
但*重要的是，它非常容易學(xué)習(xí)和使用，而且它有非常好的文檔和開(kāi)發(fā)人員夢(mèng)寐以求的所有例子。讓我們深入研究一下。

開(kāi)始使用引導(dǎo)

您要做的*件事是訪問(wèn)Bootstrap下載頁(yè)面(這可能是一個(gè)標(biāo)記URL的好時(shí)機(jī))。你可以在那里找到所有的文檔，包括一些基本的指南和教程，所以我不會(huì)浪費(fèi)時(shí)間解釋這些。

這很重要，你可以從他們的主頁(yè)下載這個(gè)框架，或者你可以下載一個(gè)定制的版本，我更喜歡這個(gè)版本，因?yàn)槟憧梢赃x擇和選擇你需要或想要的東西。這個(gè)版本*棒的地方是它只有一個(gè)CSS文件的響應(yīng)媒體查詢(xún)你需要與其他版本有一個(gè)正常的CSS文件和一個(gè)單獨(dú)的CSS文件中對(duì)媒體查詢(xún)和一群JS文件就是混亂的。

定制引導(dǎo)

因此，如果您跳到定制引導(dǎo)頁(yè)面，您將看到您可以關(guān)閉/在諸如JS插件、CSS樣式、UI組件、響應(yīng)查詢(xún)、定義字體、顏色等方面。對(duì)于本文，您可以只保留默認(rèn)的所有內(nèi)容，并單擊big“下載定制版本”按鈕。

下載并解壓縮包后，您將得到以下內(nèi)容:

-引導(dǎo)/
——css /
——引導(dǎo)。css(可以刪除)
推薦- - - - - - bootstrap.min.css
——js /
——引導(dǎo)。js(可以刪除)
推薦- - - - - - bootstrap.min.js
——img /
推薦- - - - - - glyphicons-halflings.png
推薦- - - - - - glyphicons-halflings-white.png
首先要做的是刪除CSS & JS文件的非縮小版本(bootstrap)。css, bootstrap.js)因?yàn)槲艺J(rèn)為你不需要。 本文來(lái)源：智通澤軟件，轉(zhuǎn)載請(qǐng)注明出處！如果需要泊頭網(wǎng)站建設(shè) 泊頭小程序開(kāi)發(fā) 泊頭微信開(kāi)發(fā) 泊頭APP開(kāi)發(fā)請(qǐng)聯(lián)系封經(jīng)理，我們將提供上門(mén)服務(wù)！
聯(lián)系方式：手機(jī)：13393374114  座機(jī)：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：