Bootstrap คืออะไร รู้จักกับ Framework ทำเว็บไซต์ยอดนิยม

post Image

ปรับขนาดตัวอักษร
โหมดถนอมสายตา

 

ในช่วงหลายปีที่ผ่านมามีเฟรมเวิร์คมากมายเกิดขึ้นทั้ง Front-end Framework และส่วน Back-end Framework และนั่นทำให้เราเริ่ม
รู้จักเฟรมเวิร์คที่ชือว่า Bootstrap ในวงกว้าง ไม่ไช่เฉพาะกลุ่ม front-end programmer และรวมไปถึงกลุ่มลูกค้า Customer, AE
ล้วนมีคำถามหรือมีความรู้เบื้องต้น หรืออย่างน้อย ๆ ก็เคยได้ยินคำ ๆ นี้มาบ้างแล้วแทบทั้งสิ้น นั่นทำให้เฟรมเวิร์คตัวนี้น่าสนใจมากขึ้นเรื่อย ๆ

 

Bootstrap คืออะไร ?

Bootstrap คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดกรอบหรือ
รูปแบบการพัฒนาเว็บไซต์ในส่วนของการปฏิสัมพันธ์กับผู้ใช้งานเว็บไซต์ ( User Interface ) เราจึงสามารถเรียก Bootstrap
ว่าเป็น Front-end framework คือใช้สำหรับ พัฒนาเว็บไซต์ส่วนการแสดงผล ซึ่งแตกต่างจากภาษาประเภท Server Side Script
อย่าง PHP, Python หรือภาษาอื่น ๆ


รู้จักทีมผู้พัฒนา

Bootstrap ถูกพัฒนาขึ้นโดย Mark Otto และ Jacob Thornton ทีมพัฒนาของ Twitter Inc. ก่อนหน้านี้ใช้ชื่อว่า Twitter Blueprint
และเปิดให้นักพัฒนาสามารถนำไปใช้งานพัฒนาเว็บไซต์ได้แบบฟรี ( Open Source ) ในชื่อว่า Bootstrap Framework


จุดเด่นของของ Bootstrap Framework

มี UI เริ่มต้นแบบที่สวยงามและใช้งานง่าย
มีการปรับปรุงและพัฒนาอย่างต่อเนื่อง ปัจจุบันเป็นเวอร์ชั่น 3.3.0
เป็นที่นิยมของนักพัฒนาทั่วโลก ทำให้สามารถเรียนรู้และแก้ปัญหาได้ง่าย
โค๊ดหรือชุดคำสั่งต่าง ๆ ค่อนข้างสะอาดมีโฟลเด้อต้นแบบแค่ 3 ส่วนคือ js, css, fonts
ประหยัดเวลาในการพัฒนาเว็บไซต์และนำไปพัฒนาต่อได้ง่าย
เป็น Responsive Framework พัฒนาเว็บไซต์ที่รองรับการแสดงผลได้หลากหลาย Device


โครงสร้างไฟล์

หลังจากที่ดาวน์โหลด Boostrap framework มาแล้วเราจะได้มา 3 โฟลเด้อสำหรับใช้งานหลัก ๆ ดังนี้

CSS เป็นโฟลเด้อเก็บไฟล์ CSS ทั้งหมด วิธีใช้งานให้เรียกใช้งาน bootstrap.css เข้าไปใน html ไฟล์หลัก

1
<link rel="stylesheet" href="css/bootstrap.min.css">
JS เป็นโฟลเด้อเก็บไฟล์ Javascript ทั้งหมด วิธีใช้งานให้เรียกใช้งาน bootstrap.js เข้าไปใน html ไฟล์หลัก

1
<script src="js/bootstrap.min.js"></script>
fonts เป็นโฟลเด้อเก็บ fonts ต้นแบบและ icon ต่าง ๆ ของ boostrap จะถูกเรียกใช้งานผ่าน id และ class ในไฟล์ bootstrap.css ตัวอย่างเช่น ถ้าเราต้องการใช้งานไอคอนแว่นขยาย ก็จะสามารถเรียกใช้งานผ่าน class ดังนี้

