พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น]

kanin03

พอดีพึ่งมีโอกาสได้ลอง 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/bootstrap/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 หลังสุดเพื่อความไวในการโหลด


เท่านี้เราก็จะสามารถใช้ elements ที่สวยงามได้แล้ว

ยังมี js บางตัว ที่ถ้าหากใช้ก็ให้โหลดมาเพิ่มและใส่เพิ่มนะครับหาได้จาก jsplugin

น่าจะประมาณนี้นะครับ ถ้าใครไม่เห็นภาพ ไว้เดวผมว่างสุดๆจะอัด VDO มาให้อีกทีนะครับเอาแบบทำสดให้ดูกันเลย แต่ต้องบอกว่าว่างสุดๆนะครับ

iLhay

boostraps สุดยอดมากฮะ

Greality

ขอบคุณครับมารอดูวิธีใช้นะครับ

ganginwpop

ตรง Textarea เค้าเรียกว่าอะไรหรอครับ มันมีมาให้ไหมครับ
แหะๆ

fox4

อืมความรู้ใหม่ มันคืออะไรครับ cms รึเปล่าครับ ออกเเบบมาให้เน้นทำอะไรครับ

Twenty-One

น่าลองนะครับ

Zentana

เป็น CSS Framework ที่น่าใช้อีกตัวหนึ่งเลยทีเดียว

ใช้ง่ายด้วย แถมฟรี อีกต่างหาก ชอบๆ

Daniel

ติดตามวิธีใช้งาน

mksuky

เจ๋งจริง ๆ ครับ รอสอนอยู่นะ อยากได้ครับ

rabbiz

น่าสนใจ ว่างแล้วมาแนะนำเพิ่มเติมหน่อยนะครบ ^^

amdxp

หน้าตาคล้าย ckeditor

BrainFreeze

สุดยอดครับ + 1

anakinkong

เอาไว้ต่อยอดได้เลย สวยใช่ง่ายมาก

Golfy

ใช้อยู่ครับ ง่ายดี

kanin03

อ้างถึงจาก: ganginwpop ใน 13 มิถุนายน 2012, 18:52:01

ตรง Textarea เค้าเรียกว่าอะไรหรอครับ มันมีมาให้ไหมครับ
แหะๆ

อ่อลืมบอกไปตรง textarea ผมใช้ tinyMCE เสริมน่ะครับ

mixture

ขอบคุณครับ ยัดมาให้ครบแบบนี้สะดวกเลย

vii

น่าใช้ครับ

jittapan

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

mymo

สงสัยผมจะโง่สุดๆ ไม่รู้วิธีใช้เลย

vii

ลองอ่านๆในเว็บดูแล้ว ดูเหมือนบางรายการจะไม่รองรับเบราเซอร์เก่าๆอย่าง ie7 8 (6จะเป็นจะตายช่างหัวมัน)

แล้วก็ไม่แน่ใจว่า license apache ของตัวนี้จะนำไปใช้ในโปรเจ็คที่มี license gpl ได้มั้ยนะครับ?

น่าสนใจแต่ติดตรง 2 อย่างนี้แหละ