Ngu ngơ học làm web (40) - Nav, Navbar trong Bootstrap

tiếp theo của: Ngu ngơ học làm web (39) - Typography, Table, Form, Glyphicons trong Bootstrap
-------

Phần 40. Nav, Navbar trong Bootstrap

Đây là clip số 19: Nav - Navigation - menu

https://www.youtube.com/watch?v=f-Iy-Ti0Wsg&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=23

Nav giúp tạo menu đẹp hơn, dễ hơn và nhanh hơn.

Ví dụ, class=“nav nav-tabs”.

</ul>

</div>

Ví dụ, class=“nav nav-pills”

</ul>

</div>

Ví dụ, menu dọc: class = “nav nav-tabs nav-stacked”. Để làm nổi bật phần nội dung: class=“well”.

</ul>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ex sunt, alias ea excepturi repellendus voluptatum nihil praesentium porro temporibus ad, ab quos autem magnam eum optio possimus dolore incidunt natus aliquid atque dolorem repellat pariatur ut ullam. Deleniti assumenda, exercitationem architecto sed ut perferendis, non expedita obcaecati. Doloribus, nam.</p>

</div>

Đây là clip số 20: Navbar – thanh menu

https://www.youtube.com/watch?v=-c7Jt1Omvck&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=22

Nav để tạo menu, navbar để tạo thanh menu.

Sử dụng thẻ nav của HTML5 kết hợp với các class của Bootstrap để tạo navbar.

Thanh menu màu xám: <nav class="navbar navbar-default"></nav>

Thanh menu màu đen: <nav class="navbar navbar-inverse"></nav>

Để căn giữa một phần tử, đưa phần tử đó vào trong <div class=“container”>

Trong Sublime Text, sử dụng phím tắt “ctrl+shift+D” để copy/paste một dòng.

Thanh menu gồm hai phần: navbar-header và navbar-collapse, mục đích là để khi thu nhỏ màn hình thì phần navbar-header được giữ nguyên, còn phần navbar-collapse thì bị thu lại (ẩn đi), ví dụ:

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">Content</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

</nav>

</div>

Để căn phải menu, dùng class=“navbar-right”

Để ẩn đi menu khi màn hình bị thu nhỏ, dùng class=“collapse”.

Để thêm nút bấm, khi người dùng bấm vào nút này sẽ hiển thị menu trong phần navbar-header, sử dụng đoạn mã sau:

<span class="sr-only">Toggle navigation</span>

</button>

Đọc thêm về class=“sr-only” tại đây: http://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3

Theo đó, sr là viết tắt của screen reader là trình đọc màn hình. Vậy, đoạn mã <span class="sr-only">Toggle navigation</span> để hỗ trợ cho trình đọc màn hình, nội dung của nó sẽ không được hiển thị khi xem ở chế độ bình thường.

Đây là clip số 21: Navbar – thanh menu (tiếp theo)

https://www.youtube.com/watch?v=OoRLikGhj4E&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=21

Ba kiểu navbar:

- Navbar có độ rộng chiếm hết màn hình, di chuyển cùng với phần nội dung

- Navbar có độ rộng chiếm hết màn hình, luôn cố định ở phía trên khi di chuyển phần nội dung

- Navbar có độ rộng chiếm hết màn hình, luôn cố định ở phía dưới khi di chuyển phần nội dung

Nếu không bao navbar bằng container, navbar sẽ có độ rộng đúng bằng cửa sổ trình duyệt.

Sử dụng class=“navbar-static-top” để bỏ đi phần bo tròn hai đầu của thanh menu.

Ví dụ, navbar có độ rộng chiếm hết màn hình, di chuyển cùng với phần nội dung

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">Content</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

</nav>

</div>

Bao phần nội dung bên trong của navbar bằng container để thực hiện căn giữa phần nội dung.

Sử dụng class=“navbar-fixed-top” để bỏ đi phần bo tròn hai đầu của thanh menu, đồng thời cố định thanh menu luôn ở trên đầu trang. Tuy nhiên, khi đó menu cũng sẽ che mất một phần nội dung của trang web. Vì vậy cần phải thiết lập padding-top cho phần nội dung (padding-top cho thẻ body).

Ví dụ,

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">Content</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

</nav>

</div>

<div>

<p>Lorem ipsum dolor sit amet, </p>

<p>consectetur adipisicing elit. </p>

<p>Dicta dignissimos hic ex. Obcaecati magnam quae rerum nemo, sint sequi! Nostrum, architecto culpa cumque quaerat? Laborum debitis dolores molestiae distinctio sit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dignissimos hic ex. Obcaecati magnam quae rerum nemo, sint sequi! Nostrum, architecto culpa cumque quaerat? Laborum debitis dolores molestiae distinctio sit!

