Meteor

[MeteorJS] วิธีใช้ Bootstrap มาทำเว็บผีให้เป็นเว็บดูดี ด้วย AtmosphereJS

เรื่องที่เกี่ยวข้อง - AtmosphereJS, Bootstrap, Meteor, Meteor with Bootsrap

Bootstrap เป็น CSS Framework ที่ใช้ดี ใช้ทน และนิยมใช้กัน เมื่อเราสร้างเว็บด้วย Meteor แล้ว ก็เอา Bootstrap มาแต่ง เป็นความคิดที่ดีไม่ใช่น้อย

ภาพด้านล่างนี่เป็นตัวอย่างที่ดีของ Web Application ที่สร้างด้วย Bootstrap แต่ไร้ซึ่งความน่ามอง (แต่โค้ชพลอุตส่าห์ใส่สีเหลืองแล้วนะ 555)

Meteor Web App without Bootstrap Teerasej.png

เอาล่ะ เรามาทำให้สาวใช้ กลายร่างเป็นเจ้าหญิงกันเถอะ

ติดตั้ง Twitter Bootstrap ผ่านระบบ Meteor Package

Meteor นั้นมีแหล่งรวม Package หลักอยู่ที่ AtmosphereJS.com ซึ่งเราสามารถค้นหา Package ที่เกี่ยวกับ Bootstrap ได้ไม่ยากนัก

AtmosphereJS - Meteor Package System.png

ซึ่งถ้าค้นหาด้วยคำว่า bootstrap ก็จะเจอข้อมูลของ Twitter Boostrap ดังนี้

twbsbootstrap on atmosphere.png

จะเห็นว่ามีคำสั่งติดตั้งที่สามารถนำมาใช้ได้ทันที

meteor add twbs:bootstrap

โดยเราต้องสั่งติดตั้งจากภายใน Path ของโฟลเดอร์โปรเจคของเรานะ

cd NextflowApp
NextflowApp> meteor add twbs:bootstrap

ระบบก็จะทำการดาวน์โหลด และติดตั้ง Bootstrap ลงในโปรเจค Meteor ของเรา

เท่านี้เราก็สามารถเรียกใช้ CSS และ JavaScript Component ของ Bootstrap ได้ทันที ซึ่งเราไม่จำเป็นต้องประกาศเรียกใช้ไฟล์ CSS ของ Twitter Bootstrap โดยตรงในส่วนของ <head>  นะ

ตัว Plugin จะเพิ่มให้อัตโนมัตตอนเว็บถูกเรียกใช้งาน เราจึงสามารถเรียกใช้พวก Component และ CSS Class กับหน้าเว็บเราได้ทันที

โฉมใหม่นี่สวยเช้งเลยใช่ไหมล่ะ

Meteor Web App with Bootstrap by Teerasej.png

ติดตามคอร์สอบรมสร้าง Real-time Web App ด้วย Meteor กับโค้ชพลทางแฟนเพจเร็วๆ นี้จ้า

เอ้อ คอร์สเรียนสร้าง Mobile App ด้วย HTML5 และ Ionic Framework ของโค้ช เปิดให้สั่งซื้อล่วงหน้าแล้วนะ ดูรายละเอียดคลิกที่นี่ หรือคลิกใช้คูปองส่วนลดได้เลย

 

 

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save