Browser IE11 (edit)

Responsive Web Design

Non Responsive Web Design

https://bootstrapdocs.com/v3.3.6/docs/examples/non-responsive/

Responsive Web Design:

https://bootstrapdocs.com/v3.3.6/docs/examples/dashboard/

Bootstrap 4+5 (IE11):

https://getbootstrap.com/

https://blog.bootswatch.com/

Bootstrap 3 (IE8+9):

https://bootstrapdocs.com/v3.3.6/docs/getting-started/

https://www.w3schools.com/icons/default.asp (Font Awesome)

https://bootstrapdocs.com/v3.3.6/docs/components/#glyphicons (Glyphicons)

https://bootstrapdocs.com/v3.3.6/docs/examples/dashboard/ (Dashboard Admin Theme)

https://fonts.google.com/

https://github.com/typekit/webfontloader

https://thomaspark.co/projects/fontcdn/

https://github.com/seatgeek/react-infinite

https://qwerty.dev/ (Font)

https://glyphsearch.com/ (Icon)

https://wrapbootstrap.com/

https://bootswatch.com/

https://www.toptal.com/twitter-bootstrap/the-10-most-common-bootstrap-mistakes

http://thegioi360.vn/posts/t6252-10-Loi-thuong-gap-khi-dung-Bootstrap

https://viblo.asia/p/10-loi-thuong-gap-khi-su-dung-bootstrap-l5XRBJEbRqPe

https://www.toptal.com/front-end/what-is-bootstrap-a-short-tutorial-on-the-what-why-and-how

Tip 1: Những ví dụ tốt cho thấy những thiết kế khác nhau có được bằng cách nào được trình bày ở Bootstrap Expo, một trang tập hợp những sites dùng Bootstrap. Hãy xem xét, lấy cảm hứng, và bắt đầu xây dựng thiết kế riêng biệt của bạn.

Tip 2: Hãy bắt đầu bằng việc không dùng file bootstrap.js, và tạo site chỉ bằng HTML và CSS. Sau đó, thêm thành phần nào cần cho những việc cụ thể, từng cái một.

• Bootstrap Modal
  • https://stackoverflow.com/questions/43583165/how-to-open-a-bootstrap-modal-from-the-right
  • https://www.sitepoint.com/understanding-bootstrap-modals/
  • https://designmodo.com/bootstrap-modal/
  • Css pull-right: https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/
• Input Type File
  • https://gist.github.com/jenky/976c412e671046526bdfab7f81c7ef92
  • https://gist.github.com/leompeters/1aaad1752ae97c3c6840

Tip 3: Bootlint: tool kiểm tra cấu trúc HTML của những projects dùng Bootstrap.

Tip 4: Bootstrap là framework ưu tiên hỗ trợ mobile (mobile first framework) + thiết bị cảm ứng không có hành động rê chuột, mà chỉ có hành động chạm (only touch events) nên trên mobile nó sẽ không làm việc đúng.

IE test example page:

http://output.jsbin.com/kuvoz/1

https://css-tricks.com/box-sizing/

https://accessibility.psu.edu/headings/

WordPress

https://thomaspark.co/

Common social media icons:

• Facebook (fa fa-facebook) to be used for Facebook pages; or (fa fa-facebook-square) to be used for Facebook groups
• Twitter (fa fa-twitter)
• Google Plus (fa fa-google-plus)
• Github (fa fa-github)
• Pinterest (fa fa-pinterest)
• LinkedIn (fa fa-linkedin)
• Flickr (fa fa-flickr)
• Instagram (fa fa-instagram)
• Vimeo (fa fa-vimeo)
• Tumblr (fa fa-tumblr)
• Skype (fa fa-skype)
• YouTube (fa fa-youtube); or (fa fa-youtube-play)
• Blogger (fa fa-blogger)
• WordPress (fa fa-wordpress)
• Snapchat (fa-snapchat-ghost)
• RSS (fa fa-rss)

Framework Use:

• Bootstrap 4
• Font Awesome 5
• Glyphicons
• Social Media Icons
• Google Web Fonts + Web Font Loader + Search Fonts
• Material design in Bootstrap with Paper
• Tawk.to (free live chat app that lets you monitor and chat with visitors)
• Slick JS (Fully responsive carousel library)

https://support.microsoft.com/en-us/help/3135465/how-to-enable-javascript-in-windows

https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie (HAY)

https://www.sitepoint.com/check-ie-version/

https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser (HAY)

DOMContentLoaded vs jQuery.ready

https://eager.io/blog/how-to-decide-when-your-code-should-run/

JavaScript HTML DOM EventListener

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

setTimeout

https://freetuts.net/settimeout-va-setinterval-trong-javascript-391.html

Examples

....
 <script type="text/javascript" language="javascript">
   function StyleForMsIEVersionOnly() {
     var ua = window.navigator.userAgent;
     var msie = ua.indexOf("MSIE ");
     if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
     {
       document.getElementById("tdElement").style.padingRight = "124px";
     } else {
       document.getElementById("tdElement").style.paddingRight = "94px";
     }
   }
   function showWaitingMessage() {
     document.getElementById("spanElement").style.display = 'block'; // to show SPAN
     setTimeout(function () {
       hideWaitingMessage();
     }, 3000);
   }
   function hideWaitingMessage() {
     document.getElementById("spanElement").style.display = 'none'; // to hide SPAN
   }
   window.addEventListener('DOMContentLoaded', function () {
     StyleForMsIEVersionOnly();
     document.getElementById("spanElement").style.display = 'none';
     document.getElementById("btnAction").addEventListener("click", showWaitingMessage);
   });
 </script>
 </div>
 </asp:Panel>
</asp:Content>