【Bootstrap】selector

説明 用以Bootstrap為基底的函式庫做出美觀的selector picker 官網 CDN (2.0.0 beta-1) 【必裝的函式庫】 jQuery.js(jQuery要放在最上面) bootstrap.js bootstrap.css bootstrap-select.js bootstrap-select.css 範例 用法:使用 <select> ,並且帶上 selectpicker 的 class select.selectpicker option one option two option three Display CODEPEN

【CSS】漸層色塊

漸層原理説明 撰寫漸層時,要指定多組參數。每一組參數要有〖顏色〗與〖%數〗 .box .box width: 500px height: 200px //left: 指定〖從左〗開始漸層 background: linear-gradient(left, DarkGreen 20%, MediumSeaGreen 70%) ▼示意圖 第1組參數:〖起始色〗深綠色、〖%數〗20% 0%~20% →深綠色純色區 第2組參數:〖終色〗淺綠色、〖%數〗70% 20%~70%→漸層區域 70%~100%→淺綠色純色區 色塊 漸層區的定義是「第1個%」與「第2個%」之間的區塊, 所以如果「第2個%」指定跟「第1個%」一樣的數字,就無法產生漸層區,會形成色塊。 線性漸層色塊 .lg-box .lg-box width: 300px height: 100px border: 1px solid #000 background: linear-gradient(Left, Teal 50%, transparent 50%) Display 圓形漸層色塊 圓形漸層如果參數指定的剛剛好一樣,會有顏色轉換處會有鋸齒產生,所以需要預留數%的漸層空間。 .rd-box .rd-box width: 200px height: 200px border-radius: 100% border: […]

【CSS】radio style

説明 自由撰寫radio input的樣式,但是保有 checked 的功能 【架構】 <label>裡面要有 2 個東西:<input type=”radio”>、<div class=”radio-widget”> ※這樣點到label裡面任何一處,<input type=”radio”>都會被觸發 radio-widget是假的radio,在〔.radio-widget〕做出勾選前的樣式 在〔input[type=”radio”]:checked+.radio-widget〕撰寫勾選後的樣式 參考:input label 應用、漸層色塊 衍生:checkbox style 範例 label.radio-label input(type=”radio” name=”rd” id=”rd1″ value=”1″ checked) .radio-widget | option 1 label.radio-label input(type=”radio” name=”rd” id=”rd2″ value=”2″ checked) .radio-widget | option 2 label.radio-label input(type=”radio” name=”rd” id=”rd3″ value=”3″ checked) .radio-widget | option 3 .radio-label margin: 0px 5px […]

【CSS】checkbox style

説明 自由撰寫checkbox的樣式,但是保有 checked 的功能 【架構】 <label>裡面要有 2 個東西:<input type=”checkbox”>、<div class=”checkbox-widget”> ※這樣點到label裡面任何一處,<input type=”checkbox”>都會被觸發 checkbox-widget是假的checkbox,在〔.checkbox-widget〕做出勾選前的樣式 在〔input[type=”checkbox”]:checked+.checkbox-widget〕撰寫勾選後的樣式 參考:input label 應用 衍生:radio style 範例 label.checkbox-label input(type=”checkbox” value=”1″) .checkbox-widget | checkbox 1 label.checkbox-label input(type=”checkbox” value=”1″) .checkbox-widget | checkbox 2 label.checkbox-label input(type=”checkbox” value=”1″) .checkbox-widget | checkbox 3 .checkbox-label .checkbox-widget, input display: inline-block vertical-align: top //在這裡刻出自訂樣式的checkbox .checkbox-widget width: 20px height: 20px margin-right: […]

【CSS】smooth

説明 滑順滾動的屬性,讓網頁內引導<href=”#id”>的動作可以滑順地跳下來 瀏覽器支援度→Can I Use … 範例 方法一:指定CSS a(href=”#title”) button click me //這邊填充很多個br h1#title title * scroll-behavior: smooth Display click me 方法二:指定JavaScript button(onclick=”scrollIt()”) click me function scrollIt(){ window.scroll({ top: 0, left: 0, behavior: “smooth” }); } Display click me

【CSS】border-collapse 表格消除空隙

情況 table 預設的 style 方格與方格之間會有空隙 (在table, td, th都有設定border的情況下會很明顯) 解決:border-collapse table tr th Items th Price tr td Apple td $10 tr td Orange td $15 table, td, th border: 1px solid black table border-collapse: collapse Display 沒有加border-collapse的情況 Items Price Apple $10 Orange $15 有使用border-collapse的情況 Items Price Apple $10 Orange $15

【JavaScript】smalot-bootstrap-datetimepicker

説明 這是一套基於BS的函式庫,可以快速製作時間選擇器的小元件。 官網 CDN (2.4.4) 【必裝的函式庫】 jQuery.js(jQuery要放在最上面) bootstrap-datetimepicker.js(修改版:使用fontawesome) bootstrap-datetimepicker.css bootstrap.css font-awesome.css 屬性介紹 format【字串形式】 值 意義 p am / pm P AM / PM s 秒(沒有0開頭) ss 秒(有0開頭) i 分(沒有0開頭) ii 分(有0開頭) h 時(沒有0開頭,24小時制) hh 時(有0開頭,24小時制) H 時(沒有0開頭,12小時制) HH 時(沒有0開頭,12小時制) d 日期(沒有0開頭) dd 日期(有0開頭) m 數字月份(沒有0開頭) mm 數字月份(有0開頭) M 英文月份簡寫 MM 英文月份全名 yy 西元年(末二位數) yyyy 西元年(四位數) […]

【CSS】height transition

説明 CSS展開動畫:點選收起來的選單→觸發動作開啓選單 開啓狀態下的選單區塊,高度寫inherit的話,無法完成動態效果,所以要用max-height的方式完成 .outer 收合的選單 (hover me) .inner p 選單内部 p 選單内部 p 選單内部 .outer background-color: #E7F2F1 display: inline-block padding: 10px &:hover .inner max-height: 150px //不用精準設定到元素高度,元素只會展開到他自己的高度。數字可以抓大一點,數字越大展開的速率越快。 .inner background-color: #439E96 padding: 0px 10px margin: 5px max-height: 0 overflow: hidden transition-duration: 0.5s Display 收合的選單 (hover me) 選單内部 選單内部 選單内部