รับทําเว็บไซต์ รับทําseo

Product & Service

เกี่ยวกับ Softmelt

Help ช่วยเหลือลูกค้า

บทความ Softmelt

Of The Week

สนามบินสมุย - บางกอกแอร์เวย์ส
สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)
 
รับทําเว็บไซต์ รับทําseo

Webmaster

บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

Bootstrap คืออะไร ???

แชร์

    หลายๆ คน คงเคยได้ยินมาว่า Bootstrap ช่วยให้เราเขียนเว็บได้ไวขึ้นใช่มั้ยครับ บางคนอาจจะเคยลองใช้มาบ้างแล้ว แต่ถ้าใครยังไม่เคย และอยากลองใช้ดูบ้าง วันนี้เราจะมาพูดถึงเจ้า front-end framework ตัวนี้กันครับ ทำไมทั่วโลกเค้าถึงนิยมใช้ มันมีข้อดี ข้อเสียอะไรบ้าง

    รู้จักกับ Front-end Framework

    ก่อนอื่นต้องเข้าใจก่อนครับ ว่า Bootstrap นี้มันคือ Front-end Framework ตัวหนึ่ง คำว่า front-end หมายถึง ส่วนที่แสดงผล

    ให้ Users ทั่วไปเห็น พูดง่ายๆ ก็คือหน้าเว็บไซต์ของเรานั่นเอง ส่วนคำว่า framework นั้นจะหมายถึง สิ่งที่เข้ามาช่วยกำหนดกรอบของการทำงานให้เป็นไปในทางเดียวกันครับ ในสมัยก่อน เรายังไม่มี framework ปัญหาที่เราพบเป็นประจำในการทำงานร่วมกันก็คือ ต่างคนต่างทำ คนหนึ่งเขียนแบบหนึ่ง ส่วนอีกคนก็เขียนอีกแบบหนึ่ง พอใครจะมาแก้งานต่อ หรือพัฒนาต่อ ก็จะไม่เข้าใจกัน เพราะไม่ได้มีการกำหนดข้อตกลงกันไว้ล่วงหน้า ทำให้เสียเวลาโดยใช่เหตุ framework จะเข้ามาแก้ปัญหาตรงนี้ครับ โดยมันจะเป็นตัวกำหนดให้สมาชิกในทีมเข้าใจตรงกัน ปฏิบัติไปในแนวทางเดียวกัน สมมติ ว่าโจทย์ของเราคือการสร้างกล่องสี่เหลี่ยมสีน้ำเงินขึ้นมาสักกล่องหนึ่ง ถ้าเราใช้ framework แล้วล่ะก็ พนักงานแต่ละคนจะใช้วิธีเดียวกันในการสร้างกล่องนี้ขึ้นมา แม้ว่าพวกเค้าจะไม่ได้คุยกันเลยก็ตาม และพนักงานคนอื่นๆ ที่ไม่เคยทราบโจทย์มาก่อน ก็จะสามารถรู้ได้ทันทีว่าโค้ดที่พวกเค้าเขียนขึ้นมามันคือการสร้างกล่องสี น้ำเงิน

    Bootstrap คืออะไร?

    bootstrap คือ เครื่องมือสำหรับนักพัฒนาเว็บไซต์แบบง่ายๆ โดยไม่ต้องเขียน css, js เองให้ยุ่งยาก เพราะมีคนเขียนมาให้แล้ว เพียงแค่เราโหลดมาแล้วก็ เรียกชื่อมันใช้งานเท่านั้นเอง หน้าตา ก็สวยงาม ทันสมัยดี ถ้านึกหน้าตาไม่ออกก็ให้นึกถึง Twitter ฟอร์ม ปุ่ม เหมือนกันเพราะมาจากค่าย Twitter

    และเป็น Responsive Web Design ที่นิยมใช้กันในปัจจุบัน อธิบายง่ายๆก็คือ ทำเว็บไซต์ให้รองรับทั้ง smartphones, tablets,notebook,desktop 

    Bootstrap ให้อะไรมาบ้าง?

    สิ่งที่ Bootstrap ให้มา มี 4 อย่าง ดังนี้ครับ
    - Scaffoldinggrid system จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid
    - Base CSSstyle sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images
    - Componentsstyle sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination
    - JavaScriptjQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip 

    บาง คนอาจจะไม่ค่อยคุ้นกับคำว่า Scaffolding ใช่มั้ยครับ จริงๆ แล้วมันก็เป็นเหมือนโครงของหน้าเว็บครับ ในการใช้ Bootstrap เราจะต้องสร้าง layouts ขึ้นมาก่อน เราอยากได้กี่คอลัมน์ แต่ละคอลัมน์มีความกว้างแค่ไหน ข้างในคอลัมน์มีกล่องอะไรบ้าง ให้เราสร้างขึ้นมาก่อนครับ เมื่อเราได้โครงของหน้าเว็บมาแล้ว ทีนี้ก็เหลือแค่หยิบของที่ Bootstrap เตรียมให้ มาใส่ตามกล่องที่เราได้สร้างไว้ก่อนหน้านี้เท่านั้นเอง ฟังดูไม่ยากเลยใช่มั้ยล่ะครับ

    เตรียมพร้อมก่อนใช้ Bootstrap

    ให้เราไป Download Bootstrap มาติดตั้งก่อนครับ เมื่อเราแตกไฟล์ออกมา เราจะได้ 3 folders ดังนี้ครับ
    - cssเก็บ style sheets ของ Bootstrap
    - imgเก็บ sprite image สำหรับ icons ต่างๆ
    - jsเก็บ jQuery plugins ต่างๆ

    จากนั้นให้เราสร้างไฟล์ index.html ขึ้นมาครับ แล้วใส่โค้ด html ตามนี้

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Bootstrap tutorials by Siam HTML</title>
    </head>
    <body>
    </body>
    </html>

    เมื่อได้ไฟล์ index.html มาแล้ว ให้เราเพิ่ม style sheets ของ Bootstrap เข้าไปที่ <head> ครับ 

     

    1
    <link href="css/bootstrap.min.css" rel="stylesheet">

    ถ้า เราต้องการจะทำ responsive web ให้เราเพิ่ม style sheets ของ Bootstrap สำหรับ responsive เข้าไปอีกตัว แล้วกำหนดค่าของ viewport ตามโค้ดด้านล่างนี้ครับ

     

    1
    2
    3
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    เพื่อให้เราสามารถใช้งาน javascript ที่ Bootstrap เตรียมมาได้ ให้เรา Download jQuery มาใส่ไว้ใน folder js ของเรา แล้วใส่โค้ดด้านล่างนี้ก่อนปิด <body> ครับ 

     

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
    .
    .
    .
    .
     
    <script src="js/jquery.js"></script>
     
    <script src="js/bootstrap.min.js"></script>
    </body>

    เพียงเท่านี้ เราก็พร้อมที่จะใช้งาน Bootstrap แล้วล่ะครับ

    แล้วอย่างนี้ เว็บที่ใช้ Bootstrap ก็หน้าตาเหมือนกันหมดน่ะสิ?

    ด้วย เหตุผลที่ Bootstrap เตรียมอะไรมาให้เราเยอะมาก เรียกได้ว่าเราแทบจะไม่ต้องไปหาอะไรมาลงเพิ่มเติมแล้ว ทำให้หลายๆ คนนำ Bootstrap ไปใช้โดยแทบจะไม่ได้เขียนโค้ดขึ้นมาเองเลย หลายๆ เว็บไซต์ หากเราใช้ Bootstrap มาพอสมควร เราจะสามารถดูออกได้ทันทีเลยว่าเค้าใช้ Bootstrap เขียนแน่ๆ ด้วยเหตุนี้เอง จึงมีบางคนค่อนข้างจะต่อต้านการใช้ Bootstrap เนื่องจากมันจะทำให้เว็บไซต์หน้าตาออกมาเหมือนๆ กันหมด

    อย่า ให้ Bootstrap มาปิดกั้นความคิดสร้างสรรค์ของเราครับ เวลาเราใช้ Bootstrap อย่าลืมใส่ความเป็นตัวเองเข้าไปในงานของเราด้วย ให้เราสร้างไฟล์ “theme.css” แล้วเพิ่มเข้าไปต่อท้าย style sheets ของ Bootstrap

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com