段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式(這里所說的文本是指正文文本):
1、全局文本字號為14px(font-size)。
2、行高為1.42857143(line-height),大約是20px(大家看到一串的小數或許會有疑惑,其實他是通過LESS編譯器計算出來的,當然Sass也有這樣的功能)。
3、顏色為深灰色(#333);
4、字體為"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family),或許這樣的字體對我們中文并不太合適,但在實際項目中,大家可以根據自己的需求進行重置,在此我們不做過多闡述,我們回到這里。該設置都定義在<body>元素上,由于這幾個屬性都是繼承屬性,所以Web頁面中文本(包括段落p元素)如無重置都會具有這些樣式效果。
/*源碼請查看bootstrap.css文件中第274行~280行*/
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
另外在Bootstrap中,為了讓段落p元素之間具有一定的間距,便于用戶閱讀文本,特意設置了p元素的margin值(默認情況之下,p元素具有一個上下外邊距,并且保持一個行高的高度):
/*源碼請查看bootstrap.css文件中第467行~469行*/
p { margin: 0 0 10px; }
如果你對CSS預處理器有所了解,那么你完全可以根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。在Bootstrap中,排版設置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量:
LESS版本:
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
Sass版本:
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
第一條語句用于設置字體大小,第二條語句用于設置行高。系統默認使用這兩個值產生整個頁面相應的margin、padding和line-height的值。換句話說,你只需要修改這兩個變量的值,然后重新編譯,就可以自定義自己的Bootstrap排版樣式。(有興趣的同學可以嘗試一下,此處對于LESS或Sass版本運用不做過多闡述)。
我也來試一試:完成下面任務
請在右側代碼編輯器的第13行輸入正確代碼。將“我是一個段落,你猜我在Bootstrap是以什么樣的風格顯示。”內容以一個段落在瀏覽器中顯示。
正確代碼:
<p>我是一個段落,你猜我在Bootstrap是以什么樣的風格顯示。</p>
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報