</p>

</div>

Sử dụng class=“navbar-fixed-bottom” để bỏ đi phần bo tròn hai đầu của thanh menu, đồng thời cố định thanh menu luôn ở phía cuối trang.

Đoạn mã sau sẽ chèn một form vào navbar:

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">Content</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

<button type="submit" class="btn btn-primary">Signup</button>

</div>

</nav>

</div>

Có thể thay <form> và <button> bằng thẻ <a>:

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">Content</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

<a href="#" class="btn btn-primary navbar-btn">Signup</a>

<a href="#" class="btn btn-default navbar-btn">Login</a>

</div>

</nav>

</div>

Sử dụng class=“navbar-btn” để căn đều trên-dưới cho một nút trong navbar. Ví dụ: <a href="" class="btn btn-primary navbar-btn">Signup</a>

Giảm tầm quan trọng của Login so với Signup. Ví dụ: <a href="" class="btn btn-default navbar-btn">Login</a>

Đây là clip số 22: giới thiệu một số component khác

https://www.youtube.com/watch?v=YOhahavMUC0&index=20&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

Vào đây để đọc và học cách sử dụng các component: http://getbootstrap.com/components/

Thử trải nghiệm một website mẫu, để có thêm động lực học tiếp những kĩ thuật và công nghệ mới.

https://brine-demo.squarespace.com/

-----------

Cập nhật [12/10/2017][19/10/2016]

-----------

Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (41) - JavaScript trong Bootstrap

Ngu ngơ học làm web (39) - Typography, Table, Form, Glyphicons trong Bootstrap

tiếp theo của: Ngu ngơ học làm web (38) - LiveReload từ Sublime Text 3 lên Chrome
-------

Phần 39. Typography, Table, Form, Glyphicons trong Bootstrap

Đây là clip số 13: Typography, trình bày văn bản trên trang web.

https://www.youtube.com/watch?v=_T0rfWSUSOw&index=29&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

Khi trình bày văn bản trên trang web, cần quan tâm tới: kích thước font, khoảng cách giữa các dòng, khoảng cách giữa các đoạn, kích cỡ tiêu đề. May mắn là Bootstrap đã tích hợp sẵn các nội dung này vào trong các CSS, vì vậy chỉ cần gọi ra và sử dụng.

Các thẻ <h1>, <h2>, <p>, và nhiều thẻ khác đã được Bootstrap định dạng lại theo chuẩn của Bootstrap. Ngoài ra Bootstrap cũng tạo sẵn các class như: class=“text-left”, class=“text-center”, hoặc class=“text-right” để căn chỉnh văn bản.

Để in đậm văn bản, dùng thẻ <strong> thì tốt hơn dùng thẻ <b>, vì thẻ <strong> giúp SEO tốt hơn. SEO (Search Engine Optimization): là quy trình tối ưu hóa website, để đạt thứ hạng cao trong kết quả tìm kiếm.

Sử dụng class= “lead” để làm nổi bật đoạn đầu tiên của một văn bản.

Một số class quy định về màu sắc của văn bản: text-muted, text-primary, text-success, text-info, text-warning, text-danger.

Để bỏ các bullet của unordered list hoặc các số của ordered list, sử dụng class=“list-unstyled”.

Để sắp xếp các mục con (item) của <ul> hoặc <ol> nằm trên cùng một hàng ngang, sử dụng class=“list-inline”.

Có thể vào đây để tham khảo thêm về Typography: http://getbootstrap.com/css/#type

Đây là clip số 14: Table

https://www.youtube.com/watch?v=9WpET70rDaY&index=27&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

Sử dụng class=“table” để định dạng bảng.

Sử dụng class=“table-bordered”: để thêm viền cho bảng.

Sử dụng class = “table-hover”: để tạo hiệu ứng cho một hàng, khi rê chuột lên một hàng của bảng.

Sử dụng class=“table-striped”: để tô màu xen kẽ giữa các hàng của bảng.

Sử dụng class=“table-condensed” để giảm độ rộng của các hàng.

Bốn loại màu có thể sử dụng cho các hàng hay các ô của bảng là: class=“active”, class=“success”, class=“warning”, class=“danger”.

Sử dụng class="table-responsive" để tùy chỉnh kích thước của bảng theo kích thước của trình duyệt, giúp các phần tử bên ngoài bảng không bị ảnh hưởng, không bị bể khung.

Cú pháp sử dụng class=“table-responsive”

</table>

