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):
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://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
- Input Type File
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
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>
