วิธีเพิ่ม Bootstrap เป็นเชิงมุม [Step-by-Step]

HTML, JavaScript และ CSS เป็นหนึ่งในเสาหลักของการพัฒนาส่วนหน้า Angular เป็นหนึ่งในเฟรมเวิร์ก JavaScript ที่ใช้มากที่สุดสำหรับการสร้างแอปพลิเคชันฝั่งไคลเอ็นต์ ในทางกลับกัน Bootstrap เป็นหนึ่งในเฟรมเวิร์ก User Interface (UI) ที่ได้รับความนิยมสูงสุด

กรอบงานคือชุดของชุดโค้ด เครื่องมือ และไลบรารีที่สร้างไว้ล่วงหน้าซึ่งนำเสนอวิธีการสร้างแอปพลิเคชันที่กำหนดไว้ล่วงหน้า Bootstrap และ Angular เป็นทั้งเฟรมเวิร์ก

บทความนี้จะกำหนดเฟรมเวิร์กแต่ละรายการและหารือเกี่ยวกับประโยชน์ของการรวมเทคโนโลยีทั้งสองเข้าด้วยกัน และวิธีการรวมเข้าด้วยกันเพื่อสร้างแอพที่ดึงดูดสายตาและทรงพลัง

สารบัญ

Bootstrap คืออะไร?

Bootstrap เป็นชุดเครื่องมือส่วนหน้าฟรีสำหรับสร้างแอปพลิเคชันมือถือเป็นอันดับแรก เฟรมเวิร์ก HTML, CSS และ JavaScript นี้มีคอลเล็กชันโค้ดที่ใช้ซ้ำได้จำนวนมาก ซึ่งนักพัฒนาสามารถใช้ในส่วนต่างๆ ของโครงการได้

เฟรมเวิร์กนี้มีเทมเพลตการออกแบบสำหรับฟีเจอร์ต่างๆ เช่น ปุ่ม โมดอล ภาพหมุน ตาราง การนำทาง และอื่นๆ อีกมากมาย Bootstrap มีเอกสารมากมายเพื่อให้ง่ายต่อการใช้งาน

AngularJS คืออะไร?

AngularJS เป็นเฟรมเวิร์ก JavaScript ที่ขยายไวยากรณ์ของ HTML นอกเหนือจากภาษามาร์กอัปทั่วไป เฟรมเวิร์กนี้แนะนำฟีเจอร์ต่างๆ เช่น การผูกข้อมูลที่ช่วยให้นักพัฒนาสามารถหลีกเลี่ยงกระบวนการที่ซับซ้อนในการสร้างหน้าเว็บที่ตอบสนองเมื่อใช้ HTML

AngularJS ใช้เฟรมเวิร์ก model-view-controller (MVC) ซึ่งมีการแยกระหว่างตรรกะของแอปพลิเคชันและอินเทอร์เฟซผู้ใช้อย่างชัดเจน นักพัฒนาสามารถใช้ AngularJS เพื่อสร้างแอปพลิเคชันเว็บหน้าเดียว แอปพลิเคชันเครือข่ายสังคมออนไลน์ แพลตฟอร์มอีคอมเมิร์ซ ระบบจัดการเนื้อหา และอื่นๆ

ประโยชน์ของการใช้ Bootstrap ในเชิงมุม

ส่วนประกอบ UI ที่สร้างไว้ล่วงหน้า: คุณไม่จำเป็นต้องสร้างแถบการนำทาง ปุ่ม ภาพหมุน และการ์ดตั้งแต่เริ่มต้น เนื่องจาก Bootstrap มีโค้ดที่สร้างไว้ล่วงหน้าที่คุณสามารถใช้ได้ ดังนั้น นักพัฒนาสามารถมุ่งเน้นไปที่การทำงานมากขึ้นในขณะที่ Bootstrap ดูแลโครงสร้างพื้นฐานและสไตล์
ปรับแต่งได้: ส่วนประกอบที่สร้างไว้ล่วงหน้ามีรหัสสำเร็จรูป อย่างไรก็ตาม คุณสามารถปรับแต่งโค้ดได้ในขณะที่อยู่ในแอปพลิเคชันของคุณ ตัวอย่างเช่น หากคุณใช้การ์ดจาก Bootstrap คุณสามารถเปลี่ยนองค์ประกอบต่างๆ เช่น รูปภาพและข้อความให้เหมาะกับความต้องการของคุณ
ตอบสนอง: ผู้ใช้เว็บสมัยใหม่เรียกดูบนอุปกรณ์ต่างๆ ตั้งแต่สมาร์ทโฟนและแท็บเล็ตไปจนถึงคอมพิวเตอร์ คุณไม่จำเป็นต้องสร้างแอปพลิเคชันสำหรับแต่ละขนาดหน้าจอ เนื่องจาก Bootstrap มีเว็บแอปพลิเคชันที่ตอบสนอง
นำสไตล์ที่สอดคล้องกันมาใช้: เว็บแอปพลิเคชันที่ดีควรให้ความรู้สึกที่สอดคล้องกันและดูผ่านหน้าต่างๆ การใช้องค์ประกอบและส่วนประกอบของ Bootstrap สามารถช่วยให้คุณบรรลุเป้าหมายนี้ได้
ชุมชนที่แข็งแกร่ง: เฟรมเวิร์กนี้อัดแน่นไปด้วยทรัพยากรมากมายและเอกสารประกอบที่แข็งแกร่ง และได้รับการสนับสนุนจากนักพัฒนาจำนวนมาก

