ทำความเข้าใจกับ Bootstrap: มันทำงานอย่างไรและมีอะไรใหม่ ตัวเลือกเพิ่มเติมสำหรับการปรับแต่งธีม การซ้อนรูปภาพและภาพพื้นหลัง

ในบทความนี้เราจะมาดูว่ามีอะไรใหม่ในแพลตฟอร์ม Twitter Bootstrap เวอร์ชันที่สี่

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

เราคาดหวังอะไรได้บ้างจากเวอร์ชันถัดไปของแพลตฟอร์มนี้

นักพัฒนา Twitter Bootstrap 4 วางแผนที่จะทำการเปลี่ยนแปลงต่อไปนี้:

    เพิ่ม ชั้นเรียนใหม่เข้าสู่ระบบกริดในเวอร์ชันที่สี่ของแพลตฟอร์ม Twitter Bootstrap ไม่มีการวางแผนการเปลี่ยนแปลงที่สำคัญกับระบบกริด ตามที่นักพัฒนาเราจะเห็นสิ่งนี้ ชั้นเรียนเพิ่มเติมสำหรับอุปกรณ์พกพา

    พัฒนาแถบนำทางใหม่ทั้งหมด (เมนูการนำทาง)ใน Twitter Bootstrap 4 ส่วนประกอบ navbar จะได้รับการออกแบบใหม่ทั้งหมด สาเหตุหลักมาจากการที่การใช้งานในปัจจุบันได้รับการวิพากษ์วิจารณ์มากมายจากนักพัฒนาเว็บ ผู้ใช้บางรายขาดความยืดหยุ่น บางรายพบว่าเป็นการยากที่จะนำไปใช้ ดังนั้นจึงหวังว่าจะเป็นเช่นนั้น ส่วนประกอบใหม่บน Twitter Bootstrap 4 จะดีกว่ารุ่นก่อนหน้า

    ระบบเอกสารใหม่ด้วยการเปิดตัว Twitter Bootstrap 4 นักพัฒนาวางแผนที่จะออกแบบระบบเอกสารใหม่เพื่อให้ง่ายต่อการนำทางและค้นหาข้อมูลที่คุณต้องการ

    เพิ่มองค์ประกอบบางส่วน เอฟเฟกต์ CSS 3 (แอนิเมชันและการเปลี่ยนภาพ)แพลตฟอร์ม Twitter Bootstrap 3 ไม่เคยมีภาพเคลื่อนไหวมากมาย Twitter Bootstrap 4 จะพยายามแก้ไขฟีเจอร์นี้โดยการเพิ่ม ส่วนประกอบต่างๆคุณสมบัติ CSS3 เช่น ภาพเคลื่อนไหวและการเปลี่ยนภาพ

    พัฒนา แนวทางใหม่เพื่อเปลี่ยนธีมสากลสำหรับผู้ใช้ส่วนใหญ่ ความสามารถในการปรับแต่งส่วนประกอบ Twitter Bootstrap และองค์ประกอบอื่นๆ ได้อย่างง่ายดายถือเป็นสิ่งสำคัญสูงสุดที่ Twitter Bootstrap 3 ขาดไป

    ฉันสงสัยว่าพวกเขาจะทำเช่นนี้ใน Twitter Bootstrap 4 ได้อย่างไร อาจจะด้วยการสร้าง ไฟล์พิเศษการตั้งค่าลักษณะที่ปรากฏของส่วนประกอบใดจะถูกจัดเก็บหรือด้วยวิธีอื่นใด

    อยู่ระหว่างการตั้งค่า รูปร่างส่วนประกอบเป็นงานที่ซับซ้อนมากสำหรับนักพัฒนาเว็บส่วนใหญ่ ซึ่งโดยปกติแล้วจะสำเร็จด้วยวิธีใดวิธีหนึ่งต่อไปนี้:

  1. นอกจากนี้ ยังมีการวางแผน:
    • ดำเนินการ การอัปเดตต่างๆสำหรับแบบฟอร์มต่างๆ ได้แก่ องค์ประกอบที่กำหนดเองการจัดการ;
    • ทำการเปลี่ยนแปลง รหัสจาวาสคริปต์เพื่อปรับปรุงการวางตำแหน่งของคำแนะนำเครื่องมือ ป๊อปโอเวอร์ และดรอปดาวน์
    • สร้างส่วนประกอบใหม่ทั้งหมดเพื่อแทนที่พาเนล (พาเนล) รูปขนาดย่อ (รูปขนาดย่อ) และพาเนลที่หดหู่ (เช่นกัน) และอีกมากมาย

