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

ดังนั้นคำถามของฉันคือ:

• Bootstrap คืออะไร?
• ใช้สำหรับอะไรและช่วยพัฒนาส่วนหน้าได้อย่างไร
• ฉันต้องการรายละเอียดเพิ่มเติมอธิบาย

เป็นเฟรมเวิร์กโอเพนซอร์ส HTML, CSS และ JavaScript (สร้างขึ้นครั้งแรกโดย Twitter) ที่คุณสามารถใช้เป็นพื้นฐานสำหรับการสร้างเว็บไซต์หรือเว็บแอปพลิเคชัน

• ข้อมูลเพิ่มเติมและลิงค์เพื่อดาวน์โหลด

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

• ตัวอย่าง

• ธีมส์

• Bootply - Bootstrap Editor และเครื่องมือสร้าง

ปรับปรุง

เว็บไซต์ bootstrapอย่างเป็นทางการได้รับการปรับปรุงและมีคำจำกัดความที่ชัดเจน

"Bootstrap เป็นกรอบ HTML, CSS และ JS ที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาโปรเจ็กต์แรกบนมือถือที่ตอบสนองได้บนเว็บ"

"ออกแบบและสร้างด้วยความรักทั้งหมดในโลกโดย@mdoและ@fat "

Bootstrap เป็นเฟรมเวิร์ก Javascript โอเพนซอร์ซที่พัฒนาโดยทีมงานของ Twitter มันคือการรวมกันของรหัส HTML, CSS และ Javascript ที่ออกแบบมาเพื่อช่วยสร้างส่วนประกอบส่วนติดต่อผู้ใช้ Bootstrap ได้รับการตั้งโปรแกรมให้รองรับทั้ง HTML5 และ CSS3

นอกจากนี้ยังเรียกว่า Front-end-framework

Bootstrap เป็นชุดเครื่องมือฟรีสำหรับสร้างเว็บไซต์และเว็บแอพพลิเคชั่น

มันมีเทมเพลตการออกแบบที่ใช้ HTML และ CSS สำหรับการพิมพ์แบบฟอร์มปุ่มการนำทางและส่วนประกอบอินเทอร์เฟซอื่น ๆ รวมถึงส่วนขยาย JavaScript ที่เป็นตัวเลือก

เหตุผลบางประการสำหรับโปรแกรมเมอร์ที่ต้องการ Bootstrap Framework

1. ง่ายต่อการเริ่มต้น

2. ระบบกริดที่ยอดเยี่ยม

3. การออกแบบพื้นฐานสำหรับองค์ประกอบ HTML ส่วนใหญ่ (ประเภท, โค้ด, ตาราง, แบบฟอร์ม, ปุ่ม, รูปภาพ, ไอคอน)

4. รายการส่วนประกอบที่กว้างขวาง

5. ปลั๊กอิน Javascript ที่ให้มา

นำมาจากเกี่ยวกับ Bootstrap Framework

Bootstrap อย่างที่ฉันรู้มันเป็น CSS ที่กำหนดไว้อย่างดี แม้ว่าการใช้ Bootstrap คุณสามารถใช้ JavaScript, jQuery และอื่น ๆ ได้ แต่ความแตกต่างที่สำคัญคือการใช้ Bootstrap คุณสามารถเรียกชื่อคลาสแล้วคุณจะได้ผลลัพธ์ในรูปแบบ HTML สำหรับเช่น สีของปุ่มการสร้างข้อความโดยใช้เลย์เอาต์ ทั้งหมดนี้คุณไม่ต้องเขียนไฟล์ CSS แต่คุณต้องใช้ชื่อคลาสที่ถูกต้องสำหรับการสร้างรูปแบบ HTML ของคุณ

คุณสามารถเข้าใจ Bootstrap เป็นเฟรมเวิร์กส่วนหน้าที่สร้างโดย Twitter เพื่อสร้างแอปพลิเคชันเว็บที่ตอบสนองต่ออุปกรณ์ได้เร็วขึ้น Bootstrap สามารถเข้าใจได้เป็นส่วนใหญ่เป็นชุดของคลาส CSS ที่กำหนดไว้ซึ่งสามารถนำมาใช้โดยตรง มันใช้ประโยชน์จาก CSS, javascript, jQuery ฯลฯ ในพื้นหลังเพื่อสร้างสไตล์เอฟเฟกต์และแอ็คชั่นสำหรับองค์ประกอบ Bootstrap

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

Bootstrap ทำให้คุณปลอดจากการเขียนโค้ด CSS จำนวนมากและยังช่วยประหยัดเวลาที่คุณใช้ในการออกแบบเว็บเพจ