ข้อกำหนดเบื้องต้น

#1. โหนด js

วิธีเปลี่ยนอีเมลใน Amazon

นี่เป็นสภาพแวดล้อมรันไทม์ของ JavaScript ที่คุณจะใช้เพื่อเรียกใช้โค้ด JavaScript นอกเบราว์เซอร์ คุณสามารถตรวจสอบเวอร์ชันปัจจุบันของ Node.js ได้โดยใช้คำสั่งนี้

โหนด -v

คุณสามารถติดตั้งได้จากเว็บไซต์อย่างเป็นทางการหากยังไม่ได้ติดตั้ง

#2. ตัวจัดการแพ็กเกจโหนด (NPM)

NPM จะจัดการแพ็คเกจที่เกี่ยวข้องทั้งหมดที่คุณต้องการสำหรับแอปเชิงมุมของคุณ NPM ได้รับการติดตั้งตามค่าเริ่มต้นเมื่อคุณติดตั้ง Node.js คุณสามารถตรวจสอบเวอร์ชันปัจจุบันโดยใช้คำสั่งนี้

npm -v

#3. CLI เชิงมุม

เป็นเครื่องมือบรรทัดคำสั่งที่เราจะใช้เพื่อสร้างโครงสร้างพื้นฐานของแอปเชิงมุม คุณสามารถติดตั้ง Angular CLI โดยใช้คำสั่งนี้

npm ติดตั้ง -g @angular/cli

#4. สภาพแวดล้อมการพัฒนาแบบบูรณาการ (IDE)

นี่คือที่ที่คุณจะเขียนโค้ดของคุณ คุณสามารถใช้ IDE ใดก็ได้ที่รองรับ JavaScript เช่น Visual Studio Code หรือ Webstorm

วิธีเพิ่ม Bootstrap ให้กับ Angular

ขณะนี้เรามีเครื่องมือทั้งหมดที่จำเป็นสำหรับการสร้างแอปเชิงมุมของเรา มีสองวิธีหลักในการเพิ่ม Bootstrap ให้กับ Angular; 1. การติดตั้ง Bootstrap โดยใช้ NPM 2. การใช้ลิงก์ CDN

แนวทางที่ 1: การใช้ NPM

เราสามารถติดตั้งไลบรารี Bootstrap ทั้งหมดในโครงการของเราโดยใช้ NPM ทำตามขั้นตอนเหล่านี้

ขั้นตอนที่ 1: ใช้ Angular CLI เพื่อตั้งค่าโครงสร้างพื้นฐานของแอป

แอป Angular ทั่วไปมีไฟล์จำนวนมาก เราจะตั้งชื่อแอปของเราว่า angular-bootstrap-mockup (คุณสามารถตั้งชื่อแอปได้ตามต้องการ) ใช้คำสั่งนี้เพื่อตั้งค่าแอปของคุณ

ng ใหม่ angular-bootstrap-mockup

คุณจะผ่านคำถามเหล่านี้

คุณต้องการเพิ่มการกำหนดเส้นทางเชิงมุมหรือไม่ (y/N) ป้อน y
คุณต้องการใช้รูปแบบสไตล์ชีตใด เลือก CSS

เมื่อการตั้งค่าเสร็จสิ้น คุณจะมีบางอย่างที่คล้ายกันในเทอร์มินัลของคุณ

