Khởi động

Sau khi bạn hiểu được bootstrap là gì? . Đây là thông tin bootstrap cực kỳ hữu ích nếu như bạn đang muốn tìm hiểu về bootstrap. Mời các bạn cùng theo dõi

Cách tạo webste cơ bản với bootstrap

Hiện tại bootstrap có địa chỉ là Getboostrap. com và tại Việt Nam thì bạn vào đường link chính là. Bootstrap. com. vn

Hiện phiên bản ổn định chính là. bootstrap 3 và phiên bản Beta là bootstrap 4, bạn cũng có thể tìm hiểu về bootstrap 4 nếu muốn tại đường dẫn sau. (bảng chữ cái. getbootstrap. com)

Khởi động
Hướng dẫn sử dụng Bootstrap cơ bản

Còn để tạo website cơ bản với framework bootstrap thì các bạn làm như sau

Với 1 trang html5 có bản sẽ có định dạng trang là Chỉ mục. html as after

<. LOẠI TÀI LIỆU html>

<đầu>


Và nếu như bạn sử dụng bootstrap thì bạn phải tải bootstrap về, sau đó thì 3 tập tin bootstrap này. tối thiểu. cssjquery. tối thiểu. js và bootstrap. tối thiểu. js trong thư mục bootstrap vào trang index. html

Lưu ý. Các file jquery thì bạn phải tải về từ https. // jquery. com/dowload, sử dụng phiên bản mới nhất. (ví dụ ở bài này thì mình dùng. jquery-3. 1. 1. tối thiểu. js), sau đó bạn đặt chúng ở trong thư mục jquery của Bootstrap

<. LOẠI TÀI LIỆU html>

<đầu>
Ví dụ Bootstrap







//Nội dung trang Website

Công đoạn tiếp theo thì bạn sẽ tạo nội dung Bootstrap nằm ở trong thẻ , bởi vì cơ bản Bootstrap là 1 framework đã được thiết kế sẵn và nhắm đến đối tượng là thiết bị di động, cho nên để đảm bảo được giao diện website có thể hiển thị một cách chính xác thì bạn cần phải sử dụng thẻ với nội dung như sau:

With

chiều rộng = chiều rộng thiết bị. setting width of the screen, the width of this will co giãn phụ thuộc vào kích thước màn hình mà trang web được duyệt

quy mô ban đầu = 1. chỉnh độ zoom (phóng to, thu nhỏ) khi trang web được tải lên lần đầu. If zoom level is 1 has mean is the page display the default default size of it (100%)

Bootstrap cho dù là 1 framework thì bạn cũng cần phải có 1 phần tử để chứa các nội dung trang. Với 2 lớp chứa cơ bản của contaniner như sau

Class “. container” nhiệm vụ cung cấp 1 vùng chứa với kích thước cố định câu trả lời
Class “. contaniner-fluid” có nhiệm vụ cung cấp một vùng chứa kích thước đầy đủ, trải rộng toàn bộ độ rộng của màn hình

Lưu ý. Các vùng chứa này không thể nằm trong 1 vùng chứa khác được

VD với vùng chứa “. thùng đựng hàng"

<. LOẠI TÀI LIỆU html>

<đầu>
Ví dụ Bootstrap







Trang Bootstrap nằm trong vùng chứa. vùng chứa, thẻ h1


Văn bản, thẻ p



VD với vùng chứa “. bình chứa chất lỏng”

LOẠI TÀI LIỆU html>

<đầu>
Ví dụ Bootstrap







Trang Bootstrap nằm trong vùng chứa. container-fluid, thẻ h1


Văn bản thẻ p



In the interface section display of 2 layer “. thùng chứa” và “. container-fluid” sẽ hiển thị trong trình duyệt chrome (trong trình bày này tôi sử dụng chrome) với kích thước màn hình là 1380×768 và mức thu phóng màn hình là 150% như hình dưới đây

Khởi động
Tạo trang web cơ bản với bootstrap – container

Chính vì vậy, chúng ta có thể thấy được rằng lớp “. container” chứa 1 khoảng trắng ở 2 bên và lớp “. container-fluid” replay full screen. Cho nên bạn cũng có thể xem và tùy thuộc vào kiểu thiết kế trang web và chọn 1 trong 2 cách ở trên nhé

Hi vọng bài viết ở trên sẽ giúp bạn có những kiến ​​thức cơ bản về hướng dẫn sử dụng bootstrap hay cách tạo 1 website cơ bản với bootstrap. Chúc các bạn thành công