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

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

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

M008
PHP Hero Member
PHP Hero Member
โพสต์: 109
ลงทะเบียนเมื่อ: 03/05/2013 10:44 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย 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 ได้แล้วคะ
tongclub48
PHP Jr. Member
PHP Jr. Member
โพสต์: 14
ลงทะเบียนเมื่อ: 23/11/2014 2:30 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย tongclub48 »

เริ่มต้นด้วยการ download ตามลิงค์ด้านล่างนี้
livingroom
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 27/05/2015 3:58 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย livingroom »

ขอบคุณมากครับ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 21