-------
Phần 36.
Làm quen với Bootstrap
Phần này sẽ bắt đầu học thêm một kiến thức mới, đó là
Bootstrap.
Học cơ bản về Bootstrap qua các bài hướng dẫn của nhóm
Chickenrain.
Đây là clip số 1: giới thiệu về Sublime Text 3, cài đặt gói
Emmet, Bootstrap 4 snippets hoặc Bootstrap 3 snippets.
Để xem các phím tắt giúp gõ Bootstrap nhanh, thì vào đây: https://github.com/JasonMortonNZ/bs3-sublime-plugin
Đây là clip số 2: cơ bản về HTML
Cách gõ chú thích (comment) nhanh: tô đen các chữ cần
comment hoặc chỉ cần để dấu nháy chuột tại hàng cần comment, bấm ctr + /
Đây là clip số 3: cơ bản về CSS - chèn CSS vào HTML
Đây là clip số 4: cơ bản về CSS - class
Đây là clip số 5: cơ bản về CSS – các thuộc tính margin,
padding, font
Border từng phần: border-top, border-bottom, border-left,
border-right.
Margin: tính từ viền (border) ra ngoài, padding: tính từ
viền vào trong.
Đây là clip số 6: để có một website có màu đẹp
Vào đây để tham khảo về màu sắc của trang web: https://color.adobe.com hoặc https://flatuicolors.com/ hoặc http://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html
Đây là clip số 7: chọn cỡ chữ phù hợp, call to action (điểm
nhấn)
Tham khảo về chọn font size: https://pearsonified.com/typography/
Đây là clip số 8: tải Bootstrap về máy, nhúng Bootstrap vào
trang HTML
[9/10/2017 phiên bản hiện tại là Bootstrap4 ]
Đây là cấu trúc chuẩn của một trang HTML có nhúng Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="utf-8">
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<!-- The above 3 meta
tags *must* come first in the head; any other head content must come *after*
these tags -->
<title>Bootstrap
101 Template</title>
<!-- Bootstrap
-->
<link
href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and
Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING:
Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello,
world!</h1>
<!-- jQuery
(necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all
compiled plugins (below), or include individual files as needed -->
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
Đọc thêm về <meta http-equiv="X-UA-Compatible"
content="IE=edge"> tại đây (cái này liên quan đến vấn đề tương
thích với trình duyệt IE, không quan trọng): https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do
Đây là clip số 9: responsive web design
Responsive web design: hiểu nôm na là thay đổi giao diện
theo kích thước màn hình hiển thị.
Tuy nhiên không nên chỉ dựa vào việc có hay không có
responsive, để đánh giá một trang web là chuyên nghiệp hay không chuyên nghiệp.
-----------
Cập nhật [9/10/2017][16/11/2016]
-----------