Bootstrap ชื่อนี้หลายๆ คนคงเคยได้ยินมาบ่อยๆ เวลาจะทำเว็บมักจะบอกว่าใช้ Bootstrap เลยง่ายดี จบงานไว ใช้ทำงานได้ง่ายๆ ติดตั้งแล้วเริ่มทำเว็บเลย ดีกว่าไปนั่งเขียนเอง แล้วมันคืออะไร หล่ะ

 

Front-End Frameworks คือ

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

 

 Bootstrap คือ

ชุดโค้ด Component Element ต่างๆ ที่ออกแบบมาให้ดูสวยงามใช้งานง่ายๆ โดยเอา HTML, CSS, Javascript มาผูกเข้าไว้ด้วยกันตั้งแต่เริ่ม ถูกพัฒนาจากทีมงานของ Twitter และปัจจุบันถูกเรียกว่าเป็น Front-End Frameworks ตัวหนึ่ง และที่สำคัญเป็นตัวที่ได้รับความนิยมมาหลาย ปีติดต่อกันหล่ะ ตัวนี้ เพราะฉะนั้นจึงไม่แปลกเลยที่เวลาถามใครว่าจะใช้อะไรมาเป็น Front-End Frameworks ตัวนี้ก็จะถูกพูดอยู่บ่อยๆ

 

แล้วก็ตอนนี้ Bootstrap ก็ถูกพัฒนามาเรื่อยๆ จนถึงตอนนี้ เวอร์ชั่นที่ 4.1.x แล้ว หลังจากรออยู่นาน ก่อนหน้าจะมาถึงเวอร์ชั่นนี้ ก็มีตั้งแต่ V2.3.2, V3.3.7, V4Alpha, V4.1.x แล้วก็ปัจจุบัน ตัวผมเองก็มาเริ่มใช้ตอน 3.3.7 แรกๆ อะ ตอนนั้นทำเว็บนี่หน้าเหมือนกันหมดเลย เพราะใช้แต่ ของเดิมๆ ไม่ปรับแต่งอะไร จนมาเวอร์ชั่น 4 ของเล่นเยอะมาก

 

การใช้งาน

เราสามารถเรียกใช้งานได้หลายทาง ช่องทางที่ทาง Official บอกมาสามารถเข้าไปดูได้ ที่นี่ 

  • Source File Download หลังจาก Download มาสามารถเอาไปวางในโปรเจ็คงานแล้วใช้ได้เลย
  • CDN เราสามารถ ใช้ได้จาก Link นี้เลยทั้ง CSS, Javascript
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  • NPM ใช้คำสั่ง ตามนี้เพื่อดาวน์โหลดมาลง node_modules ได้เลย
    npm install bootstrap
  • RubyGems
    gem 'bootstrap', '~> 4.1.3'
  • Composer
    composer require twbs/bootstrap:4.1.3

     

มีหลายทางมากๆ เลย แต่เราจะมาใช้แบบง่ายๆ กันนะครับ ผมเลือกวิธี CDN นะครับ มาใช้งานกันเลย และแน่นอนครับ การจะใช้ Bootstrap CDN เราจำเป็นต้องมี jQuery และ Popper ด้วยเป็นตัวที่ Require นะครับ สามารถใช้ CDN ได้เหมือนกันเลย

 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

หลังจากเรียกใช้ ทั้ง CSS, Javascript ทั้งหมดแล้วหน้าตาที่ได้จะประมาณนี้นะครับ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 4 Develop</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
console.log('dev');
});
</script>
</body>
</html>

ตัวอย่างที่ผมทำมาให้ดูแบบคร่าวๆ เพียงเท่านี้เราก็สามารถใช้งานได้แล้ว ครับ  เดี๋ยวผมมาลองใช้ แบ่งหน้า และใช้ Component บางตัวให้ดูนะครับ

 

สิ่งที่ถูกรวมมาใน Bootstrap ผมจะแบ่งตามหน้าเว็บ Document นะครับจะได้ไม่สับสนเวลาไปหาข้อมูลต่อ

  • Content จะเป็นพวกส่วนของ Typography การ Reset CSS, การแสดงผลของ ตาราง ภาพ พื้นฐาน
  • Components เป็นพวก Component ชิ้นๆ เช่น ปุ่ม อินพุทต่างๆ ลิสกรุ๊ป เมนู เป็นต้น เยอะพอสมควรครับ
  • Utilities พวกองค์ประกอบ เช่นการจัดหน้าชิดซ้ายขวา แบ่งหน้าจอ เส้นขอบ ตำแหน่งการวาง ครับ

 

การใช้งาน Layouts 

จากที่ให้มา จะมีการจัดทำให้หน้าเว็บเป็นทั้งแบบ Fluid (เต็มจอ) หรือ Fixed ( กำหนดความกว้าง ) โดยเราจะเรียกมันว่า Grid ให้มองหน้าเว็บ ครับ เว็บทั่วไปสมัยนี้มันจะมีทั้งหมด 12 Grid เราจะแบ่งตาม Grid เท่ากันอย่างมีสัดส่วน

grid
grid

ผมจะลองมาแบ่งหน้าจอเป็น 3 3 3 3 และ 4 4 4 นะครับ

<div class="text-center">
<div class="row">
<div class="col-3">col</div>
<div class="col-3">col</div>
<div class="col-3">col</div>
<div class="col-3">col</div>
</div>
<hr>
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
</div>

จากตัวอย่างจะเป็นการแบ่งหน้าแบบ 3 3 3 3 และแถวล่าง 4 4 4 ซึ่งทั้งสองแถวบวกกันได้ 12 ใช่ครับ แถวหนึ่งเรากำหนดให้เป็น 12 Grid ตามที่ผมบอกด้านบนไป แต่ตัว Bootstrap 4 มันมีของใหม่มา และ 1 ในของใหม่มันคือ การที่ใส่ แค่ col มันจะไปคำนวณให้เองเลยครับ โดยที่เราไม่ต้องใส่ เลขเลย

 

<div class="text-center">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>

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

Alternative Text

Parmarno (I-Makeweb.com)

ผมเป็น Web Developer ที่ยินดีให้คำแนะนำปรึกษาทั้ง Frontend และ Backend รวมถึง Server Network หากว่าผมช่วยให้คำแนะนำจนแก้ปัญหาได้ก็ดี ความรู้ที่มียินดีแบ่งปันให้นะครับ

Plugin Redis Object Cache จับเอา Redis มาทำ Cache

การจับ Redis มาใช้งานเป็นตัว Caching Object Cache โดยผ่าน Plugin Redis Object Cache มาลองดูตัวอย่างการใช้งานกันอย่างง่ายและไวมาก

เรื่องที่ควรจะให้ความสำคัญ ข้อมูลส่วนตัวในโลกออนไลน์

ความสำคัญของข้อมูลส่วนตัวในโลกออนไลน์ การอนุญาติให้ไปสามารถเอาไปใช้งาน ตัวอย่างเอาไปใช้อะไรได้บ้าง และการลบข้อมูลที่อนุญาติ

 
Loading...