Angular 애플리케이션에 부트스트랩을 추가하는 방법에 대한 5단계.
다음은 부트스트랩 사용의 몇 가지 장점입니다.
Angular 프로젝트에 Bootstrap을 추가하는 방법을 살펴보겠습니다. 먼저 Angular 프로젝트를 생성합니다.
Angular CLI를 사용하여 Angular 프로젝트 만들기
ng new add-bootstrap
# Would you like to add Angular routing?
# Select n and Hit Enter.
프로젝트 폴더 내부로 이동:
cd add-bootstrap
이제 프로젝트가 생성되었으므로 간단한 5단계로 프로젝트에 부트스트랩을 추가하는 방법을 살펴보겠습니다.
1단계: index.html을 사용하여 Angular에 부트스트랩 4 추가
index.html 파일에 부트스트랩 CDN을 링크로 추가하여 각진 프로젝트에 부트스트랩을 추가할 수 있습니다. 프로젝트에서 index.html을 엽니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ChatApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
*<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">*
</head>
<body>
<app-root></app-root>
*https://code.jquery.com/jquery-3.4.1.slim.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js*
</body>
</html>
2단계: NPM을 사용하여 Angular 프로젝트에 Bootstrap 4 설치
설치를 통해 프로젝트에 부트스트랩을 추가할 수 있습니다.
아래 명령을 실행합니다.
cd add-bootstrap
npm install bootstrap
설치 명령을 실행하기 전에 먼저 명령 프롬프트에서 프로젝트로 이동합니다.
3단계: Style.css를 사용하여 Angular에 부트스트랩 4 추가
style.css 파일에서 부트스트랩을 가져와 프로젝트에 부트스트랩을 추가할 수 있습니다.
@import "~bootstrap/dist/css/bootstrap.min.css";
4단계: angular.json을 사용하여 Angular에 부트스트랩 4 추가
.angular-cli.json 파일의 스타일 및 스크립트 배열에 파일 경로를 추가할 수 있습니다.
"styles": [
"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"
],
5단계: Bootstrap ng-bootstrap 및 ngx-bootstrap 사용
Bootstrap은 jQuery 및 Popper.js 라이브러리에 의존하며 프로젝트에 포함하지 않으면 JavaScript에 의존하는 모든 Bootstrap 구성 요소가 작동하지 않습니다.
Angular 프로젝트에 추가할 수 있는 방법은 다음과 같습니다.
먼저 ng-bootstrap 및 ngx-bootstrap을 설치합니다.
npm install --save @ng-bootstrap/ng-bootstrap
npm install --save ngx-bootstrap
두 번째는 import @ng-bootstrap입니다.
두 종속성을 모두 설치한 후 이제 app.module.ts에서 가져올 수 있습니다.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
위의 단계를 사용하여 프로젝트에 부트스트랩을 추가했으므로 이제 작동하는지 테스트하는 코드를 작성해 보겠습니다.
이제 코딩하자
우리는 문자 메시지를 위한 간단한 홈페이지를 만들 것입니다. app.component.html 열기
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand pl-5" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto pr-5">
<li class="nav-item active pl-3 pr-3">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item pl-3 pr-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown pl-3 pr-3">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid hero-page">
<div class="container">
<div class="row align-items-center" style="height: 60vh;">
<div class="col-6">
<h1>Showcase your app with Small Apps</h1>
<p>
Besides its beautiful design. Bootstrap is an incredibly rich core
framework for you to showcase your App.
</p>
</div>
</div>
</div>
</div>
<div class="container mt-5 pt-5 pb-5 mb-5">
<div
class="row align-items-center justify-content-around"
style="height: 60vh;"
>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark" style="min-height: 10vh;">
<div
class="row justify-content-center align-items-center p-0 m-0"
style="min-height: 10vh;"
>
<div class="col-12 text-center">
<p style="color: #fff;">Copyright © 2020</p>
</div>
</div>
</footer>
app.component.scss를 열고 코드를 추가합니다.
.hero-page {
background: linear-gradient(rgba(0, 0, 0, 0.548), rgba(0, 0, 0, 0.548)),
url("../../assets/story-slider-01.jpg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 80vh;
color: white;
font-size: 20px;
}
.hero-page h1 {
font-size: 50px;
font-weight: bolder;
margin-bottom: 30px;
line-height: 65px;
}
nav ul li a:hover {
color: #02225b;
}
nav a {
font-size: 20px;
font-weight: bolder;
}
nav a:hover {
color: #02225b;
}
결과는 아래에서 볼 수 있습니다.
우리는 Angular 9 앱에 Bootstrap 4를 포함하는 다양한 방법을 보았습니다.
Reference
이 문제에 관하여(Angular 애플리케이션에 부트스트랩을 추가하는 방법에 대한 5단계.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fayvik/5-steps-on-how-to-add-bootstrap-angular-application-8hc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
