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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใช้งาน Bootstrap เบื้องต้น

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

โดย livingroom » 11/06/2015 1:28 pm

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

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

โดย tongclub48 » 27/03/2015 3:52 pm

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

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

โดย 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>

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

<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 ได้แล้วคะ

ข้างบน