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

0 Like 0 留言 451 瀏覽

鐵人賽自我挑戰組

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

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

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

阿沁 ‧ 2023-10-22

0 Like 0 留言 317 瀏覽

鐵人賽影片教學 DAY 29

一起來實作響應式網頁設計系列第 29 篇

技術一起來實作響應式網頁設計：探究Bootstrap Day29

影片教學程式碼重點回顧 <!DOCTYPE html> <html lang="en"> <head&gt...

Ericostco ‧ 2023-10-14

0 Like 0 留言 444 瀏覽

鐵人賽自我挑戰組 DAY 26

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

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

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

阿沁 ‧ 2023-10-11

0 Like 0 留言 370 瀏覽

鐵人賽自我挑戰組 DAY 24

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

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

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

阿沁 ‧ 2023-10-09

0 Like 0 留言 357 瀏覽

鐵人賽 SideProject30 DAY 22

30天製作RWD個人品牌網站系列第 22 篇

技術 Day22. 網站開發過程(四) Bootstrap應用、變化

今天會藉由昨天提到的幾個元件，實際舉範例來說明該如何應用、變化，我個人覺得在腦海中想好畫面最後完成的樣子很重要，我自己習慣的方式是利用VSCode預覽模式，嘗試...

luna0228 ‧ 2023-10-07

0 Like 0 留言 432 瀏覽

鐵人賽 SideProject30 DAY 21

30天製作RWD個人品牌網站系列第 21 篇

技術 Day21. 網站開發過程(三) Bootstrap常用元件：Collapse、Accordion、Modal、Navbar

昨天說到Bootstrap的基本內容，Bootstrap很好用的其中一點就是結合了許多前端會使用的元素，製作成元件讓我們可以直接取用，今天會來講講Bootstr...

luna0228 ‧ 2023-10-06

0 Like 0 留言 336 瀏覽

鐵人賽 SideProject30 DAY 20

30天製作RWD個人品牌網站系列第 20 篇

技術 Day20. 網站開發過程(二) Bootstrap介紹、常用語法

不敢相信，我完成2/3的鐵人賽了！接下來也要加油！今天開始是一系列的Bootstrap內容，會從最基本的觀念開始，並推薦常用元件及應用、變化。前面的天數我們談到...

luna0228 ‧ 2023-10-05

0 Like 0 留言 371 瀏覽

鐵人賽自我挑戰組 DAY 20

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

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

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

阿沁 ‧ 2023-10-05

0 Like 0 留言 376 瀏覽

鐵人賽 Modern Web DAY 24

打造你的第一個網站系列第 24 篇

技術第二十四天-引用Bootstrap元件(Components)至專案中

什麼是Bootstrap?Bootstrap是一組用於網站和網路應用程式開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單...

ThisIsFrankTsai ‧ 2023-10-04

0 Like 0 留言 175 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

阿沁 ‧ 2023-10-04

0 Like 0 留言 172 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

阿沁 ‧ 2023-10-03

0 Like 0 留言 211 瀏覽

鐵人賽自我挑戰組 DAY 17

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

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

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

阿沁 ‧ 2023-10-02

0 Like 0 留言 867 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 Bootstrap Icon 介紹與使用方式

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

阿沁 ‧ 2023-10-01

0 Like 0 留言 296 瀏覽

鐵人賽自我挑戰組 DAY 15

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

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

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

阿沁 ‧ 2023-09-30

0 Like 0 留言 321 瀏覽

鐵人賽自我挑戰組 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 留言 269 瀏覽

鐵人賽自我挑戰組 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 留言 229 瀏覽

鐵人賽自我挑戰組 DAY 12

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

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

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

阿沁 ‧ 2023-09-27

0 Like 0 留言 300 瀏覽

鐵人賽自我挑戰組 DAY 11

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

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

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

阿沁 ‧ 2023-09-26

0 Like 0 留言 336 瀏覽

鐵人賽自我挑戰組 DAY 10

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

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

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

阿沁 ‧ 2023-09-25

0 Like 0 留言 493 瀏覽

鐵人賽自我挑戰組 DAY 9

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

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

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

阿沁 ‧ 2023-09-24

0 Like 0 留言 422 瀏覽

鐵人賽自我挑戰組 DAY 8

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

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

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

阿沁 ‧ 2023-09-23

0 Like 0 留言 290 瀏覽

鐵人賽自我挑戰組 DAY 7

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

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

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

阿沁 ‧ 2023-09-22

0 Like 0 留言 328 瀏覽

鐵人賽自我挑戰組 DAY 6

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

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

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

阿沁 ‧ 2023-09-21

0 Like 0 留言 458 瀏覽

鐵人賽自我挑戰組 DAY 5

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

技術 Bootstrap 設計原則與CSS變數

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

阿沁 ‧ 2023-09-20

0 Like 0 留言 372 瀏覽

鐵人賽自我挑戰組 DAY 4

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

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

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

阿沁 ‧ 2023-09-19

0 Like 0 留言 5637 瀏覽

鐵人賽自我挑戰組 DAY 3

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

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

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

阿沁 ‧ 2023-09-18

0 Like 0 留言 573 瀏覽

鐵人賽自我挑戰組 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 留言 1379 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 Bootstrap入門指南：開始使用簡單強大的前端框架

如果你是一位從事前端開發的人，那麼 Bootstrap 將成為你的得力助手。它是世界上最受歡迎的框架，用於建立響應式、行動優先的網站。為網站和應用程式的設計和開...

阿沁 ‧ 2023-09-16

0 Like 0 留言 406 瀏覽

技術【程式開發筆記06】初學React.js 以及 react-bootstrap

React JS:用來實作使用者介面的 JavaScript 函式庫組件(Component):React component 需要實做 render()...

PinShengs ‧ 2023-07-27

1 Like 0 留言 1767 瀏覽

鐵人賽 Modern Web DAY 29

Django 初心者之旅系列第 29 篇

技術【Day 29】Django 網頁美化篇 - Ctrl+C/V 的魔法

今天是鐵人賽的倒數第二篇，在這篇文章內，我們會透過前端框架Bootstrap來幫忙進行網頁美化的工作。Bootstrap是一個結合HTML、CSS、JavaSc...

Xiang1009 ‧ 2022-10-14

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

技術 一起來實作響應式網頁設計：探究Bootstrap Day29