文本/圖像響應式設計

我應該使用twitter-bootstrap構建響應式設計，其中導航中的按鈕具有圖像（圖標）和文本（如果有足夠的空間），但如果沒有，則應該只是圖像。就像這樣：文本/圖像響應式設計

大屏幕：

<image1> text1; <image2> text2; <image3> text3

小屏幕：

<image1>; <image2>; <image3>

我怎麼能這樣做呢？謝謝！

來源

2013-04-28 myborobudur

你做了什麼，但更重要的是哪裏是問題？ – pickypg 2013-04-28 07:34:34

我的版本有幫助嗎？ – myborobudur 2013-04-28 08:15:28

如果你想要一個100％的Bootstrap解決方案，你可以使用[Responsive Utility Classes]（http://twitter.github.io/bootstrap/scaffolding.html#responsive），以防萬一不符合你的需求，你可以使用自定義媒體查詢，如：@media all和（max-width：XXXpx）' – m90 2013-04-28 08:50:13

Twitter Bootstrap中有幾個類可以幫助您嘗試做什麼。

.visible-phone 
.visible-tablet 
.visible-desktop  
.hidden-phone 
.hidden-tablet 
.hidden-desktop

例如，如果你想在你的圖標，文本必須當你在平板電腦或臺式機只使用此佈局僅顯示：

<img src="..."><span class="hidden-phone">Text1</span> 
<img src="..."><span class="hidden-phone">Text2</span> 
...

你可以看到更多信息關於這個課程在Bootstrap - Responsive Design

來源

2013-04-28 08:49:34 Pigueiras

非常好！我正在尋找.. – myborobudur 2013-04-28 19:25:29

文本/圖像響應式設計

回答

相關問題