亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

段落(正文文本)

段落是排版中另一個重要元素之一。在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、paddingline-height的值。換句話說,你只需要修改這兩個變量的值,然后重新編譯,就可以自定義自己的Bootstrap排版樣式。(有興趣的同學可以嘗試一下,此處對于LESS或Sass版本運用不做過多闡述)。

任務

我也來試一試:完成下面任務

請在右側代碼編輯器的第13行輸入正確代碼。將“我是一個段落,你猜我在Bootstrap是以什么樣的風格顯示。”內容以一個段落在瀏覽器中顯示。

?不會了怎么辦

正確代碼:

<p>我是一個段落,你猜我在Bootstrap是以什么樣的風格顯示。</p>
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?