2014-01-08 110 views
0

Boostrap3使用此代碼在移動視圖中的導航欄內製作切換按鈕,但爲什麼不只是使用圖像而不是空元素?爲什麼twitter-bootstrap不使用圖像,但是<span class =「icon-bar」></span>?

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

http://getbootstrap.com/components/#navbar

+0

當你仔細觀察時,你會發現'icon-bar'根本不顯示任何圖像。也許這就是爲什麼它不是''? – MarcinJuraszek

+0

您可以從CSS更改img的顏色。但您可以更改的顏色,也可以應用其他您無法應用於img的css屬性。你有沒有看過img不加載時網頁會發生什麼? – unekwu

回答

3

最有可能保持 「前進」 的思維方式的網頁設計。如果僅使用html和css可以實現相同的視覺效果,則沒有理由發出不必要的媒體請求。同樣,在CSS中的進步已經允許一次只能用javascript或flash進行的轉換。

如果您檢查該移動菜單圖標的html,它很明顯它在做什麼以及甚至小圖像的加載如何比少量標記花費更多的處理。簡而言之,它在現代設計中只是一種更好的方法。

+1

在Bootstrap中,更好的體驗比「結構和表示的分離」更重要,對吧?:) – tkymtk

+0

也許他們認爲,這裏最好的體驗是讓外觀反映(或強加)特定的Web標準,使其成爲結構體。 –

相關問題