“歡迎來到響應性網絡!”在過去的一年中，這一術語到處都是，以至于我的很多客戶都在要求一個響應式的設計。對我來說，這真的很有趣，因為他們從來沒有要求過手機或平板電腦的版本。

有人會說，手機并不是主流，每個人都試圖模仿網絡上的IOS界面，我同意，這很糟糕，但這不是客戶要求響應的唯一原因!不知怎么的，他們認為我們會按我們的要求進行響應式設計，這是正常的，所以價格應該保持不變。嗯，沒那么容易。

如何使用Twitter引導創(chuàng)建一個響應性網站設計?

如何使用Twitter引導創(chuàng)建一個響應性網站設計?
響應式web設計是一種方法，我經常稱之為“心態(tài)”，因為你必須改變你的思維方式。它背后的基本理念是:一個設計來管理它們——沒有m.domain.com，沒有touch.domain.com，沒有3個單獨的CSS文件，每個設備或每個方向都沒有7個PSD文件——只是“domain.com”在桌面、平板和手機上看起來是一樣的。

響應式設計的理念依賴于針對特定屏幕分辨率和大小的CSS3媒體查詢?，F在媒體查詢已經有一段時間了，但我們主要是用它們來實現打印樣式。隨著CSS3的發(fā)展，它們變得非常有用。

有趣的事實:今天你甚至可以為那些重量為3KG的設備寫一個媒體查詢。瘋狂的,對嗎?

有兩件事是肯定的，如果你開始創(chuàng)建響應式設計:

更多的工作——更多的是CSS代碼，經常是一些JS，但也有很多關于UI本身的思考和計劃，它是如何擴展的，用戶如何與它交互等等。
大量的測試——這是最大的缺點。測試響應性設計的唯一真正的方法就是在設備上使用它，你可以想象寫5行CSS然后抓取iPad，加載網頁，旋轉它的風景，糟糕的是，在風景中它看起來不那么熱，所以回到代碼…你懂的。
這里有一個很好的部分，有一種近乎神奇的方式開始創(chuàng)建響應性設計，它的名字是Twitter引導。

Twitter引導-你的新BFF。
Twitter引導

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

我通常不會在框架上大做文章，并且喜歡盡可能多地編寫代碼，因為各種原因，所以請相信我，當我說它值得每一分鐘的時候，你會花很多時間去學習它，這不會太久。

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

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

開始使用引導

您要做的第一件事是訪問Bootstrap下載頁面(這可能是一個標記URL的好時機)。你可以在那里找到所有的文檔，包括一些基本的指南和教程，所以我不會浪費時間解釋這些。

這很重要，你可以從他們的主頁下載這個框架，或者你可以下載一個定制的版本，我更喜歡這個版本，因為你可以選擇和選擇你需要或想要的東西。這個版本最棒的地方是它只有一個CSS文件的響應媒體查詢你需要與其他版本有一個正常的CSS文件和一個單獨的CSS文件中對媒體查詢和一群JS文件就是混亂的。

定制引導

因此，如果您跳到定制引導頁面，您將看到您可以關閉/在諸如JS插件、CSS樣式、UI組件、響應查詢、定義字體、顏色等方面。對于本文，您可以只保留默認的所有內容，并單擊big“下載定制版本”按鈕。

下載并解壓縮包后，您將得到以下內容:

-引導/
——css /
——引導。css(可以刪除)
推薦- - - - - - bootstrap.min.css
——js /
——引導。js(可以刪除)
推薦- - - - - - bootstrap.min.js
——img /
推薦- - - - - - glyphicons-halflings.png
推薦- - - - - - glyphicons-halflings-white.png
首先要做的是刪除CSS & JS文件的非縮小版本(bootstrap)。css, bootstrap.js)因為我認為你不需要。 本文來源：杰云網絡，轉載請注明出處！如果需要 營銷型網站建設、 微商城、 小程序商城、 多端小程序 請聯系我們！