BootStrap คืออะไร ใช้งานอย่างไร

หลังจากที่วันก่อนเราได้พูดถึงเรื่อง HTML และ CSS ว่าคืออะไรไปแล้ว วันนี้เราจะมารู้จักเครื่องมือที่ช่วยพัฒนาเว็บที่ชื่อว่า BootStrap โดยเราจะมาศึกษากันว่า BootStrap คืออะไร ประกอบด้วยอะไร ใช้งานได้ในอุปกรณ์ใด ติดตั้งและมีวิธีการใช้งานอย่างไร

ฺBootStrap คืออะไร

BootStrap คือ ชุดเครื่องมือโอเพ่นซอร์สที่มีชื่อเสียงที่ใช้สำหรับการออกแบบเว็บไซต์แบบ Responsive หรือให้เหมาะสมกับมือถือและแท็บเล็ต โดยนำในส่วนของ HTML, CSS, JS มาพัฒนาเป็นแหล่งเครื่องมือสำหรับการออกแบบหน้าเว็บไซต์ (Front-end component library) เวอร์ชั่นปัจจุบันของ BootStrap คือ เวอร์ชั่น 4 เราสามารถศึกษาเพิ่มเติมและดาวน์โหลดไฟล์ได้จากเว็บ Getbootstrap นี้ ครับ

BootStrap ประกอบด้วยอะไร

BootStrap ประกอบด้วยไฟล์ 2 ประเภทด้วยกัน คือ ไฟล์ CSS Stylesheet และไฟล์ JavaScript (JS) โดยแบ่งหน้าที่การทำงาน ไฟล์ CSS จะทำหน้าที่ช่วยออกแบบหน้าเว็บไซต์ (อ่านบทความ CSS คืออะไร) ในขณะที่ไฟล์ JS ทำหน้าที่จัดการในเรื่องของ Component หรือส่วนประกอบต่างๆ เช่น สไลเดอร์ แท็บ และอื่นๆ

ในไฟล์ 2 ประเภทนั้น เรายังสามารถที่จะดาวน์โหลดไฟล์เพียงบางส่วน หรือเฉพาะที่เราต้องการได้ เช่น หากเราต้องการนำ BootStrap มาทำเฉพาะส่วนสไลเดอร์ก็เลือกดาวน์โหลดมาเฉพาะส่วนนั้นครับ แต่ถ้าไม่ได้กำหนดไฟล์ที่เราใช้ก็จะเป็นไฟล์ที่มีทุกอย่างครับ

BootStrap ใช้งานได้ในอุปกรณ์ใดบ้าง

BootStrap สามารถใช้งานได้ทั้งในส่วนของเบราเซอร์และแพลตฟอร์มหลักทั้งคอมพิวเตอร์และมือถือ ถ้าเป็นในส่วนของ Windows นั้น BootStrap สนับสนุน Internet Explorer 10-11 และ Microsoft Edge แต่ Internet Explorer เวอร์ชั่น 9 ลงไปไม่ได้สนับสนุน ตามตารางด้านล่าง

เบราเซอร์

มือถือ

ติดตั้ง BootStrap อย่างไร

วิธีการติดตั้ง BootStrap สามารถทำได้ 2 วิธีหลักๆ ดังต่อไปนี้

ใช้วิธีการเรียกผ่าน BootStrap CDN ของ MaxCDN
ใช้วิธีการดาวน์โหลดไฟล์ BootStrap ทั้ง CSS และ JS มาเก็บไว้ที่เครื่องของเรา

จะเห็นว่าทั้ง 2 วิธีจะเรียกผ่านแท็ก HTML คือ ไฟล์ CSS จะเรียกผ่านแท็ก Link บนส่วนแท็ก Head ก่อน Stylesheets ตัวอื่นๆ และไฟล์ JS จะเรียกผ่านแท็ก Script ตรงส่วนล่างสุดของหน้าก่อนปิดแท็ก Body โดยการเรียกใช้งานจะเรียกจาก jQuery, Popper.js ครับ

ตัวอย่างการเรียกไฟล์ CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/CSS/bootstrap.min.CSS" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

ตัวอย่างการเรียกไฟล์ JS (ต้องเรียกใช้งานทั้ง 3 ตัว)

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

ตัวอย่างเริ่มต้นไฟล์ index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

BootStrap ใช้งานอย่างไร

