Làm quen với Bootstrap với Visual Studio Code

Bạn muốn tìm 1 editor miễn phí, để có thể viết code html, js, css nhanh chóng, vừa có thể debug và chạy trực tiếp. Có rất nhiều tool editor miễn phí lần tính phí, nhưng theo cá nhân mình, mình thấy tool Visual Studio Code là công cụ nhẹ nhàng, mạnh mẽ, và có rất nhiều extension (tiện ích) hỗ trợ. Và quan trọng nhất là Visual Studio Code chạy được trên đa nền tảng, và có Microsoft hỗ trợ phát triển.
Download: https://code.visualstudio.com/download
Một số extension hữu ích và cần thiết để viết code Bootstrap

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro Snippets - Ashok Koyi
Live Server - Ritwick Dey

Để cài đặt extension cho Visual Studio Code, bạn mở Ctrl + Shift + P => Install Extensions, rồi gõ tên những extension mà bạn cần cài đặt.

Tạo project Web

Mở Visual Studio Code. Bấm File -> Open Folder -> Chọn folder cần chứa project -> Select Folder.
Tạo mới 1 file html: index.html.
Gõ b4-$ rồi bấm Enter. Extension 1 sẽ tạo mới 1 file template mẫu Html


<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Chọn file index.html và nhấp phải, chọn Open with Live Server.
Trang index.html sẽ được mở theo đường dẫn http://127.0.0.1:<port number>/index.html.

Các thành phần yêu cầu javascript

Components	Description	Bootstrap JS	Popper JS
Alerts	for dismissing	YES
Buttons	for toggling states and checkbox/radio functionality	YES
Carousel	for all slide behaviors, controls, and indicators	YES
Collapse	for toggling visibility of content	YES
Dropdowns	for displaying and positioning	YES	YES
Modals	for displaying, positioning, and scroll behavior	YES
Navbar	for extending our Collapse plugin to implement responsive behavior	YES
Tooltips	for displaying and positioning	YES	YES
Popovers	for displaying and positioning	YES	YES
Scrollspy	for scroll behavior and navigation updates	YES

Sử dụng Font Awesome

Bạn lấy đường dẫn file css, js từ trang cdnjs.com: Font Awesome 5

Hi vọng với bài viết này, bạn sẽ nắm được các bước để tạo 1 trang html đơn giản với bootstrap.

Tham khảo

https://dev.to/trevoirwilliams/bootstrap-4-and-visual-studio-code-in-10-minutes-2663

Chúc các bạn thành công

Nhật ký học tập

Tìm kiếm Blog này