อย่างที่คุณเห็น มีการวางแผนการปรับปรุงหลายอย่างสำหรับ Twitter Bootstrap 4 และแน่นอนว่าฉันต้องการดูว่าจะนำไปใช้อย่างไร ดังนั้นเราจะตั้งตาคอยมัน รุ่นใหม่แพลตฟอร์ม

เมื่อวันที่ 19 สิงหาคม 2558 แพลตฟอร์ม Twitter Bootstrap 4 เวอร์ชันอัลฟ่าเปิดตัว คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับข่าวประชาสัมพันธ์ฉบับนี้ได้ในบทความนี้

ในขั้นตอนการจัดวาง สิ่งสำคัญคือต้องมีอยู่เสมอ เครื่องมือที่ดีซึ่งจะทำให้กระบวนการพัฒนาเร็วขึ้นอย่างมาก จะมีความยืดหยุ่น ปรับแต่งได้ง่าย และจะช่วยให้คุณสร้างเลย์เอาต์ได้อย่างง่ายดาย ควรช่วยให้คุณสร้างเพจที่แสดงได้ดีบนเดสก์ท็อปและได้อย่างง่ายดาย อุปกรณ์เคลื่อนที่- เราโชคดีเพราะเรามี Bootstrap นั่นเป็นเพียงบน ในขณะนี้มี 2 รุ่นปัจจุบัน- Bootstrap 3 และ Bootstrap 4 อะไรคือความแตกต่างและฉันควรใช้เวอร์ชันใด นี่คือสิ่งที่เราจะพบตอนนี้ บทความฉบับภาษาอังกฤษ

ทั้งสองเวอร์ชันมีเครื่องมืออันทรงพลังสำหรับการสร้างเพจแบบตอบสนองซึ่งรวมถึง:
- ตารางปรับตัวแบบหลายคอลัมน์
-องค์ประกอบสำเร็จรูป เช่น การนำทาง ปุ่ม เมนูแบบเลื่อนลง ฯลฯ
-ชุดของคลาสยูทิลิตี้เพื่อควบคุมพฤติกรรมขององค์ประกอบ
-รีเซ็ตหรือทำให้เป็นมาตรฐาน;
- การตั้งค่าการพิมพ์ในเทมเพลต
-วัตถุมีเดีย
- ปลั๊กอิน JS บางตัว (Carousel, Modal ฯลฯ );
- และอีกมากมาย

แต่ถึงแม้จะมีชุดส่วนประกอบและยูทิลิตี้ที่เกือบจะเหมือนกัน แต่ก็มีความแตกต่างอย่างมาก

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

นอกจากนี้ยังเป็นที่น่าสังเกตว่า ตาราง Bootstrap 3 สร้างขึ้นบนโฟลตเท่านั้น ในขณะที่ Bootstap 4 เสนอทางเลือกให้เราระหว่างโฟลต... และ Flexbox! ใช่ มันเกิดขึ้นแล้ว ลองนึกภาพว่าในเวอร์ชัน 4 คุณจะไม่มีปัญหาเรื่องการจัดแนวแนวตั้งและปัญหาคอลัมน์ที่มีความสูงเท่ากันอีกต่อไป นี่เป็นเพียงจำนวนเล็กน้อยที่มาร์กอัปที่สร้างบน Flexboxes สามารถมอบให้เราได้

เปลี่ยนแนวตั้งและ การจัดตำแหน่งแนวนอนบนอุปกรณ์ต่างๆ ที่ใช้ยูทิลิตี้ยูทิลิตี้และคลาส เช่น align-item-center, align-items-md-center, align-items-lg-start และอื่นๆ เปลี่ยนลำดับคอลัมน์ของคุณโดยใช้ flex-unordered, flex-last, flex-first! ใช้ mr-auto, ml-auto ซึ่งจะดันองค์ประกอบของคุณไปทางขวาหรือซ้ายตามลำดับ