1
<i class="glyphicon glyphicon-zoom-in"></i>
ท่านนักพัฒนาทั้งหลายสามารถดาวน์โหลด ฺBootstrap Framework มาใช้งานแบบฟรี ๆ รวมไปถึงดูตัวอย่างการใช้งานได้ที่
http://getbootstrap.com

 

Top View

card image

ปรัชญาชีวิต เพื่อเข้าสู่ปี 2017 จาก ฌอน บูรณะหิรัญ

อดทน มองการณ์ไกล แต่ยังคง ทำอะไรใหม่ๆ อยู่เสมอ

(เข้าชม : 9,931 ครั้ง)

card image

ปรัชญาชีวิต เพื่อเข้าสู่ปี 2017 จาก ฌอน บูรณะหิรัญ

อดทน มองการณ์ไกล แต่ยังคง ทำอะไรใหม่ๆ อยู่เสมอ

(เข้าชม : 9,931 ครั้ง)

card image

วิธีคิดของคนที่ประสบความสําเร็จในชีวิต ให้ท่องเอาไว้ทุกวัน

เมื่อหลายวันที่ผ่านมาผมมีโอกาสเจอนักพูด นักเขียน

(เข้าชม : 9,244 ครั้ง)

card image

วิธีคิดของคนที่ประสบความสําเร็จในชีวิต ให้ท่องเอาไว้ทุกวัน

เมื่อหลายวันที่ผ่านมาผมมีโอกาสเจอนักพูด นักเขียน

(เข้าชม : 9,244 ครั้ง)

card image

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์ AEC : ASEAN Economic Community ประชาคมเศรษฐกิจอาเซียน

(เข้าชม : 6,038 ครั้ง)

card image

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์ AEC : ASEAN Economic Community ประชาคมเศรษฐกิจอาเซียน

(เข้าชม : 6,038 ครั้ง)

card image

Domain Name คืออะไร

โดเมนเนมคืออะไร โดเมนเนมภาษาอังกฤษเขียนว่า "Domain Name" โดเมนเนม ความหมายโดยทั่วๆไป หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์

(เข้าชม : 4,804 ครั้ง)

card image

Domain Name คืออะไร

โดเมนเนมคืออะไร โดเมนเนมภาษาอังกฤษเขียนว่า "Domain Name" โดเมนเนม ความหมายโดยทั่วๆไป หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์

(เข้าชม : 4,804 ครั้ง)

card image

วิถีชีวิตแห่งนกอินทรี

เมื่อเอ่ยถึงนกอินทรี เราก็จะต้องนึกถึงความยิ่งใหญ่ สง่างามขณะที่มันบินอยู่บนท้องฟ้า สาย ตาอันแหลมคม ยาวไกล

(เข้าชม : 3,781 ครั้ง)

card image

วิถีชีวิตแห่งนกอินทรี

เมื่อเอ่ยถึงนกอินทรี เราก็จะต้องนึกถึงความยิ่งใหญ่ สง่างามขณะที่มันบินอยู่บนท้องฟ้า สาย ตาอันแหลมคม ยาวไกล

(เข้าชม : 3,781 ครั้ง)

card image

วิธีเปิดใช้ Google Tag Manager Account

เราได้รู้จักกันไปแล้วว่า Google Tag Manager หรือที่เรียกกันสั้นๆว่า GTM คืออะไร มีประโยชน์อย่างไร ซึ่งน่าจะทำให้ผู้อ่านมีความสนใจในการใช้ GTM กันบ้างแล้ว

(เข้าชม : 3,108 ครั้ง)

card image

วิธีเปิดใช้ Google Tag Manager Account

เราได้รู้จักกันไปแล้วว่า Google Tag Manager หรือที่เรียกกันสั้นๆว่า GTM คืออะไร มีประโยชน์อย่างไร ซึ่งน่าจะทำให้ผู้อ่านมีความสนใจในการใช้ GTM กันบ้างแล้ว

(เข้าชม : 3,108 ครั้ง)

card image

ซัพพลายเออร์ (Supplier) คืออะไร ?

ถึง คนหรือองค์กรที่จัดหาสินค้าและบริการให้กับธุรกิจอื่น การค้นหาซัพพลายเออร์ที่ให้ราคาดี

