Bootstrap Project A-Z 05 – Xây dựng một trang HTML (P2)

2
506

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Phân tích giao diện HTML

Ở bài trước, tôi đã hướng dẫn các bạn thiết kế phần header. Hôm nay chúng ta sẽ tiếp tục thiết kế phần Main của trang.

Cùng xem qua về phần Main của file PSD

học bootstrap

Ở đây tôi sẽ chia ra làm 2 phần.

Phần 1: Profilo tôi sẽ chia làm 4 row. Row 1: là đoạn text, row 2 là 4 nút bấm, 2 row còn lại để chứa ảnh

 

Đây là CSS của tôi:

Tiếp theo là phần About Us. Phần này tôi cũng chia làm 2 row. Row đầu tiên gồm phần text. Row thứ 2 sẽ là phần giới thiệu về 3 người ở dưới. Row này sẽ được chia làm 3 col.

Xem đầy đủ giáo trình học bootstrap cơ bản tại đây.

Và CSS của phần about us.

Và kết quả thu được là:

học bootstrap

Các bạn có thể tham khảo bài làm của tôi tại đây

Như vậy ta vừa kết thúc thiết kế phần main. Ở bài viết sau tôi sẽ hướng dẫn các bạn thiết kế giao diện phần footer. Cảm ơn và hẹn gặp lại các bạn.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Các bạn xem bài học tiếp theo tại đây:

Tác giả: Đạt Nguyễn Vietpro

 

[Total: 0    Average: 0/5]

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here