จากผู้เขียน: ฉันขอแสดงความยินดีกับคุณ ในบทความก่อนหน้านี้ เราได้ดูการเชื่อมต่อและส่วนประกอบของเฟรมเวิร์ก Bootstrap รวมถึงกริดของมัน ถึงเวลาสรุปความรู้ของเราและสร้างเว็บไซต์ง่ายๆ ดังนั้น วันนี้คุณจะเห็นว่าเลย์เอาต์ของเว็บไซต์บน Bootstrap มีลักษณะอย่างไร แม้ว่าจะเป็นแผนผัง ไม่ใช่จากเลย์เอาต์ PSD แต่ก่อนอื่น เรามาทำซ้ำอีกครั้งว่าเลย์เอาต์บน bootstrap แตกต่างจากเลย์เอาต์มาตรฐานที่ใช้ CSS อย่างไร
เค้าโครงโดยใช้กรอบงาน: ข้อดี
Bootstrap ก็เหมือนกับเฟรมเวิร์กอื่นๆ ที่ทำให้กระบวนการออกแบบหน้าเว็บง่ายขึ้นอย่างมาก นี่คือเฟรมเวิร์ก css และ js นั่นคือมีทั้งสองอย่าง สไตล์สำเร็จรูปและสคริปต์เว็บ เหล่านี้ ส่วนประกอบสำเร็จรูปเร่งความเร็วเลย์เอาต์ 3-10 เท่า เพราะคุณเพียงแค่ต้องเขียนคลาสและแอตทริบิวต์ข้อมูลที่จำเป็นเพื่อเปิดใช้งานสไตล์และสคริปต์เหล่านี้
ข้อได้เปรียบที่สำคัญที่สุดคือไม่ต้องสงสัยเลยว่ามีอยู่ในกรอบงาน ตาข่ายแบบปรับได้- คุณไม่ต้องกังวลเกี่ยวกับขนาดที่จะวางบล็อก หรือวิธีทำให้บล็อกย่อหรือหายไปจากหน้าจอเมื่อความกว้างของหน้าต่างเปลี่ยนไป แน่นอนว่าสำหรับนักออกแบบเลย์เอาต์ที่มีประสบการณ์ ทั้งหมดนี้ดูเหมือนจะไม่เป็นปัญหา แต่คุณต้องยอมรับว่าแม้ว่าคุณจะรู้วิธีการแก้ปัญหา แต่ก็ไม่ได้หมายความว่าคุณจะสามารถทำได้อย่างรวดเร็ว
ตัวอย่างเช่น เมื่อใช้ข้อความค้นหาสื่อ คุณอาจต้องคำนึงถึงความแตกต่างเล็กๆ น้อยๆ เพื่อไม่ให้ไซต์ของคุณลอยได้ ด้วยความช่วยเหลือของ bootstrap เลย์เอาต์ในตอนแรกจะเรียบร้อยมากเพราะคุณจะไม่แตะ CSS เลยและถ้าคุณทำเช่นนั้นจะเป็นเพียงการเปลี่ยนรูปลักษณ์ขององค์ประกอบซึ่งจะไม่ทำให้ไซต์เสียหาย แต่อย่างใด .
ข้อได้เปรียบประการที่สองที่สำคัญมากคือเปิดกว้าง ซอร์สโค้ดบูทสแตรป คุณจะเข้าใจอย่างถ่องแท้ถึงความสำคัญของข้อได้เปรียบนี้หลังจากที่คุณสร้างเว็บไซต์แรกของคุณโดยใช้เฟรมเวิร์ก
ตามค่าเริ่มต้น คุณจะดาวน์โหลด เวอร์ชันเต็มกรอบงาน – ไฟล์ bootstrap.css, bootstrap.js รวมถึงแบบอักษรของไอคอน แต่ไม่มีใครหยุดคุณจากการเลือกส่วนประกอบของเฟรมเวิร์กที่จะรวมไว้ในบิลด์ของคุณเองและส่วนประกอบใดไม่รวม คุณยังสามารถปิดใช้งานส่วนประกอบทั้งหมดพร้อมกันและปล่อยไว้ได้ เช่น เหลือเพียงกริด แท็บ และภาพหมุน จากนั้นคุณจะลดขนาดไฟล์ลงอย่างมากและเชื่อมต่อกับโปรเจ็กต์เฉพาะสิ่งที่จะใช้กับโปรเจ็กต์เท่านั้น
นี่เป็นแนวทางแบบมืออาชีพ ใช้บูตสแตรป- ที่จริงแล้ว คุณอาจไม่ต้องการสไตล์ CSS ส่วนใหญ่ที่อธิบายไว้ ตัวอย่างเช่น สำหรับปุ่ม ตาราง รูปภาพ ฯลฯ คุณสามารถอธิบายสไตล์บางอย่างได้ด้วยตัวเอง โดยพื้นฐานแล้ว มูลค่าที่แท้จริงในกรอบงาน Bootstrap คือกริด รวมถึงส่วนประกอบจาวาสคริปต์บางตัว
วิธีสร้างเว็บไซต์แบบร่างง่ายๆ ด้วย Bootstrapที่จริงแล้ว คุณสามารถสร้างเทมเพลตได้ในเวลาเพียงไม่กี่นาทีเมื่อคุณได้รับแนวทางปฏิบัติที่ดีในการทำงานกับเฟรมเวิร์กแล้ว มาสร้างเค้าโครงสองคอลัมน์ธรรมดาทั่วไปที่จะมีส่วนหัว บล็อกเนื้อหา แถบด้านข้าง และส่วนท้าย
ก่อนอื่นคุณต้องตัดสินใจว่าจะมีคอนเทนเนอร์ของไซต์หรือไม่ ขนาดคงที่หรือจะเป็นยางล้วนๆ หากคุณกำหนดคลาสคอนเทนเนอร์ให้กับคอนเทนเนอร์ทั่วไป ความกว้างสูงสุดจะถูกจำกัดไว้ที่ 1170 พิกเซล หากคุณระบุ Container-fluid จะไม่มีอะไรจำกัดความกว้างของไซต์ ตัวอย่างเช่นบนจอภาพที่มีความกว้าง 1920 พิกเซลความกว้างจะเท่ากัน - 100% ของหน้าต่าง
ดังนั้นคุณต้องตัดสินใจจุดนี้ด้วยตัวเองในขั้นตอนการออกแบบไซต์เพื่อที่จะเข้าใจว่าอย่างน้อยจำเป็นต้องมีการเชื่อมโยงพิกเซลบางประเภทหรือไม่
เยี่ยมเลย เทมเพลตของเราจะมีสามแถว - ส่วนหัว เนื้อหา + แถบด้านข้าง และส่วนท้าย โดยทั่วไปสิ่งนี้ มุมมองมาตรฐานไซต์สองคอลัมน์ธรรมดา ลองดูที่มาร์กอัป:
หมวก
< div class = "container-fluid" > < div class = "row" > < div class = "col-md-12" > < h1 >หมวก< / h1 > < / div > < / div > |
โดยหลักการแล้วไม่จำเป็นต้องวางหมวกในตารางด้วยซ้ำ แต่เพื่อประโยชน์ในการสั่งเรายังคงทำต่อไป เราจะไม่ใส่โลโก้หรือเมนูใดๆ ลงไป เนื่องจากเรามีเทมเพลตแผนผังล้วนๆ ถัดมาเป็นแถบด้านข้างและเนื้อหา ตามนี้ แถวใหม่.
มาวางบล็อกที่มีเนื้อหาสูงกว่าในเลย์เอาต์ เพื่อที่ว่าเมื่อยุบบล็อกบนอุปกรณ์มือถือ มันจะสูงกว่าคอลัมน์ด้านข้าง เราจะวางแถบด้านข้างทันทีหลังเนื้อหา คุณอาจไม่ต้องเปลี่ยนแปลงอะไรเลยหากดีไซน์วางแถบด้านข้างไว้ทางด้านขวา อย่างไรก็ตามบางครั้งก็ต้องวางไว้ทางซ้ายนี่คือจุดที่พวกเขามาช่วยเหลือ ชั้นเรียนเพิ่มเติมผลักและดึงซึ่งช่วยให้คุณสามารถย้ายคอลัมน์ในแถวไปทางซ้ายและขวาโดยเปลี่ยนตำแหน่ง
สูตรทั่วไปการย้ายแถบด้านข้างไปทางซ้ายนั้นทำได้ง่าย: เลื่อนแถบด้านข้างไปทางซ้ายตามความกว้างของเนื้อหา และเลื่อนเนื้อหาไปทางขวาตามความกว้างของแถบด้านข้าง แต่ก่อนอื่นคุณต้องตัดสินใจอย่างเป็นธรรมชาติว่าความกว้างนี้จะเท่ากับเท่าใด ให้บล็อกหลักของเราใช้พื้นที่ 75% ของความกว้าง และคอลัมน์ด้านข้าง 25% จากนั้นเราต้องการรหัสนี้:
< div class = "col-md-9 col-md-push-3" > < / div > < div class = "col-md-3 col-md-pull-9" > < / div > |
โดยธรรมชาติแล้วให้วางไว้ในแถวเดียว
การสร้างแถบด้านข้างเราจะวางเมนูแนวตั้งไว้ที่คอลัมน์ด้านข้าง เมื่อต้องการทำเช่นนี้ คุณสามารถดูในเอกสารประกอบเพื่อดูว่ามีคลาสใดบ้างสำหรับรายการสไตล์ คลิกที่ "ส่วนประกอบ" - "กลุ่มรายการ"
แถบด้านข้าง
- โชว์รูมรถยนต์ 19
- ร้านซ่อมรถยนต์ 178
- ซ่อมแซม
- โฆษณา
< div class = "col-md-3 col-md-pull-9" > < h2 >แถบด้านข้าง< / h2 > < ul class = "list-group" > < li class = "list-group-item" >โชว์รูมรถยนต์ < span class = "badge" > 19 < / span > < / li > < li class = "list-group-item" >ร้านซ่อมรถยนต์ < span class = "badge" > 178 < / span > < / li > < li class = "list-group-item" >ซ่อมแซม < / li > < li class = "list-group-item" >โฆษณา < / li > < / ul > < / div > |
นี่คือลักษณะของเมนูพร้อมไอคอน:
แน่นอนว่ามันสามารถทำให้สวยงามยิ่งขึ้นได้มาก แต่เราแค่สร้างเทมเพลตไว้เป็นตัวอย่างเท่านั้น ใช่ และฉันได้เมนูที่ไม่มีลิงก์มา แต่ก็ยังไม่มีอะไรให้ลิงก์ไป ดังนั้นเราข้ามจุดนี้ไปได้เลย
มาจบด้วยแถบด้านข้างกัน แน่นอนว่าในสถานที่จริงอาจมีสิ่งอื่นอีกมากมายในนั้น ตัวอย่างเช่น, ป้ายโฆษณา- ตอนนี้เราจะทำงานกับบล็อกเนื้อหาและฉันจะแสดงวิธีทำงานกับรูปภาพใน Bootstrap เพื่อให้คุณสามารถแทรกแบนเนอร์ลงในแถบด้านข้างได้โดยไม่มีปัญหาใดๆ
การสร้างบล็อกเนื้อหาอย่างที่เราจำได้ ในกรณีของเราเนื้อหาควรจะสูงกว่าในมาร์กอัป ดังนั้นให้วางโค้ดต่อไปนี้ไว้เหนือแถบด้านข้าง บล็อกทั้งสองนี้วางอยู่ในแถวเดียว นี่คือรหัสที่ฉันใส่ลงในเนื้อหาของฉัน:
ส่วนหัวของเนื้อหา
Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdh ฮ่าๆ fdhfdhfd hdfhf dhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd ฮา
< div class = "col-md-9 col-md-push-3" > < h2 >เนื้อหา< / h2 > < div class = "row" > < div class = "col-sm-4" > < div class = "panel" > < h4 >ส่วนหัว< / h4 > < img src = "auto1.jpg" class = "img-responsive" > < p >Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdh ฮ่าๆ fdhfdhfd hdfhf dhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd ฮา< / p > < / div > < / div > |
อย่างที่คุณเห็น เรากำลังใช้ระบบกริดแบบซ้อนอยู่ที่นี่ ตามที่วางแผนไว้ควรมีประกาศบทความ 3 บทความในเนื้อหาติดต่อกัน เพื่อให้บรรลุเป้าหมายนี้อย่างง่ายดาย เราจะนำบล็อก col-md-9 col-md-push-3 ซึ่งก็คือบล็อกเนื้อหามาเป็นคอนเทนเนอร์สำหรับกริด ในกรณีนี้เราสร้างแถวขึ้นมาโดยที่กริด 12 คอลัมน์จะกลับมาให้เราใช้งานได้อีกครั้ง ด้วยคลาส col-sm-4 เราให้หนึ่งบทความประกาศความกว้าง 33.33% พอดี ดังนั้นการประกาศ 3 รายการจึงเหมาะสมอย่างยิ่งในเนื้อหาบรรทัดเดียว เพียงคัดลอกและวางบล็อกนี้อีก 2 ครั้งเพื่อตรวจสอบลักษณะที่ปรากฏ
นี่คือวิธีการแสดงบล็อกของเราพร้อมประกาศบทความ:
ตรงเป๊ะเลย. โดยไม่มีคำถามใดๆ ทั้งสิ้น ประกาศจะอยู่ใน 3 คอลัมน์ในทุกอุปกรณ์ ยกเว้นคอลัมน์ที่เล็กที่สุด โดยทุกอย่างจะอยู่ในคอลัมน์เดียว
ฉันหวังว่าตัวอย่างนี้จะชัดเจนสำหรับคุณ ตอนนี้ฉันเสนอให้ดูตัวอย่างที่ไม่ได้มาตรฐานอีกเล็กน้อย มาสร้างอีกแถวในเนื้อหากัน คราวนี้แนวคิดคือการแสดงบทความหนึ่งบทความและแถบเลื่อนเรียงกัน โดยมีการเยื้องเล็กน้อยระหว่างบทความเหล่านั้น สมมติว่าบทความอยู่ทางด้านซ้ายและแถบเลื่อนอยู่ทางด้านขวา มีช่องว่างเล็กน้อยระหว่างพวกเขา + แน่นอนว่าทั้งหมดนี้ควรปรับเปลี่ยนได้
คุณสามารถคัดลอกและวางโค้ดประกาศบทความลงในแถวใหม่ของเราได้ สิ่งที่เราต้องทำคือสร้างตัวเลื่อน จริงๆแล้วฉันจะไม่ให้รหัสที่นี่เพราะมันยุ่งยากมาก ไปที่เว็บไซต์ Bootstrap อย่างเป็นทางการหรือเวอร์ชันภาษารัสเซีย ไปที่ส่วน Javascript แล้วมองหา Carousel ที่นั่น
ตรวจสอบตัวอย่างที่ให้ไว้ในเอกสารประกอบ คุณต้องคิดให้ออก ไม่มีอะไรซับซ้อนที่นั่น ในความเป็นจริง เพื่อให้แถบเลื่อนเริ่มทำงาน คุณเพียงแค่ต้องถ่ายภาพและระบุเส้นทางไปยังรูปภาพเหล่านั้นในแอตทริบิวต์ src สำหรับแท็กรูปภาพ
ประเด็นไม่ได้อยู่ที่วิธีการสร้างตัวเลื่อน - ข้อมูลนี้สามารถพบได้ง่ายในเอกสารประกอบ หน้าที่ของเราตอนนี้คือทำความเข้าใจว่าบล็อกขนาดใดที่ต้องห่อตัวเลื่อน เรามีเซลล์ว่างอีก 8 เซลล์ในแถว แต่เนื่องจากควรมีการเยื้องเล็กน้อยระหว่างการประกาศบทความและแถบเลื่อน ฉันจะล้อมแถบเลื่อนไว้ในบล็อกนี้:
ตอนนี้เรามีประกาศบทความและแถบเลื่อนในหนึ่งบรรทัด และด้านล่างมีประกาศอีก 3 รายการ ทั้งหมดนี้อยู่ในบล็อกเนื้อหา
ดังนั้น ฉันอาจจะไม่สร้างส่วนท้ายเลย เพราะตอนนี้คุณเองก็สามารถเข้าใจวิธีสร้างมันได้แล้ว บนหลักการเดียวกันกับหมวก ทุกวันนี้เราไม่ได้สนใจองค์ประกอบเหล่านี้เป็นพิเศษเพราะเรากำลังทำงานกับเสาด้านข้างและโดยเฉพาะบล็อกหลัก
หากคุณทำซ้ำทุกอย่างตามฉันโดยใช้เพียงภาพของคุณเอง คุณจะถูกบังคับให้ยอมรับว่าเรามีเลย์เอาต์ที่ค่อนข้างราบรื่น (ถ้าคุณไม่คำนึงถึงสิ่งที่เลวร้าย รูปร่างบล็อก แต่เราไม่มีเวลาแก้ไขในขณะนี้) ฉันจะพยายาม "ถ่ายภาพ" ทั้งไซต์:
ไม่มีการเลื่อนแนวนอน ไซต์นี้ง่ายต่อการดูบนความละเอียดหน้าจอใด ๆ ไม่มีอะไรเลื่อน ไม่มีอะไรหลุด ฯลฯ
แน่นอนว่าหากเราทำเลย์เอาต์โดยไม่ใช้แผนผัง แต่จากเลย์เอาต์ PSD มันคงจะออกมาสวยงามกว่านี้มาก แต่ อย่างน้อยเค้าโครงไม่แตกสลายและเทมเพลตสามารถปรับได้อย่างสมบูรณ์ และเราใช้เวลาน้อยมากในการสร้างมัน ลองจินตนาการดูว่าคุณจะต้องเขียนโค้ด CSS มากเพียงใดเพื่อสร้างสไตล์สำหรับแถบเลื่อน และจัดแนวบล็อกในบรรทัดเดียว วางการเยื้อง ฯลฯ แน่นอนว่านักออกแบบเลย์เอาต์ที่มีประสบการณ์จะทำทั้งหมดนี้ได้เร็วพอ แต่แม้แต่เพื่อนร่วมงานที่มีประสบการณ์น้อยก็สามารถทำได้เร็วขึ้นโดยใช้ Bootstrap
คุณพร้อมหรือยัง?เราดูว่าเลย์เอาต์ที่ดูเหมือนบน Bootstrap 3 เป็นอย่างไร บอกฉันหน่อยสิ สิ่งง่ายๆ- คุณต้องการเรียนรู้เฟรมเวิร์ก Bootstrap ในอีก 5-10 วันข้างหน้าในระดับมืออาชีพ และเริ่มสร้างเทมเพลตที่ตอบสนองทุกระดับที่ซับซ้อนหรือไม่?
ทั้งหมดนี้พูดคุยเกี่ยวกับ Bootstrap วิธีที่คุณไม่สามารถสร้างสิ่งที่เป็นต้นฉบับอย่างแท้จริงได้และ การออกแบบที่เป็นเอกลักษณ์สิ่งนี้ไม่เป็นความจริงเลย ทำไม อะไรขัดขวางคุณไม่ให้ปรับแต่งเฟรมเวิร์ก เหลือเพียงกริดและส่วนประกอบที่มีประโยชน์ที่สุดสองสามอย่างเท่านั้น และคุณจะไม่ถูกจำกัดด้วยวิธีการเขียนสไตล์สำหรับองค์ประกอบใดๆ บนหน้าเว็บ แต่ในขณะเดียวกัน คุณจะไม่คิดเกี่ยวกับวิธีการทำให้ทุกอย่างแสดงผลได้ดีบนหน้าจอใดๆ เนื่องจากเฟรมเวิร์กจะแก้ปัญหานี้ให้กับคุณ
โดยสรุป ฉันขอเชิญคุณเข้าร่วมการฝึกอบรมชั้นหนึ่งของเรา กรอบบูตสแตรปตั้งแต่เริ่มต้น ใช่ ใช่ แม้ว่าคุณจะไม่เข้าใจอะไรจากบทความนี้ก็ตาม ฉันไม่เห็นหลักสูตรอื่นใดบน Bootstrap ใน RuNet แม้ว่าจะมีอยู่ แต่ก็แทบจะไม่มี 2 เทมเพลต ระดับมืออาชีพ+ หน้า Landing Page เป็นโบนัส
ด้วยเหตุนี้ฉันปล่อยให้คุณคิดและฉันหวังว่าคุณจะไม่พลาดโอกาสในการเชี่ยวชาญ Bootstrap และในอนาคตอันใกล้นี้ชดใช้ราคาสำหรับหลักสูตรนี้อย่างสมบูรณ์เพราะด้วยกรอบการทำงานนี้ คุณจะสามารถสร้างไซต์เพิ่มขึ้น 2-3 เท่า ในเวลาเดียวกันซึ่งหมายถึงการหารายได้ เงินมากขึ้น- ฉันคิดว่าคุณชอบมุมมองนี้
วันนี้เราได้จัดทำโครงร่างซึ่งอย่างไรก็ตามในโครงสร้างของมันยังห่างไกลจากสิ่งที่ง่ายที่สุด อย่างที่คุณเห็น Bootstrap ทำให้งานของเราง่ายขึ้นมาก ฉันบอกลาคุณและหวังว่าคุณจะพัฒนาเว็บไซต์อย่างรวดเร็วและง่ายดายที่สุด โอ้ใช่และปรับตัวด้วย
ช่วงครึ่งหลังของบทความมีการรับรู้ได้ง่ายขึ้นแล้วมีตัวอย่างเพิ่มเติมพร้อมภาพหน้าจอ
Bootstrap - มันคืออะไร?เรามาเริ่มด้วยคำถามสำคัญกันก่อน Bootstrap เป็นเฟรมเวิร์ก CSS และ JS โดยพื้นฐานแล้วคือชุดของไฟล์ที่มีโค้ดเขียนสำเร็จรูป เป้าหมายของนักพัฒนาเกือบทุกเฟรมเวิร์กคือการทำให้การพัฒนาเว็บไซต์ง่ายขึ้นสำหรับตนเองและผู้อื่นที่จะสามารถเข้าถึงเครื่องมือนี้ได้ ในกรณีของ Bootstrap นั้นไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น ดังนั้นคุณจึงสามารถใช้งานได้ทุกทาง แก้ไขซอร์สโค้ด และปรับแต่งเฟรมเวิร์กตามที่คุณต้องการ นั่นเยี่ยมมาก
การติดตั้งบูทสแตรปหากคุณเพียงต้องการเชื่อมต่อไฟล์เฟรมเวิร์กกับเอกสาร HTML (เช่น เพื่อการฝึกฝน) เพียงดาวน์โหลดเฟรมเวิร์กจากเว็บไซต์อย่างเป็นทางการ getbootstrap.com คัดลอกไฟล์ลงในโปรเจ็กต์และเชื่อมต่อไฟล์ที่คุณต้องการ ฉันจะทำมัน ภาพรวมโดยย่อไฟล์เหล่านี้:
นี้ ชุดมาตรฐานกรอบ. ในความเป็นจริงคุณสามารถปรับแต่งและเปลี่ยนแปลงให้เหมาะกับคุณได้ ตัวอย่างเช่น อย่าใช้สคริปต์เลยหรือเชื่อมต่อเพียงตารางเดียว โดยทั่วไปเราจะพูดถึงเรื่องนี้ด้วย
เอกสาร Bootstrap ของรัสเซียเมื่อคุณเยี่ยมชม getbootstrap คุณอาจสังเกตเห็นว่าทุกอย่างที่นี่เป็นภาษาอังกฤษ เราสามารถใช้ความช่วยเหลือจากรัสเซียในกรอบงานได้ มันหาง่าย เมื่อต้องการทำเช่นนี้ ให้ไปจากหน้าหลักไปยังส่วนการเริ่มต้นใช้งาน เลื่อนลงไปด้านล่างสุดจะมีลิงค์คำแปล มองหาภาษารัสเซียที่นั่นแล้วคลิกที่มัน เพียงเท่านี้คุณก็อยู่ในเว็บไซต์เวอร์ชันรัสเซียแล้ว จริงอยู่ ไม่ใช่ทุกอย่างที่ได้รับการแปลที่นี่ แต่มีบางที่ประมาณ 70-80% ที่ถูกต้อง ดังนั้นคุณจะเข้าใจทุกอย่าง
ตาราง 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 แถว เช่นนี้ 
ยอดเยี่ยม! เมื่อเข้าใจสิ่งนี้แล้ว คุณสามารถจัดการบล็อกบนหน้าเว็บได้ในเกือบทุกวิธีที่คุณต้องการ พยายามคิดงานให้ตัวเองและนำไปปฏิบัติ
ต่อไปฉันจะแสดงเคล็ดลับที่ดีอีกอย่างให้คุณดู - ความสามารถในการย้ายบล็อกไปทางขวาหรือซ้าย สมมติว่าเราไม่มีผลิตภัณฑ์ 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 เพิ่มเติมสำหรับเมนู ซึ่งควรวางไว้หลังบล็อกด้วยคลาสคอนเทนเนอร์-ของเหลว อย่าลืมปิดบล็อคนี้นะครับ ฉันให้คลาส navbar-wrap แก่มัน นี่คือสไตล์ของมัน:
นั่นคือคุณสามารถจำกัดความกว้างและจัดกึ่งกลางได้ หรือเริ่มแรกแทนที่คอนเทนเนอร์-ของเหลวด้วยคอนเทนเนอร์ 
อย่างที่คุณเห็น เราได้เพิ่มโลโก้ รายการง่ายๆ สองรายการ รายการแบบเลื่อนลง และแบบฟอร์มการค้นหาลงในเมนู นั่นคือมีองค์ประกอบหลายอย่าง คุณสามารถปรับแต่งเมนูด้วยตัวคุณเองได้อย่างง่ายดายโดยเพิ่มคลาสของคุณเองลงไป แต่สำหรับตอนนี้เป้าหมายของฉันคือเพียงแสดงให้คุณเห็นส่วนประกอบนี้
นี่คือลักษณะของเมนูบนอุปกรณ์ที่มีความกว้างหน้าจอน้อยกว่า 768 พิกเซล: 
อย่างที่คุณเห็นเมนูยุบลง จะเปิดขึ้นเมื่อคุณคลิกที่ปุ่มทางด้านขวา มุมบน- มีเพียงโลโก้เท่านั้นที่ยังคงอยู่บนหน้าจอ
ในเวลาเดียวกัน จากตัวอย่างด้านบน คุณจะเข้าใจได้ว่ารายการเมนูแบบเลื่อนลงถูกสร้างขึ้นใน Bootstrap อย่างไร เรามาแยกโค้ดนี้กันเพิ่มเติม การพิจารณาอย่างละเอียด:
อุปกรณ์ออกกำลังกาย
ดังนั้นคอนเทนเนอร์สำหรับรายการแบบเลื่อนลงจึงเป็นรายการปกติที่มีคลาสแบบเลื่อนลง ข้างในเป็นลิงค์หลักซึ่งจะเปิดเมนูแบบเลื่อนลง มันสำคัญมากที่จะต้องกำหนดแอตทริบิวต์ข้อมูลซึ่งคุณเห็นในโค้ด หากไม่มีสิ่งนี้ก็จะไม่มีอะไรทำงาน คุณควรตรวจสอบให้แน่ใจด้วยว่าไฟล์ bootstrap.js เชื่อมต่อกับหน้าเว็บแล้ว
ช่วงที่มีคลาสคาเร็ตนั้นไม่มีอะไรมากไปกว่าลูกศรซึ่งคุณสามารถเข้าใจได้ว่ารายการนั้นเป็นรายการแบบเลื่อนลงและด้านล่างเมนูนั้นถูกสร้างขึ้นโดยใช้มาตรฐาน รายการหัวข้อย่อย- เพียงเท่านี้ ทุกอย่างก็ค่อนข้างง่าย คุณสามารถใช้โค้ดนี้เพื่อใช้งานรายการแบบเลื่อนลงได้
การเพิ่ม Breadcrumbs (Breadcrumbs) โดยใช้ Bootstrapในร้านค้าหลายแห่งคุณจะพบกับสิ่งที่เรียกว่าบล็อก เศษขนมปังซึ่งประกอบด้วย เส้นทางเต็มถึง หน้าปัจจุบัน- นอกจากนี้ยังทำได้ง่ายโดยใช้เฟรมเวิร์ก ดูโค้ด:
ในความเป็นจริงก็เพียงพอที่จะระบุคลาส breadcrumb สำหรับรายการลำดับเลขและป้อนรายการปกติลงไป อย่างไรก็ตาม ฉันจะจัดส่วนหัวระดับที่สองไว้ตรงกลางในเทมเพลต (ซึ่งต้องเขียนด้วย CSS):
H2( การจัดข้อความ: กึ่งกลาง; )
หากคุณต้องการเปลี่ยนรูปลักษณ์ของ breadcrumb เพียงใช้ตัวเลือก .breadcrumb ใน CSS ตัวอย่างเช่น วิธีนี้คุณสามารถลบออกได้ สีพื้นหลัง:
เกล็ดขนมปัง (พื้นหลัง: โปร่งใส; )
นี่คือลักษณะของไซต์ตอนนี้: 
ตามค่าเริ่มต้น ตารางจะขยายออกไปทั่วทั้งหน้าต่าง ดังนั้นให้ห่อตารางไว้ในกล่องที่มีความกว้างจำกัดเพื่อจำกัดขนาด ตามค่าเริ่มต้นมันดูแย่มาก แต่ถ้าคุณเพิ่มคลาสตารางลงในแท็กตาราง ทุกอย่างจะดีขึ้นมาก:
หากต้องการเน้นสีอื่นเมื่อคุณวางเมาส์เหนือแถวของตาราง ให้ใช้คลาส table-hover
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | ตัวอย่างบูทสแตรป
 ก่อนหน้า ถัดไป กิจกรรมของเรา โครงการใหม่ 
