เริ่มต้นการใช้งาน Bootstrap

bootstrap-banner

Bootstrap คืออะไร

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

ขั้นตอนการใช้งาน Bootstrap

  1. เข้าไปโหลดไฟล์ได้ที่ getbootstrap.com
  2. นำไฟล์ที่ดาวน์โหลดมาไปวางไว้ที่ธีมส์ของเรา อาจจะสร้างโฟลเดอร์ชื่อ vendor แยก เพื่อจะได้ไม่สับสนกับตัวธีมของเรา

    bootstrap-ftp

  3. เปิดใช้งาน CSS ด้วยการนำโค้ดด้านล่างไปใส่ไว้ที่ header.php ในตำแหน่งใต้ <head>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/vendor/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/vendor/css/bootstrap-theme.min.css" type="text/css" />
  4. เปิดใช้งาน Js ด้วยการนำโค้ดด้านล่างไปใส่ไว้ที่ footer.php ในตำแหน่งบน wp_footer
    <script src="<?php echo get_template_directory_uri(); ?>/vendor/js/bootstrap.min.js"></script>

การใช้งาน Bootstrap แบ่งเป็น 3 ส่วน

  1. CSS
  2. components
  3. javascript

เพิ่มเติม

Bootstrap มีส่วนลูกเล่นที่น่าสนใจอยู่หลายตัว อาทิเช่น

  • Grid system
  • Modals
  • Togglable tabs

ซึ่งจะมาเจาะลึกคำสั่งการใช้งานในบทความต่อๆไปกันครับ

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย