|
หัวข้อ: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: kanin03 ที่ 13 มิถุนายน 2012, 18:38:44 พอดีพึ่งมีโอกาสได้ลอง css framework มาครับเนื่องจากต้องการทำระบบ จัดการ ของตัวเองแต่ด้วยความขี้เกียจ design เลยหันมาหา css framework แล้วมันก็ได้แบบนี้ครับ
(http://upic.me/i/8u/98untitled.jpg) (http://upic.me/show/36570841) (http://upic.me/i/j4/95untitled.jpg) (http://upic.me/show/36570885) (http://upic.me/i/3x/95untitled.jpg) (http://upic.me/show/36570923) css framework ตัวนี้ชื่อ Bootstrap น่ะครับ framework ตัวนี้เป็น html5 css3 นะครับและมี jQuery ให้ใช้อีกด้วย ส่วนเว็บไซต์ก็ http://twitter.github.com/bootstrap/index.html เพื่อนๆสามารถเข้าไปดาวน์โหลดและศึกษาได้เลยครับ และแน่นอนครับมันฟรี! :wanwan019: ส่วนวิธีใช้ เดียวผมว่างๆจะเข้ามาอัพเดทวิธีใช้เบื้องต้นให้นะครับ ไม่ยากเลยแหละ :wanwan003: คงมาฝากไว้แค่นี้ครับวันนี้ บางคนรู้แล้วก็ข้ามไปนะครับ :wanwan012: วิธีใช้เบื้องต้นก่อนนะครับ ควรมี 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"> 2. เหมือนเขาจะบอกว่า ie6 - 8 ไม่ซับพอตอีเลเมนบางตัวเลยต้องแอดนี้ไป โค๊ด: <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 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 มาให้อีกทีนะครับเอาแบบทำสดให้ดูกันเลย แต่ต้องบอกว่าว่างสุดๆนะครับ :P หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: iLhay ที่ 13 มิถุนายน 2012, 18:39:15 boostraps สุดยอดมากฮะ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: Greality ที่ 13 มิถุนายน 2012, 18:41:22 ขอบคุณครับมารอดูวิธีใช้นะครับ :-[
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: ganginwpop ที่ 13 มิถุนายน 2012, 18:52:01 (http://upic.me/i/3x/95untitled.jpg)
ตรง Textarea เค้าเรียกว่าอะไรหรอครับ มันมีมาให้ไหมครับ แหะๆ หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: fox4 ที่ 13 มิถุนายน 2012, 19:13:13 อืมความรู้ใหม่ มันคืออะไรครับ cms รึเปล่าครับ ออกเเบบมาให้เน้นทำอะไรครับ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: Twenty-One ที่ 13 มิถุนายน 2012, 19:15:43 น่าลองนะครับ
:wanwan011: หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: Zentana ที่ 13 มิถุนายน 2012, 19:38:57 เป็น CSS Framework ที่น่าใช้อีกตัวหนึ่งเลยทีเดียว
ใช้ง่ายด้วย แถมฟรี อีกต่างหาก ชอบๆ หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: Daniel ที่ 13 มิถุนายน 2012, 20:31:29 ติดตามวิธีใช้งาน
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: mksuky ที่ 13 มิถุนายน 2012, 20:54:34 เจ๋งจริง ๆ ครับ รอสอนอยู่นะ อยากได้ครับ :'(
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: rabbiz ที่ 13 มิถุนายน 2012, 20:55:12 น่าสนใจ ว่างแล้วมาแนะนำเพิ่มเติมหน่อยนะครบ ^^
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: amdxp ที่ 13 มิถุนายน 2012, 20:59:42 หน้าตาคล้าย ckeditor
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: BrainFreeze ที่ 13 มิถุนายน 2012, 21:16:21 สุดยอดครับ + 1
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: anakinkong ที่ 13 มิถุนายน 2012, 21:24:23 เอาไว้ต่อยอดได้เลย สวยใช่ง่ายมาก
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: Golfy ที่ 13 มิถุนายน 2012, 21:26:09 ใช้อยู่ครับ ง่ายดี
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย เริ่มหัวข้อโดย: kanin03 ที่ 13 มิถุนายน 2012, 21:28:25 ([url]http://upic.me/i/3x/95untitled.jpg[/url]) ตรง Textarea เค้าเรียกว่าอะไรหรอครับ มันมีมาให้ไหมครับ แหะๆ อ่อลืมบอกไปตรง textarea ผมใช้ tinyMCE เสริมน่ะครับ :wanwan011: หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: mixture ที่ 15 มิถุนายน 2012, 11:39:51 ขอบคุณครับ ยัดมาให้ครบแบบนี้สะดวกเลย
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: vii ที่ 15 มิถุนายน 2012, 12:31:42 น่าใช้ครับ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: jittapan ที่ 15 มิถุนายน 2012, 12:35:28 ขอบคุณมากครับ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: mymo ที่ 15 มิถุนายน 2012, 12:40:09 สงสัยผมจะโง่สุดๆ ไม่รู้วิธีใช้เลย :wanwan031:
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: vii ที่ 15 มิถุนายน 2012, 13:03:28 ลองอ่านๆในเว็บดูแล้ว ดูเหมือนบางรายการจะไม่รองรับเบราเซอร์เก่าๆอย่าง ie7 8 (6จะเป็นจะตายช่างหัวมัน)
แล้วก็ไม่แน่ใจว่า license apache ของตัวนี้จะนำไปใช้ในโปรเจ็คที่มี license gpl (http://www.opensource.org/licenses/gpl-2.0.php) ได้มั้ยนะครับ? น่าสนใจแต่ติดตรง 2 อย่างนี้แหละ :'( หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: imagineverend ที่ 15 มิถุนายน 2012, 13:42:07 เป็น framework ตัวเดียวกับที่ joomla 3.0 จะนำมาใช้ สุดยอดเลยครับตัวนี้ ทดลองเล่นแล้ว :wanwan003:
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: kanin03 ที่ 15 มิถุนายน 2012, 13:47:37 ลองอ่านๆในเว็บดูแล้ว ดูเหมือนบางรายการจะไม่รองรับเบราเซอร์เก่าๆอย่าง ie7 8 (6จะเป็นจะตายช่างหัวมัน) แล้วก็ไม่แน่ใจว่า license apache ของตัวนี้จะนำไปใช้ในโปรเจ็คที่มี license gpl ([url]http://www.opensource.org/licenses/gpl-2.0.php[/url]) ได้มั้ยนะครับ? น่าสนใจแต่ติดตรง 2 อย่างนี้แหละ :'( อันนี้ผมไม่แน่ใจอ่าครับ เรื่อง license apache กับ gpl-2.0 ส่วน ie 7 8 มีผลกับ element บางส่วนน่ะครับ 6 ไม่ได้ลอง เช่น ขอบมนมันก็จะไม่มน อะไรประมาณนี้น่ะครับ สงสัยผมจะโง่สุดๆ ไม่รู้วิธีใช้เลย :wanwan031: ติดตรงไหนบอกได้นะครับเผื่อผมจะแนะนำให้ได้ หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: kanin03 ที่ 15 มิถุนายน 2012, 13:51:35 เป็น framework ตัวเดียวกับที่ joomla 3.0 จะนำมาใช้ สุดยอดเลยครับตัวนี้ ทดลองเล่นแล้ว :wanwan003: พึ่งรู้เหมือนกันครับ :wanwan003: http://ux.joomla.org/forum/Joomla-30-Administrator-Template/251-Joomla-30-Admin-Concept?limit=8&start=16 หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: wizmagna ที่ 15 มิถุนายน 2012, 14:09:21 กำลังศึกษาตัวนี้อยู่เหมือนกัน น่าใช้ดีครับ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: kittiphum ที่ 15 มิถุนายน 2012, 16:08:54 สวยครับ กำลังโหลดมาลองเล่นบนเครื่อง
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: relaxpor ที่ 06 ธันวาคม 2012, 17:13:16 ขอบคุณมากคับ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: อัลฟา ที่ 06 ธันวาคม 2012, 17:16:58 ขอบคุณค่ะ
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: sirBank ที่ 06 ธันวาคม 2012, 17:47:08 น่าศึกษามาก ขอบคุณครับ :wanwan017:
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: rnon ที่ 06 ธันวาคม 2012, 17:50:32 น่าสน
ขอบคุณมากครับ :wanwan017: หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: holidaytours ที่ 05 มีนาคม 2015, 15:13:58 ขอบคุณครับท่าน
:wanwan017: หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: nabid999 ที่ 05 มีนาคม 2015, 15:19:49 Bootstrap ช่วยให้ชีวิตในการทำงานสาย Web Design สะดวกและตอบโจทย์ความต้องการได้ดีมากครับ
อีกเรื่องที่สำคัญในตอนนี้และอนาคต คือ Responsive Web Design ใช้ Bootstrap ตัวนี้ยืดยุ่นมากกว่าหลายๆ ตัวที่เคยลองมาเลยครับ แนะนำครับ :wanwan020: :wanwan004: :wanwan017: :wanwan003: หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: necrotorture ที่ 05 มีนาคม 2015, 15:21:19 CSS Framework ทำให้งานผมเร็วขึ้น 40% เลยทีเดียวครับ ขอบอก ๆ :wanwan020: :wanwan020:
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: dekmv ที่ 05 มีนาคม 2015, 15:29:55 :wanwan004:
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: verture ที่ 05 มีนาคม 2015, 17:13:32 โอ้โห ตัวใหม่ :-X
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: kunnarakkup ที่ 09 มีนาคม 2015, 10:34:09 ใช่งานง่าย ใช้แล้วสวย สะดวกสบายจริงครับ แต่ผมว่ามันต้องค่อนข้างใช้ความเข้าใจโค้ดที่ให้มาหน่อยนะ ถ้าประกาศมั่วๆ ก็ไม่แสดงผล ตอนนี้ผมก็อย่างลองใช้เหมือนกัน
หัวข้อ: Re: พึ่งได้ลอง css framework ครับ ทำงานง่ายขึ้นเยอะเลย [พร้อมวิธีใช้งานเบื้องต้น] เริ่มหัวข้อโดย: zidit ที่ 09 มีนาคม 2015, 14:47:01 เวลาทำเวบทีไร ใช้ตลอดเลยครับ bootstrap อิอิ ง่ายมากๆ
|