bootstrap學習筆記02-公共樣式

1.文字顏色

.text-success:成功綠

.text-danger：危險紅

具體樣式參考：字體顏色

代碼示例：

<!--字體添加樣式-->
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>

2.背景顏色

.bg-success:成功綠

.bg-danger：危險紅

具體樣式參考：背景顏色

代碼示例：

<!--給段落添加背景顏色-->
<p class="bg-success">.text-success</p>
<p class="bg-danger">.text-danger</p>

3.邊框

1）邊框顏色：

.border-success:成功綠

.border-danger：危險紅

具體樣式參考：邊框顏色及樣式

代碼示例：

<div class="border border-success"></div>

2）圓角邊框

代碼示例：

<!--四周都帶圓角-->
<div class="border rounded"></div>
<!--圓形邊框-->
<div class="border rounded-circle"></div>
<!--圓形邊框-->
<div class="border rounded-pill"></div>
<!--無圓角邊框-->
<div class="border rounded-0"></div>

4.顯示屬性

.d-{value} 用於小屏幕適配（即手機適配）

.d-{breakpoint}-{value} 用於 sm、md、lg、xl等多設備適配

代碼示例：

<p class="bg-success d-inline">我是時代峯峻收到後</p>

頁面顯示效果：

5.浮動

.float-left：左浮動

.float-right:右浮動

代碼示例：

<!--clearfix清除父元素的浮動，使其可以顯示背景顏色-->
<div class="bg-success clearfix">
    <div class="float-left">左浮動</div>
    <div class="float-right">右浮動</div>
</div>

6.間隔

m - 這個Class屬性會設定 margin（外邊距）值。m-0清除margin，m-auto水平居中

p - 這個Class屬性會設定 padding（內邊距）值

詳細說明參考鏈接間隔

代碼示例：

<div class="bg-success m-2" style="height: 100px; width: 100px;">我是div</div>
<div class="bg-success p-2" style="height: 100px; width: 100px;">我是div</div>

7.快速去除項目符號

.list-unstyled：快速去除項目符號

代碼示例：

<ul class="list-unstyled">
    <li>jkjkj</li>
    <li>jkjkj</li>
    <li>jkjkj</li>
</ul>

8.快速設置圖片等比拉伸

.img-fluid:快速設置圖片等比拉伸

代碼示例：

<img src="1.jpg" alt="" class="img-fluid">