表格、表單、按鈕與圖片

2024 iThome 鐵人賽

DAY 16

自我挑戰組

HTML跨平台網頁設計系列第 22 篇

16th鐵人賽

naco727

2024-10-07 23:57:45

48 瀏覽

分享至

B O O T S T R A P的表格

在B O O T S T R A P中加入table元素食套用點table類別就會自動整理表格格式。在結構中thread元素包含的表頭，tbody元素包含的表格內容。除了將表格寬度設置適當大小，每個儲存格都有內聚每一列都會加上底線。
表格預設是淡色的配色，若在table元素再套用.table-Dark類別，則表格會反轉為深色配色。若再加上.table-striped就能讓表格每一列加上顏色。

B O O T S T R A P的表單佈局

加入F O R M元素後會預先加入基本的樣式
最常使用表單的元素為Input TextArea 以及select並加入F O R M-control類別，預設會將寬度設定為100%
每個元素可搭配level元素，加上說明標籤並加入form Label類別，放置在同一個DIY元素容器中已達到合適的配置。