จะติดตั้ง Bootstrap ในเชิงมุมได้อย่างไร? 5 วิธีง่ายๆ

หน้าเว็บทำงานได้ดีที่สุดเมื่อมีการโต้ตอบ อย่างไรก็ตาม ดูเหมือนจะเป็นไปไม่ได้ที่จะพัฒนาหน้าเว็บใหม่ในชั่วข้ามคืน

นี่คือเวลาที่คุณอาจรู้สึกว่าจำเป็นต้องเข้าถึงหน้าเว็บที่อาจพบได้ทั่วไปแต่สามารถแก้ไขได้อย่างง่ายดายด้วยรหัสที่กำหนดเอง นี่คือที่มาของBootstrap

ให้เราเริ่มต้นด้วยการทำความเข้าใจวิธีการ ติดตั้ง Bootstrap ใน Angular เพื่อสร้างเว็บแอปพลิเคชันที่ตอบสนองและสดใสบน Angular!

ทำความเข้าใจกับ Bootstrap: คำแนะนำเบื้องต้น

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

Bootstrap ได้รับความนิยมอย่างมาก และประมาณ 25.8% ของเว็บไซต์ทั้งหมดที่ใช้ JavaScript ใช้ Bootstrap ซึ่งบ่งบอกถึงความสำคัญในตลาด

Bootstrap: สรุปประวัติของมัน

เริ่มแรกสร้างขึ้นเพื่อเป็นเครื่องมือภายในสำหรับเว็บไซต์โซเชียลเน็ตเวิร์กยอดนิยม Twitter วิศวกร Jacob Thornton และ Mark Otto ตัดสินใจเผยแพร่ Bootstrap สำหรับการใช้งานสาธารณะในเดือนสิงหาคม 2554 บนที่เก็บโอเพ่นซอร์ส GitHub

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

ผู้สร้าง Mark และ Jacob เปิดตัว Bootstrap- Bootstrap 5.3.0 เวอร์ชันล่าสุด ในปี 2023

ตรวจสอบหลักสูตรเทคโนโลยีฟรีของเราเพื่อรับความได้เปรียบเหนือการแข่งขัน

คุณควรใช้ Bootstrap หรือไม่

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

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

คุณสมบัติที่เป็นมิตรที่สุดที่ทำให้ Bootstrap เป็นตัวเลือกยอดนิยมสำหรับการฝังใน Angular หรือสำหรับการเพิ่มการติดตั้ง Angular Bootstrap คือ-

ด้านส่วนประกอบ

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

ตรวจสอบหลักสูตรการพัฒนาซอฟต์แวร์ ของ upGrad เพื่อเพิ่มทักษะให้กับตัวคุณเอง

ด้านการปรับแต่ง

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

ประหยัดเวลา

กรอบของ Bootstrap เมื่อฝังอยู่ใน Angular ทำให้ประหยัดเวลาได้มากในบิตไทม์ไลน์ ด้วยบล็อกที่พร้อม ใช้ งานใน Bootstrap คุณจึงไม่จำเป็นต้องเริ่มต้นตั้งแต่ต้นเมื่อคุณติดตั้ง Bootstrap 5 ในเชิงมุมเพียงแค่จัดองค์ประกอบที่สร้างขึ้นใหม่และทำให้สิ่งเหล่านี้ใช้งานได้กับอินพุตของคุณก็เป็นเคล็ดลับและเพิ่มความเป็นเอกลักษณ์ให้กับผลิตภัณฑ์ขั้นสุดท้ายของคุณ

ข้อกำหนดเบื้องต้นสำหรับการติดตั้ง Bootstrap ในเชิงมุม

นี่คือรายการตรวจสอบข้อกำหนดเบื้องต้นสำหรับการเพิ่ม Bootstrap ให้กับ Angular ตรวจสอบให้แน่ใจว่าคุณกำหนดค่าเครื่องมือที่แสดงรายการหลังจากติดตั้งเครื่องมือเดียวกันสำหรับสร้างแอปพลิเคชันเชิงมุม

• Git : นี่คือการตั้งค่าหน่วยควบคุมเวอร์ชันแบบกระจายเพื่อใช้สำหรับการซิงค์ที่เก็บ
• IDE – การใช้สภาพแวดล้อมการพัฒนาแบบบูรณาการที่มีอินเทอร์เฟซแบบกราฟิกมีความสำคัญต่อการพัฒนาแอปพลิเคชัน รวมถึง Angular
• Node.js และ npm : อดีตเป็นซอฟต์แวร์รหัส JavaScript สำหรับรันไทม์ในขณะที่อันหลัง npm มาในฐานะตัวจัดการแพ็คเกจที่ใช้สำหรับ Node.js แอปพลิเคชันเชิงมุมทั้งหมดทำงานโดยใช้ทั้งสองสิ่งนี้ ในขณะที่แอปพลิเคชันเหล่านี้ยังช่วยในการติดตั้งไลบรารี
• Angular CLI: เครื่องมือยูทิลิตี้นี้ใช้บรรทัดคำสั่งสำหรับการสร้างโครงสร้างพื้นฐานของ Angular

