การใช้งาน Bootstrap เบื้องต้น


Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

M008
PHP Hero Member
PHP Hero Member
Posts: 109
Joined: 03/05/2013 10:44 am

การใช้งาน Bootstrap เบื้องต้น

Post by M008 » 22/05/2013 11:25 am

เริ่มต้นด้วยการ download ตามลิงค์ด้านล่างนี้
http://twitter.github.io/bootstrap/
เมื่อ download เสร็จแล้วจะเห็นfolderทั้งหมด 3 ไฟล์ดังนี้
1.CSS ใน folder CSS จะประกอบด้วยทั้งหมด 4 ไฟล์ คือ
- bootstrap.css เป็น source code หลักที่ใช้ใน bootstrap
- bootstrap.min.css เป็น source code หลักที่ใช้ใน bootstarp แต่ว่าจะมีความเร็วในการโหลดเร็วกว่าไพล์ข้างต้น เนื่องจาก code จะถูกจัดเก็บเพียงบรรทัดเดียว
- bootstrap-responsive.css เป็นsource code ที่สามารถปรับเปลี่ยนการแสดงผลได้ตามขนาดของหน้าจอการแสดงผล ซึ่งมีผลดีอย่างมากในการพัฒนาที่จำเป็นต้องแสดงผลในหลายๆหน้าจอแสดงผล
- bootstrap-responvice.min.css เป็นsource code ที่สามารถปรับเปลี่ยนการแสดงผลได้ตามขนาดของหน้าจอการแสดงผล แต่ว่าจะมีความเร็วในการโหลดเร็วกว่า
2.img จะประกอบด้วย 2 ไฟล์ โดยจะเป็นที่เก็บรูปไอคอน ต่างที่ใช้ในกาแสดงผล bootstrap ดังนี้
- glyphicons-halflings.png
- glyphicons-halflings-white.png
3.js จะประกอบด้วย 2 ไฟล์ ดังนี้
- bootstrap.js เป็น source code ของ javascript หลักที่ใช้ในการแสดงผลของ bootstrap
- bootstrap.min.js เป็น source code ของ javascript เหมือนกัน แต่มีความเร็วในการโหลดใช้งานที่เร็วกว่า เนื่องจาก code ได้จัดเก็บเพียงบรรทัดเดียว

ขั้นตอนการใช้งาน bootstrap
1. download ไฟล์ทั้งหมดของ bootstrap เข้าไปเก็บไว้ที่เซิร์ฟเวอร์ของเว็บไซต์ที่ต้องการพัฒนา
2. สร้างไฟล์ขึ้นมา สำหรับแสดงทำงานของ bootstrap โดยจะมีโครงสร้างของไฟล์ดังนี้
- การเรียกใช้งาน bootstrap ใส่ code นี้ในส่วนของ <head>

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
คำอธิบายใต้รูป
ใช้เป็น bootstrap-responsive.min.css เพราะการโหลดใช้งานจะเร็วกว่า

-เพิ่ม code สำหรับการเรียกใช้งาน javascript ที่ <body>

Code: Select all

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
เพียงเท่านี้ก็สามารถใช้งาน bootstrap ได้แล้วคะ

tongclub48
PHP Jr. Member
PHP Jr. Member
Posts: 14
Joined: 23/11/2014 2:30 pm

Re: การใช้งาน Bootstrap เบื้องต้น

Post by tongclub48 » 27/03/2015 3:52 pm

เริ่มต้นด้วยการ download ตามลิงค์ด้านล่างนี้

livingroom
PHP Newbie
PHP Newbie
Posts: 2
Joined: 27/05/2015 3:58 pm

Re: การใช้งาน Bootstrap เบื้องต้น

Post by livingroom » 11/06/2015 1:28 pm

ขอบคุณมากครับ

Post Reply

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 5 guests