Làm cách nào để cài đặt Bootstrap bằng dấu nhắc lệnh?

Trong bài viết này, chúng tôi sẽ thảo luận về nhiều cách để thêm bootstrap vào ứng dụng góc của bạn, về cơ bản chúng tôi sẽ thảo luận về nhiều cách để cài đặt thư viện bootstrap trong Ứng dụng góc của bạn. Ngoài ra, chúng tôi sẽ xem làm thế nào chúng tôi có thể có các chủ đề màu khác nhau trong dự án của mình

Bootstrap là gì?

Bootstrap là một bộ công cụ mạnh mẽ, tập hợp các công cụ HTML, CSS và JavaScript để tạo và xây dựng các trang web và ứng dụng web. Đây là một dự án nguồn mở và miễn phí, được lưu trữ trên GitHub

Bootstrap cung cấp cho bạn thiết kế và tùy chỉnh nhanh chóng các trang web ưu tiên thiết bị di động đáp ứng với Bootstrap, bộ công cụ nguồn mở giao diện người dùng phổ biến nhất thế giới, có các biến Sass và mixin, hệ thống lưới đáp ứng, các thành phần dựng sẵn mở rộng và các plugin JavaScript mạnh mẽ

Bootstrap 4 là phiên bản mới nhất của Bootstrap (BS) mang đến nhiều tính năng mới và mạnh mẽ cho khung, quan trọng nhất là hộp Flex hiện là hệ thống hiển thị mặc định cho bố cục lưới Bootstrap và lưới là một trong những tính năng quan trọng nhất của Bootstrap

Thiết lập dự án góc

Đầu tiên chúng ta sẽ tạo dự án Angular mới, cách dễ nhất là chúng ta sẽ sử dụng CLI (Giao diện dòng lệnh) & cách tắt để mở CLI là nhấn phím windows + phím R đồng thời nó sẽ mở cửa sổ Run gõ cmd nó sẽ mở dấu nhắc lệnh

$ ng new DemoBootstrap

Bây giờ thay đổi thư mục thành dự án đã tạo

$ cd myproject

và chạy dự án đó với

$ ng serve

kiểm tra xem dự án có chạy hoàn hảo hay không bằng cách mở url http. //máy chủ cục bộ. 4200/

Cài đặt Bootstrap

Bây giờ dự án Angular đã sẵn sàng và đang chạy hoàn hảo để thêm bootstrap, Có nhiều cách để thêm bootstrap vào góc, chúng ta sẽ xem từng cách một. Ở đây bạn sẽ tìm thấy 3 cách để thêm bootstrap vào Angular

cách đầu tiên. Cài đặt Bootstrap bằng npm

Bước 1. Cài đặt Bootstrap bằng lệnh sau

Đây là một kỹ thuật đơn giản để cài đặt bootstrap, giống như các thư viện npm khác, chúng ta chỉ cần cài đặt nó và sẽ cần xác định nó trong góc. tập tin json. Ưu điểm là nếu chúng ta cài đặt thư viện npm thì nó sẽ khả dụng khi ngoại tuyến

Sau đây là các lệnh để cài đặt bootstrap theo phiên bản

Đối với Bootstrap 3

npm cài đặt bootstrap@3. 3. 7

Đối với Bootstrap 4

npm cài đặt bootstrap

Bước 2. Định cấu hình góc. js

...
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...

Đơn giản là bạn có thể nhập theo phong cách. css

@import '~bootstrap/dist/css/bootstrap.min.css';

Cách thứ hai. Thêm tệp cục bộ và nhập

Thêm tệp cục bộ theo nghĩa, chúng tôi có thể dễ dàng tải xuống tệp từ liên kết, sao chép tệp đó vào thư mục tài sản, sau đó sẽ

nhập nó trong góc. tập tin json như

"styles": [
  "assets/bootstrap/css/bootstrap.min.css",
  "styles.scss"
],
"scripts": [
    "assets/bootstrap/js/jquery.min.js",
    "assets/bootstrap/js/bootstrap.min.js"
  ],

Hoặc

Trong phong cách. tập tin css

@import 'assets/bootstrap/css/bootstrap.min.css';

Hoặc

trong chỉ mục. tệp html

under tag

under tag below jQuery library.

Cách thứ ba. Chỉ cần thêm cdn vào chỉ mục. tệp html

Bằng cách này, chúng ta sẽ phải sao chép cdn i. e url được cung cấp trên trang web chính thức của bootstrap trong chỉ mục. tập tin html Để có được cdn bấm vào đây

chỉ mục của bạn. tệp html sẽ trông giống như

  
  
  
  
  

      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">



  

  
  
  

In index.html file you should copy css link in section and js file in section

Note: Before adding Bootstrap’s JavaScript file, any js script in tag, jQuery must be included.

Kiểm tra xem bootstrap đã được cài đặt hoàn hảo trong Ứng dụng của bạn chưa

Bây giờ chúng tôi đã sẵn sàng sử dụng bootstrap trong bất kỳ thành phần ứng dụng nào của chúng tôi, Hãy kiểm tra nó trong ứng dụng thành phần chính. thành phần. html

$ cd myproject

Thật tuyệt, bạn đã thêm thành công bootstrap vào ứng dụng của mình, bạn sẽ thấy kết quả, nếu bạn thực hiện đúng các bước

Sử dụng chủ đề Bootswatch

Bạn có thể thay đổi chủ đề bootstrap của mình bằng Bootswatch, bạn chỉ cần truy cập trang web https. //bootswatch. com/. Nó sẽ mở ra trang web bên dưới như hình dưới đây. Trên trang web, bạn chỉ cần chọn một chủ đề và nhấp vào nút “Tải xuống”. Nó sẽ tải xuống một tệp có tên bootstrap. tối thiểu. css. Bạn phải sao chép nó trong thư mục tài sản như cách thứ hai được mô tả ở trên, sau đó thực hiện các thay đổi ở bất cứ nơi nào bạn đã khai báo trước đó

mục lục. html

$ cd myproject

Phong cách. css

$ cd myproject

góc cạnh. json

$ cd myproject

Bây giờ chủ đề của bạn đã được thay đổi, bạn có giao diện khác trong trình duyệt của mình, màu chủ đề đã được thay đổi như thế này, bạn có thể thử các chủ đề khác nhau vì Bootswatch cung cấp nhiều chủ đề khác nhau, bạn chỉ cần tải xuống và định cấu hình nó trong dự án của mình như được mô tả ở trên theo nhiều cách

Đó là tất cả. Trong bài đăng này, chúng tôi đã học được nhiều cách để thêm bootstrap trong Dự án góc. Cũng thấy ví dụ sau khi cài đặt bootstrap, cách thay đổi chủ đề với Bootswatch

Làm cách nào để cài đặt Bootstrap trong cli?

Làm cách nào để tìm phiên bản Bootstrap trong cmd?

Làm cách nào để cài đặt Bootstrap trên Windows?

Làm cách nào để cài đặt Bootstrap cục bộ?