แล้วคอลัมน์ที่มีความกว้างเท่ากันโดยไม่ระบุหมายเลขคลาสอย่างชัดเจนล่ะ ง่ายมาก! ภายในแถวของคุณ เพียงวาง div ด้วยคลาส col เท่าที่มีคอลัมน์ที่มีความกว้างเท่ากันที่คุณต้องการ สมมติว่าตารางของคุณมีลักษณะดังนี้:

1

2

3


ผลลัพธ์จะเป็น 3 คอลัมน์ที่มีความกว้างเท่ากันบนอุปกรณ์ทั้งหมดอย่างแน่นอน

คุณลักษณะนี้ไม่สามารถใช้งานได้ในเวอร์ชันที่สาม น่าประทับใจใช่ไหม? นอกจากนี้ยังสามารถสร้างคอลัมน์ที่เปลี่ยนความกว้างให้พอดีกับความกว้างของเนื้อหาได้ ในการทำเช่นนี้คุณต้องใช้คลาสต่อไปนี้ - col-md-auto (แทนที่เบรกพอยต์ที่ต้องการแทน md)

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

ใหญ่พิเศษ (>= 1200px)

ใหญ่ (>= 992px)

ปานกลาง (>= 768px)

ใน bootstrap 3 มีเพียง 4 จุดพักเหล่านี้ และบางครั้งก็สร้างปัญหาบางอย่างเมื่อทำเครื่องหมายบนแท็บเล็ตขนาดเล็กและโทรศัพท์ที่มีหน้าจอขนาดใหญ่

เป็นที่น่าสังเกตว่าไม่ใช่ทุกองค์ประกอบใน Bootstrap 4 ที่มี display: flex property หากมีความจำเป็นต้องทำ องค์ประกอบดิ้นจากนั้นคุณควรใช้ยูทิลิตี้การแสดงผล ตัวอย่างเช่น เพิ่มคลาส .d-flex, .d-inline-flex หรือ .d-sm-flex เมื่อคุณต้องการใช้ยูทิลิตี้นี้เฉพาะกับอุปกรณ์ประเภท sm ขึ้นไป องค์ประกอบที่มีคลาส .d-flex มีชุดยูทิลิตี้ flex ของตัวเอง ซึ่งคุณสามารถเปลี่ยนแกนของคอนเทนเนอร์ กลับลำดับ จัดองค์ประกอบภายในคอนเทนเนอร์ ฯลฯ - ซึ่งรวมถึง: flex-row, flex-row-reverse, .flex-column, .flex-column-reverse, .flex-sm-row, .justify-content-start, .justify-content-start, .justify- content -sm-start และรูปแบบอื่น ๆ ตามคุณสมบัติทั้งหมด

ฉันได้ให้เฉพาะความแตกต่างที่สำคัญและในรูปแบบที่สั้นมาก แต่ยังมีอะไรมากกว่านั้นอีกมาก เพียงแค่ดูส่วนการพิมพ์ที่มีระบบการเยื้องที่ปรับปรุงแล้ว องค์ประกอบต่างๆ(พี, อูล ฯลฯ) เพื่อทำความคุ้นเคยกับนวัตกรรมทั้งหมดอย่างเต็มที่ ฉันขอแนะนำให้คุณเปิด เอกสารอย่างเป็นทางการด้วยความช่วยเหลือคุณจะพบคำตอบสำหรับทุกคำถามของคุณทันที หลังจากนั้นให้ดาวน์โหลด Bootstrap 4 ด้วยตัวคุณเองแล้วลองใช้งาน ประสบการณ์ส่วนตัว- คุณอาจถามว่า: แล้วการรองรับเบราว์เซอร์สำหรับ Flexbox ล่ะ? ฉันสามารถใช้เฟรมเวิร์กเวอร์ชันใหม่ในการผลิตได้หรือไม่ และคำตอบคือใช่แน่นอน! การสนับสนุนนั้นยอดเยี่ยมมากทุกคน เบราว์เซอร์ที่ทันสมัยสนับสนุน เทคโนโลยีนี้อย่าลืมคำนำหน้าผู้ขายด้วย Bootstrap 4 เหมาะอย่างยิ่งสำหรับการพัฒนาทั้งเว็บไซต์ขนาดเล็กและ .

