Download, Cài đặt Bootstrap 3 Và Nhúng Bootstrap 3 Vào Website

Trước khi bắt đầu vào tìm hiểu cách download bootstrap , cài đặt hay nhúng Bootstrap 3 vào website các bạn phải chắc chắn mình đã có kiến thức về html & css căn bản. Nếu chưa có ok hãy quay về loạt bài học HTML và CSS cơ bản của chúng mình trước. Bạn cũng nên có một bộ công cụ IDE để soạn thảo và chỉnh sửa code dễ dàng tiết kiệm thời gian hơn.

1. Dowload Bootstrap 3

Hiện tại Bootstrap đã ra đến bản 5 thế nhưng ở khuôn khổ bài học này chúng ta sử dụng Bootstrap phiên bản 3.3 nhé

• Các bạn truy cập vào link dưới đây để tải về Bootstraps
  • Download Bootstrap 3
• Hoặc link trực tiếp
  • https://getbootstrap.com/docs/3.3/getting-started/#download

Các bạn có thể thấy có tổng cộng 3 phiên bản bootstrap để tải, vậy chúng ta dùng phiên bản nào ? từng phiên bản có cấu trúc ra sao và đặc tính như thế nào? Đừng hốt vì ngay dưới đây bạn sẽ được tìm hiểu về chúng.

Precompiled Bootstrap: Đây là phiên bản đã được biên dịch sẵn chúng ta chỉ việc dowload (tải về) giải nén ra là có thể sử dụng được. Sau khi giải nén chúng ta sẽ thu đươc thư mục có cấu trúc file sau:

bootstrap/ ├── css/ │   ├── bootstrap.css │   ├── bootstrap.css.map │   ├── bootstrap.min.css │   ├── bootstrap.min.css.map │   ├── bootstrap-theme.css │   ├── bootstrap-theme.css.map │   ├── bootstrap-theme.min.css │   └── bootstrap-theme.min.css.map ├── js/ │   ├── bootstrap.js │   └── bootstrap.min.js └── fonts/     ├── glyphicons-halflings-regular.eot     ├── glyphicons-halflings-regular.svg     ├── glyphicons-halflings-regular.ttf     ├── glyphicons-halflings-regular.woff     └── glyphicons-halflings-regular.woff2

Trong bản Bootstrap này có thể thấy Bootstrap đã phân chia cấu trúc rất rõ ràng theo từng nhánh CSS & JS. Ngoài ra còn có 5 file font, những file này chứa bao gồm 200 biểu tượng icons dùng để trang trí website thật là bắt mắt và tiết kiệm dung lượng website thay vì với cách css thông thường muốn sử dụng icons thì chúng ta phải chèn hình ảnh, còn với Bootstrap thì khái niệm dùng hình ảnh làm icons đã là quá khứ. Glyphicon Halflings đã giúp chúng ta dễ dàng hơn trong việc trang trí website bằng icons.

Bootstrap source code: Đây là bộ mã nguồn của Bootstrap, nó bao gồm các biên dịch sẵn Css & javascript nó có kèm theo tài liệu hướng dẫn tự xây dựng một thư viện css riêng. Theo kinh nghiệm của các tiền bối đi trước chúng ta không nên dowload bộ mã nguồn này mà chúng ta chỉ sử dụng phiên bản được biên dịch và đóng gói sẵn thôi. Đây là cấu trúc của nó.

bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │   ├── css/ │   ├── js/ │   └── fonts/ └── docs/     └── examples/

SASS: Là phiên bản cuối cùng trong 3 phiên bản. SASS viết tắt của Syntactically awesome stylesheets là một siêu ngôn ngữ và kịch bản xử lý CSS . Hiểu biết các nguyên tắc của Sass chính là chìa khóa giúp phát trển CSS nhanh hơn và hiệu quả hơn. Sass cung cấp cú pháp CSS đơn giản, gọn nhẹ và mạnh mẽ để tạo ra các stylesheet có thể quản lý được. Thế nhưng đây là phần nâng cao của bootstrap nên chúng ta sẽ đề cập ở sau các bạn nhé.

2. Nhúng Bootstrap vào website

Có 2 cách nhúng Bootstrap vào website đó là sử dụng Bootstrap CDN và nhúng trực tiếp

2.1 Bootstrap CDN

Cách này tương đối đơn gian chỉ cần chèn đoạn code sau vào đúng vị trí trên website của bạn. Ưu điểm là không tốn tài nguyên website thế nhưng có nhược điểm đôi khi mạng CDN bị down thì ko load được

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2.2 Tài và nhúng trực tiếp

Dowload bootstrap về giải nén ra và nhúng trực tiếp vào website của bạn.

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">  <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Dưới đây là 1 file HTML nhúng bootstrap minh họa

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->     <title>Bootstrap 101 Template</title>     <!-- Bootstrap -->     <link href="css/bootstrap.min.css" rel="stylesheet">     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->     <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>     <![endif]-->   </head>   <body>     <h1>Hello, world!</h1>     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>     <!-- Include all compiled plugins (below), or include individual files as needed -->     <script src="js/bootstrap.min.js"></script>   </body> </html>

Đoạn code sau:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

có tác dụng thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay

Chú ý khi nhúng Bootstrap

• CSS chúng ta sẽ để trong cặp thẻ <head>,
• JS chúng ta chèn phía sau cặp thẻ <body>

Lời kết:

Nếu bạn thử save lại ví dụ trên và chạy thì chắc chắn bán sẽ bất ngờ vì nó chả khác gì file html thông thường cả. Đúng vậy vì đây chỉ là bài hướng dẫn nhúng bootstrap vào website thôi mà. Đứng vội sốt ruột bạn nhé vì nhiều điều hay ho với boothstrap chúng ta sẽ tìm hiểu dần về sau cơ. Chúc các bạn học vui vẻ