Mr. BoonOom : มาเตรียมความพร้อมก่อนใช้ Bootstrap เบื้องต้น

หลังจากที่ได้แนะนำเครื่องมือการพัฒนาเว็บไซต์นั่นคือ Bootstrap ว่าคืออะไรและสามารถช่วยในการพัฒนาให้รวดเร็วได้อย่างไร เอาหล่ะลุ๊ย....กันเลยครับพี่น้อง

ขั้นแรกเลยให้เราไป Download Bootstrap มาติดตั้งก่อนครับ เมื่อเราแตกไฟล์ออกมา เราจะได้ 3 folders
โครงสร้างดังข้างล่างนะครับจะได้เห็นภาพชัดๆ

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

อธิบายซ้ำอีกรอบสำหรับโครงสร้าง

1. CSS โดยประกอบด้วยทั้งหมด 4 ไฟล์ดังนี้
•    bootstrap.css เป็น source code หลักที่ใช้ใน bootstrap
•    bootstrap.min.css เป็น source code หลักที่ใช้ใน bootstarp แต่ว่าจะมีความเร็วในการโหลดเร็วกว่าไพล์ข้างต้น เนื่องจาก code จะถุกจัดเก็บเพียงบรรทัดเดียว
•    bootstrap-responsive.css เป็นsource code ที่สามารถปรับเปลี่ยนการแสดงผลได้ตามขนาดของหน้าจอการแสดงผล ซึ่งมีผลดีอย่างมากในการพัฒนาที่จำเป็นต้องแสดงผลในหลายๆหน้าจอแสดงผล
•    bootstrap-responsive.min.css เป็นsource code ที่สามารถปรับเปลี่ยนการแสดงผลได้ตามขนาดของหน้าจอการแสดงผล แต่ว่าจะมีความเร็วในการโหลดเร็วกว่า

2. img โดยประกอบด้วยทั้งหมด 2 ไฟล์ดังนี้
•    glyphicons-halflings.png
•    glyphicons-halflings-white.png
โดยจะเป็นที่เก็บรูปไอคอน ต่างที่ใช้ในการแสดงผล bootstrap

3. JS โดยประกอบด้วยทั้งหมด 2 ไฟล์ดังนี้
•    bootstrap.js เป็น source code ของ javascript หลักที่ใช้ในการแสดงผลของ bootstrap
•    bootstrap.min.js เป็น source code ของ javascript เหมือนกัน แต่มีความเร็วในการโหลดใช้งานที่เร็วกว่า เนื่องจาก code ได้จัดเก็บเพียงบรรทัดเดียว

ขั้นตอนการใช้งาน bootstrap
1. โหลดไฟล์ทั้งหมดของ bootstrap เข้าไปเก็บไว้ที่ Web Site ที่ต้องการ Dev
2. สร้างไฟล์ index.html ขั้นมา 1 ไฟล์สำหรับแสดงทำงานของ bootstrap โดยจะมีโครงสร้างของไฟล์ดังรูป