โดยสรุปเราสามารถพูดได้ว่าเวอร์ชันที่ 4 นั้นล้ำหน้ากว่ารุ่นก่อนมาก นี่คือสิ่งที่ฉันแนะนำให้ใช้กับโปรเจ็กต์ของคุณ เนื่องจากเป็นสิ่งสำคัญมากที่จะต้องตามทันเวลาและใช้เครื่องมือล่าสุด คุณภาพสูง และเกี่ยวข้องเท่านั้นในการพัฒนาผลิตภัณฑ์ของคุณ ในขณะนี้ Bootstrap 4 ได้เข้าสู่ขั้นตอนการทดสอบเบต้าแล้ว และมีการวางแผนการเปิดตัวอย่างเป็นทางการในปี 2561 เรากำลังรอคอยมัน! สร้างสรรค์ความทันสมัยและ รูปแบบที่ตอบสนองด้วย Bootstrap!

เมื่อสิ้นสุดฤดูร้อนบนเว็บไซต์อย่างเป็นทางการ บูทสแตรปมีบันทึกประจำรุ่น อัลฟ่ารุ่น บอตสแตรป 4- มาดูกันว่ารุ่นนี้จะให้นวัตกรรมอะไรบ้าง

  • Bootstrap 4 รองรับ Sass แทน Less แล้ว
  • ปรับปรุงระบบกริด
  • รองรับ FlexBox แล้ว
  • องค์ประกอบใหม่ใน Bootstrap 4 - การ์ด
  • การรีเซ็ตสไตล์การรีบูตพร้อมใช้งานแล้ว
  • ตัวเลือกเพิ่มเติมสำหรับการปรับแต่งธีม Bootstrap
  • การสนับสนุน IE8 ถูกยกเลิกแล้ว
  • แทนที่จะเป็นพิกเซล EM และ REM
  • ปลั๊กอินทั้งหมดเขียนใหม่โดยใช้ เวอร์ชันใหม่จาวาสคริปต์
  • ปรับปรุงคำแนะนำเครื่องมือและองค์ประกอบป๊อปโอเวอร์
  • อัปเดตโครงสร้างเอกสารใน Bootstrap 4

Bootstrap Sass น้อยลง

การพัฒนาและการเรียบเรียง บูทสแตรป 4 โมดูลตอนนี้ถูกนำไปใช้ใน Sass; ก่อนหน้านี้ Bootstrap ถูกสร้างขึ้นใน Less การรวบรวมเกิดขึ้นโดยใช้ไลบรารี ลิบซัสซึ่งทำงานได้เร็วกว่าอะนาล็อกหลายเท่า

ระบบกริด Bootstrap

Bootstrap 4 เป็นมิตรกับผู้ใช้มือถือมากขึ้น (สมาร์ทโฟน แท็บเล็ต) Mixins ใน Bootstrap 4 เป็นมิตรกับมือถือมากขึ้น ตอนนี้คุณสามารถกำหนดค่าและจัดการมิกซ์อินได้แล้ว

รองรับ Flex Box

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

ส่วนประกอบการ์ด

Bootstrap 4 ได้ลบส่วนประกอบออกแล้ว (หลุม ภาพขนาดย่อ และแผง)มีการสร้างส่วนประกอบแทน การ์ด(การ์ด) ซึ่งทำทุกอย่างเหมือนเดิมแต่ดีขึ้นและสะดวกยิ่งขึ้นเท่านั้น

รีเซ็ตการรีบูต HTML