|
ตัวอย่าง Bootstrap .logo ( width:55px; ) .navbar ( margin-bottom: 0; border-radius: 0; ) ส่วนท้าย ( สีพื้นหลัง: #f2f2f2; padding: 25px; ) .carousel-inner img ( min-height: 200px; width: 100%; ระยะขอบ: auto; ) @media (ความกว้างสูงสุด: 600px) ( .carousel-caption ( display: none; ) ) /*กำลังสร้าง แถบนำทางซึ่งที่ ขนาดเล็กหน้าจอจะแสดงเมนูแฮมเบอร์เกอร์ (ปุ่มที่มี 3 แถบ) */
/*ฉันสร้างแกลเลอรีแบบเลื่อนอัตโนมัติ */ /*ในที่นี้ฉันระบุว่าที่ด้านล่างของภาพควรมีตัวบ่งชี้ 3 ตัวสำหรับการสลับระหว่างรูปภาพ*/ /*ฉันแทรกรูปภาพเอง ทำให้รูปแรกใช้งานอยู่*/บ้านสองชั้นแสนสบายพร้อมห้องพัก 8 ห้อง บ้านสะดวกสบายทันสมัยพร้อมห้องพัก 4 ห้อง บ้านเก่ากว้างขวาง 7 ห้อง /*ฉันสร้างเฟรมสลับซ้ายและขวาโดยใช้ปุ่มซ้ายและขวาในภาพ*/ Previous Next /*ฉันสร้างคอนเทนเนอร์คงที่แยกต่างหากสำหรับเนื้อหาหลัก*/ กิจกรรมของเรา บริษัทของเรามีส่วนร่วมในการก่อสร้างบ้านส่วนตัว คฤหาสน์ อาคารสำนักงาน ศูนย์การค้า และอาคารประเภทอื่น ๆ ที่ทันสมัยและสะดวกสบาย
โครงการที่เสร็จสิ้นแล้วของเรามีความโดดเด่นเหนือบริษัทอื่นๆ เสมอ ในขณะที่เราสร้างอาคารที่มีเอกลักษณ์และรอบคอบที่จะมอบความสะดวกสบายสูงสุดให้แก่ผู้พักอาศัยและผู้มาเยือน
โครงการใหม่
วันนี้เรามีส่วนร่วมในการก่อสร้างอาคารสำนักงานสูง
/*การสร้างส่วนท้ายของหน้าแบบลอย*/