Bootstrap เป็น CSS แบบโอเพ่นซอร์สซึ่งเป็นเฟรมเวิร์ก JavaScript ที่พัฒนาขึ้นสำหรับแอปพลิเคชั่น Twitter โดยทีมนักออกแบบและนักพัฒนาของทวิตเตอร์ จากนั้นพวกเขาเปิดตัวมันสำหรับโอเพนซอร์ส การเป็นผู้ใช้ bootstrap ของ twitter มานานแล้วฉันพบว่ามันเป็นหนึ่งในดีที่สุดสำหรับการออกแบบเว็บไซต์ที่ตอบสนองพร้อมใช้มือถือ ปลั๊กอิน CSS และ Javascript จำนวนมากพร้อมใช้งานสำหรับการออกแบบเว็บไซต์ของคุณในเวลาไม่นาน เป็นกรอบการออกแบบแม่แบบที่รวดเร็ว บางคนบ่นว่าไฟล์ CSS bootstrap นั้นหนักและใช้เวลาในการโหลด แต่การเรียกร้องเหล่านี้ทำโดยคนขี้เกียจ คุณไม่จำเป็นต้องเก็บ bootstrap.css ไว้ในเว็บไซต์ของคุณ คุณมีตัวเลือกในการลบสไตล์สำหรับส่วนประกอบที่คุณไม่จำเป็นสำหรับเว็บไซต์ของคุณ ตัวอย่างเช่น, หากคุณใช้ส่วนประกอบพื้นฐานเช่นแบบฟอร์มและปุ่มคุณสามารถลบส่วนประกอบอื่น ๆ เช่น accordions และอื่น ๆ จากไฟล์ CSS หลัก ในการเริ่มเล่นน้ำใน bootstrap คุณสามารถดาวน์โหลดเทมเพลตและส่วนประกอบพื้นฐานได้เว็บไซต์getbootstrapและปล่อยให้เวทมนตร์เกิดขึ้น

ข้อจำกัดความรับผิดชอบ:ฉันเคยใช้ bootstrap ในอดีต แต่ฉันไม่เคยชื่นชมสิ่งที่เป็นจริงมาก่อนคำอธิบายนี้มาจากคำนิยามของฉันในวันนี้ และฉันรู้ว่า bootstrap v4 นั้นออกมา แต่ฉันพบว่าเอกสาร bootstrap v3 นั้นชัดเจนกว่าดังนั้นฉันจึงใช้มัน ห้องสมุดจะไม่เปลี่ยนแปลงสิ่งที่เป็นพื้นฐาน

สั้น

Bootstrap คือชุดของไฟล์ CSS และ javascript ที่ให้การกำหนดค่าเริ่มต้นที่ดูดีสำหรับองค์ประกอบ HTML มาตรฐานและวัตถุเนื้อหาเว็บทั่วไปสองสามรายการที่ไม่ใช่องค์ประกอบ HTML มาตรฐาน

เพื่อทำการเปรียบเทียบมันเหมือนกับการใช้ชุดรูปแบบใน PowerPoint แต่สำหรับเว็บไซต์ของคุณ: ทำให้สิ่งต่าง ๆ ดูดีโดยไม่ต้องพยายามมากเกินไป

มันประกอบด้วยอะไร?

เอกสาร v3 อย่างเป็นทางการแบ่งออกเป็นสามส่วน:

• CSS
• ส่วนประกอบ
• จาวาสคริ

สิ่งเหล่านี้สอดคล้องกับสิ่งสำคัญสามประการที่ Bootstrap จัดเตรียมไว้ให้:

