iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 668 瀏覽

鐵人賽自我挑戰組 DAY 30

前端超實用框架: Bootstrap 入門到實戰教學系列第 30 篇

技術 Bootstrap 元件| 解析卡片(Card)

下面是一個基本的卡片，最外層卡片本體.card帶有圓角邊框，.card本身是沒有padding的；卡片可以給它設寬度，或是可以用格線系統訂寬度更彈性，否則它們的...

阿沁 ‧ 2023-10-15

0 Like 0 留言 805 瀏覽

鐵人賽自我挑戰組 DAY 29

前端超實用框架: Bootstrap 入門到實戰教學系列第 29 篇

技術 Bootstrap 元件| 按鈕(Button) 與按鈕群組( Button Group)

Button(按鈕) 按鈕算是Bootstrap中非常重要的元件之一，我們不只可以在<button>上使用它，也可以在<a> 或 &lt...

阿沁 ‧ 2023-10-14

0 Like 0 留言 656 瀏覽

鐵人賽自我挑戰組 DAY 28

前端超實用框架: Bootstrap 入門到實戰教學系列第 28 篇

技術 Bootstrap 元件| 標籤(Badge)、麵包屑 (Breadcrumb)

標籤(Badge) 標籤可以用在連結、通知或是按鈕上面，它使用相對字體大小和 em 單位來縮放來符合直屬父容器。.badge的css如下: .badge {...

阿沁 ‧ 2023-10-13

0 Like 0 留言 509 瀏覽

鐵人賽自我挑戰組 DAY 27

前端超實用框架: Bootstrap 入門到實戰教學系列第 27 篇

技術 Bootstrap 元件| 警報 (Alerts)

今天來講bootstrap元件的警報(Alerts)，Alerts可以用簡短的程式碼就能傳達想要的警示情境效果。基本使用 Alerts可以用在任何長度的文本，...

阿沁 ‧ 2023-10-12

0 Like 0 留言 925 瀏覽

鐵人賽自我挑戰組 DAY 26

前端超實用框架: Bootstrap 入門到實戰教學系列第 26 篇

技術 Bootstrap 元件| 手風琴 (Accordion)

今天開始講元件了，bootstrap提供很多實用的元件，基本上是複製官方文件的原始碼，搭配通用類別與helpers就行調整，我們可以輕鬆快速客製化它們變成自己想...

阿沁 ‧ 2023-10-11

0 Like 0 留言 769 瀏覽

鐵人賽自我挑戰組 DAY 25

前端超實用框架: Bootstrap 入門到實戰教學系列第 25 篇

技術 Bootstrap 表單驗證(Validation)

預設瀏覽器就會有表單驗證的功能，在input中加入required屬性。例如: <label for="validationDefault01&...

阿沁 ‧ 2023-10-10

0 Like 0 留言 809 瀏覽

鐵人賽自我挑戰組 DAY 24

前端超實用框架: Bootstrap 入門到實戰教學系列第 24 篇

技術 Bootstrap 表單|浮動標籤、排版

Floating labels(浮動標籤) 如果想要使label浮動在input之內而不占額外空間的話，我們可以在外層加入.form-floating，包覆一對...

阿沁 ‧ 2023-10-09

0 Like 0 留言 434 瀏覽

鐵人賽自我挑戰組 DAY 23

前端超實用框架: Bootstrap 入門到實戰教學系列第 23 篇

技術 Bootstrap 表單| Range, Input Group

Range (範圍滑動) 基本設置在<input type="range">上添加 .form-range 類別使input...

阿沁 ‧ 2023-10-08

0 Like 0 留言 861 瀏覽

鐵人賽自我挑戰組 DAY 22

前端超實用框架: Bootstrap 入門到實戰教學系列第 22 篇

技術 Bootstrap 表單| Checks and radios (核取方塊和選項按鈕)

這篇來講我覺得蠻重要也蠻容易搞錯的核取方塊和選項按鈕。Checks(核取方塊)是多選， radios(選項按鈕)是單選。不論是核取方塊還是選項按鈕，每個選項...

阿沁 ‧ 2023-10-07

0 Like 0 留言 595 瀏覽

鐵人賽自我挑戰組 DAY 21

前端超實用框架: Bootstrap 入門到實戰教學系列第 21 篇

技術 Bootstrap 表單| Form-Select

Form-Select (選擇功能表) 要做一個Form-Select首先我們要在<select>上加上.form-select，就會產生跟<...

阿沁 ‧ 2023-10-06

0 Like 0 留言 856 瀏覽

鐵人賽自我挑戰組 DAY 20

前端超實用框架: Bootstrap 入門到實戰教學系列第 20 篇

技術 Bootstrap 表單| Form-Control 的運用

今天講Form-Control，使用bootstrap的 form-control 類別可以自訂<input>、<textarea>的樣...

阿沁 ‧ 2023-10-05

0 Like 0 留言 354 瀏覽

鐵人賽自我挑戰組 DAY 19

前端超實用框架: Bootstrap 入門到實戰教學系列第 19 篇

技術網頁親和性與Bootstrap 表單overview

甚麼是網頁親和性? 網頁親和性(Web accessibility)，又稱網路無障礙、網路可達性、網路可用性，旨在確保任何人，不論是身體、心理、技術上遭受障礙，...

阿沁 ‧ 2023-10-04

0 Like 0 留言 381 瀏覽

鐵人賽自我挑戰組 DAY 18

前端超實用框架: Bootstrap 入門到實戰教學系列第 18 篇

技術 Bootstrap 的helpers (二) | Stretched link, Text Truncate

Stretched link (延伸連結) 使用 Stretched link類別可以使連結可按範圍延伸到設有position:relative;的外層容器，寫...

阿沁 ‧ 2023-10-03

0 Like 0 留言 2097 瀏覽

鐵人賽自我挑戰組 DAY 16

前端超實用框架: Bootstrap 入門到實戰教學系列第 16 篇

技術 Bootstrap Icon 介紹與使用方式

Bootstap5.0提供了提供了1800 多個免費、高質量又有設計感的Icon圖示可以使用，而且我們也不限定要綁在bootstrap下才能使用，也可以獨立引入...

阿沁 ‧ 2023-10-01

0 Like 0 留言 421 瀏覽

鐵人賽自我挑戰組 DAY 17

前端超實用框架: Bootstrap 入門到實戰教學系列第 17 篇

技術 Bootstrap 的helpers (一)| Clearfix, Color and background, Position, Ratios

Clearfix (清除浮動) 當我們有使用float來做排版時，為了避免外容器沒被撐開的問題，我們可以在外容器添加.clearfix。而它的手法可以從mixi...

阿沁 ‧ 2023-10-02

0 Like 0 留言 637 瀏覽

鐵人賽自我挑戰組 DAY 15

前端超實用框架: Bootstrap 入門到實戰教學系列第 15 篇

技術 Bootstrap 的Utilities (四)| spacing, text, vertical-align, visibility

今天我們把bootstrap utilities學完，那我們開始吧! Spacing bootstrap 的Spacing utilities 提供我們能夠快速...

阿沁 ‧ 2023-09-30

0 Like 0 留言 701 瀏覽

鐵人賽自我挑戰組 DAY 14

前端超實用框架: Bootstrap 入門到實戰教學系列第 14 篇

技術 Botstrap 的Utilities (三)|Object fit, Opacity, Overflow, Position, Shadows, Sizing,

Object fit Object fit可以指定可替換元素（例如：或）的内容應該如何式應到其使用高度和寬度確定的框。寫法是.object-fit-{val...

阿沁 ‧ 2023-09-29

0 Like 0 留言 484 瀏覽

鐵人賽自我挑戰組 DAY 13

前端超實用框架: Bootstrap 入門到實戰教學系列第 13 篇

技術 Bootstrap 的Utilities (二)|Display, Float, Interactions, Pointer events, Colored links

繼昨天color，今天我們從display講起。 Display 我們可以使用.display-*(*為 block, inline-block, inline...

阿沁 ‧ 2023-09-28

0 Like 0 留言 408 瀏覽

鐵人賽自我挑戰組 DAY 12

前端超實用框架: Bootstrap 入門到實戰教學系列第 12 篇

技術 Bootstrap 的Utilities (一)| 介紹, background, border, colors

關於Utilities(通用類別) 與 Helpers(工具) Utilities(通用類別) bootstrap的Utilities是由bootstrap U...

阿沁 ‧ 2023-09-27

0 Like 0 留言 527 瀏覽

鐵人賽自我挑戰組 DAY 11

前端超實用框架: Bootstrap 入門到實戰教學系列第 11 篇

技術 Bootstrap 格線系統與Flex Box之運用(二)

上一篇我們講的flex屬性、justify-content屬性、align-items屬性、align-self屬性，這一篇我們繼續講Bootstrap fle...

阿沁 ‧ 2023-09-26

0 Like 0 留言 848 瀏覽

鐵人賽自我挑戰組 DAY 10

前端超實用框架: Bootstrap 入門到實戰教學系列第 10 篇

技術 Bootstrap 格線系統與Flex Box之運用(一)

flex不管在排版上還是對齊上都可以快速方便地實踐，而且bootstrap像是格線系統或是很多元件都有使用到flex，這一篇我們就來學bootstrap 的Fl...

阿沁 ‧ 2023-09-25

0 Like 0 留言 974 瀏覽

鐵人賽自我挑戰組 DAY 9

前端超實用框架: Bootstrap 入門到實戰教學系列第 9 篇

技術 Bootstrap格線系統用法教學 | Row-Cols與gutter

上一篇我們學了如何在column上設定寬度與排版，事實上我們也可以用.row-cols-* 的類別快速設置想要內容與排版的列數。 Row-Cols 基本用法寫...

阿沁 ‧ 2023-09-24

0 Like 0 留言 721 瀏覽

鐵人賽自我挑戰組 DAY 8

前端超實用框架: Bootstrap 入門到實戰教學系列第 8 篇

技術 Bootstrap格線系統用法教學 | Column之運用

繼上篇說明了Bootstrap排版三劍客:container(容器), row(橫列), column(直欄)之後，今天這篇我們來學格線系統Column的用法。...

阿沁 ‧ 2023-09-23

0 Like 0 留言 502 瀏覽

鐵人賽自我挑戰組 DAY 7

前端超實用框架: Bootstrap 入門到實戰教學系列第 7 篇

技術 Bootstrap 格線系統之排版三劍客

上一篇文章有提到Bootstrap格線系統的排版三劍客: container(容器)、row(橫列)、column(直行)，今天就來介紹它們。一、Contai...

阿沁 ‧ 2023-09-22

0 Like 0 留言 614 瀏覽

鐵人賽自我挑戰組 DAY 6

前端超實用框架: Bootstrap 入門到實戰教學系列第 6 篇

技術 Bootstrap格線系統之【響應式中斷點】

Bootstrap中很重要的功能就是響應式格線系統，我們可以使用格線系統來創建多種佈局，無論是簡單的兩列還是複雜的多列佈局都可以輕鬆用少少的class就完成，此...

阿沁 ‧ 2023-09-21

0 Like 0 留言 808 瀏覽

鐵人賽自我挑戰組 DAY 4

前端超實用框架: Bootstrap 入門到實戰教學系列第 4 篇

技術 Bootstrap 圖片、圖片區與表格

今天我們來認識Bootstrap content(內容) 的圖片、圖片區與表格。本教學是幫助朋朋快速理解Bootstrap 官方文件，所以建議搭配官方文件服用。...

阿沁 ‧ 2023-09-19

0 Like 0 留言 6070 瀏覽

鐵人賽自我挑戰組 DAY 3

前端超實用框架: Bootstrap 入門到實戰教學系列第 3 篇

技術 Bootstrap Typography，強大的排版工具

Bootstrap提供了強大的排版（Typography）工具，讓我們可以輕鬆地設計出優雅的文字內容。在這篇文章中，我會介紹如何使用 Bootstrap 來幫助...

阿沁 ‧ 2023-09-18

0 Like 0 留言 822 瀏覽

鐵人賽自我挑戰組

前端超實用框架: Bootstrap 入門到實戰教學系列第 31 篇

技術修改Bootstrap Sass 變數，客製化Bootstrap

修改 Bootstrap 的 SASS 變數是自定義主題和風格的關鍵部分，之後使用起來可以更輕鬆達到自己想要的效果。那現在我們就開始吧! 1.導入Bootstr...

阿沁 ‧ 2023-10-22

0 Like 0 留言 962 瀏覽

鐵人賽自我挑戰組 DAY 2

前端超實用框架: Bootstrap 入門到實戰教學系列第 2 篇

技術 CSS Reset 必備知識與Bootstrap CSS Reset

CSS Reset知識何謂 CSS Reset CSS Reset(CSS重置)，是網頁設計中一個重要的概念，用來清除不同瀏覽器(EX:Chrome、Fire...

阿沁 ‧ 2023-09-17

0 Like 0 留言 760 瀏覽

鐵人賽自我挑戰組 DAY 5

前端超實用框架: Bootstrap 入門到實戰教學系列第 5 篇

技術 Bootstrap 設計原則與CSS變數

Bootstrap 設計原則 Bootstrap的設計原則是採用架構與樣式分離原則，架構就像是房屋的結構，有方體、長條、圓柱等架構；而樣式就像是房屋的裝潢樣式，...

阿沁 ‧ 2023-09-20