Để ghi đè cài đặt Bootstrap (các biến), hãy đặt mã trước các câu lệnh @import của Bootstrap - ví dụ được cung cấp trong > npm i bootstrap@latest 9
Máy chủ phát triển
Chạy ng serve cho máy chủ nhà phát triển. Điều hướng đến > npm i bootstrap@latest 0. Ứng dụng sẽ tự động tải lại nếu bạn thay đổi bất kỳ tệp nguồn nào
Angular và Bootstrap là những công cụ rất hữu ích khi phát triển giao diện người dùng. Bạn có thể xây dựng các ứng dụng trang đơn với các tính năng mạnh mẽ của Angular và làm cho chúng trông đẹp mắt bằng cách sử dụng các lớp và thành phần Bootstrap. Cả hai đều có phiên bản mới, trùng hợp là mỗi phiên bản đều có phiên bản 4. Tuy nhiên, Bootstrap 4 hiện đang trong giai đoạn thử nghiệm
Trong bài đăng trên blog này, tôi sẽ giải thích cách nhập mô-đun Bootstrap 4 Sass trong ứng dụng Angular 4 dưới dạng SCSS
CẬP NHẬT - 05/12/2017. Angular vừa ra mắt phiên bản 5. 0. 0 và phương pháp trong bài đăng này cũng áp dụng cho Angular 5
Tạo một ứng dụng Angular 4 mới để sử dụng SCSS
Theo mặc định, các ứng dụng Angular 4 sử dụng css làm tệp kiểu. Tuy nhiên, điều này có thể được sửa đổi. Để đạt được điều này, chúng tôi chỉ bao gồm một thuộc tính cd my-new-app npm install --save @ng-bootstrap/ng-bootstrap0 trong cuộc gọi của mình trong khi tạo ứng dụng của mình bằng Angular CLI
ng new my-new-app --style=scssỞ đây “my-new-app” là tên ứng dụng của chúng ta. Bạn có thể thay thế bằng tên mà bạn chọn cho ứng dụng của mình
Cài đặt Mô-đun Ng-Bootstrap
Bắt đầu từ Angular 2, có một mô-đun tích hợp cho các thành phần javascript của Bootstrap 4. NgBootstrap. Bây giờ, hãy đưa nó vào ứng dụng của chúng ta. Trước tiên chúng ta nên vào thư mục ứng dụng của mình và sau đó cài đặt mô-đun @ng-bootstrap bằng npm
cd my-new-app npm install --save @ng-bootstrap/ng-bootstrapBây giờ, hãy tích hợp mô-đun này vào ứng dụng của chúng tôi. mô-đun. tập tin ts. Vui lòng xem cách chúng tôi nhập NgbModule vào tệp TypeScript và nhập trong lớp AppModule trong trình trang trí NgModule
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgbModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Cài đặt Bootstrap Sass và nhập
Bây giờ, chúng ta cần cài đặt Bootstrap 4 và nhập tệp scss chính của nó vào ứng dụng của chúng ta. Ng-bootstrap chỉ cài đặt các thành phần Bản in. Chúng tôi cần cài đặt Bootstrap mà không bao gồm các tệp Javascript
npm install --save bootstrap@4.0.0-beta.2Sau đó, chúng ta cần nhập Bootstrap Sass vào ứng dụng của mình. trong phong cách. scss thêm dòng này
@import "../node_modules/bootstrap/scss/bootstrap.scss";Tùy chỉnh biến Bootstrap
Tôi thích tạo một tệp riêng để đặt tất cả các tùy chỉnh bootstrap, chẳng hạn như màu liên kết. Hãy để chúng tôi tạo thư mục “style” trong “src/assets” và tạo một tệp có tên “_bootstrap_customizations. scss”
________số 8_______Sau đó, thay đổi màu liên kết thành màu đỏ trong tất cả ứng dụng của chúng tôi bằng cách sử dụng biến $link-color của bootstrap
$link-color: red !default;Để làm cho điều này có hiệu lực trên toàn cầu trong ứng dụng của chúng tôi, chúng tôi nhập tệp này theo kiểu của chúng tôi. scss trước bootstrap. Bây giờ phong cách của chúng tôi. cscc trở thành
@import "./assets/styles/bootstrap_customizations.scss"; @import "../node_modules/bootstrap/scss/bootstrap.scss";Bài kiểm tra
Để kiểm tra tất cả những điều này, chúng ta hãy tạo một vùng chứa và thẻ trong ứng dụng của mình. thành phần. html và đặt một số văn bản và liên kết ở đó
Thay đổi ứng dụng. thành phần. html bằng cách xóa tất cả và chèn
<div class="container"> <div class="card"> <div class="card-body"> <h1>Hello World!</h1> <p> <a href="#">Link to Mars</a> </p> </div> </div> </div>Chạy ứng dụng bằng cách sử dụng angular-cli
ng serveMở trình duyệt của bạn và điều hướng đến “localhost. 4200” và kết quả sẽ tương tự như thế này
Phần kết luận
Có thể thấy, việc đưa mô-đun Bootstrap 4 Sass vào các ứng dụng Angular 2/4/5 rất đơn giản