iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Modern Web

不斷片(篇)挑戰系列 第 6

<DAY 6> 設定Bootstrap的背景,輕鬆上手

  • 分享至 

  • xImage
  •  

哈囉!今天是鐵人賽的第6天,各位有好好的按時繳交文章嗎?今天要給各位呈上Bootstrap預設的背景顏色,這一章十分容易就不多做贅述,就讓我們進入背景顏色設定和修改吧!

基本背景顏色設定

  • Bootstrap基本背景顏色程式碼
背景顏色呈現示意圖
<div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-success">bg-success</div>
<div class="bg-danger">bg-danger</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-info">bg-info</div>
<div class="bg-dark">bg-dark</div>
<div class="bg-white">bg-white</div>
<div class="bg-transparent">bg-transparent</div>

背景透明程度設定

  • 接下來是關於背景顏色的透明度呈現以及其程式碼和範例
背景顏色透明度呈現
<div class="bg-primary bg-opacity-100">bg-primary bg-opacity-100</div>
<div class="bg-primary bg-opacity-75">bg-primary bg-opacity-75</div>
<div class="bg-primary bg-opacity-50">bg-primary bg-opacity-50</div>
<div class="bg-primary bg-opacity-25">bg-primary bg-opacity-25</div>
<div class="bg-primary bg-opacity-10">bg-primary bg-opacity-10</div>

以上為介紹bootstrap在背景顏色和透明程度上的設定,關於修改bootstrap預設值會在日後文章出現,謝謝各位大佬們的閱讀,第6天的鐵人賽就這麼結束囉!


上一篇
<DAY 5> 從Bootstrap 5理解容器(下),能不能好好的把東西裝進容器收好
下一篇
<DAY 7> border樣式簡單使用(上)
系列文
不斷片(篇)挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言