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. | C-n.vn

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/[email protected]/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
  • 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="https://quantrimang.com/bootstrap/css/bootstrap.css">

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

<script type="text/javascript" src="https://quantrimang.com/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 autocompleteBootstrap Snipets.

READ:  Nếu bạn nhận thấy các vấn đề về hiệu suất kém khi sử dụng profile người dùng mặc định tùy chỉnh trong Windows 10, thì bài đăng này sẽ giúp ích cho bạn. | C-n.vn

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 PackagesSau 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.

Cài thành công Bootstrap autocomplete cho Sublime Text

3.2. Cài Bootstrap Snipets cho Sublime Text

Bạn tải Bootstrap Snipets về rồi cài tương tự như trên nhé.

Bây giờ hãy sẵn sàng để làm quen với những thành phần đầu tiên trong Bootstrap bạn nhé.

  • Sử dụng bố cục trang Flexbox trong CSS
  • Gradient – màu biến đổi tuyến tính trong CSS
  • Hiệu ứng Tooltip trong CSS
  • Tạo Button trong CSS
  • Thiết kế trang web chạy trên nhiều thiết bị (responsive web design) bằng HTML
  • Top 20 mẫu template Bootstrap miễn phí dành cho Admin Dashboard
Xem thêm bài viết thuộc chuyên mục: Công nghệ

Có thể bạn quan tâm