รับคำแนะนำจากหลักสูตรวิศวกรรมซอฟต์แวร์ต่างๆ ที่มีให้จากคณาจารย์ผู้เชี่ยวชาญที่ upGrad เช่น วิทยา ศาสตรมหาบัณฑิต สาขาวิทยาการคอมพิวเตอร์ และเพิ่มพูนทักษะการพัฒนาของคุณแบบทวีคูณ

วิธีที่ 1: การติดตั้ง Bootstrap ผ่าน CDN

ทำตามขั้นตอนที่เกี่ยวข้องเพื่อติดตั้ง Bootstrap บน Angular ผ่าน CDN

• ค้นหาโฟลเดอร์ 'src' และเปิดไฟล์โครงการเชิงมุม ' index.html '
• ฝังลิงก์ต่อไปนี้ไว้ในส่วน ' <head> '

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

• ไฟล์ JavaScript และ CSS สำหรับ Bootstrap จะรวมอยู่ในบรรทัดโค้ดเหล่านี้จาก URL ของ CDN ที่กำหนด
• บันทึกการเปลี่ยนแปลงขั้นสุดท้ายลงใน ไฟล์ ' index.html ' ของคุณ

โปรเจ็กต์เชิงมุมของคุณจะใช้สไตล์ Bootstrap และความสามารถของ JavaScript ที่ CDN มอบให้เมื่อคุณรวมลิงก์ CDN เหล่านี้แล้ว ตอนนี้คุณพร้อมที่จะใช้ประโยชน์จากส่วนประกอบ Bootstrap ภายในโครงการเชิงมุมของคุณแล้ว!

วิธีที่ 2: การติดตั้ง Bootstrap ผ่านตัวจัดการแพ็คเกจ npm

การติดตั้ง Bootstrap โดยใช้ npm manager สามารถทำได้ตามขั้นตอนง่ายๆ

• เปิดพรอมต์คำสั่งหรือเทอร์มินัล
• นำทางไดเรกทอรีรากของโครงการเชิงมุมของคุณ
• ติดตั้ง Bootstrap และการอ้างอิงที่เกี่ยวข้องโดยเรียกใช้ คำสั่ง ' npm install bootstrap'คำสั่งที่เกี่ยวข้องจะดาวน์โหลด Bootstrap และการอ้างอิงที่เกี่ยวข้องลงในไดเร็กทอรีของคุณที่มีป้ายกำกับว่า'node_modules'
• หลังการติดตั้ง คุณต้องรวมสไตล์ Bootstrap และ Javascript โดยเปิด ไฟล์ 'angular.json' จากไดเรกทอรีราก และเพิ่มรายการต่อไปนี้ภายใน อาร์เรย์ 'styles'

“node_modules/bootstrap/dist/css/bootstrap.min.css”

• นอกจากนี้ เพิ่มคำสั่งต่อไปนี้ภายใน อาร์เรย์ 'สคริปต์'

“node_modules/bootstrap/dist/js/bootstrap.min.js”

• บันทึกการเปลี่ยนแปลงทั้งหมดที่ทำใน ไฟล์ ' angular.json'

ตอนนี้คุณพร้อมที่จะใช้คลาส JavaScript และ CSS จาก Bootstrap ในส่วนประกอบและเทมเพลตเชิงมุมของคุณแล้ว

สำรวจหลักสูตรวิศวกรรมซอฟต์แวร์ยอดนิยมของเรา

วิธีที่ 3: การติดตั้ง Bootstrap ผ่าน Angular CLI

ต่อไปนี้เป็นคำแนะนำที่ทำตามได้ง่ายเพื่อช่วยให้คุณติดตั้ง Bootstrap ผ่าน Angular CLI

• เปิดพรอมต์คำสั่งของคุณ
• เรียกใช้คำสั่ง 'ng new my-app' เพื่อใช้ Angular CLI และสร้างโครงการเชิงมุมใหม่คุณสามารถแทนที่'my-app' ด้วยชื่อที่คุณต้องการ
• เปลี่ยนเป็นไดเร็กทอรีโครงการ

cd แอปของฉัน

