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 bootstrap
Hiệ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.vietnamforestry.com).
Và để 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:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
</head>
</html>
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.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ Bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<script src=”js/jquery-3.1.1.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</head>
<body>
//Nội dung trang Website
</body>
</html>
Công đoạn tiếp theo thì bạn sẽ tạo nội dung Bootstrap nằm ở trong thẻ <body>, 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ẻ <meta> với nội dung như sau:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
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ớp “.contaniner” nhiệm vụ cung cấp 1 vùng chứa với kích thước cố định đáp ứng
Lớp “.contaniner-fluid” nhiệm vụ cung cấp một vùng chứa các 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 “.contaniner”
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ Bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<script src=”js/jquery-3.1.1.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</head>
<body><div class=”container”>
<h1>Trang Bootstrap nằm trong vùng chứa .container, thẻ h1</h1>
<p>Văn bản, thẻ p</p>
</div></body>
</html>
VD với vùng chứa “.contaniner-fluid”
!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ Bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<script src=”js/jquery-3.1.1.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</head>
<body><div class=”container-fluid”>
<h1>Trang Bootstrap nằm trong vùng chứa .container-fluid, thẻ h1</h1>
<p>Văn bản thẻ p</p>
</div></body>
</html>
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:
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” 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.
