Bootstrap Project A-Z 01 – Giới thiệu về Bootstrap (P1)

0
712

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

I. Giới thiệu về chương trình

1. Nội dung chương trình
a. Tổng quan chương trình
  • Giới thiệu về bootstrap
  • Cắt layout với photoshop
  • Ghép layout sử dụng bootstrap.
  • Tạo menu responsive
  • Tạo slide.
b. Các kiến thức cần có
  • Kiến thức cơ bản về html và css.
c. Các phần mềm cần chuẩn bị
  • Phần mềm giải nén.
  • Phần mềm lập trình :  notepad++ , sublimetext…
  • Phần mềm photoshop
2. Kết quả đạt được

Sau khi hoàn thành chương trình, các bạn có thể tự mình xây dựng được một trang HTML cơ bản theo chuẩn Bootstrap.

II. Giới thiệu về Bootstrap

1. Bootstrap là gì.
  • Là một bộ thư viên html và css đã được xây dựng sẵn giúp việc xây dựng trang html trở nên dễ dàng hơn.
  • Cung cấp một số hiệu ứng sẵn có đẹp mắt.
2. Tại sao nên sử dụng bootstrap.
  • Hỗ trợ cho lập trình viên front-end xây dựng một giao diện nhanh chóng.
  • Sử dụng bootstrap sẽ tối ưu hóa được cho các thiết bị di động(Responsive Web Design)

III. Download và cài đặt Bootstrap

1. Download Bootstrap

B1: Các bạn truy cập trang http://getbootstrap.com

B2: Ấn vào nút Download Bootstrap

học bootstrap

học bootstrap

2. Cài đặt Bootstrap
a. Giải nén Bootstrap

Click chuột phải vào file Bootstrap vừa tải về, chọn “Extract Here

Các file cần lưu ý:

  • Trong folder CSS: file bootstrap.css và bootstrap.min.css. Đây là 2 file giống nhau, tuy nhiên file bootstrap.min.css là file đã được loại bỏ hết khoảng trắng trong code.
  • Trong folder JS: file bootstrap.js và bootstrap.min.js.
  • Toàn bộ các file trong thư mục font.

Để Bootstrap hoạt động được, các bạn cần thêm file jquery-1.11.3.min.js. Các bạn có thể tìm và tải file này trên google.

học bootstrap

b. Cài đặt Bootstrap
  • Thêm các file: bootstrap.css hoặc bootstrap.min.css , bootstrap.js hoặc bootstrap.min.js, jquery-1.11.3.min.js vào mã HTML.

 

Lưu ý: file jquery-1.11.3.min.js phải được khai báo trước file bootstrap.js

 

  • Sau khi thêm, các bạn kiểm tra xem đã đúng đường dẫn của các file trên bằng cách mở trang HTML lên, chuột phải và chọn “View Page Source” hoặc ấn tổ hợp phím “Ctrl + U“. Click vào các file đã thêm, nếu hiện lên “Page Not Found” là các bạn đã thêm sai.

5

Cảm ơn các bạn đã theo dõi bài viết của mình. Ở bài viết sau mình sẽ giới thiệu cho các bạn về những điểm mạnh mẽ của Bootstrap trong việc thiết kế giao diện HTML. 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.

Xem thêm các bài học bootstrap khác tại đây:

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

 

[Total: 1    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here