bootstrap中的段落和強調內容

段落是排版中另乙個重要元素之一。在bootstrap中為文字設定了乙個全域性的文字樣式（這裡所說的文字是指正文文字）：

1、全域性文字字型大小為14px(font-size)。

2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過less編譯器計算出來的，當然sass也有這樣的功能)。

3、顏色為深灰色（#333）；

4、字型為"helvetica neue", helvetica, arial, sans-serif;（font-family），或許這樣的字型對我們中文並不太合適，但在實際專案中，大家可以根據自己的需求進行重置，在此我們不做過多闡述，我們回到這裡。該設定都定義在元素上，由於這幾個屬性都是繼承屬性，所以web頁面中文字（包括段落p元素）如無重置都會具有這些樣式效果。

/*原始碼請檢視bootstrap.css檔案中第274行~280行*/

body

另外在bootstrap中，為了讓段落p元素之間具有一定的間距，便於使用者閱讀文字，特意設定了p元素的margin值（預設情況之下，p元素具有乙個上下外邊距，並且保持乙個行高的高度）：

/*原始碼請檢視bootstrap.css檔案中第467行~469行*/

如果你對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版本運用不做過多闡述）。

bootstrap是twitter推出的乙個用於前端開發的開源工具包。它由twitter的設計師mark otto和jacob thornton合作開發,是乙個css/html框架。

seashen.cn是國內領先的html5學習社群！

在實際專案中，對於一些重要的文字，希望突出強調的部分都會做另外的樣式處理。bootstrap同樣對這部分做了一些輕量級的處理。

如果想讓乙個段落p突出顯示，可以通過新增類名「.lead」實現，其作用就是增大文字字型大小，加粗文字，而且對行高和margin也做相應的處理。用法如下：

我是普通文字，我的樣子長成這樣我是普通文字，我的樣子長成這樣我是普通文字，

class="lead">我是特意要突出的文字，我的樣子成這樣。我是特意要突出的文字，我的樣子長成這樣。

效果檢視最右側結果視窗。

「.lead」對應的樣式如下：

/*原始碼檢視bootstrap.css檔案第470行~480行*/

.lead 
@media (min-width: 768px) 
}

除此之外，bootstrap還通過元素標籤:、、和給文字做突出樣式處理。

/*原始碼檢視bootstrap.css檔案第55行~第58行*/

b,strong
/*原始碼檢視bootstrap.css檔案第481行~第484行*/

small,.small
/*原始碼檢視bootstrap.css第485行~第487行*/

cite
b,strong
例如，下面的**使用標籤定義了強調文字：

我在學習bootstrap
，我要掌握bootstrap的所有知識。

在排版中，除了用加粗來強調突出的文字之外，還可以使用斜體。斜體類似於加粗一樣，除了可以給元素設定樣式font-style值為italic實現之外，在bootstrap中還可以通過使用標籤或來實現。

例如，下面的**使用了和標籤定義了強調文字：

我在seashen.cn網上跟大海

一起學習bootstrap

的使用。我一定要學會bootstrap

。

在bootstrap中除了使用標籤、等說明正文某些字詞、句子的重要性，bootstrap還定義了一套類名，這裡稱其為強調類名（類似前面說的「.lead」）,這些強調類都是通過顏色來表示強調，具本說明如下：

具本原始碼檢視bootstrap.css檔案第500行~第532行：

.text-muted

.text-primary

a.text-primary:hover

.text-success

a.text-success:hover

.text-info

a.text-info:hover

.text-warning

a.text-warning:hover

.text-danger

a.text-danger:hover

.text-muted 效果

.text-primary效果

.text-success效果

.text-info效果

.text-warning效果

.text-danger效果

在排版中離不開文字的對齊方式。在css中常常使用text-align來實現文字的對齊風格的設定。其中主要有四種風格：

☑ 左對齊，取值left

☑ 居中對齊，取值center

☑ 右對齊，取值right

☑ 兩端對齊，取值justify

為了簡化操作，方便使用，bootstrap通過定義四個類名來控制文字的對齊風格：

☑ .text-left：左對齊

☑ .text-center：居中對齊

☑ .text-right：右對齊

☑ .text-justify：兩端對齊

具體原始碼檢視bootstrap.css檔案第488行~第499行：

.text-left

.text-right

.text-center

.text-justify

例如下面的四行**，分別定義文字的四種不同的對齊風格：

我居左

我居中我居右

我兩端對齊

bootstrap中的段落和強調內容

bootstrap中的網格系統

vs code中 bootstrap的使用

GCC中的強符號和弱符號及強引用和弱引用

bootstrap中的段落和強調內容

bootstrap中的網格系統

vs code中 bootstrap的使用

GCC中的強符號和弱符號及強引用和弱引用

相關推薦