หน้า 1 จากทั้งหมด 1

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

โพสต์แล้ว: 22/05/2013 11:25 am
โดย M008
เริ่มต้นด้วยการ 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>

โค้ด: เลือกทั้งหมด

<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>

โค้ด: เลือกทั้งหมด

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

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

โพสต์แล้ว: 27/03/2015 3:52 pm
โดย tongclub48
เริ่มต้นด้วยการ download ตามลิงค์ด้านล่างนี้

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

โพสต์แล้ว: 11/06/2015 1:28 pm
โดย livingroom
ขอบคุณมากครับ