Bootstrap 3 與 4的差別列表

這邊有一張表可以參考

Differences Between Bootstrap 3 and Bootstrap 4

下載 : Bootstrap 4 GitHub

ASP.Net MVC 5使用 bootstrap 3 typeahead和 modal實作電話查詢

bootstrap model開啟後馬上又自動關閉

相關文章：Bootstrap Modal immediately disappearing

剛好我就是這個原因，因為我是使用 asp.net mvc開發
不小心使用了 script.render載入了兩次 bootstrap.js，後來拿掉後就沒有這個問題了

Bootstrap Typeahead處理 json格式資料，並更新另一個 input的值

參考文件： Bootstrap typeahead ajax result format - Example

因為 Bootstrap Typeahead的 source是一個字串陣列 (string array)，如果使用者希望可以 source可以是 json string array而且在 typeahead選擇時可以更新另一個 input的值，這一篇文章就可以幫助你，作法如下

1. source 接回的是 json string array
2. 實作 matcher, sorter, highlighter
3. 實作 updater，在這邊就可以用 JSON.parse 處理 obj，再把某個 attribute值指定給特定的input

多個 fullcalendar顯示在同一個網頁注意事項 - 使用 bootstrap tab

參考文件：fullcalendar render















目前使用者希望各別會議的預約能夠獨立顯示，所以我想到的是用 bootstrap tab的方式，
在取得 json event array後動態產生一個 tab和一個 fullcalendar div只顯示單一會議室的 events，
雖然我覺得這樣的作法不好，因為如果有30、40個會議室的話，tab就有 30個，提供這個功能是希望使用者能一眼就看出那個時段比較少的會議室預約，所以比較徧好單一 fullcalendar顯示所有的 events，不同的會議室 event用不同的顏色作區別。

我的作法如下：

bootstrap 使用css transform後會造成 nav bar閃爍(flicker)的問題 in chrome

參考文件：Prevent flicker on webkit-transition of webkit-transform

因為實作CSS Animation - 以小米為師時，發現只要移動滑鼠滾輪時，bootstrap nav bar就會一閃一閃的，眼睛很不舒服，可是在 IE 11上就沒這個問題，這是因為 css使用了 -webkit-transform  造成的，解決方式就是在 body內加上 -webkit-backface-visibility : hidden; 即可

我的工作小記事

2002 ~ 2024 在資通電腦使用 J2EE, JSP技術幫台積電開發 EIC(工程師資訊)系統，原本台積已經有這一套系統是用 Delphi開發 ActiveX程式，但要改掉使用當時最流行的 Java EJB, JSP等，我的工作在有限的一星期內要讓系統上有相關圖表顯示製程良率資訊，否則專案將會失敗，後來成功實作 JClass圖表讓專案成功。

2004 ~ 2006 在華聯生技個人開發 Oligo Control System讓使用者管控生物晶片最重要的原料 Oligo(DNA片段)，從進料至生產的控管，讓晶片上 DNA探針完全符合生產要求。
晶片說明：Phalanx Human One Array

2009 使用 Asp.Net 2.0技術改版勝華科技官網
         使用 Flex 3+ J2EE技術開發儀器管理系統 儀器管理系統 Demo
         導入 web service應用，讓 Notes可以跟其它系統作資料溝通
2010 協助勝華科技導入 Oracle ERP ( EBS) R12，負責模組 GL, AP, PO, NM, GV
2012 建置實作 OAuth Server讓自己開發的系統作認證、授權用 OAuth實作文章

2015~ 2016 利用 Asp.Net MVC 5技術在兩星期內開發預算系統，
         包含鉅茂 ERP資訊讀取、DB Objects建立、.Net程式碼開發、前端網頁開發等
         Portal建置，使用 bootstrap 3, jquery, fullcalendar等前端 java script程式開發
         Bootstrap實作相關

2017~2018  PLM收尾，完成驗收

 

2018 ~2019 導入 SAP ERP，團隊建罝，使用者端需求管理，Server問題排除等

 

2019 ~2023 改善資安，設備更換，導入 802.1x，資安政策建立等

 

 

 

bootstrap範例網站

範例網址：bootply    jsfiddle

Template & Theme：Start Bootstrap

這兩個網站有很多的範例可以參考，包含 java script程式碼，css，html的語法，最重要的是可以直接就看到執行結果，非常方便，有興趣的人可以來這邊找到你想要的答案

開啟 bootstrap modal會造成首頁內容左移 (shit to left)

解決方式 Twitter Bootstrap modal pushes html content to the left

主要的作法就是在 css加上如下內容

html {
  overflow: hidden;
  height: 100%;}
body {
  overflow: auto;
  height: 100%;}

/* unset bs3 setting */.modal-open {
 overflow: auto; 
}

Fullcalendar popover

參考文章： "Singleton" Bootstrap Popover with Close Button - JSFiddle,
                     How to close previous popovers in fullCalendar?

目前我的日曆希望能點選事件 (event)時可以有 bootstrap popover功能出現且規則如下

1. 一次只能有一個 popover出現
2. 點選  event時，只顯示該 event popover
3. 點選 day時要把顯示的 popover關閉，如果有 more視窗存在，也要一併關閉
4. 因為有設定 eventLimt，所以在點選 more時，要把 popover關閉

參考的文章是使用 fn.extend方式 (jquery extend比較像合併(merge)觀念，並非物件導向的繼承), 先作一個 function內有 popover template，然後再合併原本的 event element，這樣就可以作出我想要的功能囉，可以參考看看

ThunderBird Theme Font & Size Changer插件不能用了

參考文章：
Review for Theme Font & Size Changer for TB by mrx2020


目前發現有的 plug-in不再支援新版的 thunderbird，比如Theme Font & Size Changer，這部份有方式可以解決，先要下原本的 plug-in，副檔名為 .xpi再解壓縮後，修改 bootstrap的程式碼，改完再重新壓縮，使用用不同名稱的 .xpi file後使用檔案更新的方式安裝 plug-in

$(window).scrollTop() 的值都為 0

因為之前為了要解決一個問題 開啟 bootstrap modal會造成首頁內容左移 (shit to left)，css 設定如下

html {
  overflow: hidden;
  height: 100%;}

因為把 height設為 100%，所以捉取到的值永遠都是 0，但為了作到動畫效果  CSS Animation - 以小米為師   ，所以只好又把它修改回來。

SweetAlert for Bootstrap - A beautiful replacement for JavaScript's "alert"

連結
SweetAlert 官網
document.querySelector()說明

先把 js, css 加入後，再 javascript 程式碼加上如下程式碼， .sweet-1是指在某個 html元件宣告 class內的名稱，如 button class="btn btn-lg btn-success sweet-1" ，這樣就可以使用 SweetAlert的美麗彈出視窗了

document.querySelector('.sweet-1').onclick = function(){ swal("Here's a message!"); };