Bootstrap入門(三)標籤的css樣式

2021-10-01 18:33:48 字數 1909 閱讀 4074

bootstrap入門(三)標籤的css樣式

前提:引入css檔案,內容放在乙個class為container的div中

標籤屬性

1.「 text-left 」、「 text-right 」、「 text-center 」屬性控制標籤內容位置

<

p class

="text-left"

>在左

p>

<

p class

="text-right"

>在右

p>

<

p class

="text-center"

>居中

p>

效果:

2.「 text-lowercase 」、「 text-uppercase 」、「 text-capitalize 」屬性控制標籤英文內容的大小寫 

<

p class

="text-lowercase"

>hahahahhahahaha都小寫

p>

<

p class

="text-uppercase"

>hahahahhahahaha都大寫

p>

<

p class

="text-capitalize"

>hahahahhahahaha首字母大寫

p>

效果:

3.字型:「text-muted 」、「text-info 」、「text-success 」、「text-warning 」、「text-primary 」、「text-danger 」等屬性,對不同情況下的內容進行不同顏色的標註

<

p class

="text-muted"

>text-muted

p>

<

p class

="text-info"

>text-info

p>

<

p class

="text-success"

>text-success

p>

<

p class

="text-warning"

>text-warning

p>

<

p class

="text-primary"

>text-primary

p>

<

p class

="text-danger"

>text-danger

p>

效果:

4.背景:「bg-muted 」、「bg-info 」、「bg-success 」、「bg-warning 」、「bg-primary 」、「bg-danger 」等屬性,對不同情況下的內容進行不同顏色背景的標註

<

p class

="bg-muted"

>bg-muted

p>

<

p class

="bg-info"

>bg-info

p>

<

p class

="bg-success"

>bg-success

p>

<

p class

="bg-warning"

>bg-warning

p>

<

p class

="bg-primary"

>bg-primary

p>

<

p class

="bg-danger"

>bg-danger

p>

效果:

Bootstrap入門基礎

最近需要做乙個簡單的web頁面。考慮到前端經驗不足,為了快速產出,同時專案只是乙個工具,對專案沒有什麼要求,所以我選擇了bootstrap這個框架作為web框架。寫從零 學習 bootstrap 的初衷 讓我們先從bootstrap的最簡單的模板開始 讓我們一行行的來看 我用 代表解釋 代表這是ht...

Bootstrap基礎入門

一 bootstrap簡介 二 排版屬性 三 布局模式 四 查詢 五 柵格系統 一 bootstrap簡介 二 排版屬性 lead 使段落突出顯示 small 設定小文字為父文字的85 大小 text left 設定文字左對齊 text center 設定文字居中對齊 text reght 設定文字...

bootstrap入門使用

1.bootstrap使用簡單模板 container類用於固定寬度並支援響應式布局的容器。兩邊有留白 container fluid類用於 100 寬度,佔據全部視口 viewport 的容器。查詢 超小螢幕 手機,小於 768px 沒有任何 查詢相關的 因為這在 bootstrap 中是預設的 ...