解决新版本 Chrome 提示
大概在一些新版本的浏览器中,我们是用 audio 或者 video 进行媒体资源播放的时候,可能会在控制台看到这个输出:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

浣熊 發表在 痞客邦 留言(0) 人氣()

排版
概觀 (Overview)
.container 自適應寬度
.container-fluid 流動寬度
網格系統
.row 橫列
.offset-*-* 偏移(一個元素只有套用一個偏移,若在單一直欄加入2個以上偏移設定,會自動選擇最小的那個)
網格系統裝置寬度
col-xs-* < 576px
col-sm-* >= 576px < 768px
col-md-* >= 768px < 900px
col-lg-* >= 900px < 1200px
col-xl-* >= 1200px
內容
重置 (Reboot)
其他元素
<address> 地址
<abbr> 行內元素
文字排版
標題
<h1>~<h6> 可用h1~h6的標籤
.h1~.h6 當你想匹配某一標題的字體樣式,但不能直接使用 HTML 元素時,也可使用類別
自定義標題
<small>少2級的標題文本,顏色較淡
引用
blockquote標籤+.blockquote類別
<blockquote class="blockquote">
引用來源
<footer class="blockquote-footer">,並將來源名稱包在<cite>中
程式碼
行內程式碼
<code> 須注意避開 HTML 括號
多行程式碼
<pre> 建立預先格式化的文字,請注意避開任何括號,以正確設定區塊影響範圍。
若加上.pre-scrollable類別,當原始碼片段達到350px以上,便會顯示出卷軸
使用者輸入
<kbd> 顯示鍵盤按鍵的元素
圖片
.img-fluid 響應式圖片(較前的版本為.img-responsive)
表格 (Tables)
.table 表格樣式
.table-dark 深色背景淺色文本
.table-striped 條紋行
.table-bordered 帶框表格
.table-borderless 無框表格
.table-hover hover狀態
.table-responsive{-sm|-md|-lg|-xl} 響應式表格
元件
廣告大屏幕
.jumbotron 擴張填滿整個試圖寬度來展示部分內容
.jumbotron-fluid讓廣告屏占滿螢幕寬度、不帶有圓角
按鈕
.btn
當在用於觸發頁面內功能(例如折疊內容)的a元素上使用按鈕時,而不是連結到新頁面或當前頁面中的部分,這些連結應該被賦予 role="button" 適當地傳達他們的目的到螢幕閱讀器等輔助性技術。
按鈕顏色
.btn-light 白底黑字
.btn-secondary 灰底白字
.btn-primary 靛底白字(豪華)
.btn-success 綠底白字(成功)
.btn-info 藍底白字(資訊)
.btn-warning 橘底白字(警告)
.btn-danger 紅底白字(危險)
.btn-link 白底藍字(連結)
.btn-dark 黑底白字
外框按鈕
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-danger
.btn-outline-warning
.btn-outline-info
.btn-outline-light
.btn-outline-dark
按鈕大小
.btn-lg 大
.btn-sm 小
.btn-xs 更小
通用類別
文字 (Text)
文字對齊
.text-left 靠左
.text-center 置中
.text-right 靠右
.text-justify 左右對齊
文字大小寫
.text-lowercase 小寫
.text-uppercase 大寫
.text-capitalize 字首大寫
字體粗細和斜體
.font-weight-bold
.font-weight-bolder
.font-weight-normal
.font-weight-light
.font-weight-lighter
.font-italic
媒體物件
媒體列表
.list-unstyled 移除任何瀏覽器預設清單樣式
.list-inline-item 在li設置並排顯示(前版本為在ul設置.list-inline)
顏色
背景色
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
文字顏色
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
浮動 (Float)
float-left
float-right
float-none
float-*-right響應式

浣熊 發表在 痞客邦 留言(0) 人氣()

將陣列裡的數字x2
Array.forEach()
需先建立一個空陣列,再將值回傳至新陣列

浣熊 發表在 痞客邦 留言(0) 人氣()

OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。
OOCSS(Object Oriented CSS)
兩個原則
Separation of Structure from Skin:分離結構與樣式。結構像是元素的大小,樣式像是顏色等。
Separation of Containers and Content:分離 HTML 與 CSS,意即盡量將可共用的樣式提取到單獨的 class 以供使用。
白話文解釋就是「使用 class 撰寫樣式,每個 class 有其各自用途」。
例如

浣熊 發表在 痞客邦 留言(0) 人氣()

