Cách cài đặt Bootstrap trên máy tính

Thứ ba - 23/06/2020 01:01

Có 2 cách để cài Bootstrap, một là bạn tải Bootstrap về và lưu trên máy, hai là dùng CDN. Dùng CDN thì tiện là bạn chỉ cần chèn dòng code vào file Bootstrap là xong, nhưng hạn chế là khi mạng chập chờn thì thao tác hơi khó chịu.

Trong hướng dẫn này mình sử dụng Sublime Text 3 để minh họa 2 cách cài đặt Bootstrap cho các bạn.

1. Sử dụng CDN

MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap, bạn cũng phải thêm cả jQuery vào nữa. Tất cả những gì bạn cần làm là copy đoạn code sau và dán vào thẻ <head></head> của file html.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Khi đó, file html của bạn sẽ như thế này:

File HTML khi thêm code

2. Tải và cài đặt Bootstrap

Bạn truy cập vào link này để tải Bootstrap về máy tính:

https://getbootstrap.com/docs/4.5/getting-started/download/

Giải nén file Bootstrap vừa tải về, copy file và đặt vào cùng thư mục với file html bạn định sử dụng Bootstrap.
Tạo thẻ link trong thẻ <head> và chỉ đường dẫn đến file bootstrap.css hoặc bootstrap.min.css:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

Thêm thẻ <script> sau vào trước thẻ </body>:

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

Cài đặt Bootstrap bằng cách tải về

Vậy là quá trình cài đặt Bootstrap đã thành công. Để cho việc học Bootstrap dễ dàng hơn, bạn có thể cài thêm 2 plugin sau cho Sublime Text: Bootstrap autocomplete và Bootstrap Snipets.

3. Cài plugin Bootstrap cho Sublime Text

3.1. Cài Bootstrap autocomplete cho Sublime Text 3

Bạn mở Sublime Text > vào Tool > chọn Install Package Control... và chờ một lát để quá trình cài đặt hoàn tất. (Nếu bạn đã làm thao tác này trước đây thì hãy bỏ qua bước này).

Cài Install Package Control cho Sublime Text

Tải Bootstrap autocomplete từ Github > Giải nén file tải về.

Vào Sublime Text > Preferences > Browse Packages...

Mở thư mục Packages

Copy file vừa giải nén vào thư mục Packages vừa mở ra.

Copy file giải nén vào Packages Sau khi cài đặt xong, bạn khởi động lại Sublime Text. Từ giờ khi bạn gõ một thành phần Bootstrap nào vào Sublime Text bạn sẽ nhận được gợi ý và chỉ cần chọn để hoàn thành code của mình.