Hướng dẫn bootstrap the a
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Sau khi bạn đã hiểu được về bootstrap là gì? thì ở bài viết dưới đây, chúng tôi sẽ gửi đến bạn hướng dẫn sử dụng bootstrap toàn tập. Đâ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 bootstrapHiện nay bootstrap có địa chỉ là Getboostrap.com và tại Việt Nam thì bạn vào đường link chính là: Getboostrap.com.vn Hiện nay 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 như bạn muốn tại đường link sau: (alpha.getbootstrap.com). Hướng dẫn sử dụng Bootstrap cơ bảnVà để 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à Index.html như sau: Và nếu như bạn sử dụng bootstrap thì bạn phải tải bootstrap về, sau đó thì những 3 tập tin bootstrap.min.css, jquery.min.js và bootstrap.min.js trong thư mục bootstrap vào trang index.html Lưu ý: Các tập 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 sử dụng: jquery-3.1.1.min.js), sau đó thì bạn đặt chúng ở trong thư mục jquery của 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: Với: width=device-width: thiết lập độ rộng của màn hình, độ rộng này sẽ co giãn phụ thuộc vào kích thước màn hình mà trang web được duyệt. initial-scale=1: chỉnh độ zoom (phóng to, thu nhỏ) khi trang web được tải lên lần đầu. Nếu độ zoom là 1 có nghĩa là trang hiển thị đúng kích thước mặc định của nó (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ác nội dung trang. Với 2 lớp chứa cơ bản của contaniner như sau:
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 “.contaniner”
VD với vùng chứa “.contaniner-fluid”
Tại phần giao diện hiển thị của 2 lớp “.container” và “.container-fluid” sẽ hiển thị ở trình duyệt chrome (trong bày này tôi sử dụng chrome) với kích thước màn hình là 1380×768 và độ zoom màn hình là 150% như hình dưới đây: Tạo website cơ bản với bootstrap – containerChí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” lại trải ra full màn hình. Cho nên bạn cũng có thể xem và tuỳ thuộc vào kiểu thiết kế website 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. |