setTimeout()
延遲某段時間 (單位為毫秒) 之後,才去執行「一次」指定的程式碼,並且會回傳一個獨立的timer ID,可以透過 clearTimeout 取消程式碼的執行
var timeoutID = window.setTimeout(( () => console.log("Hello!") ), 1000);
window.clearTimeout(timeoutID);

浣熊 發表在 痞客邦 留言(0) 人氣()

getAttribute
element.getAttribute('data-example');

浣熊 發表在 痞客邦 留言(0) 人氣()

classList.add  新增class
element.classList.add('some-class');

浣熊 發表在 痞客邦 留言(0) 人氣()

大家都知道kick ass有“踢屁股”的意思,可是它還有“了不起”的意思你知道嗎?事實上,美國口語裡有太多的詞是和這個“ass (中國人概念中不登大雅之堂的屁股)”有關。下面我給大家介紹一些你經常會聽到的:
1. Kiss ass 拍馬屁
例如: A: Mary, I'm sorry for cheating on you before. Do you see any chance that we can get back together? Mary,我真的很抱歉對你不忠實。你想我們可不可能重修舊好呢? B: I don't know, but you can kiss my ass. 不知道,不過你可以巴結我。 kiss ass 的意思就是"拍馬屁","cheat"除了作弊外,還有"不忠實"的意思。
2. kick ass 了不起
"kick ass"直譯過來是"踢屁股",美國俚語裡表示輕而易舉地戰勝某人,此人很"牛"。給大家舉個例子:你即將參加一場籃球比賽,你的朋友問你緊張不緊張,你可以說:"They are going to get their asses kicked (他們就等著被打個落花流水吧! ) 再舉個例子: A: Wow, you fixed my computer in less than 10 minutes. You're good. B: Yep. I just kick ass! (那是,我就是厲害!) 美國人中的牛人,狂人經常會用到這個"kick ass"來表示充分的自信。
3. Asshole 不是個東西
"ass"是"屁股","hole"是"洞","asshole"是什麼意思大家應該明白了。根據wikipedia 的英文解釋,"asshole"是一個不雅的用語來表示對某人的厭惡。詞語形容的對象通常是非常刻薄的,自私的,或是粗魯無禮的。 (The word is mainly used as a profanity towards someone the speaker does not like or to express deep contempt for someone whose behavior is hurtful, self-centered or particularly abrasive.) 通常"asshole"用來形容男生的情況比較多。 如果有人毫不留情面的當眾指責你,辱罵你,你可以指著他的鼻子罵一句:"Asshole! "。 如果當你全心全意為他付出了那麼多,而他卻覺得理所應當,甚至是不屑一顧,這也到了罵他一句"Asshole"的時候,表示說:"你真不是個東西!" 如果某人滿嘴髒話,毫無教養,那麼他也配得上一句"You are an asshole!"
4. Jackass 不像話
這個詞在美國也非常常用。想必大家已經清楚了asshole的用法。其實,"jackass" 和"asshole"意思差不多,只不過是語氣上輕了不少,厭惡程度低了不少。如果你沒有那麼討厭這個人,但又一定要發洩心中的怒火,那就吼一句:"You are a jackass! "吧!當然,這個詞也是粗口,使用起來可要小心哦。
5. Pain in the ass
想形容某人很討厭,英文怎麼說? Somebody is pain in the ass。其實,如果你想說得文雅些,避免用"ass"這個詞,可以說"Somebody is pain in the neck."。意思完全一樣,只不過"脖子"上的痛比"屁股"上的痛更見得光些。
轉自:  http://milkrsvs.blogspot.com/2011/07/kick-ass.html

浣熊 發表在 痞客邦 留言(0) 人氣()

under the hood
字面上的翻譯為引擎蓋下
口語化可翻成「其實就是」、「本質上說」、「最終的謎底」
What's under the hood?
葫蘆裡賣什麼藥?

浣熊 發表在 痞客邦 留言(0) 人氣()

<video>標籤
顧名思義就是影片標籤
<source>標籤
插入影片的原始檔位置與類型

浣熊 發表在 痞客邦 留言(0) 人氣()

cloneNode()
複製新的一個元素物件,拷貝所有屬性和值
cloneNode()接受一個可選值為true或false的參數。true表示克隆元素和它的所有子節點,false表示克隆元素但不包含它的子節點。

浣熊 發表在 痞客邦 留言(0) 人氣()

Math.random()
回傳0~1(不包含1)的數字
Math.floor()
去除小數,取得整數
Math.floor(Math.random()*5);
取得0~4的隨機數字

浣熊 發表在 痞客邦 留言(0) 人氣()

1 2 3
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。