ปรากฏขึ้น โมดูลใหม่ซึ่งจะรีเซ็ตรูปแบบมาตรฐานของแท็ก HTML (แต่ละเบราว์เซอร์มีสไตล์เริ่มต้นของตัวเอง) ซึ่งออกแบบมาเพื่อความเข้ากันได้ข้ามเบราว์เซอร์ ขณะนี้โมดูลนี้ถูกจัดเก็บไว้ในไฟล์ Sass และมีชื่อ รีบูต- สไตล์การรีเซ็ตทั้งหมดเหล่านี้ถูกรวบรวมไว้ในไฟล์ ทำให้เป็นมาตรฐาน.css

ตัวเลือกเพิ่มเติมสำหรับการปรับแต่งธีม

ในบูทสแตรป 4พารามิเตอร์ขององค์ประกอบต่างๆ ของหน้าเว็บไซต์ (สี การไล่ระดับสี การปัดเศษ ฯลฯ) จะถูกรวบรวมไว้ใน แยกไฟล์ซึ่งทำให้กำหนดค่าธีมใหม่ให้เหมาะกับการออกแบบของคุณได้ง่ายขึ้น

ไม่รองรับ IE8

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

ขนาด em และ rem

ใน Bootstrap 4 แทน พิกเซลตอนนี้มีการใช้มิติข้อมูลแล้ว em และ remด้วยเหตุนี้ องค์ประกอบของหน้า แบบอักษร และโมดูลจึงมีความยืดหยุ่นและปรับเปลี่ยนได้มากขึ้น

จาวาสคริปต์ ES6

ปลั๊กอิน Botstrap 4 ที่มีอยู่ทั้งหมดได้รับการเขียนใหม่ ด้วย ES5 (จาวาสคริปต์ 5)ไปที่ใหม่กว่า เวอร์ชันจาวาสคริปต์อีเอส6. รหัสที่เขียนใน ES6 (จาวาสคริปต์ 6)มีโครงสร้างที่น่าเชื่อถือและรวดเร็วยิ่งขึ้น

คำแนะนำเครื่องมือและองค์ประกอบป๊อปโอเวอร์

คำแนะนำเครื่องมือและองค์ประกอบป๊อปโอเวอร์ตอนนี้ทำงานอย่างต่อเนื่องมากขึ้นและตามที่คาดไว้ใน Bootstrap 4

เอกสาร Bootstrap 4

เอกสาร Bootstrap 4 ได้รับการปรับปรุงให้สมบูรณ์ยิ่งขึ้นและเขียนใหม่ด้วย มาร์กดาวน์(ภาษามาร์กอัปแบบ lightweight) การค้นหาเอกสารได้รับการปรับปรุงเช่นกัน

รองรับบูทสแตรป 3

เมื่อ Bootstrap ได้รับการอัปเดตจากเวอร์ชันที่สอง (2) เป็นเวอร์ชันที่สาม (3) แสดงว่ารองรับ บูทสแตรป 2หยุดแล้ว สิ่งนี้ทำให้เกิดการวิพากษ์วิจารณ์จากชุมชนมากมาย คราวนี้กับทางออก บูทสแตรป 4เวอร์ชันที่สามของเฟรมเวิร์กจะได้รับการสนับสนุนและแก้ไขเมื่อพบข้อบกพร่อง

ผู้ที่เกี่ยวข้องกับการพัฒนาเว็บมักจะรู้ว่า Bootstrap คืออะไร
โดยส่วนตัวแล้ว ฉันคุ้นเคยกับ Bootstrap framework เวอร์ชัน 2.x และมันทำให้ฉันประทับใจไม่รู้ลืม เป็นไปได้ที่จะได้รับอินเทอร์เฟซที่ยอมรับได้อย่างสมบูรณ์โดยไม่ต้องมีส่วนร่วมของนักออกแบบ ผู้ชอบความสมบูรณ์แบบในตัวมีความยินดี คุณสามารถสาบานได้เลยว่าอินเทอร์เน็ตกลายเป็นจุดเริ่มต้นอย่างมาก แต่คุณต้องยอมรับมัน เนื่องจากคนที่ทำงานเกี่ยวกับอินเทอร์เน็ตโดยทั่วไปเก่งและทำในสิ่งที่จำเป็น แต่การที่ผู้คนเกียจคร้านก็เป็นอีกปัญหาหนึ่ง

