Diễn đàn bong88

Cộng đồng thành viên bong88

You are not logged in.

#1 2020-08-09 15:42:27

JeremyDox
Member
Registered: 2020-08-06
Posts: 126

You can also check WrapPixel’s Angular Bootstrap Templates

Bootstrap is a free and open-source front-end web framework for designing websites and web applications.

It contains HTML- and CSS-based design templates for typography

forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions.
Below are some advantages of using Bootstrap    Fewer Cross-browser bugs.Lightweight and customizable.Responsive structures and styles.

Let look at how we can add Bootstrap in an angular project

First, .

We are going to create an Angular project

Creating an Angular project using Angular CLI    ng new add-bootstrap # Would you like to add Angular routing.
# Select n and Hit Enter.
get inside the project folder:    cd add-bootstrap    Now that our project has been created, let look at how we can add bootstrap in our project in 5 simple steps.
Step 1: Adding Bootstrap 4 to Angular Using index.html    We can add Bootstrap to our angular project by adding the Bootstrap CDN in our index.html file as a link.
Open index.html in our project.
ChatApp           **        *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*      Step 2: Installing Bootstrap 4 in your Angular project using NPM    We can add Bootstrap to our project by the installation.
Run the command below:    cd add-bootstrap npm install bootstrap    We first navigate to our project in the command prompt before running the command for the installation.
Step 3: Adding Bootstrap 4 to Angular Using Style.css    We can add Bootstrap in our project by Importing bootstrap in our style.css file.
@import "~bootstrap/dist/css/bootstrap.min.css";    Step 4: Adding Bootstrap 4 to Angular Using angular.json    We can add the file paths to the styles and scripts array in file .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"   ],    Step 5: Using Bootstrap ng-bootstrap and ngx-bootstrap    Bootstrap depends on jQuery and Popper.js libraries, and if you don’t include them in your project, .

Any Bootstrap components that rely on JavaScript will not work
And can be added to your Angular project is the following way

First by installing ng-bootstrap and ngx-bootstrap:    npm install --save @ng-bootstrap/ng-bootstrap npm install --save ngx-bootstrap    Second by import @ng-bootstrap.
After the installation of both dependences, we can now import it in our app.module.ts    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';   @NgModule({   declarations: [AppComponent, ...],   imports: [NgbModule.forRoot(), ...],   bootstrap: [AppComponent] }) export class AppModule { }    Now that we have added bootstrap in our project using the above steps, let now write some code to test if it works.

Now let’s code    We are going to create a simple Homepage for texting

Open app.component.html       Navbar                                     Home (current)                       About                                  Dropdown                             Action           Another action                      Something else here                                                  Showcase your app with Small Apps                    Besides its beautiful design.

Bootstrap is an incredibly rich core           framework for you to showcase your App

Some quick example text to build on the card title and make up the           bulk of the card's content.
Some quick example text to build on the card title and make up the           bulk of the card's content.
Some quick example text to build on the card title and make up the           bulk of the card's content.

Copyright © 2020              Open app.component.scss and add the code

.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; }     The result can be seen below:        We have seen different ways of including Bootstrap 4 in an Angular 9 apps    Bonus Tips    You can use ready made angular templates to save lots of time and same time you can assured with highest quality.
You can also check WrapPixel’s Angular Bootstrap Templates.
Have a nice day.

The post Working with Bootstrap in an Angular App appeared first on WrapPixel

.

Offline

Board footer

Powered by FluxBB