Angular JSMEAN

วิธีติดตั้ง และใช้งาน Bootstrap กับ Fontawesome ในโปรเจค Angular

เรื่องที่เกี่ยวข้อง - , , ,

เนื้อหาอัพเดตให้รองรับ Angular 2 และ 4 เป็นต้นไป ใช้ได้เลย

ในคอร์สอบรม Angular Essential Training และ MEAN Stack มีการใช้งาน Bootstrap และ Fontawesome กับโปรเจคเว็บแอพพลิเคชั่นของเราด้วย เลยขอมาแชร์เอาไว้ที่นี่ เผื่อมีใครกำลังหาวิธีอยู่นะครับ

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

วิธีติดตั้ง Bootstrap และ Fontawesome ลงในโปรเจค Angular

ในที่นี้เราสามารถรันคำสั่งติดตั้ง Node module โดยตรงในโปรเจคของเราได้เลย โดยรันคำสั่งใน Command Prompt และ Powershell บน Windows หรือ Terminal ของ macOS

npm install --save bootstrap font-awesome

เสร็จแล้วก็ ให้เปิดไฟล์ src\style.css ที่ปกติเราจะประกาศ CSS Rule แบบ Global ขึ้นมา และสั่ง import ไฟล์ CSS ของ Bootstrap และ Fontawesome

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

เสร็จแล้วให้บันทึกไฟล์ และลองเรียกใช้ CSS class ของ Bootstrap ใน Angular Component ดู

<button class="btn btn-default">Sign in</button>

บันทึกไฟล์ และลองรันไฟล์ HTML ของเว็บเราขึ้นมาดู (ถ้าใช้ Angular CLI ก็รันคำสั่ง ng serve ได้เลย) เราก็จะเห็นปุ่มของเราสวยงาม สไตล์ Bootstrap แล้วล่ะครับ

Loading Facebook Comments ...
Menu