พอดีพึ่งมีโอกาสได้ลอง css framework มาครับเนื่องจากต้องการทำระบบ จัดการ ของตัวเองแต่ด้วยความขี้เกียจ design เลยหันมาหา css framework แล้วมันก็ได้แบบนี้ครับ
css framework ตัวนี้ชื่อ Bootstrap น่ะครับ framework ตัวนี้เป็น html5 css3 นะครับและมี jQuery ให้ใช้อีกด้วย
ส่วนเว็บไซต์ก็
http://twitter.github.com/bootstrap/index.html เพื่อนๆสามารถเข้าไปดาวน์โหลดและศึกษาได้เลยครับ
และแน่นอนครับมันฟรี!
ส่วนวิธีใช้ เดียวผมว่างๆจะเข้ามาอัพเดทวิธีใช้เบื้องต้นให้นะครับ ไม่ยากเลยแหละ
คงมาฝากไว้แค่นี้ครับวันนี้ บางคนรู้แล้วก็ข้ามไปนะครับ
วิธีใช้เบื้องต้นก่อนนะครับ
ควรมี firebug ครับช่วยได้เยอะทำให้การทำงานไวขึ้นมาก
ก่อนอื่นครับผมขอแนะนำคู่มือก่อนครับ Bootstrap เค้าทำเอกสารใช้งานคร่าวๆไว้ให้เราแล้วครับเราสามารถใช้ตามเค้าได้เลย
1. Scaffolding ส่วนนี้คือพวก Grid และ Layout ทำให้เราออกเว็บได้ง่ายมากขึ้นแบบสุดๆโดยไม่ต้องมาเขียนโค๊ดให้ยุ่งยากอีกต่อไป
โดยตัว Bootstrap นั่นจะแบ่ง grid มาให้ 12 ช่อง = 1 ความกว้างของจอ ลองดูตัวอย่างตรงนี้น่ะครับ
http://twitter.github.com/boot...ap/scaffolding.html#gridSystem อันนี้คือส่วนของ 2. Base CSS
http://twitter.github.com/bootstrap/base-css.html ส่วนนี้เขาจะบอกพวก tag ต่างๆ เช่น
Typography เช่นพวก tag h1 h2 - h6 , tag address อะไรประมาณนี้เราสามารถใช้ firebug ดูได้เลยสะดวกมาก
Code เป็นพวกการแสดงผลโค๊ดต่างๆ
Tables อันนี้เป็นตาราง ทำให้ตารางสวยงามกว่าเดิมเยอะ
Forms เป็น css พวกแบบฟอร์ม ที่ออกแบบมาให้ใช้งานเยอะพอสมควร เราไม่ต้องแต่งเอง ใช้อันนี้ฟอร์มเราจะเหมือนเว็บ 2.0 เลยแหละ!
Buttons มีปุ่ม css ให้เลือกหลากหลายสี สวยงาม เหมาะกับ seo
Icons by Glyphicons ส่วนนี้เป็นส่วน icon เล็กๆ มีให้เลือกใช้งานมากมาย
3. ส่วนนี้คือ Component ส่วนประกอบต่างๆ
http://twitter.github.com/bootstrap/components.html มีเมนูให้เลือกดูชอบอันไหนก็ใช้ firebug เอาเลยสะดวกดี
4. Useless
http://twitter.github.com/bootstrap/less.html อันนี้จะบอกว่า แต่ละคลาสแต่ละไอดี ทำงานอย่างไร สีอะไร เราสามารถดูแล้วแก้ไขในไฟล์ css ของเราได้
โดยจะมีหน้า Customize มาให้ด้วย
http://twitter.github.com/bootstrap/download.html เราสามารถเลือกกำหนด css ได้เองว่าต้องอะไร, สีอะไร ขนาดฟ้อน อะไรพวกนี้
(ส่วนนี้ต้องลองเล่นดูเองนะครับ)
5. JsPlugins มี หลายแบบให้เลือกใช้เลยครับต้องลองดูเองนะครับผมอธิบายไม่หมดบางอันผมก็ยังไม่เคยใช้
http://twitter.github.com/bootstrap/javascript.html และส่วนสุดท้ายของ bootstrap คือ
http://twitter.github.com/bootstrap/examples.html หน้านี้สำหรับท่านผู้เริ่มต้นหรอท่านที่ไม่เป็นอะไรเลย
เขามีตัวอย่างให้ดูหลายแบบ เราแค่ใช้ firebug ดูก็จะสามารถเข้าใจส่วนประกอบได้พอสมควร
เอาละครับผมจะเข้าเบสิกก่อนละนะว่าก่อนที่เราจะใช้เจ้า bootstrap นี่ต้องทำยังไงบ้าง (โหลด bootstrap มาก่อนนะ)
ในส่วนของ <head>
1. เลยให้ include เจ้า bootstrap.css เจ้าตัวนี้ มี 2 ตัวนะ
<link href="เว็บเรา/css/bootstrap.css" rel="stylesheet">
<link href="เว็บเรา/css/bootstrap-responsive.css" rel="stylesheet">
2. เหมือนเขาจะบอกว่า ie6 - 8 ไม่ซับพอตอีเลเมนบางตัวเลยต้องแอดนี้ไป
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
3. ต่อมาก็แอด js ในส่วนของ <body>
<script src="เว็บเรา/js/jquery.js"></script>
เหมือนเขาแนะนำว่าให้โหลด js หลังสุดเพื่อความไวในการโหลด
<!-- Placed at the end of the document so the pages load faster -->
เท่านี้เราก็จะสามารถใช้ elements ที่สวยงามได้แล้ว
ยังมี js บางตัว ที่ถ้าหากใช้ก็ให้โหลดมาเพิ่มและใส่เพิ่มนะครับหาได้จาก jsplugin
น่าจะประมาณนี้นะครับ ถ้าใครไม่เห็นภาพ ไว้เดวผมว่างสุดๆจะอัด VDO มาให้อีกทีนะครับเอาแบบทำสดให้ดูกันเลย แต่ต้องบอกว่าว่างสุดๆนะครับ
พัฒนาเว็บไซต์
