ระบบกริดแบบฟลูอิดหรือแบบคงที่ในการออกแบบที่ตอบสนองตาม Bootstrap ของ Twitter

ฉันสับสนเกี่ยวกับตัวเลือกต่าง ๆ ในตาราง bootstrap twitterและวิธีที่พวกเขาไปด้วยกัน

จะเริ่มต้นด้วยคุณสามารถมีสามัญคงที่หรือcontainercontainer-fluid

จากนั้นคนใดคนหนึ่งสามารถรวมทั้งสามัญหรือแถวของเหลวrow row-fluidนั่นคือคุณสามารถมีภาชนะคงที่ที่มีแถวของไหลหรือภาชนะของของไหล ... กับแถวคงที่หรือไม่?

จากนั้นคุณสามารถรวมข้อความค้นหาสื่อ 'ตอบสนอง' หรือไม่ก็ได้

ฉันสับสนว่าสิ่งเหล่านี้มีปฏิกิริยาต่อกันอย่างไร แต่ขอเริ่มด้วยตัวอย่างที่ชัดเจน

ในหน้าตัวอย่างนั้นมีสิ่งที่แสดงเป็นตัวอย่างของทั้งกริดคงที่และกริดฟลูอิด

อย่างไรก็ตามในเบราว์เซอร์ของฉันในหน้าตัวอย่างนั้น - กริดทั้งสองทำงานเหมือนกัน อาจเป็นเพราะหน้าตัวอย่างใช้คิวรีสื่อที่ตอบสนองต่อการเลือกหรือไม่ ในตัวอย่างกริดทั้งสองถ้าฉันเริ่มค่อยๆลดขนาดหน้าต่างเบราว์เซอร์ของฉันองค์ประกอบกริดจะไม่แคบลงเรื่อย ๆ เมื่อถึงความกว้างของขอบเขตที่แน่นอน (ตอบสนอง) พวกมันจะมีขนาดเล็กลง แต่ทั้งสองตัวอย่าง 'คงที่' ธรรมดาและตัวอย่าง 'ของเหลว' ทำตัวเหมือนกันตรงนี้ - แล้วห่าอะไรคือความแตกต่าง?

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

ตัวอย่างความกว้างคงที่ที่เหมาะสมเป็นที่นี่ ตัวอย่างความกว้างที่เหมาะสมของเหลวที่นี่

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

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

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

ก่อนหน้านี้ใน bootstrap 2 คุณต้องใช้row-fluidภายในภาชนะบรรจุของเหลวและrowภายในภาชนะคงที่ ด้วยการแนะนำของบูต 3 row-fluidถูกลบออกไม่ไม่ได้ใช้มัน

แก้ไข : ตามความเห็นบางjsFiddlesสำหรับ:

• รูปแบบที่ไม่ตอบสนองของเหลว ,
• รูปแบบที่ตอบสนองต่อของเหลว ,
• คงรูปแบบที่ไม่ตอบสนอง ,
• รูปแบบที่ตอบสนองต่อการแก้ไข

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

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

เลย์เอาต์ของไหลมีพฤติกรรมแตกต่างกัน ลองนึกภาพคุณได้ตั้งค่าความกว้างของเค้าโครงหลักของคุณเป็นความกว้าง 100% ตอนนี้แต่ละคอลัมน์จะถูกคำนวณตามขนาดที่สัมพันธ์กันเท่านั้น (เช่น 25%) และสตรีมที่เบราว์เซอร์จะถูกปรับขนาด ดังนั้นตามวัตถุประสงค์ของการจัดวางคุณสามารถเลือกวิธีการจัดวางของคุณ

นี่คือบทความที่ดีเกี่ยวกับการดิ้นกับของเหลว

ที่มา - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

ข้อดี

• เลย์เอาต์ที่มีความกว้างคงที่นั้นใช้งานง่ายกว่ามากและง่ายต่อการปรับแต่งในแง่ของการออกแบบ
• ความกว้างเท่ากันสำหรับทุกเบราว์เซอร์ดังนั้นจึงมีความยุ่งยากน้อยกว่ากับรูปภาพแบบฟอร์มวิดีโอและเนื้อหาอื่น ๆ ที่มีความกว้างคงที่
• ไม่จำเป็นต้องมีความกว้างขั้นต่ำหรือความกว้างสูงสุดซึ่งเบราว์เซอร์ทุกตัวไม่รองรับ
• แม้ว่าเว็บไซต์จะได้รับการออกแบบให้เข้ากันได้กับความละเอียดหน้าจอที่เล็กที่สุดคือ 800 × 600 แต่เนื้อหาจะยังคงกว้างพอที่ความละเอียดที่ใหญ่กว่าเพื่อให้อ่านได้ง่าย

จุดด้อย

• เลย์เอาต์ที่มีความกว้างคงที่อาจสร้างพื้นที่สีขาวมากเกินไปสำหรับผู้ใช้ที่มีความละเอียดหน้าจอใหญ่ขึ้นดังนั้นจึงทำให้ "สัดส่วนของพระเจ้า" "Rule of Thirds" สมดุลโดยรวมและหลักการออกแบบอื่น ๆ
• ความละเอียดหน้าจอที่เล็กลงอาจต้องใช้แถบเลื่อนแนวนอนขึ้นอยู่กับความกว้างของเค้าโครงที่คงที่
• ต้องใช้พื้นผิวรูปแบบและความต่อเนื่องของภาพที่ไม่มีรอยต่อเพื่อรองรับสิ่งที่มีความละเอียดมากขึ้น
• เลย์เอาต์ที่มีความกว้างคงที่โดยทั่วไปจะมีคะแนนรวมที่ต่ำกว่าเมื่อใช้งาน

เค้าโครงของไหลใน Bootstrap 3

ซึ่งแตกต่างจาก Boostrap 2, Bootstrap 3 ไม่มี. mixin-container mixin เพื่อสร้างภาชนะบรรจุของเหลว .container เป็นเค้าโครงกริดตอบสนองความกว้างคงที่ ในหน้าจอขนาดใหญ่จะมีพื้นที่สีขาวมากเกินไปในเนื้อหาเว็บเพจทั้งสองด้าน

container-fluid ถูกเพิ่มกลับมาใน Bootstrap 3.1

เค้าโครงกริดของไหลใช้ความกว้างของหน้าจอทั้งหมดและทำงานได้ดีขึ้นในหน้าจอขนาดใหญ่ ปรากฎว่ามันง่ายในการสร้างเลย์เอาต์กริดโดยใช้ Bootstrap 3 mixins บรรทัดต่อไปนี้สร้างเค้าโครงกริดที่ตอบสนองได้ลื่นไหล:

.container คง;

. mixin-fixed mixin ตั้งเนื้อหาไปที่กึ่งกลางของหน้าจอและเพิ่มช่องว่างภายใน ไม่ได้ระบุความกว้างของหน้ากระดาษคงที่

อีกวิธีคือใช้สไตล์ CSS ของ Eric Flowers

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

คุณสามารถใช้สิ่งนี้ - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid ดูสิ .. ฉันพบว่าอันนี้มีประโยชน์มากจริงๆ ประสิทธิภาพที่ดีน้ำหนักเบาเบราว์เซอร์ที่สำคัญเป็นมิตรและลื่นไหลในตัวเองดังนั้นคุณไม่จำเป็นต้องใช้ bootstrap สำหรับกริด