วิธีคืน css จาก scss คำแนะนำเกี่ยวกับ SASS สำหรับผู้เริ่มต้นอย่างแท้จริง และตอนนี้คุณก็สามารถทำได้แล้ว
ก่อนดาวน์โหลด ตรวจสอบให้แน่ใจว่าคุณมีโปรแกรมแก้ไขโค้ด (เราขอแนะนำ Sublime Text 3) และมีความรู้เกี่ยวกับ HTML และ CSS บ้าง ที่นี่เราจะไม่แตะต้อง ไฟล์ต้นฉบับแต่คุณสามารถดาวน์โหลดและศึกษาด้วยตนเองได้ตลอดเวลา เราจะมุ่งความสนใจไปที่การเริ่มต้นใช้งานไฟล์ Bootstrap ที่คอมไพล์แล้ว
กำลังโหลดไฟล์ที่คอมไพล์ที่สุด วิธีที่รวดเร็วเริ่มต้น: รับ CSS, JS และรูปภาพของเราในเวอร์ชันที่คอมไพล์และย่อขนาด ไม่มีเอกสารหรือไฟล์ต้นฉบับ
2. โครงสร้างไฟล์ในไฟล์ที่ดาวน์โหลดมาคุณจะพบ โครงสร้างต่อไปนี้และเนื้อหาจัดกลุ่มตามตรรกะ คุณสมบัติทั่วไปและมีทั้งสองเวอร์ชัน: ย่อส่วนและคอมไพล์
หลังจากดาวน์โหลด ให้แตกไฟล์ โฟลเดอร์บีบอัดเพื่อดูโครงสร้างของ Bootstrap (คอมไพล์แล้ว) มันควรจะเป็นดังนี้:
บูตสแตรป / +-- css / ¦ +-- บูตสแตรป css ¦ +-- บูตสแตรป นาที css +--js / ¦ +-- บูตสแตรป js ¦ +-- บูตสแตรป นาที js +-- img / ¦ +-- glyphicons - ลูกครึ่ง png ¦ +-- ไอคอนสัญลักษณ์ - ลูกครึ่ง - สีขาว png L-- README. แพทยศาสตร์นี่คือรูปแบบพื้นฐานของ Bootstrap: ไฟล์ที่คอมไพล์เพื่อความรวดเร็วและ ง่ายต่อการใช้ในเกือบทุกโครงการเว็บ เราจัดเตรียม CSS และ JS ที่คอมไพล์แล้ว (bootstrap.*) ให้กับคุณ รวมถึง CSS และ JS ที่คอมไพล์และย่อขนาด (bootstrap.min.*) ให้กับคุณ ไฟล์ภาพถูกบีบอัดโดยใช้ ImageOptim แอพ Macเพื่อบีบอัดภาพเป็น PNG
โปรดทราบว่าปลั๊กอิน JavaScript ทั้งหมดต้องใช้ jQuery
3. สิ่งที่รวมอยู่ด้วยBootstrap มาพร้อมกับ HTML, CSS และ JS สำหรับงานทุกประเภท โดยทั้งหมดอยู่ในหมวดหมู่ที่คุณสามารถดูได้ที่ด้านบนของหน้า
ส่วนเอกสาร องค์ประกอบที่รองรับสไตล์เนื้อหาทั่วไปเพื่อรีเซ็ตประเภทและพื้นหลัง สไตล์ลิงก์ ตารางเทมเพลต และสอง องค์ประกอบที่เรียบง่ายเครื่องหมาย
สไตล์ CSSสไตล์สำหรับ องค์ประกอบทั่วไป HTML: การออกแบบ โค้ด ตาราง แบบฟอร์ม และปุ่ม รวมถึง Glyphicons ซึ่งเป็นชุดไอคอนที่ยอดเยี่ยม
ส่วนประกอบสไตล์พื้นฐานสำหรับส่วนประกอบอินเทอร์เฟซอย่างง่าย: แท็บและปุ่ม แถบนำทาง ข้อความ ส่วนหัวของหน้า ฯลฯ
ปลั๊กอินจาวาสคริปต์เช่นเดียวกับส่วนประกอบ ปลั๊กอิน Javascript เหล่านี้เป็นส่วนประกอบเชิงโต้ตอบสำหรับคำแนะนำเครื่องมือ บล็อกข้อมูล ส่วนประกอบโมดอล และอื่นๆ
รายการส่วนประกอบเมื่อรวมส่วนประกอบและปลั๊กอินของ Javascript แล้ว องค์ประกอบต่อไปนี้อินเตอร์เฟซ:
- กลุ่มปุ่ม
- รายการปุ่มแบบเลื่อนลง
- แท็บการนำทาง ปุ่ม และรายการ
- แถบนำทาง
- ทางลัด
- ป้าย
- ส่วนหัวของหน้าและองค์ประกอบฮีโร่
- ของจิ๋ว
- ข้อความ
- ตัวบ่งชี้กระบวนการ
- องค์ประกอบกิริยา
- รายการแบบเลื่อนลง
- เคล็ดลับเครื่องมือ
- บล็อกข้อมูล
- องค์ประกอบ "หีบเพลง"
- องค์ประกอบแบบหมุน
- การป้อนข้อมูลด้วยแป้นพิมพ์ล่วงหน้า
หลังจากแนะนำสั้นๆ เราจะเน้นไปที่ โดยใช้บูทสแตรป- ในการดำเนินการนี้ เราจะใช้เทมเพลต HTML พื้นฐานที่มีองค์ประกอบทั้งหมดที่แสดงอยู่ใน
นี่คือสิ่งที่ดูเหมือน ไฟล์ทั่วไป HTML:
ที่จะทำให้เป็นแบบนี้ เทมเพลตบูตสแตรปเพียงแนบสิ่งที่เหมาะสม ไฟล์ซีเอสเอสและจส:
และทุกอย่างก็เรียบร้อย! ด้วยการเพิ่มสองไฟล์นี้ คุณสามารถพัฒนาเว็บไซต์หรือแอพพลิเคชั่นโดยใช้ Bootstrap ได้
ช่วงครึ่งหลังของบทความมีการรับรู้ง่ายขึ้นแล้ว ตัวอย่างเพิ่มเติมพร้อมภาพหน้าจอ
Bootstrap - มันคืออะไร?เรามาเริ่มด้วยคำถามสำคัญกันก่อน Bootstrap เป็นเฟรมเวิร์ก CSS และ JS โดยพื้นฐานแล้วคือชุดของไฟล์ที่มีโค้ดเขียนสำเร็จรูป เป้าหมายของนักพัฒนาเกือบทุกเฟรมเวิร์กคือการทำให้การพัฒนาเว็บไซต์ง่ายขึ้นสำหรับตนเองและผู้อื่นที่จะสามารถเข้าถึงเครื่องมือนี้ได้ ในกรณีของ Bootstrap นั้นไม่มีค่าใช้จ่ายใด ๆ ทั้งสิ้น ดังนั้นคุณจึงสามารถแก้ไขได้ไม่ว่าจะด้วยวิธีใดก็ตาม แหล่งที่มาและสร้าง framework ใหม่ให้เหมาะกับตัวเองตามที่คุณต้องการ มันสมบูรณ์แบบ
การติดตั้งบูทสแตรปหากคุณเพียงต้องการเชื่อมต่อไฟล์เฟรมเวิร์กกับเอกสาร HTML (เช่น เพื่อการฝึกฝน) เพียงดาวน์โหลดเฟรมเวิร์กจากเว็บไซต์อย่างเป็นทางการ getbootstrap.com คัดลอกไฟล์ลงในโปรเจ็กต์และเชื่อมต่อไฟล์ที่คุณต้องการ ฉันจะทำมัน รีวิวสั้น ๆไฟล์เหล่านี้:
นี้ ชุดมาตรฐานกรอบ. ในความเป็นจริงคุณสามารถปรับแต่งและเปลี่ยนแปลงให้เหมาะกับคุณได้ ตัวอย่างเช่น อย่าใช้สคริปต์เลยหรือเชื่อมต่อเพียงตารางเดียว โดยทั่วไปเราจะพูดถึงเรื่องนี้ด้วย
เอกสาร Bootstrap ของรัสเซียเมื่อคุณเยี่ยมชม getbootstrap คุณอาจสังเกตเห็นว่าทุกอย่างที่นี่เป็นภาษาอังกฤษ เราสามารถใช้ความช่วยเหลือจากรัสเซียในกรอบงานได้ มันหาง่าย หากต้องการทำสิ่งนี้ให้ไปจาก หน้าแรกไปที่ส่วนการเริ่มต้นใช้งาน เลื่อนลงไปด้านล่างสุดจะมีลิงค์คำแปล มองหาภาษารัสเซียที่นั่นแล้วคลิกที่มัน เพียงเท่านี้คุณก็อยู่ เวอร์ชันรัสเซียเว็บไซต์. จริงอยู่ ไม่ใช่ทุกอย่างที่ได้รับการแปลที่นี่ แต่มีบางที่ประมาณ 70-80% ที่ถูกต้อง ดังนั้นคุณจะเข้าใจทุกอย่าง
ตาราง Bootstrapไม่ว่าใครจะพูดอะไรก็ตาม องค์ประกอบหลักของ Bootstrap ก็คือ ตาข่ายแบบปรับได้- โดยทั่วไปหากไม่มีเฟรมเวิร์กก็จะสูญเสียคุณค่าเกือบทั้งหมด เนื่องจากกริดที่คุณสามารถสร้างเทมเพลตที่ปรับเปลี่ยนได้อย่างรวดเร็ว ในเวลาเดียวกัน คุณอาจไม่คุ้นเคยกับการสืบค้นสื่อเลย เนื่องจากเฟรมเวิร์กจะดูแลการปรับใช้ คุณเพียงแค่ต้องกำหนดคลาสที่ถูกต้องให้กับบล็อก
คลาสเหล่านี้คืออะไร? มาดูเอกสารกันดีกว่ามันจะช่วยเราได้มาก ไปที่ส่วน CSS - ระบบกริด กฎทั่วไปการทำงานกับตารางเป็นเรื่องง่าย ฉันจะลงรายการไว้เลย
จะทำงานกับกริดได้อย่างไร?คิดว่ามันเป็นตาราง html หากคุณเคยเขียนโค้ด HTML สำหรับตาราง คุณจะรู้ว่าเนื้อหาทั้งหมดถูกวางไว้ในแท็กตาราง มีแถวหนึ่งอยู่ในแท็ก tr จากนั้นเซลล์จะถูกวางไว้ - td
ดังนั้นทุกอย่างจึงคล้ายกันในตาราง คลาสคอนเทนเนอร์ทำหน้าที่เป็นคอนเทนเนอร์ทั่วไปสำหรับกริด มี 2 ตัวเลือกสำหรับตารางบูตสแตรป - ยางทั้งหมดและยังคงมีจำกัด ความกว้างสูงสุด- ดังนั้นเมื่อได้รับมอบหมายหน้าที่แล้ว บล็อกทั่วไปคอนเทนเนอร์คลาสไซต์จะมีความกว้างสูงสุด 1170 พิกเซล มันจะไม่ขยายตัวอีกต่อไป โดยปกติแล้วเนื้อหาจะเป็นศูนย์กลาง
หากคุณตั้งค่าคลาสของเหลวในคอนเทนเนอร์ ตาข่ายจะเป็นยางทั้งหมด กล่าวคือ จะไม่มีข้อจำกัดด้านขนาด ตัวอย่างเช่น หากมีคนเปิดเว็บไซต์บนจอภาพกว้าง 1920 พิกเซล เขาจะเห็นเว็บไซต์เต็มความกว้าง
ดังนั้นสิ่งแรกในการพัฒนาเว็บไซต์คือการตัดสินใจว่าเทมเพลตจะเป็นอย่างไร - ยางทั้งหมดหรือความกว้างยังคงต้องจำกัด
เยี่ยมเลย บล็อกคอนเทนเนอร์ควรมีแถวตาราง คุณต้องวางบล็อกทั้งหมดที่อยู่ในบรรทัดเดียว นั่นคือถ้าเราใช้เทมเพลตทั่วไปที่สุด: ส่วนหัว, ส่วนหลัก, คอลัมน์ด้านขวาและส่วนท้ายก็จะมี 3 คอลัมน์ อันแรกจะมีเฉพาะส่วนหัว ส่วนอันที่สองจะมีเนื้อหาและแถบด้านข้าง และอันสุดท้ายจะมีส่วนท้าย มาร์กอัปสำหรับไซต์ดังกล่าวจะมีลักษณะดังนี้:
หมวกแก๊ป
เนื้อหา... และแถบด้านข้าง
ส่วนท้าย
แต่สำหรับตอนนี้นี้ มาร์กอัปไม่ถูกต้องเพราะไม่พอ...อะไรนะ? ถูกต้องเซลล์! ในกรณีของ Bootstrap จะเรียกว่าคอลัมน์ ตารางบูตสแตรปประกอบด้วย 12 คอลัมน์ สามารถฝังลงในบล็อกที่มีความกว้างใดก็ได้ อย่างน้อย 1200 พิกเซล อย่างน้อย 100 พิกเซล ทั้งหมดนี้เป็นเพราะความกว้างของคอลัมน์ไม่ได้ระบุเป็นพิกเซล แต่เป็นเปอร์เซ็นต์
ระบบ 12 คอลัมน์นี้ทำงานอย่างไรดังนั้นเรามากันให้ถึงที่สุด ปัญหาสำคัญที่เกี่ยวข้องกับกรอบงาน เชื่อฉันเถอะถ้าคุณเข้าใจสิ่งนี้ทุกอย่างก็ไร้สาระ สิ่งสำคัญคือการทำความเข้าใจวิธีการทำงานของกริดและวิธีดำเนินการอย่างรวดเร็ว รูปแบบที่ปรับเปลี่ยนได้จะเปิดให้บริการสำหรับคุณ
หากต้องการทำสิ่งนี้ ให้เลื่อนดูเอกสารประกอบด้านล่าง คุณจะพบตารางที่มี คุณสมบัติที่สำคัญกริด
อย่างไรก็ตาม คอลัมน์ต่างๆ จะถูกทำเครื่องหมายใน Bootstrap ด้วย colclass แต่นี่เป็นคลาสแบบผสม ดังนั้นคอลัมน์จึงไม่เพียงแค่เขียน col- Bootstrap มี 4 อัน ชั้นเรียนพิเศษซึ่งออกแบบมาเพื่อควบคุมขนาดของบล็อกที่มีความกว้างต่างกันมีดังนี้:
เหล่านี้เป็น 4 คลาส แต่เพื่อควบคุมขนาดขององค์ประกอบจะใช้ตัวเลขตั้งแต่ 1 ถึง 12 เพราะอย่างที่คุณจำได้มี 12 คอลัมน์ในตารางพอดี
หมวกแก๊ป
เนื้อหา
คอลัมน์ด้านข้าง
ส่วนท้าย
มันค่อนข้างง่ายที่จะเข้าใจ ก่อนอื่น เราสร้างส่วนหัว ไม่จำเป็นต้องวางไว้ในตารางเลย เนื่องจากไม่ว่าในกรณีใดก็ตาม ส่วนหัวนั้นจะครอบครองความกว้าง 100% (ปกติ) แต่ยังไงเราก็จะใส่มันเข้าไป col-md-12 คลาสนี้คืออะไร? อย่างที่ฉันบอกคุณไปแล้ว ไม่มีใครเขียนเพียงแค่ col- ในคลาสนี้เราจะบอกเบราว์เซอร์เป็นหลัก:
นี่คือเซลล์ | คอลัมน์
บนอุปกรณ์ขนาดกลาง (คลาส md) ความกว้างควรเป็น 12 คอลัมน์จาก 12 คอลัมน์ นั่นคือ 100% ของความกว้างแถว
แต่ความกว้างของอุปกรณ์อื่นล่ะ? บนหน้าจอขนาดใหญ่ (lg) มันจะเป็น 100% เช่นกันเนื่องจากค่าสำหรับหน้าจอขนาดใหญ่ได้รับการสืบทอดมา แต่สำหรับหน้าจอที่เล็กกว่านั้นจะไม่เป็นเช่นนั้น ง่ายมาก: ถ้าคุณเขียน col-xs-4 ความกว้างของคอลัมน์จะเป็น 33% ในทุกอุปกรณ์และหาก col-lg-4 จะแสดงเฉพาะในอุปกรณ์ขนาดใหญ่เท่านั้น นี่คือคุณลักษณะ จำไว้
ถ้าค่าความกว้างไม่ได้ถูกบันทึกบนหน้าจอขนาดเล็ก แล้วจะเกิดอะไรขึ้น? มันรีเซ็ต ต่อไปนี้เป็นวิธีการ:
col-sm-4 - บนหน้าจอขนาดเล็ก บล็อกจะมีความกว้าง 33% โดยจะเหมือนกันบนหน้าจอ md และ lg แต่ใน xs นั่นคือบล็อกที่เล็กที่สุด ความกว้างจะถูกรีเซ็ตเป็น 100% ดังนั้นจำกฎง่ายๆ อีกข้อหนึ่ง: หากไม่มีการระบุสิ่งใดสำหรับหน้าจอขนาดเล็ก บล็อกนั้นจะแสดงที่ความกว้าง 100%
เนื้อหา
คอลัมน์ด้านข้าง
โดยพื้นฐานแล้ว เรากำลังบอกเบราว์เซอร์:
ปล่อยให้บล็อกเนื้อหามีความกว้าง 8 จาก 12 คอลัมน์ และสถานการณ์นี้จะเป็นขนาดเล็ก กลาง และ หน้าจอขนาดใหญ่(ระบุสำหรับหน้าจอขนาดเล็กก็เพียงพอแล้ว สำหรับหน้าจอขนาดใหญ่ ดังที่คุณจำได้ ค่าจะถูกสืบทอดมา) แต่บนหน้าจอที่เล็กที่สุด บล็อกจะถูกครอบครอง 100% โดยปกติแล้วสิ่งนี้ถูกต้อง อุปกรณ์เคลื่อนที่ไซต์อยู่ใน 1 คอลัมน์พอดี
ปล่อยให้คอลัมน์ด้านข้างเป็นหนึ่งในสามของความกว้างของแถวบนหน้าจอขนาดเล็กกลางและใหญ่เดียวกัน ตามที่คุณเข้าใจแล้วความกว้างของมันก็จะถูกรีเซ็ตเป็น 100% มันง่ายมาก
ไม่มีอะไรจะจัดการกับส่วนท้าย ดี, หลักการพื้นฐานเราได้แยกแยะการทำงานของกริดแล้ว แต่ยังต้องดูว่ามันทำงานอย่างไร...
Bootstrap ซ้อนตารางความจริงก็คือตอนนี้เราได้แบ่งเทมเพลตออกเป็นบล็อกหลักเท่านั้น แต่ภายในนั้นสามารถแบ่งออกเป็นคอลัมน์ได้เช่นกัน ตัวอย่างเช่น เนื้อหาอาจแสดงผลิตภัณฑ์ในหลายคอลัมน์ ฉันควรทำอย่างไรดี? มันง่ายมาก - เราสร้างตารางเดียวกันภายในทุกประการ มันจะซ้อนกัน แต่ก็มี 12 คอลัมน์ด้วย หากเราสรุปทั้งหมดนี้ เราก็จะได้ข้อสรุปดังนี้:
สามารถมีกริดได้ไม่จำกัดจำนวนภายในบล็อกใดๆ ตัวอย่างเช่น ในบล็อกที่มีผลิตภัณฑ์ จะมีตารางสำหรับแยกผลิตภัณฑ์ออกจากบล็อกนั้น คุณสามารถสร้างตารางอื่นได้ เช่น เพื่อแยกราคา ข้อมูลความพร้อมจำหน่าย และข้อมูลเพิ่มเติม ข้อมูล.
ตอนนี้เราจะพยายามสร้างตารางอื่นภายในบล็อกเนื้อหาเพื่อจัดเรียงผลิตภัณฑ์เป็น 3 คอลัมน์ ลองใช้บล็อกที่เรามีเนื้อหา:
เนื้อหา
และเราเขียนลงไปว่า:
แคตตาล็อก:
ชื่อผลิตภัณฑ์
รายละเอียดสินค้า
อย่างที่คุณเห็นเราได้สร้างตารางใหม่ภายในเนื้อหา - เราวางแถวไว้ข้างในและในแถวจะมี 3 บล็อกที่มีผลิตภัณฑ์อยู่แล้ว เพียงคัดลอกบล็อก col-sm-4 ด้วยการ์ดผลิตภัณฑ์แล้ววางอีก 2 ครั้งนี่คือสิ่งที่คุณได้รับ (คุณสามารถถ่ายรูปผลิตภัณฑ์ใดก็ได้ ฉันถ่ายรูปขนาดใหญ่):
พลาดไปอีกหนึ่ง จุดสำคัญเพื่อให้รูปภาพปรับเข้ากับบล็อกที่บล็อกนั้นอยู่ แต่ละรูปภาพจะต้องได้รับคลาส img-responsive หากคุณเช่นฉัน คิดว่าการทำเช่นนี้ไม่สะดวก ให้เขียนใน style.css ของคุณเองดังนี้:
Img( ความกว้างสูงสุด: 100%; ความสูง: อัตโนมัติ; จอแสดงผล: บล็อก; )
เพียงเท่านี้ ให้บันทึกโค้ดนี้และเชื่อมต่อไฟล์ css ของคุณกับโปรเจ็กต์ ตอนนี้รูปภาพต่างๆ จะถูกปรับตามค่าเริ่มต้น
มันค่อนข้างราบรื่นไหม? ใช่ แต่ถ้าไม่มี bootstrap คุณจะต้องทนทุกข์ทรมานอีกต่อไป สิ่งเดียวก็คือเมื่อสร้างตารางภายในบล็อกใดๆ คุณไม่จำเป็นต้องสร้างบล็อกที่มีคลาสคอนเทนเนอร์อยู่ในนั้นอีกต่อไป เหตุใดจึงไม่จำเป็น? ใช่ เนื่องจากบล็อกที่ใช้สร้างกริดทำหน้าที่เป็นคอนเทนเนอร์
ดังนั้นคุณสามารถสร้างคอลัมน์ได้มากเท่าที่คุณต้องการในบล็อกใดก็ได้ และสร้างเทมเพลตที่ซับซ้อนได้ และทั้งหมดนี้เร็วกว่าไม่มี Bootstrap มาก เพราะคุณต้องเขียน CSS ทั้งหมดตั้งแต่เริ่มต้น
สาธารณูปโภคที่ตอบสนองนี่เป็นอีกหนึ่งคุณสมบัติที่ยอดเยี่ยมของ bootstrap ประกอบด้วยความจริงที่ว่าคุณสามารถซ่อนหรือทำให้มองเห็นบล็อกใด ๆ ตามความกว้างที่คุณต้องการได้ ตัวอย่างเช่น ซ่อนคอลัมน์ด้านข้างอย่างสมบูรณ์บนหน้าจอแคบ เพิ่มองค์ประกอบใหม่บนอุปกรณ์เคลื่อนที่ เพิ่มคอลัมน์ใน หน้าจอกว้างฯลฯ
มีตัวเลือกแอปพลิเคชันมากมาย แต่ฉันไม่ได้บอกคุณเกี่ยวกับสิ่งที่สำคัญที่สุด: จะใช้ยูทิลิตี้เหล่านี้ได้อย่างไร เมื่อต้องการทำเช่นนี้ เพียงเพิ่มคลาส บล็อกที่ต้องการ- หากคุณต้องการซ่อนมัน เพียงระบุคลาสต่อไปนี้:
ส่วนท้าย
อะไรเข้า. ในกรณีนี้จะทำให้คลาสที่ซ่อนเร้น-xs ? มันจะซ่อนส่วนท้ายบนอุปกรณ์ขนาดเล็กพิเศษ ในส่วนอื่นๆ ทั้งหมด บล็อกจะมองเห็นได้
ในทางกลับกัน หากคุณต้องการแสดงเฉพาะบนหน้าจอที่เล็กที่สุด คุณจะต้องใช้คลาสที่มองเห็นได้-xs-block ในกรณีนี้ บล็อกจะถูกซ่อนไว้ในทุกหน้าจอ ยกเว้นหน้าจอที่แคบที่สุด ดังนั้นคลาสยูทิลิตี้แบบปรับได้จึงเขียนดังนี้:
มีตัวอย่างสองสามตัวอย่างเพื่อให้ชัดเจน:
นี่คือวิธีการทำงานทั้งหมด แค่นั้นเอง ไม่มีทางอื่นแล้ว ฉันหวังว่าคุณจะเข้าใจสิ่งนี้ ลองนำไปปฏิบัติดูครับ เรามีเทมเพลตการทดสอบ แม้ว่าจะเป็นแบบพื้นฐานก็ตาม
ภารกิจ: ทำให้คอลัมน์ด้านข้างหายไปบนหน้าจอขนาดเล็ก และผลิตภัณฑ์หนึ่งรายการบนหน้าจอที่เล็กที่สุด ดังนั้นบนอุปกรณ์ xs ผลิตภัณฑ์จึงมี 2 คอลัมน์อยู่แล้ว ไม่ใช่ 3
ลองทำเองแก้ไขเฉพาะโค้ด html เท่านั้น สิ่งที่ต้องทำ? ก่อนอื่น มาดูที่คอลัมน์ เพื่อซ่อนมันบนหน้าจอ sm คุณเพียงแค่ต้องเพิ่มคลาส Hidden-sm ลงไป
เยี่ยมเลย ตอนนี้ผลิตภัณฑ์ตัวที่สามจะต้องได้รับคลาส Hidden-xs และมันจะหายไปบนหน้าจอที่เล็กที่สุด คลาสของสินค้าทั้งสองที่เหลือจะเป็นดังนี้:
นั่นคือบนอุปกรณ์ขนาดกลางบล็อกจะมี 4 คอลัมน์จาก 12 คอลัมน์ซึ่งสามารถแปลเป็นความกว้าง 33.33% และบนอุปกรณ์ขนาดเล็กพิเศษ - 50% และเนื่องจากหนึ่งบล็อกที่มีผลิตภัณฑ์จะหายไปที่ความกว้างนี้ ทั้งสองบล็อกที่มีผลิตภัณฑ์จะถูกจัดเรียงอย่างเรียบร้อยใน 1 แถว เช่นนี้ 
ยอดเยี่ยม! เมื่อเข้าใจสิ่งนี้แล้ว คุณสามารถจัดการบล็อกบนหน้าเว็บได้ในเกือบทุกวิธีที่คุณต้องการ พยายามคิดงานให้ตัวเองและนำไปปฏิบัติ
ต่อไปผมจะแสดงอีก 1 อย่างมาก ยินดีต้อนรับที่ดี— ความสามารถในการย้ายบล็อกไปทางขวาหรือซ้าย สมมติว่าเราไม่มีผลิตภัณฑ์ 3 รายการติดต่อกัน แต่มี 1 รายการ และไม่ได้ใช้พื้นที่ทั้งหมด และงานของคุณคือจัดตำแหน่งให้อยู่ตรงกลาง นี่เป็นเรื่องง่ายที่จะทำหากคุณจำไว้ว่าคุณกำลังทำงานกับระบบ 12 คอลัมน์
ทิ้งหนึ่งบล็อกไว้กับผลิตภัณฑ์:
ก็เพียงพอแล้วที่จะคำนวณอย่างง่าย ๆ เพื่อทำความเข้าใจว่าคุณต้องย้ายบล็อกมากน้อยเพียงใดเพื่อที่จะจัดกึ่งกลาง จะต้องย้าย 4 คอลัมน์ไปทางซ้ายบนหน้าจอขนาดกลางและขนาดใหญ่และ 3 คอลัมน์สำหรับหน้าจอขนาดเล็ก นี่คือสิ่งที่ดูเหมือน:
คลาส col-md-offset-4 บอกว่า: บนหน้าจอขนาดกลางและขนาดใหญ่ ให้ชดเชยบล็อกทางซ้าย 33% ของความกว้างของคอนเทนเนอร์หลัก (ออฟเซ็ตซ้าย 1/3, ความกว้างของบล็อก 1/3, ⅓ออฟเซ็ตขวา, ส่งผลให้อยู่ตรงกลาง)
Class col-xs-offset-6: บนหน้าจอขนาดเล็กและเล็กเป็นพิเศษ ให้เลื่อนไปทางซ้าย 25% (เหลือ ¼ ด้านซ้าย, ความกว้างของบล็อก ½, ¼ ขยายไปทางขวา)
ฉันหวังว่าคุณจะเข้าใจส่วนสำคัญและใช้คลาสเหล่านี้หากจำเป็น
ส่วนประกอบ Bootstrap และตัวอย่างการใช้งานฉันขอแสดงความยินดีกับคุณ เราได้กล่าวถึงหัวข้อที่สำคัญที่สุดที่เกี่ยวข้องกับกรอบการทำงานแล้ว ตารางและการทำงานร่วมกับมันเป็นสิ่งสำคัญ การทำงานกับส่วนประกอบอยู่แล้วหมายความว่าคุณเพียงแค่ไปที่เอกสารประกอบและคัดลอกโค้ดที่นั่น ส่วนประกอบที่จำเป็นและหากจำเป็นให้เปลี่ยนให้เหมาะกับคุณ แต่ฉันจะยังคงยกตัวอย่างวิธีใช้ส่วนประกอบต่างๆ ด้านล่างนี้
ลอยตัวอย่างรวดเร็วและยกเลิกการห่อคลาส pull-left และ pull-right ช่วยให้คุณสร้างบล็อกลอยได้อย่างรวดเร็วโดยส่งไปทางซ้ายหรือขวา อย่าลืมยกเลิกกระแสนะครับ คุณสามารถใช้คลาส clearfix สำหรับสิ่งนี้
Bootstrap: เมนูตอบสนองแนวนอน (มือถือ)เราจะเพิ่มส่วนประกอบต่อไปนี้ลงในเทมเพลตโดยตรง ดังนั้นหากคุณต้องการทำงานกับโค้ด ไม่ใช่แค่อ่าน ให้ทำตามขั้นตอนทั้งหมดหลังจากฉัน
จริงๆ แล้ว ด้วย Bootstrap มันง่ายมากที่จะทำไม่เพียงแต่ เมนูตอบสนองและสิ่งที่เรียกว่ามือถือซึ่งย่อเล็กสุดบนหน้าจอขนาดเล็กและซ่อนอยู่ใต้ปุ่มเดียว เทคนิคนี้สามารถเห็นได้หลายอย่าง เทมเพลตที่ปรับเปลี่ยนได้และจริงๆ แล้วมันง่ายมากที่จะนำไปใช้ รหัสตัวอย่าง เมนูมือถืออยู่ในเอกสาร ฉันจะเอามาจากที่นั่นและทำซ้ำเล็กน้อย
ดังนั้น สิ่งแรกที่ฉันจะทำคือลบบล็อกที่มีส่วนหัวออก เพราะจริงๆ แล้วเมนูของเราจะเป็นส่วนหัวในกรณีของเทมเพลตของฉัน ต้องวางโค้ดเมนูไว้หน้าเนื้อหาทั้งหมดในเว็บไซต์ แม้กระทั่งหน้าบล็อกคอนเทนเนอร์ด้วยซ้ำ ทำไม ใช่ ตอนนี้คุณจะเห็นเองแล้วว่าตารางได้ถูกสร้างไว้ในแถบนำทางแล้ว นี่คือรหัส:
ปุ่มสวิตช์
โลโก้/ชื่อ
ค้นหา
อย่าตกใจกับความจริงที่ว่ามีโค้ดจำนวนมาก นี่คือลักษณะของไซต์ตอนนี้: 
แต่หากเมนูของคุณไม่ครอบคลุมความกว้างทั้งหมดของหน้าจอ ก็ควรที่จะจัดเมนูไว้ตรงกลาง ในการดำเนินการนี้ คุณควรสร้าง Wrapper Block เพิ่มเติมสำหรับเมนู ซึ่งควรวางไว้หลังบล็อกด้วยคลาส Container-fluid อย่าลืมปิดบล็อคนี้นะครับ ฉันให้คลาส navbar-wrap แก่มัน นี่คือสไตล์ของมัน:
นั่นคือคุณสามารถจำกัดความกว้างและจัดกึ่งกลางได้ หรือเริ่มแรกแทนที่คอนเทนเนอร์-ของเหลวด้วยคอนเทนเนอร์ 
อย่างที่คุณเห็น เราได้เพิ่มโลโก้ รายการง่ายๆ สองรายการ รายการแบบเลื่อนลง และแบบฟอร์มการค้นหาลงในเมนู นั่นคือมีองค์ประกอบหลายอย่าง คุณสามารถปรับแต่งเมนูด้วยตัวคุณเองได้อย่างง่ายดายโดยเพิ่มคลาสของคุณเองลงไป แต่สำหรับตอนนี้เป้าหมายของฉันคือเพียงแสดงให้คุณเห็นส่วนประกอบนี้
นี่คือลักษณะของเมนูบนอุปกรณ์ที่มีความกว้างหน้าจอน้อยกว่า 768 พิกเซล: 
อย่างที่คุณเห็นเมนูยุบลง จะเปิดขึ้นเมื่อคุณคลิกที่ปุ่มทางด้านขวา มุมบน- มีเพียงโลโก้เท่านั้นที่ยังคงอยู่บนหน้าจอ
ในเวลาเดียวกัน จากตัวอย่างด้านบน คุณจะเข้าใจได้ว่ารายการเมนูแบบเลื่อนลงถูกสร้างขึ้นใน Bootstrap อย่างไร เรามาแยกโค้ดนี้เพื่อดูรายละเอียดเพิ่มเติม:
อุปกรณ์ออกกำลังกาย
ดังนั้นคอนเทนเนอร์สำหรับรายการแบบเลื่อนลงจึงเป็นรายการปกติที่มีคลาสแบบเลื่อนลง ข้างในเป็นลิงค์หลักซึ่งจะเปิดเมนูแบบเลื่อนลง มันสำคัญมากที่จะต้องกำหนดแอตทริบิวต์ข้อมูลซึ่งคุณเห็นในโค้ด หากไม่มีสิ่งนี้ก็จะไม่มีอะไรทำงาน คุณควรตรวจสอบให้แน่ใจด้วยว่าไฟล์ bootstrap.js เชื่อมต่อกับหน้าเว็บแล้ว
สแปนที่มีคลาสคาเร็ตนั้นไม่มีอะไรมากไปกว่าลูกศร ซึ่งคุณสามารถเข้าใจได้ว่ารายการนั้นเป็นรายการดรอปดาวน์ และด้านล่างเมนูนั้นถูกสร้างขึ้นโดยใช้มาตรฐาน รายการหัวข้อย่อย- เพียงเท่านี้ ทุกอย่างก็ค่อนข้างง่าย คุณสามารถใช้โค้ดนี้เพื่อใช้งานรายการแบบเลื่อนลงได้
การเพิ่ม Breadcrumbs (Breadcrumbs) โดยใช้ Bootstrapในร้านค้าหลายแห่งคุณจะพบกับสิ่งที่เรียกว่าบล็อก เศษขนมปัง, ซึ่งประกอบด้วย เส้นทางเต็มไปยังหน้าปัจจุบัน นอกจากนี้ยังทำได้ง่ายโดยใช้เฟรมเวิร์ก ดูโค้ด:
ในความเป็นจริงการระบุคลาส breadcrumb สำหรับรายการลำดับเลขก็เพียงพอแล้วและป้อนรายการปกติลงไป อย่างไรก็ตาม ฉันจะจัดส่วนหัวระดับที่สองไว้ตรงกลางในเทมเพลต (ซึ่งต้องเขียนด้วย CSS):
H2( การจัดข้อความ: กึ่งกลาง; )
หากคุณต้องการเปลี่ยนแปลงบางสิ่งบางอย่าง รูปร่าง breadcrumbs เพียงใช้ตัวเลือก .breadcrumb ใน CSS ตัวอย่างเช่น วิธีนี้คุณสามารถลบออกได้ สีพื้นหลัง:
เกล็ดขนมปัง (พื้นหลัง: โปร่งใส; )
นี่คือลักษณะของไซต์ตอนนี้: 
ตามค่าเริ่มต้น ตารางจะขยายออกไปทั่วทั้งหน้าต่าง ดังนั้นให้ห่อตารางไว้ในกล่องที่มีความกว้างจำกัดเพื่อจำกัดขนาด ตามค่าเริ่มต้นมันดูแย่มาก แต่ถ้าคุณเพิ่มคลาสตารางลงในแท็กตาราง ทุกอย่างจะดีขึ้นมาก:
หากต้องการเน้นสีอื่นเมื่อคุณวางเมาส์เหนือแถวของตาราง ให้ใช้คลาส table-hover