(เข้าชม : 2,858 ครั้ง)

card image

ซัพพลายเออร์ (Supplier) คืออะไร ?

ถึง คนหรือองค์กรที่จัดหาสินค้าและบริการให้กับธุรกิจอื่น การค้นหาซัพพลายเออร์ที่ให้ราคาดี

(เข้าชม : 2,858 ครั้ง)

card image

แนะนำ 6 โปรแกรม Text Editor ฟรี!

สำหรับนักพัฒนาเว็บไซต์ Text Editor ถือเป็นเครื่องมือ และเพื่อนคู่ใจคนนึงเลยก็ว่าได้ เพราะหากเราได้ใช้เครื่องมือที่ดี

(เข้าชม : 2,610 ครั้ง)

card image

แนะนำ 6 โปรแกรม Text Editor ฟรี!

สำหรับนักพัฒนาเว็บไซต์ Text Editor ถือเป็นเครื่องมือ และเพื่อนคู่ใจคนนึงเลยก็ว่าได้ เพราะหากเราได้ใช้เครื่องมือที่ดี

(เข้าชม : 2,610 ครั้ง)

card image

จงเป็น 'สิงโต' ที่ 'เงียบ'

จงเป็น 'สิงโต' ที่ 'เงียบ' อย่าเป็น 'สุนัข' ที่ 'เห่าดัง' ! อยากทำอะไรให้สำเร็จ 'ทำ' เลย ไม่ต้อง 'พูด'

(เข้าชม : 2,591 ครั้ง)

card image

จงเป็น 'สิงโต' ที่ 'เงียบ'

จงเป็น 'สิงโต' ที่ 'เงียบ' อย่าเป็น 'สุนัข' ที่ 'เห่าดัง' ! อยากทำอะไรให้สำเร็จ 'ทำ' เลย ไม่ต้อง 'พูด'

(เข้าชม : 2,591 ครั้ง)

card image

ใครโง่สุด???

ตอบแบบทั่วไป หมายเลข 4 ตอบแบบลึกซึ้ง!!! คือโง่หมดทุกคน

(เข้าชม : 2,521 ครั้ง)

card image

ใครโง่สุด???

ตอบแบบทั่วไป หมายเลข 4 ตอบแบบลึกซึ้ง!!! คือโง่หมดทุกคน

(เข้าชม : 2,521 ครั้ง)

card image

วอลท์ ดิสนีย์ (Walt Disney)

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

(เข้าชม : 1,851 ครั้ง)

card image

วอลท์ ดิสนีย์ (Walt Disney)

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

(เข้าชม : 1,851 ครั้ง)

card image

อับราฮัม ลินคอห์น (Abraham Lincoln)

ลินคอห์น คือผู้ที่ได้รับการยกย่องว่าเป็นผู้นำที่เก่งที่สุดคนหนึ่ง ของประเทศสหรัฐอเมริกา

(เข้าชม : 1,699 ครั้ง)

card image

อับราฮัม ลินคอห์น (Abraham Lincoln)

ลินคอห์น คือผู้ที่ได้รับการยกย่องว่าเป็นผู้นำที่เก่งที่สุดคนหนึ่ง ของประเทศสหรัฐอเมริกา

(เข้าชม : 1,699 ครั้ง)

card image

หน้าเว็บ Facebook เลิกใช้ระบบ Messages/Inbox แบบเดิม เปลี่ยนมาเป็น Messenger

ช่วงวันสองวันมานี้ ผู้ใช้ Facebook ผ่านหน้าเว็บคงสังเกตถึงการเปลี่ยนแปลงของระบบ messages/inbox

(เข้าชม : 1,592 ครั้ง)

card image

หน้าเว็บ Facebook เลิกใช้ระบบ Messages/Inbox แบบเดิม เปลี่ยนมาเป็น Messenger

ช่วงวันสองวันมานี้ ผู้ใช้ Facebook ผ่านหน้าเว็บคงสังเกตถึงการเปลี่ยนแปลงของระบบ messages/inbox

(เข้าชม : 1,592 ครั้ง)

xclose