Meteor

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

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

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 ของโค้ช เปิดให้สั่งซื้อล่วงหน้าแล้วนะ ดูรายละเอียดคลิกที่นี่ หรือคลิกใช้คูปองส่วนลดได้เลย

 

 

Loading Facebook Comments ...
Menu