• ทำซ้ำขั้นตอนการติดตั้ง Bootstrap โดยใช้ npm ตามที่กล่าวไว้ข้างต้น

ตอนนี้คุณได้สร้างโครงการเชิงมุมใหม่โดยใช้ CLI รวมทั้งติดตั้ง Bootstrap สำหรับโครงการของคุณแล้ว!

วิธีที่ 4: การติดตั้ง Bootstrap ผ่าน Bower package manager

• ตรวจสอบให้แน่ใจว่าคุณติดตั้งทั้ง npm และ bower ทั่วโลก
• เรียกใช้คำสั่งที่กำหนดในพรอมต์คำสั่งของคุณ – npm install -g bower
• เมื่อติดตั้ง Bower แล้ว ให้ไปที่โฟลเดอร์โครงการและพิมพ์

Bower ติดตั้งบูตสแตรป

ติดตั้ง jquery ของ Bower

ขั้นตอนข้างต้นจะติดตั้งไฟล์การติดตั้ง Bootstrap ที่เกี่ยวข้องใน โฟลเดอร์ 'bower_components' ที่สร้างขึ้นใหม่

• ขั้นตอนสุดท้ายคือการรวมไฟล์สำหรับ Bootstrap และ jquery ไว้ในไฟล์โครงการของคุณ

ขณะนี้เป็นขั้นตอนทั้งหมดในการติดตั้ง Bootstrap ใน Angular โปรดทราบว่าไม่แนะนำให้ใช้ Bower สำหรับการติดตั้ง Bootstrap อีกต่อไป

สำรวจหลักสูตรการพัฒนาซอฟต์แวร์ฟรีของเรา

วิธีที่ 5: การติดตั้ง Bootstrap ผ่านบิลด์แบบกำหนดเอง

ต่อไปนี้เป็นขั้นตอนง่ายๆ ในการติดตั้ง Bootstrap ผ่านบิลด์แบบกำหนดเอง

• ดาวน์โหลดเวอร์ชัน Bootstrap ที่คุณเลือกจาก เว็บไซต์อย่างเป็นทางการ พร้อมกับไฟล์ Javascript และ CSS
• แตกไฟล์ zip และคัดลอก 'bootstrap.min.css ' จาก นั้น
• ในโครงการเชิงมุมของคุณ ให้ไปที่ไดเร็กทอรี ' src ' และสร้างไดเร็กทอรีใหม่ชื่อ ' assets' ตรวจสอบให้แน่ใจว่าสร้างไดเร็กทอรีอื่นภายใน 'สินทรัพย์ ' ที่เรียกว่า ' css'
• วาง'bootstrap.min.css ' ในไดเรกทอรี ' css'
• อีกครั้ง ในไดเร็กทอรี 'assets ' ให้สร้างไดเร็กทอรีใหม่ชื่อ ' js' และวาง 'bootstrap.min.js' ที่ดึงมาจากโฟลเดอร์ zip ภายในไดเร็กทอรีใหม่นี้
• เปิด 'angular.json ' ในไดเร็กทอรีรูทและนำทางอาร์เรย์ ' styles'โดยทำตามสถาปนิก > สร้าง > ตัวเลือก
• เพิ่มไฟล์ Bootstrap CSS โดยใช้คำสั่งต่อไปนี้ –

“src/assets/css/bootstrap.min.css”

• ค้นหา อาร์เรย์ 'สคริปต์' ในเดียวกันและวางคำสั่งต่อไปนี้ -

“src/assets/js/bootstrap.min.js”

• บันทึกการเปลี่ยนแปลงในไฟล์ ' angular.json '

แนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติตามเมื่อติดตั้ง Bootstrap

แม้ว่าจะมีหลายวิธีในการติดตั้ง Bootstrap ใน Angular แต่การรู้วิธีปฏิบัติที่ดีที่สุดจะทำให้กระบวนการง่ายขึ้น

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

ในทางกลับกัน หากคุณสามารถจัดการเวลาได้และหวังว่าจะเป็นนักพัฒนาที่ดีขึ้น ไม่มีอะไรจะดีไปกว่า โปรแกรม Executive Post Graduate Program in Software Development- Full Stack ของ upGrad ที่ขับเคลื่อนโดย IIIT-B

บทสรุป

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

การเข้าร่วม Bootcamp การพัฒนาซอฟต์แวร์แบบ Full Stack ของ upGrad เป็นอีกวิธีหนึ่งในการยกระดับอาชีพการพัฒนาของคุณด้วยทักษะที่เป็นที่ต้องการและคำแนะนำจากผู้เชี่ยวชาญ

ลงทะเบียนตอนนี้ เพื่อขยายขอบเขตของคุณ!