box-model,以及帶你加設響應式文字和Googlefont字體 | bootstrap字體
雖然上星期,我們已經基本完成了整個頁面,不過還是有少量問題,一:dropdown顏色並不美觀,二:很多地方彼此的相距實在太近,例如下方的cards,三:文字並不會跟隨螢幕大小,而改變文字風格亦欠變化。我們今天,就來吧這些小地方修改修改吧。由Dropdownmenu看css優先權的問題當我們更改後,你會發現一個情況,dropdownmenu並不會跟隨你的顏色設定而改變。為什麼會這樣?大家都知道吧,bootstrap這個框架,其實他的原檔案,也是css和javscript來的。而他,對於每一個我們設定的class,都會有預設的css編碼,所以我們輸入class時,就會...
雖然上星期,我們已經基本完成了整個頁面,不過還是有少量問題,一:dropdown顏色並不美觀,二:很多地方彼此的相距實在太近,例如下方的cards,三:文字並不會跟隨螢幕大小,而改變文字風格亦欠變化。我們今天,就來吧這些小地方修改修改吧。
由Dropdownmenu看css優先權的問題當我們更改後,你會發現一個情況,dropdown menu 並不會跟隨你的顏色設定而改變。為什麼會這樣?大家都知道吧,bootstrap這個框架,其實他的原檔案,也是css和javscript來的。而他,對於每一個我們設定的class,都會有預設的css編碼,所以我們輸入class時,就會直接把已經設定好的裝潢放到相應的html編碼上,而造成了我們看起來的改變。而在css世界裡面,有一項我們稱為優先權的規則。這裡,或者我們可以用台幣來做比喻。
台幣中,最高面額的為2000台幣,在css世界裡!important則有著相同的高價值在 ,只要有他在,任何一切都會被它凌駕,所以如非必要,一般都不太建議使用。
第二大面額為1000台幣,相信大家還記得在html裏,也可以用style= 這種形式來增加css吧,而他的價值,也同樣在html裡面,位居第二。
第三大面額為500台幣,id則是這位置了。
第四大面額為200台幣,而class則是這位置。
最後為100台幣,其他的html元素,例如p,h1等都在這位置,不過這裡有點特別的是,越在外層的影響力會越細,就好像古代的官員那樣,越接近首都,你的地位也就越高,相反被流放邊疆的,多數已被朝廷棄用,這裡道理也是相近。
而因為bootstrap本身對於dropdown-item和dropdown-menu這兩個class都有設定,所以無論我們在外圍怎樣設定,也不會有任何影響,因為外圍設定,在css世界裡地位根本就不夠高去影響。
所以我們需要在dropdown-item和dropdown-menu裏分別添加希望改變的顏色,以及文字顏色,這樣就能夠成功改變了。
<ul class="drop...