全域性樣式 bootstrap

2021-06-29 16:06:34 字數 627 閱讀 2373

在製作web頁面時,前端人員都習慣為**設定乙個全域性樣式(reset.css)。那麼在bootstrap框架中也不例外。bootstrap框架的核心是輕量的css基礎**庫,他並沒有一味的重置樣式,而是注重各瀏覽器基礎表現,降低開發難度。大部分前端人員都具有歸零的思想,但實際你會發現,歸零之後的樣式在開發過程中會存在著潛在的問題,例如,在全域性樣式表中將em變成乙個普通標記,明明應該是斜體,怎麼就沒效果了呢?

bootstrap框架在這一部分做了一定的變更,不再一味追求歸零,而是更注重重置可能產生問題的樣式(如,body,form的margin等),保留和堅持部分瀏覽器的基礎樣式,解決部分潛在的問題,提公升一些細節的體驗,具體說明如下:

移除body的margin宣告

設定body的背景色為白色

為排版設定了基本的字型、字型大小和行高

設定全域性鏈結顏色,且當鏈結處於懸浮「:hover」狀態時才會顯示下劃線樣式

其實bootstrap的全域性樣式採用了「normalize.css」,但並沒有一味的全部使用此重置樣式,而是在此基礎上進行了一些改良,讓其更適合bootstrap的設計思想。

你可以通過「normalize.less」(less版本)或「_normalize.scss」(sass版本)進行深入的了解。

文章出處:

Bootstrap全域性CSS樣式之排版

bootstrap能完全友好的支援html5的文字元素,這裡不再贅述,具體可參考我另一篇文章 html的文字元素總結 這裡主要針對bootstrap封裝好的css文字樣式做一下彙總。small 當前元素字型大小的 85 常用作副標題時,也可用來代替 lead 讓段落突出顯示 text left te...

Bootstrap入門 全域性CSS樣式 概論

標籤 空格分隔 未分類 為了確保適當的繪製和觸屏縮放,需要在 之中新增viewport 元資料標籤。name viewport content width device width,initial scale 1 關於這個標籤的詳細,可以看這個部落格的講解 移動前端開發之viewport的深入理解 ...

bootstrap 樣式記憶

1.強調內容 lead text left 左對齊 text center 居中對齊 text right 右對齊 text justify 兩端對齊 list unstyled 這樣就可以去除預設的列表樣式的風格。list inline 來實現內聯列表 dl horizontal 給定義列表實現水...