วิศวกรการพัฒนาโดยใช้ bootstrap นักพัฒนาส่วนหน้าโดยใช้ พื้นฐาน มาพูดถึงเหตุผลว่าทำไม
มีความแตกต่างที่สำคัญมากมายระหว่าง Bootstrap และ Foundation แต่ฉันคิดว่าคุณต้องจำสิ่งเดียวเท่านั้น:
แนวคิดการออกแบบทั้งสองของ Zurb และ Twitter นั้นชัดเจนมากเนื่องจากสามารถมองเห็นได้จากการตั้งชื่อกรอบของพวกเขาเอง: bootstrap หมายถึง bootstrap, bootstrap กล่าวอีกนัยหนึ่งมันพยายามจัดการทุกสิ่งที่คุณต้องการในโครงการของคุณ รากฐานหมายถึงการสร้างการสร้างกล่าวอีกนัยหนึ่งมันให้ความคิดสร้างสรรค์ที่แข็งแกร่งในโครงการของคุณ
การรักษามุมมองนี้ตอนนี้ฉันจะแสดงรายการความแตกต่างที่สำคัญมากขึ้นระหว่างสอง:
1. องค์ประกอบ UI
มูลนิธิจัดองค์ประกอบที่ จำกัด เพียงไม่กี่อย่างในขณะที่ Bootstrap ให้องค์ประกอบทั้งหมดที่คุณสามารถจินตนาการได้
เป้าหมายการออกแบบของ Zurb สำหรับมูลนิธิคือแม้ว่าคุณจะใช้องค์ประกอบ UI ที่กำหนดไว้ล่วงหน้า แต่ก็ไม่ควรดูคล้ายกับเว็บไซต์ของคุณ
ในทางกลับกัน Bootstrap พยายามจัดหาองค์ประกอบ UI ที่กำหนดทั้งหมดให้คุณ
2. REMS กับพิกเซล
รองพื้นใช้ REMS ในขณะที่ Bootstrap ใช้พิกเซล
การใช้พิกเซลหมายความว่าคุณต้องกำหนดความสูงความกว้างระยะขอบด้านในอย่างแม่นยำขอบด้านนอกของส่วนประกอบและในแต่ละอุปกรณ์และขนาดหน้าจอเนื่องจากอุปกรณ์ต่าง ๆ มักจะมีผลกระทบอย่างมากในการแสดงผล
ตอนนี้ Foundation 5 ใช้ REMS ไม่ใช่ EM สิ่งนี้หลีกเลี่ยงปัญหาคาสเคด EM
การใช้ REMS หมายความว่าคุณสามารถใช้ขนาดตัวอักษร: 80%; เพื่อลดส่วนประกอบทั้งหมดและส่วนประกอบย่อย 20%
เป็นเรื่องที่ควรค่าแก่การกล่าวถึงว่าด้วย REMS คุณสามารถกำจัดรายละเอียดของพิกเซลได้ดังนั้นจึงคุ้มค่าที่จะใช้ REMS เพื่อจัดการกับพวกเขา
มูลนิธิยังให้วิธีการผสมของ SASS ในการแปลงพิกเซลเป็น REMS เพื่อให้คุณสามารถใช้วิธีการคิดพิกเซลต่อไปเพื่อกำหนดหน้า:
.Element {width: rem-calc (10px); // จะถูกแปลงเป็น rems}3. กริดที่ยืดหยุ่นเทียบกับกริดที่กำหนดไว้ล่วงหน้า
กริดของ Foundation สามารถปรับให้เข้ากับความกว้างของเบราว์เซอร์ปัจจุบันโดยอัตโนมัติ Boostrap กำหนดขนาดกริดไว้ล่วงหน้าเพื่อปรับให้เข้ากับอุปกรณ์และหน้าจอหลัก
Bootstrap จะเปลี่ยนกริดทันทีเมื่อคุณเปลี่ยนความกว้างของเบราว์เซอร์
มูลนิธิจะปรับให้เข้ากับความกว้างของเบราว์เซอร์ในปัจจุบันได้อย่างยืดหยุ่น นี่เป็นวิธีการทางเทคนิคใหม่ ในขณะที่ปรับตัวโดยอัตโนมัติมันสามารถทำเอฟเฟกต์เช่นเดียวกับหม้อแปลง
มูลนิธิมีสองประเด็นสำคัญเมื่อกริดเปลี่ยนแปลง: ขนาดเล็กกลางและใหญ่ การดำเนินการทั้งหมดจะลดลงและขยายและปรับให้เข้ากับความกว้างของเบราว์เซอร์ปัจจุบัน ไม่จำเป็นต้องใช้ขนาดหน้าจอที่กำหนดไว้ล่วงหน้าและเหตุผลที่สำคัญกว่านั้นคือคุณได้รับการสนับสนุนให้กำหนดรูปแบบที่แตกต่างกันตามขนาดของหน้าจอ
การใช้ bootstrap คุณจะได้รับตาข่ายคงที่หรือท่อร่วมซึ่งหมายความว่าคุณต้องตั้งค่าหรือไม่ความกว้างที่กำหนดไว้ล่วงหน้าสำหรับคอนเทนเนอร์ตาข่าย
ด้วย Foundation และ Sass คุณสามารถปรับขนาดของกริดที่ใหญ่ที่สุดได้อย่างอิสระ (มีการคำนวณขนาดกลางและขนาดเล็กโดยอัตโนมัติ) จำนวนคอลัมน์สำหรับหน้าจอขนาดใหญ่และจำนวนคอลัมน์สำหรับหน้าจอขนาดเล็ก
4. รองรับอุปกรณ์มือถือที่ต้องการเทียบกับอุปกรณ์มือถือ
มูลนิธิได้รับการออกแบบโดยคำนึงถึงหน้าจอสี่มุมใด ๆ Bootstrap ได้รับการออกแบบโดยแบ่งออกเป็น: โทรศัพท์มือถือ, แท็บเล็ต, เดสก์ท็อปและเดสก์ท็อปที่มีหน้าจอขนาดใหญ่
การสร้างเว็บไซต์มือถือเป็นครั้งแรกที่รองรับอุปกรณ์มือถือหมายความว่ามีให้บริการบนหน้าจอที่ใหญ่ขึ้นอย่างแน่นอน ดังนั้นมูลนิธิสนับสนุนให้คุณทำสิ่งนี้: มือถือเป็นครั้งแรก
หากคุณใช้ SASS Media Query Mixin ของ Foundation คุณจะพบว่าไม่มีการสืบค้นสื่อเฉพาะเพื่อสอบถามว่าอุปกรณ์มือถือคืออะไร แต่คุณใช้ Media Query เพื่อกำหนดวิธีการแสดงบนหน้าจอขนาดใหญ่
หากคุณพิจารณาคอมพิวเตอร์เดสก์ท็อปเป็นครั้งแรกเมื่อออกแบบสิ่งต่าง ๆ คุณอาจพบปัญหาใหญ่เมื่อรองรับหน้าจอขนาดเล็ก หากคุณพิจารณาโทรศัพท์ของคุณเป็นครั้งแรกคุณจะมุ่งเน้นไปที่สิ่งที่สำคัญที่สุดสำหรับผู้ใช้และเพิ่มความรู้สึกของพื้นที่
5. ชุมชน
Bootstrap มีชุมชนขนาดใหญ่ และด้วยรากฐานคุณจะต้องพึ่งพาตนเองมากขึ้น
ไฮไลท์ที่ยิ่งใหญ่ของ Bootstrap คือชุมชน มันมีขนาดใหญ่มากรวมทุกอย่างและคุณสามารถค้นหาได้เกือบทุกอย่างที่คุณต้องการ
หากคุณเลือกมูลนิธิการพึ่งพาตนเองอาจเป็นสิ่งที่คุณต้องเป็นเชี่ยวชาญ โซลูชันเกือบทั้งหมดใช้สำหรับ bootstrap และคุณสามารถสร้างของคุณเองเท่านั้น
สรุปแล้ว
ถามตัวเองสองสามคำถาม:
คุณต้องการให้บางสิ่งมีประโยชน์มากขึ้นหรือทำให้เป็นจริงมากขึ้น?
คุณต้องการจัดระเบียบ CS ของคุณเองและทำให้เป็นส่วนประกอบพื้นฐานของคุณหรือไม่?
คำตอบคือ: bootstrap พื้นฐาน .
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
นี่เป็นการเปรียบเทียบที่น่าสนใจหรือไม่? ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเข้าใจกรอบส่วนหน้า Bootstrap 3 และ Foundation 5