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
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
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.
Chúc các bạn thành công
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
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-2663Chúc các bạn thành công
Sử dụng font awesome 5 với Angular: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
Trả lờiXóa