Sử Dụng Ngx-bootstrap Bootstrap 3 Và 4 Trong Angular CLI

Trang chủ » Sử Dụng Bootstrap Trong Angular » Sử Dụng Ngx-bootstrap Bootstrap 3 Và 4 Trong Angular CLI

Có thể bạn quan tâm

Mục lục

Toggle
  • ngx-bootstrap là gì?
  • Cài đặt ngx-bootstrap
    • Cách 1
    • Cách 2
    • Cài đặt version bootstrap thủ công

ngx-bootstrap là gì?

ngx-bootstrap là một dự án Mã nguồn mở (MIT Licensed), đây là một dự án độc lập với sự phát triển liên tục được thực hiện nhờ sự hỗ trợ của những người ủng hộ tuyệt vời.

ngx-bootstrap chứa tất cả các thành phần Bootstrap cốt lõi (và không chỉ) do Angular cung cấp. Vì vậy, bạn không cần phải bao gồm các thành phần JS gốc, nhưng chúng tôi đang sử dụng đánh dấu và CSS do Bootstrap cung cấp.

Cài đặt ngx-bootstrap

Cách 1

Install ngx-bootstrap from npm:

npm install ngx-bootstrap --save

Thêm các module cần dùng:

import { TooltipModule } from 'ngx-bootstrap/tooltip'; @NgModule({ ... imports: [TooltipModule.forRoot(),...] ... })

Thêm component/thành phần vào page:

<button type="button" class="btn btn-primary" tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Simple demo </button>

Chọn style:

  • Bootstrap 3
<!-- index.html --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  • Bootstrap 4
<!--- index.html --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Cách 2

Dùng lệnh Angular CLI: ng add , để update dự án

ng add ngx-bootstrap

Hoặc dùng ng add 

ng add ngx-bootstrap --component tooltip

Thêm component vào page

<button type="button" class="btn btn-primary" tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Simple demo </button>

Cài đặt version bootstrap thủ công

Đôi khi, dự án của bạn có thể chứa một số thư viện có thể can thiệp vào khung bootstrap hoặc bạn có thể có một phiên bản bootstrap tùy chỉnh. Hậu quả là quá trình xác định phiên bản bootstrap có thể không thành công, có thể phá vỡ giao diện người dùng. Trong trường hợp đó, chúng tôi vẫn có thể đặt phiên bản bootstrap theo cách thủ công trong thành phần bootstrapping  (i.e. AppComponent):

import { setTheme } from 'ngx-bootstrap/utils'; @Component({...}) export class AppComponent { constructor() { setTheme('bs3'); // or 'bs4' ... } }

Tham khảo https://www.npmjs.com/package/ngx-bootstrap

Từ khóa » Sử Dụng Bootstrap Trong Angular