• ไฟล์ CSS ธรรมดาที่มีรูปแบบองค์ประกอบ HTML มาตรฐาน ดังนั้น Bootstrap ทำให้องค์ประกอบมาตรฐานของคุณดูสวย เช่น html:<input class="btn btn-default" type="button" value="Input">Click me</button>
• ไฟล์ CSS ที่ใช้สไตล์ในองค์ประกอบ html มาตรฐานเพื่อทำให้เป็นสิ่งที่ไม่ใช่องค์ประกอบ html มาตรฐาน แต่เป็นองค์ประกอบ Bootstrap มาตรฐาน (เช่นhttps://getbootstrap.com/docs/3.3/components/#progress ) ด้วยวิธีนี้ Bootstrap จะขยายรายการองค์ประกอบเว็บ "มาตรฐาน" ด้วยวิธีที่สอดคล้องกับการมองเห็น เช่น html:<span class="glyphicon glyphicon-align-left"></span>
• คลาส CSS ได้รับการออกแบบโดยคำนึงถึง jQuery ภายใน Bootstrap ใช้ตัวเลือก jQuery เพื่อปรับเปลี่ยนสไตล์ในทันทีและโต้ตอบกับ DOM และทำให้ผู้ใช้มีความสามารถเดียวกัน ฉันเชื่อว่าต้องใช้คำอธิบายเพิ่มเติมดังนั้น ...

ใช้ Javascript / jQuery

Bootstrap ขยาย jQueryไม่น้อย ถ้าเราดูที่รหัสที่มาเราจะเห็นว่ามันใช้ jQuery ที่จะทำสิ่งที่ชอบ: การตั้งค่าฟังสำหรับเหตุการณ์ keydown ในการโต้ตอบกับเมนูแบบเลื่อนลง มันทำทั้งหมดของการตั้งค่า jQuery นี้เมื่อคุณนำเข้ามันใน<script>แท็กของคุณดังนั้นคุณต้องแน่ใจว่าโหลด jQuery ก่อนที่ Bootstrap จะเป็น

นอกจากนี้ยังเชื่อมโยงจาวาสคริปต์กับ DOM ให้แน่นกว่า jQuery แบบธรรมดาซึ่งจัดเตรียมอินเตอร์เฟสคลาสjavascript เช่นสลับปุ่มโปรแกรม โปรดจำไว้ว่า CSS กำหนดลักษณะของสิ่งดังนั้นงานสำคัญของการดำเนินการเหล่านี้จะมีแนวโน้มที่จะแก้ไขคลาส CSS ที่ใช้กับองค์ประกอบในช่วงเวลานั้น การเปลี่ยนแปลงแบบนี้ตามการป้อนข้อมูลของผู้ใช้ไม่สามารถทำได้ด้วย CSS ธรรมดา

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

มาตรฐาน

ฉันได้พูดคำว่า "มาตรฐาน" ไว้ที่นี่มากและด้วยเหตุผลที่ดี ฉันคิดว่าสิ่งที่ดีที่สุดที่ Bootstrap จัดหาให้นั้นเป็นมาตรฐานที่ดูดี คุณมีอิสระที่จะแก้ไขชุดรูปแบบเริ่มต้นได้มากเท่าที่คุณต้องการ แต่เป็นแบบพื้นฐานที่ดีกว่าแบบดิบ html, css และ js และนี่คือเหตุผลที่เรียกว่า "กรอบงาน"

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

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

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

Bootstrap เป็นเฟรมเวิร์ก HTML, CSS, JS พร้อมองค์ประกอบมากมายที่ช่วยให้คุณสร้างเว็บไซต์หรือแอปพลิเคชั่นเว็บที่สวยงามและทันสมัยได้อย่างรวดเร็ว

เว็บไซต์ต่อไปนี้มีตัวอย่างองค์ประกอบและส่วนประกอบที่ใช้ซ้ำได้ซึ่งคุณสามารถรวมเข้ากับโครงการของคุณโดยใช้เฟรมเวิร์ก bootstrap

bootsnipp.com

startbootstrap.com

bootdey.com

Bootstrap เป็นกรอบโอเพ่นซอร์สที่ได้รับความนิยมและใช้กันอย่างแพร่หลายที่สุดของโลกสำหรับการพัฒนาด้วย HTML, CSS และ JS เป็นกรอบการทำงานส่วนหน้าของ HTML Bootstrap ช่วยในการสร้างเว็บไซต์ที่ตอบสนองหรือเว็บแอปพลิเคชันและระบบกริด 12 คอลัมน์ที่ช่วยปรับเว็บไซต์ให้มีความละเอียดหน้าจอที่เหมาะสม เวอร์ชั่นปัจจุบันของ bootstrap คือ 4.3.1 และทีม bootstrap ยังได้ประกาศอย่างเป็นทางการBootstrap 5รุ่นและการเปลี่ยนแปลงเช่นการลบ jquery จาก bootstrap เหตุผลสำคัญบางประการที่ว่าทำไมเฟรมเวิร์ก bootstrap จึงเป็นที่นิยมที่สุด

• มันใช้งานง่าย
• Bootstrap มีการสนับสนุนชุมชนขนาดใหญ่
• การปรับแต่งสามารถทำได้อย่างง่ายดาย
• มันเพิ่มความเร็วในการพัฒนา

• การตอบสนอง

  สำหรับรายละเอียดเพิ่มเติมคุณสามารถตรวจสอบเว็บไซต์อย่างเป็นทางการ: https://getbootstrap.com/

ที่มา: https://vmokshagroup.com/blog/bootstrap-advantages/

ตามมาตรฐานของวันนี้และคำศัพท์ทางเว็บฉันจะบอกว่า Bootstrap นั้นไม่ใช่กรอบจริงๆแต่นั่นเป็นสิ่งที่เว็บไซต์ของพวกเขาอ้าง นักพัฒนาส่วนใหญ่พิจารณาเชิงมุม Vue และตอบสนองกรอบขณะที่เงินทุนมักจะเรียกว่าเป็น " ห้องสมุด "

แต่เป็นที่แน่นอนและถูกต้อง Bootstrap เป็นโอเพนซอร์สมือถือครั้งแรกของคอลเลกชันของ CSS, JavaScript และ HTML สาธารณูปโภคการออกแบบมีจุดประสงค์เพื่อให้หมายถึงการพัฒนาองค์ประกอบเว็บที่ใช้กันทั่วไปเร็วกว่ามาก .

หลักการสำคัญสองสามข้อที่สนับสนุนความสำเร็จของ Bootstrap:

• มันนำมาใช้ใหม่
• มันมีความยืดหยุ่น (เช่น: อนุญาตให้ระบบกริดที่กำหนดเองเปลี่ยนจุดพักการตอบสนองขนาดรางน้ำคอลัมน์หรือสีรัฐได้อย่างง่ายดายตามกฎง่ายๆการตั้งค่าส่วนใหญ่ถูกควบคุมโดยตัวแปรทั่วโลก)
• มันใช้งานง่าย
• มันเป็นแบบแยกส่วน (ทั้ง JavaScript และ (S) CSS ใช้วิธีแบบแยกส่วนเราสามารถหาบทช่วยสอนในการสร้าง Bootstrap แบบกำหนดเองเพื่อรวมเฉพาะส่วนที่ต้องการ
• มีความเข้ากันได้ข้ามเบราว์เซอร์โดยเฉลี่ยสูงกว่า
• ความสามารถในการเข้าถึงเว็บนอกกรอบ (พร้อมโปรแกรมอ่านหน้าจอ)
• มันเป็นเอกสารที่ค่อนข้างดี

มันมีแม่แบบการออกแบบและฟังก์ชั่นสำหรับ: เลย์เอาต์, พิมพ์, แบบฟอร์ม, การนำทาง, เมนู (รวมถึงแบบเลื่อนลง), ปุ่ม, พาเนล, ป้าย, โมดัล, การเตือน, แท็บ, ยุบได้, หีบเพลง, รายการตารางเลขหน้าสื่อสาธารณูปโภคสื่อ ฝัง, ภาพและการเปลี่ยนภาพ), ยูทิลิตี้การตอบสนอง, ยูทิลิตี้ที่ใช้สี (หลัก, รอง, อันตราย, เตือน, ข้อมูล, แสง, มืด, ปิดเสียง, สีขาว), ยูทิลิตี้อื่น ๆ (ตำแหน่ง, ระยะขอบ, ช่องว่างภายใน, ขนาด, ระยะห่าง, การจัดตำแหน่ง ทัศนวิสัย), scrollspy, ต่อท้าย, คำแนะนำเครื่องมือ, ป๊อปอัป

ตามค่าเริ่มต้นแล้วจะขึ้นอยู่กับ jQuery แต่คุณจะพบว่าตัวแปร jQuery ฟรีที่ขับเคลื่อนโดยเฟรมเวิร์ก JavaScript แบบก้าวหน้าที่ได้รับความนิยมแต่ละรุ่น:

• React-Bootstrap - ทำปฏิกิริยา Bootstrap ที่ขับเคลื่อน
• BootrapVue - Vue ขับเคลื่อน Bootstrap
• ng-bootstrap - Bootstrap ขับเคลื่อนเชิงมุม

การทำงานกับ Bootstrap ขึ้นอยู่กับการใช้คลาสบางคลาส (หรือขึ้นอยู่กับเฟรมเวิร์ก JS: คำสั่งวิธีการหรือคุณสมบัติ / อุปกรณ์ประกอบฉาก) และการใช้โครงสร้างมาร์กอัปโดยเฉพาะ

โดยทั่วไปแล้วเอกสารประกอบด้วยตัวอย่างทั่วไปซึ่งสามารถคัดลอกและวางได้อย่างง่ายดายและใช้เป็นแม่แบบเริ่มต้น

ข้อดีอีกอย่างของการพัฒนาด้วย Bootstrap ก็คือชุมชนที่มีชีวิตชีวาซึ่งแปลเป็นธีมเทมเพลตและปลั๊กอินที่มีอยู่มากมายซึ่งส่วนใหญ่เป็นโอเพ่นซอร์ส (เช่น: ปฏิทิน, ตัวเลือกวันที่ / เวลา, ปลั๊กอินสำหรับการจัดการเนื้อหาแบบตารางเช่น เช่นเดียวกับไลบรารี / ส่วนประกอบคอลเลกชันที่สร้างอยู่ด้านบนของ Bootstrap เช่น MDB, เทมเพลตพอร์ตโฟลิโอ, เทมเพลตผู้ดูแลระบบ ฯลฯ ... )

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