Tôi có thể sử dụng bootstrap với Angular không?

Ahmed là một tác giả kỹ thuật và nhà phát triển web sống ở Ma-rốc với bằng Thạc sĩ về phát triển phần mềm. Anh ấy là tác giả của nội dung kỹ thuật về … Thông tin thêm về Ahmed ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Thiết kế sản phẩm tốt hơn Masterclass

• 
  Các mẫu thiết kế giao diện thông minh, khóa học 8h-video

• 
  Giao diện người dùng SmashingConf 2023

• 
  Quảng cáo trên tạp chí Smashing

• 
  Bắt đầu miễn phí

• 
  Xem trực tiếp vào tháng 12. thứ 8

Trong trường hợp bạn đã thử xây dựng một ứng dụng web với Angular 7, thì đã đến lúc nâng cấp nó lên một tầm cao mới. Hãy xem cách chúng ta có thể tích hợp các kiểu Bootstrap CSS và các tệp JavaScript với một dự án Angular được tạo bằng Angular CLI và cách sử dụng các lớp và điều khiển biểu mẫu để tạo các biểu mẫu đẹp và cách tạo kiểu cho các bảng HTML bằng các kiểu Bảng

Đối với phần Góc, chúng tôi sẽ tạo một ứng dụng phía máy khách đơn giản để tạo và liệt kê các liên hệ. Mỗi liên hệ có ID, tên, email và mô tả và chúng tôi sẽ sử dụng một dịch vụ dữ liệu đơn giản lưu trữ các liên hệ trong một mảng TypeScript. Thay vào đó, bạn có thể sử dụng API trong bộ nhớ nâng cao. (Xem “Hướng dẫn đầy đủ về định tuyến trong góc”. )

Ghi chú. Bạn có thể lấy mã nguồn của hướng dẫn này từ kho lưu trữ GitHub này và xem ví dụ trực tiếp tại đây

Yêu cầu

Trước khi bắt đầu tạo ứng dụng demo, hãy xem các yêu cầu cần thiết cho hướng dẫn này

Về cơ bản, bạn sẽ cần những điều sau đây

• Nút. js và NPM (bạn có thể chỉ cần truy cập trang web chính thức và tải xuống các tệp nhị phân cho hệ thống của mình),
• Làm quen với TypeScript,
• Kinh nghiệm làm việc của Angular,
• Kiến thức cơ bản về CSS và HTML
  

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Cài đặt CLI góc

Hãy bắt đầu bằng cách cài đặt phiên bản mới nhất của Angular CLI. Trong thiết bị đầu cuối của bạn, hãy chạy lệnh sau

$ npm install -g @angular/cli

Tại thời điểm viết, v7. 0. 3 của Angular CLI đã được cài đặt. Nếu bạn đã cài đặt CLI, bạn có thể đảm bảo rằng mình có phiên bản mới nhất bằng cách sử dụng lệnh này

$ ng --version

Tạo một dự án

Khi bạn đã cài đặt Angular CLI, hãy sử dụng nó để tạo dự án Angular 7 bằng cách chạy lệnh sau

$ ng new angular-bootstrap-demo

CLI sau đó sẽ hỏi bạn

Bạn có muốn thêm định tuyến góc không?

Nhấn Y. Tiếp theo, nó sẽ hỏi bạn

Bạn muốn sử dụng định dạng biểu định kiểu nào?

Chọn “CSS”

Thêm Bootstrap

Sau khi tạo dự án, bạn cần cài đặt Bootstrap 4 và tích hợp nó với dự án Angular của bạn

Đầu tiên, điều hướng bên trong thư mục gốc của dự án của bạn

$ cd angular-bootstrap-demo

Tiếp theo, cài đặt Bootstrap 4 và jQuery từ npm

$ npm install --save bootstrap jquery

(Trong trường hợp này, bootstrap v4. 2. 1 và jquery v3. 3. 1 được cài đặt. )

Cuối cùng, mở tệp

$ ng new angular-bootstrap-demo

$ ng new angular-bootstrap-demo

$ ng new angular-bootstrap-demo

$ ng new angular-bootstrap-demo

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

Kiểm tra cách thêm Bootstrap vào dự án Angular 6 để biết các tùy chọn về cách tích hợp Bootstrap với Angular

Thêm một dịch vụ dữ liệu

Sau khi tạo dự án và thêm Bootstrap 4, chúng tôi sẽ tạo một dịch vụ Angular sẽ được sử dụng để cung cấp một số dữ liệu demo để hiển thị trong ứng dụng của chúng tôi

Trong thiết bị đầu cuối của bạn, hãy chạy lệnh sau để tạo dịch vụ

$ ng --version

Điều này sẽ tạo ra hai tệp

$ ng new angular-bootstrap-demo

$ ng new angular-bootstrap-demo

Mở

$ ng new angular-bootstrap-demo

$ ng --version

Chúng tôi thêm một mảng

$ cd angular-bootstrap-demo

$ cd angular-bootstrap-demo

$ cd angular-bootstrap-demo

$ cd angular-bootstrap-demo

Thêm thành phần

Sau khi tạo dịch vụ dữ liệu, tiếp theo chúng ta cần tạo một số thành phần cho ứng dụng của mình. Trong thiết bị đầu cuối của bạn, hãy chạy