</div>

Đây là clip số 15: Form

https://www.youtube.com/watch?v=h8iZCW1__lI&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=28

Để ý: thuộc tính for trong tag <label> có tác dụng chỉ ra label này sẽ thuộc về input nào (for=“id của input”, khi bấm vào label, focus của dấu nháy chuột sẽ được đặt ở input tương ứng. Cách này giống với bao cả input bằng thẻ label.

Bao label và input bằng class=“form-group” để nhóm hai thẻ này thành một khối (block),

<label for="email">Email

</div>

Sử dụng class form-control để thiết lập hiển thị, focus và kích thước cho một input, select hoặc textarea,

<label for="email">Email</label>

</div>

Sử dụng class=“btn btn-primary” để định dạng cho một nút.

<button type="submit" class="btn btn-primary">Submit</button>

Đoạn mã của một form đăng nhập cơ bản (vertical form) bằng Bootstrap:

<h3 class="text-center">Login</h3>

<label for="email">Email</label>

</div>

<label for="password">Password</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

Chuyển form đăng nhập vừa tạo ở trên sang dạng form-inline (form nằm trên một hàng):

- Thêm class=“form-inline” vào thẻ form

- Thêm độ rộng cho form thành 8 column

- Không hiển thị label trên giao diện (class=“sr-only”), thay vào đó là placeholder

<h3>Login</h3>

<label for="email" class="sr-only">Email</label>

</div>

<label for="password" class="sr-only">Password</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

Tạo form đăng nhập kiểu horizontal form:

<h3>Login</h3>

<label for="email" class="col-md-2 control-label">Email</label>

</div>

<label for="password" class="col-md-2 control-label">Password</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

Đây là clip số 16: Form – tối ưu form

https://www.youtube.com/watch?v=XLdBFXhYnDw&index=26&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

Khi lập trình nhớ để ý việc tối ưu danh sách chọn (drop-down list) theo đối tượng người dùng. Ví dụ, danh sách các quốc gia trên thế giới. Có thể viết đoạn mã để: dựa vào địa chỉ IP của khách hàng, biết được khách hàng đang ở nước nào, và hiển thị tên nước tương ứng trong ô select. Hoặc tùy thuộc vào đối tượng người dùng là ai, để hiển thị danh sách các năm sinh (người dùng sẽ chọn từ danh sách này) cho phù hợp.

Đây là clip số 17: Form – thứ tự phím tab trong form.

https://www.youtube.com/watch?v=_qfsdjfVD34&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=25

Thiết lập thứ tự focus cho các ô nhập liệu khi người dùng bấm phím tab. Sử dụng thuộc tính tabindex của HTML5, giá trị của tabindex càng nhỏ càng được ưu tiên.

Ví dụ,

</div>

</div>

Thiết lập loại nút hoặc màu sắc của nút để thể hiện mức độ quan trọng của các nút khác nhau. Ví dụ: trong trường hợp dưới đây Login sẽ quan trọng hơn là Forgot your password?.

<button class="btn btn-primary" type="submit">Login</button>

<button class="btn btn-link" type="submit">Forgot your password?</button>

</div>

Đây là clip số 18: Glyphicons

https://www.youtube.com/watch?v=aRWtaC4vszI&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=24

Component là các thành phần của CSS đã được viết sẵn trong Bootstrap, được sử dụng cho các chức năng đặc biệt, giúp việc thiết kế web được nhanh hơn.

Glyphicon là một loại component, gồm rất nhiều các biểu tượng được thiết kế sẵn, ví dụ:

<label for="password" class="col-md-2 control-label"><span class="glyphicon glyphicon-lock"></span>Password</label>

Vì glyphicon là một nhánh con của font, do vậy có thể định dạng cho glyphicon như một loại font, ví dụ:

.glyphicon {

font-size: 64px;

color: red;

font-style: italic;

}

-----------

Cập nhật [11/10/2017][15/10/2016]

-----------

Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (40) - Nav, Navbar trong Bootstrap

Ngu ngơ học làm web (38) - LiveReload từ Sublime Text 3 lên Chrome

tiếp theo của: Ngu ngơ học làm web (37) - Grid system trong Bootstrap
-------

Phần 38. LiveReload từ Sublime Text 3 lên Chrome

Để tiện cho việc xem kết quả khi lập trình, sau đây sẽ thực hiện cấu hình Sublime Text 3 và Chrome để “Tự động cập nhật kết quả từ Sublime Text 3 lên trình duyệt Chrome”.

Tham khảo thêm ở đây:

http://stackoverflow.com/questions/25886011/how-do-i-install-livereload-on-sublime-text-3

Theo đó, sẽ thực hiện các bước sau:

(1) Mở Sublime Text 3, vào menu Preferences\Package Control, chạy lệnh Package Control: Add Repository, cuối cửa sổ của Sublime Text xuất hiện ô nhập liệu, nhập vào đường dẫn sau: https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json

(2) Vào lại mục Package Control, chạy lệnh Package Control: Install Package, nhập vào gói LiveReload.

(3) Vào lại mục Package Control, chạy lệnh Package Control: Enable Package, nhập vào gói LiveReload.

(4) Vào lại Preferences\Package Settings\LiveReload\Settings-Default, xóa hết nội dung đang có, thay bằng đoạn mã sau, lưu lại và đóng cửa sổ này:

{

"enabled_plugins": [

"SimpleReloadPlugin",

"SimpleRefresh"

]

}

(5) Cài đặt Auto-save cho Sublime Text 3: vào lại mục Package Control, chạy lệnh Package Control: Install Package, nhập vào gói auto-save. Gói Auto-save sẽ giúp Sublime Text tự động lưu dữ liệu ngay sau khi mã nguồn bị thay đổi. Nhấn tổ hợp phím "ctrl+alt+s" để bật và tắt chức năng này.

(6) Vào lại Preferences\Package Settings\Auto-save\Key Bindings – User, thêm đoạn mã sau:

[

{"keys":["ctrl+alt+s"], "command": "auto_save"}

]

(7) Kiểm tra xem chức năng auto-save của Sublime Text 3 đã hoạt động chưa, bằng cách bấm tổ hợp 3 phím “ctrl+alt+s” vài lần, quan sát thanh trạng thái phía dưới của Sublime Text 3, sẽ thấy thông báo AutoSave Turned On hoặc Turned Off. Nếu Turned On là được.

(8) Vào đây https://chrome.google.com/webstore/category/extensions để cài đặt extension LiveReload cho Chrome.

(9) Vào menu của Chrome, chọn More tools, chọn Extensions, tìm tới mục LiveReload, đánh dấu chọn vào mục Allow access to file URLs.

(10) Nhớ bấm vào biểu tượng plugin LiveReload, ở góc trên, bên phải của Chrome để Enable LiveReload.

(11) Vậy là đã hoàn thành việc cấu hình. Thử lập trình trên Sublime Text 3 và xem kết quả xuất hiện ngay lập tức trên Chrome.

Tuy nhiên, việc để chế độ lưu tự động (Autosave) có một hạn chế là nó hay làm tắt phần gợi ý khi viết mã (Autocomplete). Vì vậy, nên tắt chế độ Autosave đi (bấm Ctrl+Alt+S). Sau khi viết mã xong, muốn xem kết quả trên trình duyệt, chỉ cần bấm Ctrl+S (lưu lại mã nguồn) là được.

-----------

Cập nhật 13/10/2016

-----------

Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (39) - Typography, Table, Form, Glyphicons trong Bootstrap

Ngu ngơ học làm web (37) - Grid system trong Bootstrap

tiếp theo của: Ngu ngơ học làm web (36) - Làm quen với Bootstrap
-------

Phần 37. Grid system trong Bootstrap

Đây là clip số 10: grid system – hệ thống lưới

https://www.youtube.com/watch?v=yiYu1lkaxnc&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=32

Dưới đây là hình ảnh về hệ thống lưới của Bootstrap 3. (https://getbootstrap.com/docs/3.3/css/)

Dưới đây là hình ảnh về hệ thống lưới của Bootstrap 4. (https://v4-alpha.getbootstrap.com/layout/grid/)

Cấu trúc chung khi dùng Bootstrap: các cột (column) sẽ được đặt vào các hàng (row), sau đó các hàng sẽ được đặt trong các thùng chứa (container).

</div>

<p>Right</p>

</div>

Class=“container” giúp căn giữa toàn bộ nội dung.

Đoạn mã CSS để hiển thị grid-system:

.show-grid [class^="col-"] {

padding-top: 10px;

padding-bottom: 10px;

background: #eee;

border: 1px solid #ddd;

}

Ý nghĩa của “.show-grid [class*="col-"]”: chọn các thẻ con trong .show-grid có thuộc tính class có chứa chuỗi "col-".

Lưu lại đoạn mã về grid-system để tham khảo:

<!DOCTYPE html>

<head>

<title>Bootstrap 101 Template</title>

<style>

.show-grid [class^="col-"] {

padding-top: 10px;

padding-bottom: 10px;

background: #eee;

border: 1px solid #ddd;

}

</style>

</head>

<body>

</div>

<div class="col-md-6"><p>right</p></div>

</div>

<div class="col-md-7"><p>center</p></div>

<div class="col-md-2"><p>right</p></div>

</div>

</body>

</html>

Hệ thống grid-system đã có sẵn đặc tính responsive.

Đây là clip số 11: Mobile First

https://www.youtube.com/watch?v=fXqq8uL7DFA&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=31

Ý tưởng của Mobile First là thiết kế cho màn hình có kích thước nhỏ trước và chuyển lên màn hình có kích thước lớn hơn.

Khi thực thi Bootstrap, ứng với mỗi kích thước màn hình, class tương ứng với màn hình đó sẽ được ưu tiên lựa chọn.

Bootstrap3
<768px	>=768px - < 992px	>=992px - < 1200px	>=1200px
.col-xs-	.col-sm-	.col-md-	.col-lg-
Bootstrap4
<544px	>=544px - < 768px	>=768px - < 992px	>= 992 px - < 1200px	>= 1200px
.col-xs-	.col-sm-	.col-md-	.col-lg-	.col-xl-

Ví dụ về mobile first:

<div class="col-xs-6 col-sm-3 col-md-9 col-lg-12"><p>right</p></div>

</div>

Đây là clip số 12: thay đổi vị trí của các cột

https://www.youtube.com/watch?v=5ltDyKgRRm0&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=30

Responsive column reset: tác dụng giống như tạo row mới cho các cột dữ liệu, <div class="clearfix"></div>.

Ví dụ,

<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium hic aperiam veritatis similique suscipit porro, eaque, minus sed quaerat corporis dolore impedit dolorem facere incidunt vitae exercitationem provident? Ad inventore id totam repellendus possimus, rerum temporibus harum debitis nam magni.</p></div>

<div class="col-md-6"><p>right 1</p></div>

<div class="col-md-6"><p>right 2</p></div>

</div>

Offsetting columns: thiết lập vị trí bắt đầu của các cột dữ liệu.

Ví dụ,

<div class="col-md-4 col-md-offset-2"><p>Content</p></div>

</div>

Nesting columns: lồng cột trong cột,

<p>child content 1</p>

</div>

<p>child content 2</p>

</div>

<p>parent content</p>

</div>

Column ordering: hoán chuyển vị trí của các cột,

</div>

<p>Right</p>

</div>

-----------

Cập nhật [10/10/2017][12/10/2016]

-----------

Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (38) - LiveReload từ Sublime Text 3 lên Chrome

Ngu ngơ học làm web (36) - Làm quen với Bootstrap

tiếp theo của: Ngu ngơ học làm web (35) - jQuery trong Openemr
-------

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.

https://www.youtube.com/watch?v=LB1XIjyIaeY&index=41&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO]

Để 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

https://www.youtube.com/watch?v=Bc-2RZ_90qM&index=40&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

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

https://www.youtube.com/watch?v=_iQkSokugxI&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=39

Đây là clip số 4: cơ bản về CSS - class

https://www.youtube.com/watch?v=gf1ynNL4uoY&index=38&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

Đây là clip số 5: cơ bản về CSS – các thuộc tính margin, padding, font

https://www.youtube.com/watch?v=eOQds9MAcrk&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=37

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

https://www.youtube.com/watch?v=DPvQF6Ai7BQ&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=36

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)

https://www.youtube.com/watch?v=VjqbUp_anio&index=35&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO

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

https://www.youtube.com/watch?v=v_ulf87lpiw&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=34

[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>

<head>

<title>Bootstrap 101 Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Hello, world!</h1>

</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

https://www.youtube.com/watch?v=cnPUhWTfsLg&list=PLvfP7Z69rLCRhVLO6DLJgMgr8BgQeG_CO&index=33

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]

-----------

Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (37) - Grid system trong Bootstrap

Menu

Tìm kiếm trong Blog

Ngu ngơ học làm web (40) - Nav, Navbar trong Bootstrap

Phần 40. Nav, Navbar trong Bootstrap

Ngu ngơ học làm web (39) - Typography, Table, Form, Glyphicons trong Bootstrap

Phần 39. Typography, Table, Form, Glyphicons trong Bootstrap

Ngu ngơ học làm web (38) - LiveReload từ Sublime Text 3 lên Chrome

Phần 38. LiveReload từ Sublime Text 3 lên Chrome

Ngu ngơ học làm web (37) - Grid system trong Bootstrap

Phần 37. Grid system trong Bootstrap

Ngu ngơ học làm web (36) - Làm quen với Bootstrap

Phần 36. Làm quen với Bootstrap