影片教學 程式碼回顧 <!DOCTYPE html> <html lang="en"> <head>...
影片教學 程式碼重點回顧 <!DOCTYPE html> <html lang="en"> <head>...
寫到這裡，大家應該會發現，Bootstrap雖然方便，但是許多功能都已經寫死，導致我們無法更動一些小細節，因此我們在這裡會教大家，如何改寫Bootstrap的原...
Tab特效另外一個常用的特效是tab，這個特效可以讓我們在眾多的按鈕之中做切換，並出現相對應的文章。HTML: <a data-toggle="...
下面是一個基本的卡片，最外層卡片本體.card帶有圓角邊框，.card本身是沒有padding的；卡片可以給它設寬度，或是可以用格線系統訂寬度更彈性，否則它們的...
阿沁
‧
2023-10-15
使用內嵌Youtuber播放介面1.在Youtube上找到我們要的影片並且直接對著畫面按下右鍵，就會跑出選單2.點選「複製嵌入程式碼」3.直接將整段程式碼貼在&...
接著我們設計6個div標籤，分別在超小型裝置的時候顯示2個一排、小型裝置的時候顯示3個以及大型裝置的時候6個一排各，排法如下: <div c...
在學會Bootstrap之後，我們接著使用Bootstrap來實做網頁，在我的附檔中，我們已經引用並且設定好<div></div>每個標...
Button(按鈕) 按鈕算是Bootstrap中非常重要的元件之一，我們不只可以在<button>上使用它，也可以在<a> 或 <...
阿沁
‧
2023-10-14
在不同的裝置上面，由於螢幕大小的不同，會使得我們的文字面版顯得擁擠。因此，我們會希望在左右兩邊適當的留白，如此才能讓文字更集中，且適當的換行。在引用Bootst...
標籤(Badge) 標籤可以用在連結、通知或是按鈕上面，它使用相對字體大小和 em 單位來縮放來符合直屬父容器。.badge的css如下: .badge {...
阿沁
‧
2023-10-13
Bootstrap中有一個特殊的網格系統，可以讓我們非常方便的進行切版。 網址:https://getbootstrap.com/docs/5.3/layout...
今天來講bootstrap元件的警報(Alerts)，Alerts可以用簡短的程式碼就能傳達想要的警示情境效果。 基本使用 Alerts可以用在任何長度的文本，...
阿沁
‧
2023-10-12
預設瀏覽器就會有表單驗證的功能，在input中加入required屬性。例如: <label for="validationDefault01&...
阿沁
‧
2023-10-10
今天會藉由昨天提到的幾個元件，實際舉範例來說明該如何應用、變化，我個人覺得在腦海中想好畫面最後完成的樣子很重要，我自己習慣的方式是利用VSCode預覽模式，嘗試...
昨天說到Bootstrap的基本內容，Bootstrap很好用的其中一點就是結合了許多前端會使用的元素，製作成元件讓我們可以直接取用，今天會來講講Bootstr...
不敢相信，我完成2/3的鐵人賽了！接下來也要加油！今天開始是一系列的Bootstrap內容，會從最基本的觀念開始，並推薦常用元件及應用、變化。前面的天數我們談到...
Range (範圍滑動) 基本設置 在<input type="range">上添加 .form-range 類別使input...
阿沁
‧
2023-10-08
這篇來講我覺得蠻重要也蠻容易搞錯的核取方塊和選項按鈕。Checks(核取方塊)是多選， radios(選項按鈕)是單選。 不論是核取方塊還是選項按鈕，每個選項...
阿沁
‧
2023-10-07
Form-Select (選擇功能表) 要做一個Form-Select首先我們要在<select>上加上.form-select，就會產生跟<...
阿沁
‧
2023-10-06
今天講Form-Control，使用bootstrap的 form-control 類別可以自訂<input>、<textarea>的樣...
阿沁
‧
2023-10-05
今日內容概要 計算機三大核心硬體 操作系統 程式語言的分類 python解釋器 運行python程序的三種方式 mac、windows電腦安裝python解釋...
今日總結 typora軟件 下載與安裝 文件路徑 主要功能 markdown語法 技術文章編寫教程 計算機本質 計算機五大組成部分 計算機三大核心硬件...
問題說明 使用bootstrap的selectpicker(下拉清單)連動調整grid呈現的資料時，雖然有下selectpicker選項調整時也要refresh...
在進行專案時發生一個套件衝突的小問題，當我想在 Bootstrap Modal 上使用 vue-loading-overlay 的 loading 時，會報錯：...
今天就要來介紹在RWD中常使用到的 Grid system 網格系統 又可以稱作柵欄式佈局Bootstrap官網教學▼首先先來看以下這張圖▼由**欄位 (col...
專案開發技巧篇(五) : Bootstrap 元件客製化 每日一談 嗨，大家好 ! 我是阿蘇今天是Day27 ，今天分享的是 Bootstrap 元件客製化教...
專案開發技巧篇(四) : Bootstrap 元件 每日一談 嗨，大家好 ! 我是阿蘇今天是Day26 ， 剩下最後倒數幾天，快要完結篇啦 !!今天分享的是...
專案開發技巧篇(三) : Variable、Utilities 每日一談 嗨，大家好 ! 我是阿蘇今天是Day25 ，在這篇會詳細說明 Variable、Ut...
專案開發技巧篇(二) : Bootstrap 開發響應式網頁 每日一談 嗨，大家好 ! 我是阿蘇今天是Day24 ，今天分享的是 以 Boostrap 為核...
Ericostco
ThisIsFrankTsai
luna0228
我是誰我在哪...
阿蘇蘇
iThome鐵人賽
看影片追技術