$ ng --version

Tiếp theo, chúng tôi sẽ thêm các thành phần này vào mô-đun định tuyến để bật điều hướng trong ứng dụng của chúng tôi. Mở tệp

$ cd angular-bootstrap-demo

$ ng new angular-bootstrap-demo

Chúng tôi sử dụng thuộc tính

$ cd angular-bootstrap-demo

Thêm các thành phần đầu trang và chân trang

Tiếp theo, hãy tạo các thành phần đầu trang và chân trang

$ ng --version

Mở tệp

$ cd angular-bootstrap-demo

$ ng --version

Một thanh điều hướng sẽ được tạo bằng Bootstrap 4 và chúng tôi sẽ sử dụng chỉ thị

$ cd angular-bootstrap-demo

Sử dụng các lớp

$ cd angular-bootstrap-demo

$ cd angular-bootstrap-demo

$ npm install --save bootstrap jquery

Tiếp theo, mở tệp

$ npm install --save bootstrap jquery

$ ng --version

Tiếp theo, mở tệp

$ npm install --save bootstrap jquery

$ ng --version

Mở tệp

$ npm install --save bootstrap jquery

$ ng --version

Tiếp theo, mở tệp

$ npm install --save bootstrap jquery

$ ng --version

Chúng tôi đang tạo vỏ ứng dụng bằng cách sử dụng các thành phần đầu trang và chân trang, điều đó có nghĩa là chúng sẽ xuất hiện trên mọi trang trong ứng dụng của chúng tôi. Phần duy nhất sẽ được thay đổi là những gì sẽ được lắp vào ổ cắm của bộ định tuyến (xem “The Application Shell” trên trang web Angular để biết thêm thông tin)

Thêm Bootstrap Jumbotron

Theo tài liệu Bootstrap

“Jumbotron là một thành phần nhẹ, linh hoạt, có thể tùy chọn mở rộng toàn bộ khung nhìn để hiển thị các thông điệp tiếp thị chính trên trang web của bạn. ”

Hãy thêm một thành phần Jumbotron vào trang chủ của chúng tôi. Mở tệp

$ npm install --save bootstrap jquery

$ ng --version

Lớp

$ npm install --save bootstrap jquery

Thêm một thành phần danh sách. Sử dụng bảng Bootstrap

Bây giờ, hãy tạo dữ liệu thành phần trong danh sách từ dịch vụ dữ liệu và sử dụng bảng Bootstrap 4 để hiển thị dữ liệu dạng bảng

Đầu tiên, mở tệp

$ npm install --save bootstrap jquery

$ cd angular-bootstrap-demo

$ ng --version

Chúng tôi đã thêm hai biến

$ cd angular-bootstrap-demo

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

Mở tệp

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

$ ng --version

Chúng tôi chỉ cần lặp qua mảng

$ cd angular-bootstrap-demo

Đây là định nghĩa của Thẻ từ tài liệu Bootstrap 4

“Thẻ là nơi chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn cho đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Nếu bạn đã quen thuộc với Bootstrap 3, các thẻ sẽ thay thế các bảng, giếng và hình thu nhỏ cũ của chúng tôi. Chức năng tương tự cho các thành phần đó có sẵn dưới dạng các lớp sửa đổi cho thẻ. ”

Chúng tôi sử dụng các lớp

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

$ ng --version

Thêm một thành phần tạo. Sử dụng các lớp và điều khiển biểu mẫu Bootstrap

Bây giờ hãy thêm một biểu mẫu vào thành phần

$ ng --version

$ ng --version

$ ng --version

$ ng --version

$ ng --version

$ ng --version

$ ng --version

Tiếp theo, mở tệp

$ ng --version

$ ng new angular-bootstrap-demo

Tiếp theo, mở tệp

$ ng --version

$ ng new angular-bootstrap-demo

Chúng tôi sử dụng các lớp

$ ng --version

$ ng --version

Chúng tôi sử dụng chỉ thị

$ ng --version

đề nghị đọc. Quản lý các điểm ngắt hình ảnh với góc của Tamas Piros

Chạy ứng dụng góc

Ở bước này, hãy chạy ứng dụng và xem mọi thứ có hoạt động như mong đợi không. Đi đến thiết bị đầu cuối của bạn, đảm bảo rằng bạn đang ở trong thư mục gốc của dự án, sau đó chạy lệnh sau

$ ng new angular-bootstrap-demo

Máy chủ phát triển tải lại trực tiếp sẽ chạy từ địa chỉ

$ ng --version

Nếu bạn điều hướng đến trang Danh bạ, bạn sẽ thấy

Nếu bạn điều hướng đến trang “Tạo địa chỉ liên hệ”, bạn sẽ thấy

Sự kết luận

Trong hướng dẫn này, chúng ta đã thấy cách tạo một ứng dụng Angular đơn giản với giao diện Bootstrap. Bạn có thể tìm mã nguồn hoàn chỉnh trên GitHub và xem ví dụ trực tiếp tại đây

Bootstrap có tốt với Angular không?

Bootstrap tốt nhất cho Angular là gì?

Tại sao Bootstrap không hoạt động trong Angular?

Làm thế nào để một ứng dụng Angular Bootstrap?