你們好!今天是鐵人賽的第七天，今天要介紹的是關於bootstrap的border設定，不得不說bootstrap真是非常容易上手規劃前端的開發工具，裡面有很多基本的工具，一下子就能規畫出一個好看的前端頁面，接下來就進入今天的主題，border的各種方便快速開發頁面的程式碼。

border邊框顯示

border邊框顯示

• 下面是border設定的程式碼，依照自己對border的需求選擇並使用。

<div class="border">border</div>
<div class="border-top">border-top</div>
<div class="border-bottom">border-bottom</div>
<div class="border-start">border-start</div>
<div class="border-end">border-end</div>

border邊框隱藏

border邊框隱藏

• 下面是border對特定邊進行隱藏的程式碼

<div class="border border-0">border-0</div>
<div class="border border-top-0">border-top-0</div>
<div class="border border-bottom-0">border-bottom-0</div>
<div class="border border-start-0">border-start-0</div>
<div class="border border-end-0">border-end-0</div>

border邊框各式顏色

border邊框顏色

• 下面是關於border對邊框的顏色進行改變的程式碼

<div class="border-dark">border-dark</div>
<div class="border-danger">border-danger</div>
<div class="border-info">border-info</div>
<div class="border-primary">border-primary</div>
<div class="border-secondary">border-secondary</div>
<div class="border-success">border-success</div>
<div class="border-warning">border-warning</div>
<div class="border-white">border-white</div>

今天筆記關於border邊框樣式和顏色，都是在bootstrap上能應用到的程式碼，在不同的使用搭配下也能起到不錯的排版效果，在看了其他參加鐵人賽的人，希望下次鐵人賽開賽能寫出不錯的文章。