วันนี้เป็นวันเกิดของกรอบที่ยอดเยี่ยมนี้ Bootstrap 4 ได้รับการประกาศในวันเกิด

Bootstrap 4 – มีอะไรใหม่?

ตามที่นักพัฒนาเขียนเอง มีสิ่งใหม่ๆ มากมายและเป็นการยากที่จะอธิบายการเปลี่ยนแปลงทั้งหมด รีวิวใหญ่- และฉันจะไม่ ไฮไลท์:

ย้ายจากน้อยไป Sass

ตอนนี้ Bootstrap คอมไพล์เร็วกว่าปกติด้วยการใช้ Libsass

การปรับปรุงระบบโครงร่างกริด

ให้ความสำคัญกับมากขึ้น ผู้ใช้มือถือ- Mixins ได้รับการออกแบบใหม่ทั้งหมด
ตอนนี้เมื่อพิจารณาจากเอกสารแล้ว คุณสามารถนำสิ่งสกปรกที่จำเป็นออกจากกล่องได้ทุกที่ ตัวอย่างเช่น คุณต้องการให้โปรเจ็กต์ของคุณมีคลาส .line แทนที่จะเป็น .row ก่อนหน้า:

ไลน์ ( @include make-row(); )

รองรับเฟล็กบ็อกซ์

ดังที่นักพัฒนาเขียนไว้ว่า: "อนาคตมาถึงแล้ว..." เพียงย้ายตัวแปรและคอมไพล์ใหม่ คุณก็สามารถรับ Bootstrap ได้

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

ล่าสุด Bootstrap เวอร์ชัน 4 ใหม่เปิดตัวแล้ว ฉันอยากจะบอกคุณว่ามีอะไรใหม่ในเวอร์ชันนี้ แตกต่างจากเวอร์ชันที่สามอย่างไร และจะส่งผลต่อกระบวนการพัฒนาเว็บไซต์อย่างไร

ถ้าคุณไม่รู้...

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

การพัฒนาโครงการ

เนื่องจากจำนวนผู้ใช้และส่วนประกอบที่ต้องรองรับเพิ่มมากขึ้น จำนวนข้อบกพร่องที่ต้องจัดการก็เพิ่มขึ้นเช่นกัน ผู้พัฒนาโครงการขอเชิญชวนทุกคนให้มีส่วนร่วมในการพัฒนา

ดังนั้น ที่เก็บโปรเจ็กต์จึงรอคอยคอมมิตของคุณ :)

รองรับ Bootstrap v3

ที่สุด คำถามสำคัญซึ่งผู้อ่านส่วนใหญ่มาที่นี่: จะมีเว็บไซต์ที่ออกแบบที่ บูทสแตรปช่วย 3 ทำงานได้ดีถ้าฉันอัปเดตเวอร์ชันเฟรมเวิร์ก?

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

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

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

แต่ก็ไม่มีอะไรผิดปกติ นี่เรียกว่าความก้าวหน้าของกรอบงาน หากคุณรู้วิธีเขียนโค้ดบน Bootstrap 3 และอ่านบล็อกของฉัน คุณสามารถเชี่ยวชาญเวอร์ชันที่สี่ได้อย่างง่ายดาย

หัวข้อ

เวอร์ชันใหม่จะมีธีมอย่างเป็นทางการจากนักพัฒนา Bootstrap ฉันมองพวกเขาอย่างสงสัยมาก ไม่ว่าในกรณีใด ในขณะนี้: มีเพียง 3 ธีมเท่านั้น ราคา 99 ดอลลาร์ และฉันเห็นประโยชน์เพียงเล็กน้อยจากธีมเหล่านี้

หลังจากละทิ้งธีมแต่ละธีมไปแล้ว นักพัฒนาจึงเสนอให้เราซื้อธีมเหล่านี้ :)

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

ความคิดเห็นของฉัน

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

ฉันดีใจที่เรามีหนึ่ง เครื่องมืออันทรงพลังซึ่งสะดวกและรอบคอบมากขึ้นในการอัปเดตแต่ละครั้ง ฉันหวังว่าคุณจะชอบมันเช่นกัน

คลิก "ถูกใจ" เพื่อติดตามเราบน Facebook