本系列教學文將深入探索 Bootstrap 5 框架的強大功能和靈活性,我們會從基礎開始到探討如何建立一個優秀的響應式網站。
系列的基礎部分將介紹 Bootstrap 的核心組件,如網格系統、utility、helper、導航欄和按鈕。說明他們的原理與如何做修改,使它們能無縫融入自己的專案中。
再來,我們將深入研究更高級的組件,如卡片、輪播、表單,以及彈出式對話框,為讀者構建更豐富的用戶界面。
最後,我們會將所學的知識點實作,去開發一個屬於自己的網站,讓讀者去整合、了解bootstrap 框架如何實踐在真正的項目上,並愛上bootstrap。
Form-Select (選擇功能表) 要做一個Form-Select首先我們要在<select>上加上.form-select,就會產生跟<...
這篇來講我覺得蠻重要也蠻容易搞錯的核取方塊和選項按鈕。Checks(核取方塊)是多選, radios(選項按鈕)是單選。 不論是核取方塊還是選項按鈕,每個選項...
Range (範圍滑動) 基本設置 在<input type="range">上添加 .form-range 類別使input...
Floating labels(浮動標籤) 如果想要使label浮動在input之內而不占額外空間的話,我們可以在外層加入.form-floating,包覆一對...
預設瀏覽器就會有表單驗證的功能,在input中加入required屬性。例如: <label for="validationDefault01&...
今天開始講元件了,bootstrap提供很多實用的元件,基本上是複製官方文件的原始碼,搭配通用類別與helpers就行調整,我們可以輕鬆快速客製化它們變成自己想...
今天來講bootstrap元件的警報(Alerts),Alerts可以用簡短的程式碼就能傳達想要的警示情境效果。 基本使用 Alerts可以用在任何長度的文本,...
標籤(Badge) 標籤可以用在連結、通知或是按鈕上面,它使用相對字體大小和 em 單位來縮放來符合直屬父容器。.badge的css如下: .badge {...
Button(按鈕) 按鈕算是Bootstrap中非常重要的元件之一,我們不只可以在<button>上使用它,也可以在<a> 或 <...
下面是一個基本的卡片,最外層卡片本體.card帶有圓角邊框,.card本身是沒有padding的;卡片可以給它設寬度,或是可以用格線系統訂寬度更彈性,否則它們的...