1. BootStrap นั้นจะใช้โครงสร้างในลักษณะ Grid System ในการจัดวางเลย์เอาท์ของเว็บไซต์ โดยจะแบ่งช่องพื้นที่ในคอนเทนเนอร์ออกเป็น 12 ช่อง เท่าๆ กัน ในกรณีที่เราต้องการ 3 คอลัมน์ เราก็อาจจะแบ่งพื้นที่ให้เป็น 4 ช่อง จำนวน 3 ชุด ก็จะได้ 12 ช่อง หรือ หากเราต้องการแบ่งพื้นที่เป็น 2 คอลัมน์โดยมีขนาดเท่าๆ กัน ก็อาจจะแบ่งพื้นที่ให้เป็น 6 ช่อง จำนวน 2 ชุด ก็จะได้ 12 ช่อง เป็นต้น

2. BootStrap ได้สร้างระบบให้เหมาะกับอุปกรณ์เคลื่อนที่ จึงมีการวางระบบจุดเปลี่ยนหน้าจอ (Responsive Breakpoints) โดยการใช้ media queries ไว้ตามจุดต่างๆ ให้ใช้งาน โดย Bootstrap จะใช้ความกว้างขั้นต่ำของหน้าจอ (minimum viewport widths) ในการกำหนดขอบเขตของหน้าจอและขยายเพิ่มขึ้นตามขนาดหน้าจอที่เปลี่ยนไป เช่น มือถือจะมีขนาดหน้าจอมือถือจะอยู่ต่ำกว่า 576px หรือ ถ้าเป็นมือถือที่ใช้ดูในแนวนอนจะอยู่ระหว่าง 576px ถึง 767px หรือ ถ้าเป็นแท็บเลตความกว้างของหน้าจอจะอยู่ที่ 768px จนถึง 991px และถ้าเป็น 992px ขึ้นไปก็จะเป็นหน้าจอคอมพิวเตอร์

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

อ่านบทความ ทำเว็บไซต์ให้รองรับมือถือ

3. BootStrap ทำการสร้าง Class ของ CSS จำนวนมากมาให้ใช้งาน โดย Class แต่ละตัวนั้นมีการตั้งค่าไว้เรียบร้อยแล้ว mทำให้เราไม่จำเป็นต้องไปพิมพ์ค่าต่างๆ ในไฟล์ CSS อีก ซึ่งจะทำให้เราสามารถใช้งานได้ง่ายและรวดเร็วขึ้น ยกตัวอย่างเช่น

.col-3 เป็นการระบุว่าคอลัมน์นี้ใช้พื้นที่ 3 ช่อง จากทั้งหมด 12 ช่อง
.text-right เป็นการระบุว่าให้ข้อความอยู่ด้านขวา ซึ่ง BootStrap จะใส่ค่า CSS ให้เป็น text-align: right
.img-fluid เป็นการระบุให้ class นี้จะทำการใส่ค่า max-width: 100% และ height: auto ลงไปในรูปที่เราต้องการ และทำให้รูปนั้นเป็น responsive ในทุกอุปกรณ์

4. BootStrap มีเครื่องมือหรือคอมโพเนนท์ที่มาให้เราใช้งานได้ในทันที เช่น Media Object ที่เป็นชุดเครื่องมือที่เอาไว้วางรูปและเนื้อหาอยู่ในชุดเดียวกัน โดย BootStrap จะให้ตัวอย่างของ HTML และ CSS มาพร้อมกันเพื่อให้สามารถก๊อบปี้ไปใช้ได้ในทันที เราจะเห็นว่ามีการใช้ class ได้แก่ .media และ .media-body โดย .media จะครอบทั้งส่วนของรูปและเนื้อหา และ .media-body จะอยู่ในส่วนของเนื้อหา

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

ในบางกรณีชุดเครื่องมือที่ใช้ต้องมีการใช้คำสั่งจากภาษา JavaScript เพื่อเปิดให้ชุดเครื่องมือนั้นๆ ทำงานด้วย เช่น ตัวอย่างด้านล่างเป็นการเปิดใช้งานในส่วนของสไลเดอร์

ไฟล์ HTML

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ไฟล์ JS

$('.carousel').carousel()

เป็นอย่างไรกันบ้างครับ กับบทความ BootStrap หากใครสนใจที่จะเรียน BootStrap ลึกๆ กว่านี้ โดยสอนเป็นภาษาไทยก็สามารถที่จะเข้าไปสมัครเรียนผ่านลิงก์นี้ได้นะครับ สำหรับบทความนี้ก็ขอจบไว้เพียงเท่านี้ สวัสดีครับ

BootStrap คืออะไร ใช้งานอย่างไร

ฺBootStrap คืออะไร

BootStrap ประกอบด้วยอะไร

BootStrap ใช้งานได้ในอุปกรณ์ใดบ้าง

ติดตั้ง BootStrap อย่างไร

BootStrap ใช้งานอย่างไร

Leave a Comment Cancel Reply

WEBDODEE

ข้อมูลเพิ่มเติม