นำทางไปยังโครงการที่สร้างขึ้นและย้ายไปยังขั้นตอนที่ 2 คุณสามารถใช้คำสั่งนี้

cd angular-bootstrap-mockup

เปิดโครงการในตัวแก้ไขรหัสของคุณ โครงสร้างโครงการจะเป็นดังนี้

ขั้นตอนที่ 2: ติดตั้งไอคอน bootstrap และ bootstrap

เรียกใช้คำสั่งนี้เพื่อติดตั้งทั้งสองอย่าง

npm ติดตั้ง bootstrap bootstrap-icons

ขั้นตอนที่ 3: รวม Bootstrap ในไฟล์ angular.json

ค้นหาไฟล์ angular.json ในโฟลเดอร์รูทของแอปและเปลี่ยนบรรทัดเหล่านี้

"styles": [

  "node_modules/bootstrap/scss/bootstrap.scss",

  "node_modules/bootstrap-icons/font/bootstrap-icons.css",

  "src/styles.scss"

],

"scripts": [

  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

]

ขั้นตอนที่ 4: ติดตั้ง ng-bootstrap

Ng-bootstrap คือชุดของส่วนประกอบ Angular UI ที่สร้างขึ้นบนเฟรมเวิร์ก Bootstrap ส่วนประกอบต่างๆ ในไลบรารีนี้ออกแบบมาเพื่อทำงานกับ AngularJS

ใช้คำสั่งนี้เพื่อติดตั้ง

npm ติดตั้ง @ng-bootstrap/ng-bootstrap

ขั้นตอนที่ 5: แก้ไข app.module.ts เพื่อรวม NgbModule

คุณสามารถเรียนรู้อะไรจากสิ่งหนึ่ง?

เปลี่ยนเนื้อหาของไฟล์ app.module.ts ด้วยสิ่งนี้

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    NgbModule,

    AppRoutingModule,

  ],

  providers: [

  ],

  bootstrap: [

    AppComponent,

  ],

})

export class AppModule {

}

ขั้นตอนที่ 5: แก้ไข app.component.ts

import { Component } from '@angular/core';

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

})

export class AppComponent {

  constructor(private modalService: NgbModal) {

  }

  public open(modal: any): void {

    this.modalService.open(modal);

  }

}

ขั้นตอนที่ 6: เพิ่มองค์ประกอบ Bootstrap ลงในไฟล์ app.component.html

มีส่วนประกอบมากมายให้เลือกจากเว็บไซต์ Bootstrap เราจะสร้าง navbar อย่างง่ายและเพิ่มสองปุ่ม

เปลี่ยนเนื้อหาของ app.component.html ดังนี้

<ul class="nav">

  <li class="nav-item">

    <a class="nav-link active" aria-current="page" href="#">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Services</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">About</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled">Blog</a>

  </li>

</ul>

<button type="button" class="btn btn-primary btn-lg">Angular</button>

<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>

ขั้นตอนที่ 7: เรียกใช้แอปของคุณ

ใช้คำสั่งนี้

ng ให้บริการ

เมื่อการพัฒนาเชิงมุมทำงาน คุณสามารถเปิด http://localhost:4200/ บนเบราว์เซอร์ของคุณ

วิธีที่ 2: เพิ่ม Bootstrap เป็น Angular โดยใช้ลิงก์ CDN

วิธีนี้ช่วยให้คุณเชื่อมโยงไปยัง Content Delivery Network (CDN) ที่เก็บไฟล์ Bootstrap ได้โดยตรง

เราสามารถสร้างปุ่มหลายปุ่มโดยใช้แนวทางนี้ในโครงการใหม่ ทำตามขั้นตอนเหล่านี้

ขั้นตอนที่ 1: สร้างโครงการเชิงมุมใหม่

เราจะตั้งชื่อ app ของเราว่า angular-bootstrap-cdn (เลือกชื่ออะไรก็ได้)

เรียกใช้คำสั่งนี้

ng ใหม่ angular-bootstrap-cdn.dll

เมื่อการติดตั้งเสร็จสิ้น ให้เปลี่ยนไดเร็กทอรีและเปิดโครงการของคุณในโปรแกรมแก้ไขโค้ด คุณสามารถใช้คำสั่งนี้เพื่อเข้าสู่ไดเร็กทอรีโปรเจ็กต์

cd angular-bootstrap-cdn

ขั้นตอนที่ 2: รวมลิงก์ CDN ไว้ในไฟล์ index.html

ค้นหาไฟล์ src/index.html และลิงก์ CDN ในส่วนหัว

<head>

…….

  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

………

</head>

ขั้นตอนที่ 3: เพิ่มรหัส Bootstrap ลงในไฟล์ app.component.html

วิธีรับเนื้อเพลงในหน้าต่างลอยสำหรับ Spotify Track ปัจจุบัน

ค้นหาไฟล์ src/app/app.component.html

คุณสามารถเพิ่มรหัสนี้ในไฟล์

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ขั้นตอนที่ 4: เรียกใช้แอปของคุณ

ng ให้บริการ

คำถามที่พบบ่อย

คุณสามารถใช้ Bootstrap และ Angular Material ร่วมกันในโครงการเดียวกันได้หรือไม่?

ใช่. Bootstrap และ Angular Material เป็นไลบรารี UI ที่สร้างขึ้นเพื่อตอบสนองวัตถุประสงค์เดียวกัน อย่างไรก็ตาม คุณไม่ควรใช้ไลบรารีทั้งสองเมื่อจัดการกับคอมโพเนนต์เดียวกัน เนื่องจากไลบรารีเหล่านี้มีแนวโน้มที่จะเสียหาย ตัวอย่างเช่น หากคุณต้องการสร้างหน้าเข้าสู่ระบบ ให้เลือกตามส่วนประกอบที่มีอยู่

Bootstrap เวอร์ชันใดที่เข้ากันได้กับ Angular

Bootstrap เวอร์ชันปัจจุบันตามที่เขียนนี้คือ v5.3.0-alpha2 ในทางกลับกัน Angular เวอร์ชันปัจจุบันคือ Angular 15 ทุกอย่างจาก Bootstrap 4 เข้ากันได้กับ Angular เวอร์ชันต่างๆ อย่างไรก็ตาม โปรดตรวจสอบเอกสารประกอบในเว็บไซต์ทางการของ Bootstrap และ Angular เสมอเมื่อรวมเทคโนโลยีทั้งสองเข้าด้วยกัน

โครงการใดที่คุณสามารถสร้างโดยใช้ Bootstrap และ Angular

ไม่มีข้อจำกัดเกี่ยวกับลักษณะของแอปพลิเคชันที่คุณสามารถสร้างได้โดยใช้ Bootstrap และ Angular คุณสามารถใช้ทั้งสองเพื่อสร้างแอปพลิเคชันหน้าเดียว เว็บไซต์อีคอมเมิร์ซ แพลตฟอร์มโซเชียล แดชบอร์ด และแผงการดูแลระบบ คุณยังสามารถใช้ Angular กับ Ionic framework เพื่อสร้างแอปพลิเคชันมือถือ

Angular เป็นเฟรมเวิร์ก JavaScript หรือ TypeScript หรือไม่

Angular เป็นเฟรมเวิร์ก JavaScript อย่างไรก็ตาม Angular เขียนด้วย TypeScript ซึ่งเป็น superset ของ JavaScript TypeScript แนะนำฟังก์ชันใหม่ที่ไม่มีใน JavaScript คุณจึงสามารถใช้ Angular กับทั้งแอป TypeScript และ Angular ได้

บทสรุป

ตอนนี้คุณสามารถใช้เฟรมเวิร์กส่วนหน้าที่ได้รับความนิยมสูงสุดสองรายการอย่างสะดวกสบาย ได้แก่ Angular และ Bootstrap เพื่อสร้างแอปพลิเคชันต่างๆ

ทางเลือกของแนวทางจะขึ้นอยู่กับกรณีการใช้งานและประเภทของแอพที่คุณต้องการสร้าง

แม้ว่าแนวทาง CDN จะดูง่าย แต่ก็มีข้อเสียหลายประการ ความท้าทายที่สำคัญคือความปลอดภัยของแอป เนื่องจากแฮ็กเกอร์สามารถใช้ CDN เพื่อส่งสคริปต์ที่เป็นอันตรายไปยังเว็บไซต์ของคุณ

การติดตั้ง Bootstrap โดยใช้ NPM ช่วยให้คุณควบคุมโค้ดที่คุณรวมไว้ในแอปพลิเคชันของคุณได้ อย่างไรก็ตาม วิธีการนี้อาจใช้เวลานานเนื่องจากคุณต้องดาวน์โหลดการอ้างอิงทั้งหมด

ดูวิธีเพิ่ม Bootstrap ให้กับแอป React

ปฏิกิริยาของคุณคืออะไร?