ส่วนต่อประสานผู้ใช้ที่ใช้ Twitter Bootstrap สำหรับผู้เริ่มต้น การติดตั้ง bootstrap การเลือกส่วนประกอบที่จำเป็น
ก่อนดาวน์โหลด ตรวจสอบให้แน่ใจว่าคุณมีโปรแกรมแก้ไขโค้ด (เราขอแนะนำ 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 และปลั๊กอินรวมกันมีองค์ประกอบอินเทอร์เฟซต่อไปนี้:
- กลุ่มปุ่ม
- รายการปุ่มแบบเลื่อนลง
- แท็บการนำทาง ปุ่ม และรายการ
- แถบนำทาง
- ทางลัด
- ป้าย
- ส่วนหัวของหน้าและองค์ประกอบฮีโร่
- ของจิ๋ว
- ข้อความ
- ตัวบ่งชี้กระบวนการ
- องค์ประกอบกิริยา
- รายการแบบเลื่อนลง
- เคล็ดลับเครื่องมือ
- บล็อกข้อมูล
- องค์ประกอบ "หีบเพลง"
- องค์ประกอบแบบหมุน
- การป้อนข้อมูลด้วยแป้นพิมพ์ล่วงหน้า
หลังจากการแนะนำสั้นๆ เราจะเน้นไปที่การใช้ Bootstrap ในการดำเนินการนี้ เราจะใช้เทมเพลต HTML พื้นฐานที่มีองค์ประกอบทั้งหมดที่แสดงอยู่ใน
ไฟล์ HTML ทั่วไปจะมีลักษณะดังนี้:
หากต้องการสร้างเทมเพลต Bootstrap เช่นนี้ เพียงแนบไฟล์ CSS และ JS ที่เหมาะสม:
และทุกอย่างก็เรียบร้อย! ด้วยการเพิ่มสองไฟล์นี้ คุณสามารถพัฒนาเว็บไซต์หรือแอพพลิเคชั่นโดยใช้ Bootstrap ได้
สวัสดี! ในบทความนี้ ฉันจะบอกวิธีการติดตั้งและเชื่อมต่อ Bootstrap Framework คุณสามารถอ่านเกี่ยวกับ Bootstrap คืออะไร
ฉันได้พูดไปแล้วมากมายเกี่ยวกับการติดตั้งมาตรฐานในบทความก่อนหน้านี้ ทุกอย่างเรียบง่ายที่นี่ เราไปที่เว็บไซต์อย่างเป็นทางการ getbootstrap.com คลิกที่รายการเริ่มต้นใช้งานและเลือกตัวเลือกแรก ดังนั้นเราจึงดาวน์โหลด bootstrap เวอร์ชันเต็มพร้อมส่วนประกอบ js และ css ทั้งหมด
Bootstrap CDN เป็นโอกาสในการเชื่อมต่อเฟรมเวิร์กจากที่เก็บข้อมูล CDN โดยไม่ต้องดาวน์โหลดไฟล์ลงในคอมพิวเตอร์ของคุณ โดยปกติแล้วในกรณีนี้จะไม่มีการพูดถึงการปรับแต่งใดๆ
การปรับแต่งกรอบงานแต่ความจริงก็คือว่า bootstrap มีส่วนประกอบมากมายตามค่าเริ่มต้น และบางส่วนก็อาจไม่มีประโยชน์สำหรับคุณเมื่อพัฒนาไซต์เฉพาะ ตัวอย่างเช่น คุณกำลังออกแบบร้านค้าออนไลน์ คุณอาจไม่ต้องการโมดัลและคำแนะนำเครื่องมือ และอาจไม่ต้องการคอมโพเนนต์ css มากมาย ในกรณีนี้ จะเป็นการฉลาดที่ไม่รวมส่วนประกอบเหล่านี้ไว้ในกรอบงาน
หรือคุณกำลังสร้างบล็อกง่ายๆ สมมติว่าคุณไม่ต้องการอะไรที่นั่นเลย ดังนั้นคุณจึงเหลือเพียงตาข่ายและส่วนประกอบที่สำคัญที่สุดสองสามอย่างเท่านั้น
การเลือกเฉพาะสิ่งที่คุณต้องการคือแนวทางแบบมืออาชีพในการสร้างเว็บไซต์และการใช้ Bootstrap ตามค่าเริ่มต้น สไตล์ CSS ของเฟรมเวิร์กเวอร์ชันที่ไม่มีการบีบอัดในเวอร์ชันล่าสุดจะมีน้ำหนัก 143 กิโลไบต์ และสคริปต์มีขนาดมากกว่า 60 กิโลไบต์ ใช่ครับ ถ้าบีบอัดโค้ดก็ลดน้ำหนักได้ 20-40% แต่ไฟล์ก็ยังไม่เบาที่สุด
ตัวอย่างเช่นหากคุณปิดการใช้งานส่วนประกอบทั้งหมดและเหลือเพียงกริด (ซึ่งทำบ่อยมาก) น้ำหนักของ css จะอยู่ที่ 15-20 กิโลไบต์เท่านั้นและในรูปแบบการบีบอัดจะน้อยกว่าอีกสองสามกิโลไบต์ ด้วยวิธีนี้คุณจะได้รับความเร็วสูงสุดและการเพิ่มประสิทธิภาพให้กับโครงการของคุณ
โอเค นั่นมันก็แค่ทฤษฎี หากต้องการปรับแต่งกรอบงาน ให้ไปที่เว็บไซต์อย่างเป็นทางการเดียวกันและไปที่ปรับแต่ง
การเลือกส่วนประกอบที่จำเป็นขั้นตอนแรกที่นี่คือการกำหนดค่าส่วนประกอบที่คุณต้องการรวมไว้ใน Bootstrap เวอร์ชันของคุณ เริ่มจาก CSS กันก่อน:
ลักษณะสื่อสิ่งพิมพ์ – คำสั่งสื่อสำหรับการพิมพ์ หากคุณไม่ได้วางแผนที่จะพิมพ์หน้าไซต์ คุณสามารถปิดใช้งานได้
การออกแบบตัวอักษร โค้ด ตาราง แบบฟอร์ม และปุ่มต่างๆ ล้วนเป็นสิ่งที่คุณสามารถจัดสไตล์ใน CSS ได้ด้วยตัวเองหากต้องการ แน่นอนว่าการดำเนินการนี้อาจต้องใช้เวลา แต่หากการออกแบบองค์ประกอบของคุณแตกต่างอย่างมากจากที่เฟรมเวิร์กนำเสนอตามค่าเริ่มต้น คุณสามารถปิดการใช้งานสไตล์ CSS เหล่านี้ทั้งหมดและเขียนมันขึ้นมาเองได้
ระบบกริดก็คือกริดจริงๆ ฉันไม่เห็นจุดใดที่จะปิดใช้งาน เนื่องจากนี่คือพลังหลักของเฟรมเวิร์ก ต้องขอบคุณกริดที่คุณสามารถปรับเทมเพลตให้เข้ากับอุปกรณ์ใดๆ ได้อย่างง่ายดาย และในปัจจุบันนี้ในยุคของการรับส่งข้อมูลบนมือถือ สิ่งนี้มีความสำคัญอย่างยิ่ง เราไม่ปิดมันไม่ว่าในกรณีใด ๆ
ยูทิลิตี้ที่ตอบสนอง – ยูทิลิตี้ที่ปรับเปลี่ยนได้ ฉันขอแนะนำว่าอย่าปิดการใช้งานเลย เราจะพูดถึงยูทิลิตี้แบบปรับได้ในบทความถัดไป ซึ่งเราจะดูรายละเอียดเกี่ยวกับระบบกริด คลาสเหล่านี้เป็นคลาสที่อนุญาตให้คุณซ่อนองค์ประกอบหรือทำให้มองเห็นได้ที่ความกว้างหน้าจอที่กำหนด สะดวกและมีประโยชน์มาก
ตัวอย่างเช่น สิ่งต่างๆ เช่น กลุ่มรายการ แถบปุ่ม ไอคอน แผง การแจ้งเตือน การแบ่งหน้า การแสดงเส้นทาง ฯลฯ คุณยังสามารถปิดการใช้งานแบบอักษรของไอคอนได้ สิ่งนี้คุ้มค่าที่จะทำในกรณีที่คุณไม่จำเป็นต้องมีไอคอนบนไซต์เลยหรือคุณกำลังเชื่อมต่อชุดอื่น จริงๆ แล้ว คุณควรนั่งคิดว่าสิ่งที่คุณต้องการจากส่วนประกอบทั้งหมดที่นำเสนอและสิ่งที่คุณไม่ต้องการ แต่ละไซต์จะมีชุดของตัวเอง เนื่องจากแต่ละไซต์มีการออกแบบและฟังก์ชันการทำงานที่แตกต่างกัน
ส่วนประกอบจาวาสคริปต์
ได้แก่เมนูแบบเลื่อนลง คำแนะนำเครื่องมือ หน้าต่างโมดอล และแถบเลื่อน หากคุณไม่ต้องการสิ่งนี้ ให้ปิดมัน ในบางกรณี ส่วนประกอบทั้งหมดจะมีประโยชน์มากเมื่อไซต์ของคุณมีเมนูแบบเลื่อนลง แถบเลื่อนบนหน้าหลัก และหน้าต่างโมดอล ในบางกรณี ส่วนประกอบส่วนใหญ่ 1-2 รายการอาจมีประโยชน์ ดังนั้นจึงไม่จำเป็นต้องขยายโค้ดให้ยาวขึ้น และปิดใช้งานส่วนประกอบที่ไม่จำเป็น
ปลั๊กอิน Jqueryที่นี่คุณสามารถปิดการใช้งานปลั๊กอินไลบรารี jquery ที่ช่วยให้ส่วนประกอบจาวาสคริปต์ทำงานได้อย่างถูกต้อง ดังนั้น หากคุณไม่ได้ใช้แถบเลื่อนบนไซต์ของคุณ คุณไม่จำเป็นต้องมีปลั๊กอินสำหรับสร้างภาพหมุน หากคุณไม่ต้องการคำแนะนำเครื่องมือ ให้ปิดการใช้งาน tooltips.js เป็นต้น
ปลั๊กอิน scrollspy จะตรวจสอบตำแหน่งของข้อความและไฮไลต์รายการเมนูอย่างใดอย่างหนึ่งขึ้นอยู่กับสิ่งนี้ โดยปกติแล้วจำเป็นต้องมีคุณสมบัติดังกล่าวในหน้า Landing Page ฉันไม่เคยเห็นมันบนเว็บไซต์ทั่วไปมาก่อน และอื่นๆ ลองดูสิ่งที่คุณต้องการและสิ่งที่คุณไม่ต้องการให้ดี
ตัวแปรน้อยลงถัดไป รายการขนาดใหญ่จะเปิดขึ้นตรงหน้าคุณ ซึ่งจะมีรายการย่อยจำนวนมากพร้อมการตั้งค่าสำหรับตัวแปร Less ที่นี่คุณสามารถเปลี่ยนแปลงได้เกือบทุกอย่าง เช่น สี ขนาดตัวอักษร เบรกพอยท์ จำนวนคอลัมน์ในตาราง การเยื้อง ฯลฯ
แน่นอนว่า ในการทำเช่นนี้ คุณต้องรู้พื้นฐานของ Less เป็นอย่างน้อย หรืออย่างน้อยก็สำรวจแบบฟอร์มเหล่านี้อย่างสังหรณ์ใจ
ตัวอย่างเช่น หากคุณเห็นตัวแปร @font-family-base อย่างน้อยคุณจะต้องเข้าใจโดยสัญชาตญาณว่าตัวแปรนั้นรับผิดชอบต่อชื่อของแบบอักษร ซึ่งเป็นแบบอักษรพื้นฐานบนไซต์ ตัวแปร @font-size-base จะกำหนดขนาดตัวอักษรพื้นฐาน ตามค่าเริ่มต้นใน bootstrap จะเป็น 14 พิกเซล
คุณสามารถแก้ไขฟิลด์เหล่านี้ทั้งหมดได้ เพียงเปลี่ยน 14 เป็น 20 และตอนนี้คุณสามารถดาวน์โหลดเฟรมเวิร์กที่ขนาดตัวอักษรเริ่มต้นคือ 20 พิกเซล ดังนั้นคุณจึงสามารถปรับขนาดของหัวข้อ ฯลฯ ได้ทันที
การตั้งค่าตารางการตั้งค่าของระบบกริดก็น่าสนใจมากสำหรับเราเช่นกัน นี่คือ:
อย่างที่คุณเห็น คุณสามารถเปลี่ยนจำนวนคอลัมน์และความกว้างของการเยื้องระหว่างคอลัมน์เหล่านั้นได้ภายในไม่กี่วินาที ตัวแปร grid-float-breakpoint กำหนดจุดที่เมนูมือถือยุบเป็นไอคอน
หากคุณเปลี่ยนค่า เช่น เป็น @screen-md-min ซึ่งมีความกว้างไม่เกิน 991 พิกเซลหรือน้อยกว่า การยุบจะเกิดขึ้น คุณยังสามารถลบตัวแปรนี้และเขียนค่าเป็นพิกเซลได้ เช่น 520 พิกเซล จากนั้นการยุบเมนูจะเกิดขึ้นเฉพาะบนสมาร์ทโฟนและโทรศัพท์มือถือเท่านั้น
จริงๆ แล้วหน้าการปรับแต่ง Bootstrap มีการตั้งค่ามากมาย แต่โดยทั่วไปวิธีการปรับแต่งนี้ (โดยใช้หน้าปรับแต่งบนเว็บไซต์อย่างเป็นทางการ) ไม่ใช่วิธีที่เร็วและสะดวกที่สุด ต่อไปฉันจะแสดงให้คุณเห็นวิธีที่เร็วที่สุด
ใช้หน้าปรับแต่งเมื่อคุณต้องการเปลี่ยนแปลงเฟรมเวิร์ก 2-10 ครั้ง หรือเพียงปิดการใช้งานส่วนประกอบที่จำเป็น หากคุณกำลังจะเปลี่ยนค่าอื่นๆ จำนวนมาก คุณต้องใช้วิธีการอื่น
จริงๆ แล้ว เมื่อคุณกำหนดค่าเวอร์ชันของเฟรมเวิร์ก ให้คลิกที่ปุ่มใหญ่ที่ด้านล่างสุดของหน้า มันจะรวบรวม Bootstrap เวอร์ชันให้คุณและดาวน์โหลดลงในคอมพิวเตอร์ของคุณ จากนั้นสิ่งที่คุณต้องทำคือเชื่อมต่อและใช้งาน ฉันได้พูดคุยเกี่ยวกับการเชื่อมต่อไปแล้วในบทความก่อนหน้านี้ (รวมถึงวิธีดำเนินการบน WordPress)
ดาวน์โหลดแหล่งที่มาน้อยลงและแก้ไขดังที่ฉันได้กล่าวไปแล้ว หากคุณต้องการแก้ไขซอร์สโค้ดของเฟรมเวิร์กเป็นจำนวนมาก และคุณต้องการเห็นการเปลี่ยนแปลงในทันที คุณจะต้องมีแหล่งที่มาน้อยลง คุณสามารถดาวน์โหลดได้ในที่เดียวกับเวอร์ชันเต็มของเฟรมเวิร์ก - ในส่วนการเริ่มต้นใช้งาน
หากต้องการทำงานกับแหล่งที่มาน้อยลงและแก้ไขคุณต้องมี:
อย่างน้อยมีความรู้เกี่ยวกับ CSS และน้อยกว่าหรือตัวประมวลผลล่วงหน้าอื่น ๆ
คอมไพเลอร์น้อย (สามารถดาวน์โหลดได้ฟรี)
จริงๆ แล้ว ฉันจะไม่ลงรายละเอียดเกี่ยวกับการปรับแต่งผ่านแหล่งที่มาที่น้อยลง แต่นี่เป็นวิธีที่ดีที่สุด เพราะคุณไม่จำเป็นต้องไปที่หน้าปรับแต่ง 100 ครั้ง และรวบรวมเฟรมเวิร์กเวอร์ชันใหม่มากขึ้นเรื่อยๆ
ธีม Bootstrap หรือการเปลี่ยนรูปลักษณ์ขององค์ประกอบตามค่าดีฟอลต์ ในเวอร์ชันเต็มของเฟรมเวิร์ก คุณยังสามารถค้นหาไฟล์ bootstrap-theme.css ในโฟลเดอร์ css ได้ด้วย ไม่จำเป็นต้องเชื่อมต่อกับไซต์ มันทำหน้าที่อะไรบ้าง? ไฟล์นี้จำเป็นสำหรับการเปลี่ยนสไตล์สำหรับองค์ประกอบที่คุณต้องการเท่านั้น หากจำเป็น
บทบาทเดียวกันนี้สามารถทำได้โดย style.css ของคุณเอง ซึ่งคุณสามารถแทนที่สไตล์ได้เช่นกัน Bootstrap-theme ไม่ใช่ไฟล์ที่จำเป็น แต่ใช้สำหรับการสั่งซื้อ ตัวอย่างเช่น คุณมี 3 ไฟล์:
bootstrap.css – แน่นอนว่านี่คือโค้ดของเฟรมเวิร์กเอง
bootstrap-theme.css – ที่นี่คุณแทนที่สไตล์สำหรับองค์ประกอบ bootstrap
style.css – เขียนสไตล์สำหรับองค์ประกอบของคุณในไฟล์นี้
จากนั้นคุณจะได้คำสั่งในโค้ดและในโครงสร้างโปรเจ็กต์ แต่ไม่มีใครห้ามไม่ให้คุณดำเนินการทั้งหมดในไฟล์เดียว - style.css และห้ามใช้ไฟล์ธีมเลย
สิ่งที่สำคัญที่สุดคือการรวมไฟล์ธีมและ CSS ของคุณเองไว้ในมาร์กอัป html ช้ากว่าไฟล์ที่มีโค้ดเฟรมเวิร์ก เพื่อให้สไตล์ถูกแทนที่ได้สำเร็จ
ตัวอย่างการทำงานของธีมดังที่ฉันได้กล่าวไปแล้ว ตามค่าเริ่มต้น Bootstrap จะมีไฟล์ธีมบูตสแตรป ลองเชื่อมต่อดู. ฉันทราบว่าเชื่อมต่อหลังจากไฟล์หลัก
ตามค่าเริ่มต้น ปุ่มต่างๆ ใน Bootstrap จะมีลักษณะดังนี้:
และนี่คือลักษณะที่ปรากฏหลังจากเชื่อมต่อไฟล์กับธีม:
อย่างที่คุณเห็น มีการไล่ระดับสีเล็กน้อยปรากฏขึ้น ดังนั้น คุณสามารถเขียนโค้ดใหม่ในไฟล์ธีมบูทสแตรป และรับสไตล์ของคุณเองสำหรับปุ่มต่างๆ ได้ แต่คุณอาจถามว่าทำไมไม่ทำการเปลี่ยนแปลงเหล่านี้โดยตรงใน bootstrap.css ความจริงก็คือมีการเปิดตัวเฟรมเวิร์กเวอร์ชันใหม่อย่างต่อเนื่อง และหากคุณตัดสินใจที่จะอัปเกรด มันจะเป็นการยากที่จะนำการเปลี่ยนแปลงของคุณไปใช้กับเวอร์ชันใหม่ ถือเป็นรูปแบบที่ดีสำหรับนักพัฒนาที่จะไม่แตะต้องซอร์สโค้ดเมื่อคุณสามารถสร้างไฟล์แยกต่างหากและอธิบายการเปลี่ยนแปลงที่นั่น มันฉลาดกว่าและสะดวกกว่ามาก
จะติดตั้งธีม Bootstrap ใหม่ที่ดาวน์โหลดจากอินเทอร์เน็ตได้อย่างไร?มีเว็บไซต์จำนวนมากซึ่งส่วนใหญ่เป็นเว็บไซต์ต่างประเทศซึ่งคุณสามารถดาวน์โหลดธีมและเทมเพลตได้ฟรี เพื่อหลีกเลี่ยงความสับสน ลองพิจารณาเว็บไซต์ที่ออกแบบโดยใช้ Bootstrap เป็นเทมเพลต และธีมเป็นชุดกฎ CSS ที่แทนที่ลักษณะที่ปรากฏมาตรฐานขององค์ประกอบ
สามารถดาวน์โหลดธีมดังกล่าวได้จาก bootswatch.com/ และเมื่อใช้เครื่องมือค้นหาคุณจะพบธีมอื่นๆ อีกมากมาย
หลักการทั่วไปของการติดตั้งธีมดังกล่าวขึ้นอยู่กับไซต์ที่คุณดาวน์โหลด หากคุณสามารถดาวน์โหลดได้ในรูปแบบ bootstrap-theme เยี่ยมมาก ให้ดาวน์โหลดและเชื่อมต่อมัน ตัวอย่างเช่น บน bootswatch คุณต้องดาวน์โหลด bootstrap.css และแทนที่ไฟล์สไตล์เฟรมเวิร์กมาตรฐานของคุณด้วยไฟล์ดังกล่าว นอกจากนี้ยังมีตัวเลือกที่มีแหล่งที่มาน้อย
เริ่มต้นด้วยบทความนี้ เราจะเริ่มศึกษาเฟรมเวิร์ก Twetter Bootstrap 3 ซึ่งส่วนใหญ่ใช้ในการสร้างเว็บไซต์ แผงผู้ดูแลระบบ หน้า Landing Page และแอปพลิเคชันเว็บ เนื่องจากช่วยให้การพัฒนาง่าย โครงสร้างที่ชัดเจน และความสามารถในการปรับเปลี่ยนหน้าต่างๆ
การติดตั้งเทมเพลต Bootstrap 3 พื้นฐานหากต้องการใช้เครื่องมือและวิธีการ Bootstrap 3 คุณต้องไปที่ http://getbootstrap.com และดาวน์โหลดไฟล์เก็บถาวรด้วยโฟลเดอร์ css, ฟอนต์, js และไฟล์ที่เกี่ยวข้องข้างใน
หากคุณไม่ทราบวิธีเชื่อมต่อสไตล์ CSS และสคริปต์ js ฉันขอแนะนำให้ดูบทความนี้และบทความนี้ และในกรณีของเรา สไตล์ CSS จะเชื่อมต่อกันในส่วนต่างๆ
และสคริปต์ก่อนแท็กปิด
ที่ด้านล่างของหน้าฉันอยากจะทราบด้วยว่าการใช้ไฟล์ bootstrap.min.css และ bootstrap.min.js จะเป็นประโยชน์ต่อไซต์ของคุณ เนื่องจากไฟล์เหล่านี้มีขนาดเล็กกว่าและจะส่งผลเชิงบวกต่อความเร็วในการโหลด
การเชื่อมต่อฟอนต์ฟอนต์สามารถทำได้สองวิธี:
ควรใช้ตัวเลือกที่สอง แต่ไม่ว่าคุณจะเลือกวิธีใด การเชื่อมต่อจะดำเนินการเช่นนี้
@font-face( ตระกูลฟอนต์: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: ท้องถิ่น (glyphicons-halflings-regular), url (แบบอักษร/glyphicons-halflings- Regular.ttf); ) h2( ตระกูลฟอนต์: glyphicons-halflings-regular,sans-serif; )
หรือมากกว่าในแท็กสไตล์สำหรับวิธีแรก และแทรกข้อความทั้งหมดที่อยู่ภายในนั้นลงในไฟล์ css สำหรับวิธีที่สอง
การติดตั้ง jqueryเพื่อให้ Bootstrap 3 ทำงานได้อย่างถูกต้อง คุณจะต้องดาวน์โหลดไฟล์ไลบรารี jquery เพิ่มเติมจากเว็บไซต์อย่างเป็นทางการ jquery.com ผ่านลิงก์ และวางไว้ในโฟลเดอร์ js ของเว็บไซต์ของคุณ
การเชื่อมต่อ jquery เกิดขึ้นก่อนแท็กปิด
คุกกี้ช่วยให้เราให้บริการคุณได้ง่ายขึ้น ด้วยการใช้บริการของเรา คุณอนุญาตให้เราใช้คุกกี้
แต่อยู่ก่อนหน้าไฟล์ bootstrap.js
เนื่องจาก jquery ควรโหลดก่อนบูตสแตรป
Bootstrap 3 ตารางและขนาดหน้าจอพื้นฐานของ Bootstrap คือชุดของคลาสที่สร้างตาราง 12 คอลัมน์ (col-) ภายในตาราง รองรับหน้าจอ 5 ประเภท -xs- -sm- -md- -lg- -xl-
- -xs- ขนาดหน้าจอน้อยกว่า 575px;
- -sm- ขนาดหน้าจอมากกว่า 576px และไม่เกิน 767 px;
- -md- ขนาดหน้าจอมากกว่า 768px และไม่เกิน 991 px;
- -lg- ขนาดหน้าจอมากกว่า 992px และไม่เกิน 1199 px;
- -xl- ขนาดหน้าจอมากกว่า 1200px;
ดังนั้น div ที่มีคลาส col-lg-12 หมายความว่าบนหน้าจอขนาดใหญ่ คอลัมน์ div จะใช้เวลาถึง 12 คอลัมน์หรือ 100% ของความกว้าง ในทำนองเดียวกัน div col-sm-6 บนหน้าจอสมาร์ทโฟนจะใช้เวลาถึง 6 คอลัมน์หรือ 50% ของความกว้าง
ประเภทของภาชนะตาข่าย เค้าโครงเค้าโครงยางประเภทหลักของคอนเทนเนอร์สำหรับกริดคือคลาสคอนเทนเนอร์และคอนเทนเนอร์-ของเหลว
เมื่อใช้ภายในคอนเทนเนอร์ ตารางของคุณจะแสดงพื้นที่หนึ่งในสามของหน้าจอตรงกลาง โดยมีคอลัมน์ทั้งหมด 12 คอลัมน์ในบริเวณนี้
เมื่อวางกริดในคลาสคอนเทนเนอร์-ฟลูอิด องค์ประกอบโครงร่างทั้งหมดจะวางอยู่ทั่วทั้งหน้าจอ เช่นเดียวกับที่เป็นยาง และเมื่อความกว้างลดลง องค์ประกอบเหล่านี้จะเคลื่อนเข้าหากัน
ไม่มีคำแนะนำเฉพาะสำหรับการใช้คอนเทนเนอร์และคอนเทนเนอร์ฟลูอิด เนื่องจากทุกอย่างขึ้นอยู่กับโครงร่างการออกแบบและวัตถุประสงค์ของโครงร่าง อย่างไรก็ตาม การใช้คอนเทนเนอร์ฟลูอิดสำหรับแผงผู้ดูแลระบบของไซต์และคอนเทนเนอร์ก็เหมาะสม
นอกจากนี้ คลาส -fluid ยังสามารถใช้ได้ไม่เพียงแต่กับคลาสคอนเทนเนอร์เท่านั้น แต่ยังรวมถึงสตริงแถวด้วย เพื่อจัดเรียงองค์ประกอบในแถว อย่างไรก็ตาม หากคุณใส่แถวของเหลวในภาชนะปกติ คุณจะไม่สังเกตเห็นความแตกต่าง ชุดค่าผสมนี้เหมาะที่สุดที่จะใช้ภายนอก div.container เช่นนี้
สวัสดี ฉันคือเทมเพลต Bootstrap 3
ภาชนะของฉันไม่ใช่ของเหลว!
และฉันก็เป็นคนแถวของเหลว!เส้นสำหรับวางองค์ประกอบคลาสแถวใช้เพื่อวางองค์ประกอบตารางในหนึ่งแถวซึ่งช่วยให้คุณสามารถจัดเรียงองค์ประกอบเหล่านั้นในแนวนอนได้ แต่คุณต้องคำนึงว่าผลรวมของดัชนีในแถวไม่ควรเกิน 12 มิฉะนั้นองค์ประกอบสุดท้ายจะเป็น เลื่อนไปที่แถวที่สอง
หัวข้อที่ 1 หัวข้อที่ 2 หัวข้อที่ 3
หากคุณลดขนาดหน้าเบราว์เซอร์ ส่วนหัวจะเรียงกันในรายการแนวตั้งจากแถวแนวนอน
คลาสการมองเห็นองค์ประกอบระบบเค้าโครง Bootstrap 3 มีคลาสเพิ่มเติมสำหรับการแสดงหรือซ่อนองค์ประกอบบนอุปกรณ์และหน้าจอต่างๆ ถูกกำหนดให้เป็นที่มองเห็นได้-*-* และซ่อน-*
คลาสสำหรับการแสดงvisible-*-* หลังจากขีดแรก โดยปกติจะมีตัวระบุประเภทหน้าจอ (xs, sm, md, lg, xl) และหลังขีดที่สองจะมีขนาดคอลัมน์ (1-12) ตัวอย่างเช่น Visible-lg-6 - องค์ประกอบนี้มองเห็นได้บนหน้าจอขนาดใหญ่ กว้าง 6 คอลัมน์
การซ่อนคลาสที่ซ่อน-* หลังจากเครื่องหมายขีดกลาง จะมีตัวระบุประเภทหน้าจอ (xs,sm,md,lg,xl) ตัวอย่างเช่น องค์ประกอบมาร์กอัปที่มีคลาสที่ซ่อน xs จะไม่ปรากฏให้เห็นบนอุปกรณ์ขนาดเล็ก (ขนาดหน้าจอน้อยกว่า 575px)
การรวมองค์ประกอบเหล่านี้เข้าด้วยกันจะทำให้คุณสามารถแสดงหรือซ่อนคอนเทนเนอร์ div ได้:
หัวข้อที่ 1 หัวข้อที่ 2
ชื่อแรกจะปรากฏให้เห็นบนอุปกรณ์ขนาดใหญ่ ในขณะที่ชื่อที่สองจะหายไปบนหน้าจอขนาดเล็ก เมื่อต้องการทำเช่นนี้ ให้ลดขนาดของหน้าต่างเบราว์เซอร์เพื่อให้ขนาดมีความกว้างใกล้เคียงกับหน้าจอของอุปกรณ์เคลื่อนที่
นอกจากนี้ ในคอนเทนเนอร์ div ในคลาส ให้ระบุแสดงหรือซ่อน แต่ในกรณีนี้คุณสมบัติการแสดงผลจะไม่เปลี่ยนแปลงเมื่อหน้าจอเปลี่ยน: หากมองเห็นได้ ก็จะมองเห็นได้ หากซ่อนอยู่ จากนั้นเพียงลบคำที่ซ่อนอยู่ออกจากคลาสเท่านั้นที่จะ ให้คุณมองเห็นองค์ประกอบที่ต้องการ
คำสั่งสื่อใน Bootstrap 3ในการใช้คำสั่งสื่อ CSS คุณต้องระบุสัญลักษณ์พิเศษ @media ในไฟล์ css และระบุความกว้างหน้าจอขั้นต่ำและ/หรือสูงสุดในวงเล็บ หากในมาร์กอัป CSS ปกติ คุณต้องเขียนขนาดหน้าจอเป็นพิกเซล ใน Bootstrap 3 คุณสามารถเขียนโครงสร้างต่อไปนี้:
@media (ความกว้างขั้นต่ำ: @ screen-sm-min) ( ... ) @media (ความกว้างขั้นต่ำ: @ screen-md-min) ( ... ) @media (ความกว้างขั้นต่ำ: @ screen-lg- นาที)( ... )
การเปลี่ยนลำดับขององค์ประกอบอีกหนึ่งคลาสที่น่าสนใจที่ให้คุณย้ายบล็อกภายในคอนเทนเนอร์ได้ คลาส push จะย้ายองค์ประกอบไปทางขวา และคลาส pull ไปทางซ้าย
เมื่อรวมจากคอนเทนเนอร์ที่อยู่ติดกัน คุณสามารถเปลี่ยนลำดับของคอนเทนเนอร์หลังเมื่อเปลี่ยนขนาดหน้าจอ ในตัวอย่างนี้ บนหน้าจอขนาดใหญ่ (-lg-) หัวข้อที่ 2 จะอยู่ทางด้านซ้ายและหัวข้อที่ 1 ทางด้านขวา เมื่อความกว้างของหน้าจอลดลงเหลือขนาดกลาง (-md-) องค์ประกอบจะเปลี่ยนไปและลำดับจะเปลี่ยนไป กลายเป็นลำดับ
หัวข้อที่ 1 หัวข้อที่ 2
ฉันขอสรุปความคุ้นเคยครั้งแรกนี้กับระบบเค้าโครง Bootstrap 3 คุณได้เรียนรู้วิธีการติดตั้งสไตล์เทมเพลตและสคริปต์ องค์ประกอบกริดพื้นฐาน ข้อความค้นหาสื่อ ประเภทคอนเทนเนอร์ ฯลฯ ในบทความต่อไปนี้ เราจะดูองค์ประกอบเสริมและองค์ประกอบเพิ่มเติม: เมนู ปุ่ม แถบเลื่อน ไอคอน และอื่นๆ อีกมากมาย
24 กุมภาพันธ์ 2555 เวลา 21:25 น. ส่วนต่อประสานผู้ใช้ที่ใช้ Twitter Bootstrap สำหรับผู้เริ่มต้น- การออกแบบเว็บ
เกริ่นนำ ในเวลาว่างของฉัน ในฐานะงานอดิเรก ฉันพัฒนาเครื่องมือรวบรวมหัวข้อข่าวที่น่าสนใจในหน้าเดียว เมื่อถึงจุดหนึ่งฟังก์ชันพื้นฐานของต้นแบบก็พร้อมแล้วสิ่งเดียวที่ขาดหายไปคือช่องทำเครื่องหมายถัดจากงาน "การออกแบบ" คำชี้แจงของปัญหาเพื่อให้ได้ส่วนติดต่อผู้ใช้ที่สวยงามโดยไม่ต้องเชี่ยวชาญความมหัศจรรย์ของนักออกแบบ (คุณมีเพียงพื้นฐานเท่านั้น มีความรู้เรื่องสี) และโปรแกรมเมอร์ (คุณมีความรู้พื้นฐานเกี่ยวกับ html และ css เท่านั้น)
หน้านี้ประกอบด้วยองค์ประกอบต่อไปนี้
- ชื่อ
- แบบฟอร์มส่งลิงค์ข่าว
- แบบฟอร์มส่งรหัสเครื่องอ่านที่ไม่ซ้ำกันทางอีเมล
- แบบฟอร์มการป้อนรหัสผู้อ่านที่ไม่ซ้ำ
- รายการข่าวจัดกลุ่มตามวันที่ (วันที่ เวลา ลิงค์ชื่อเรื่อง จำนวนคลิก ข่าวสามารถอ่านหรือใหม่ได้)
- ลิงค์ไปยังอาร์เอส
- ลิงก์ไปยังส่วนขยายของ Chrome
- รหัสการเปิดตัว
- อีเมลตอบรับ
... ...
จำเป็นต้องใช้บรรทัดที่สองเพื่อปรับอินเทอร์เฟซให้เข้ากับอุปกรณ์ที่ Bootstrap รองรับโดยอัตโนมัติ ขั้นตอนที่ 2 ออกแบบ "เนื้อสัตว์" โดย “เนื้อ” ฉันหมายถึงรายการข่าว วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ตารางที่ปิดใช้งานเฟรม คอลัมน์แรกคือวันที่ (เพียงครั้งเดียวต่อกลุ่ม) คอลัมน์ที่สองคือเวลา คอลัมน์ที่สามคือชื่อเรื่องและจำนวนการเปลี่ยน ทั้งหมดนี้ตามกฎของ Bootstrap จะต้องบรรจุในคอนเทนเนอร์:
| (วันที่) | (เวลา) | (ชื่อเรื่อง) ((จำนวนการเปลี่ยนภาพ)) |
สำหรับการอ่านข่าวเราระบุชั้นเรียนพิเศษ:
(Headline) ขั้นตอนที่ 3. แบบฟอร์มสำหรับส่งลิงค์ข่าว ที่นี่ทุกอย่างเรียบง่ายอีกครั้ง Bootstrap มีสไตล์แบบฟอร์มสำเร็จรูปหลายรูปแบบ: แบบฟอร์มปกติ, แบบฟอร์มบรรทัดเดียว, แบบฟอร์มการค้นหา... เราต้องการรูปแบบที่สอง เพิ่มลงในคอนเทนเนอร์ของเราที่ด้านหน้าโต๊ะ:
เพิ่ม ...
class="span10" - Bootstrap ถือว่าสร้างอินเทอร์เฟซตามตาราง 12 คอลัมน์ องค์ประกอบของเราสามารถจัดแนวตามนั้นได้ ด้วยวิธีการทางวิทยาศาสตร์ของการลองผิดลองถูก ฉันมาถึงความกว้างของช่องอินพุตเท่ากับ 10 ขั้นตอนที่ 4,5,6 หมวกแก๊ป ความคิดของฉันเกี่ยวกับลักษณะของเว็บไซต์ที่เป็นมิตรต่อผู้ใช้ควรแนะนำสไตล์มินิมอลลิสต์: ทุกสิ่งที่ไม่จำเป็นจะถูกซ่อนไว้ ทุกสิ่งที่ไม่สามารถซ่อนได้จะซีดเซียว เราซ่อนแบบฟอร์มในเมนูแบบเลื่อนลง ทำให้ลิงก์ไปยัง rss และส่วนขยายของ Chrome ซีดจาง เราแพ็คทั้งหมดนี้ลงในส่วนหัวซึ่งเราติดไว้ที่ด้านบนของไซต์ (class = “navbar navbar-fixed-top”):
*** ...
แบบฟอร์มเอง:
... ×ส่งรหัสที่ไม่ซ้ำกันทางอีเมล ยกเลิกการส่ง ×ป้อนรหัสเครื่องอ่านที่ไม่ซ้ำกัน
ช่วยให้คุณสามารถซิงโครไนซ์ข่าวสารที่อ่านบนคอมพิวเตอร์เครื่องอื่นได้
ยกเลิกการส่งจุดสำคัญ. เพื่อให้ใช้งานได้ คุณต้องเชื่อมต่อสคริปต์สองสามตัว:
...
...
เผยแพร่ 2012/02/19 23:49 *****
ResultEpilogue Twitter Bootstrap ทำให้เป็นไปได้โดยไม่ต้องใช้ความพยายามและความรู้มากนัก โดยไม่ต้องเขียน CSS แม้แต่บรรทัดเดียวและไม่ทำลายโค้ด html มากนัก เพื่อให้ได้อินเทอร์เฟซต้นแบบที่ดีมากซึ่งคุณไม่ละอายใจที่จะแสดงให้ผู้คนเห็น หากคุณสนใจในบทความถัดไปฉันจะบอกคุณว่าหากไม่มีความรู้เชิงลึกเกี่ยวกับ PHP + MySQL (ด้วยทักษะการเขียนโปรแกรมขั้นพื้นฐานเท่านั้น) คุณสามารถใช้ฟังก์ชันที่ช่วยให้คุณแสดงแนวคิดล้านดอลลาร์ของคุณไม่เพียง แต่บนกระดาษ แต่ ในรูปแบบของต้นแบบการทำงานขอขอบคุณสำหรับความสนใจของคุณ!
UPD: ฉันไม่ต้องการลบหัวข้อใน “ฉันเป็น PR” ฉันลบลิงก์ที่ไม่จำเป็นทั้งหมดออกแล้ว
เพื่อนๆ ฉันคิดว่า Bootstrap เป็นสิ่งที่เจ๋งมาก ฉันจะพยายามอธิบายว่าทำไมจึงเป็นเช่นนั้นในบทความนี้ ไปกันเถอะ ฉันขอโทษทันทีที่บทความเกือบครึ่งแรกเขียนโดยไม่มีรูปภาพมีเพียงทฤษฎีคำอธิบายวิธีการทำงานของกริด แต่นี่สำคัญมาก! ใครก็ตามที่ต้องการมัน จะต้องรับมันไว้ในมือของเขา อ่านมัน และหวังว่าจะเข้าใจ ช่วงครึ่งหลังของบทความมีการรับรู้ได้ง่ายขึ้นแล้วมีตัวอย่างเพิ่มเติมพร้อมภาพหน้าจอ
Bootstrap - มันคืออะไร?เรามาเริ่มด้วยคำถามสำคัญกันดีกว่า Bootstrap เป็นเฟรมเวิร์ก CSS และ JS โดยพื้นฐานแล้วคือชุดของไฟล์ที่มีโค้ดเขียนสำเร็จรูป เป้าหมายของนักพัฒนาเกือบทุกเฟรมเวิร์กคือการทำให้การพัฒนาเว็บไซต์ง่ายขึ้นสำหรับตนเองและผู้อื่นที่จะสามารถเข้าถึงเครื่องมือนี้ได้ ในกรณีของ Bootstrap นั้นไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น ดังนั้นคุณจึงสามารถใช้งานได้ทุกทาง แก้ไขซอร์สโค้ด และปรับแต่งเฟรมเวิร์กตามที่คุณต้องการ มันสมบูรณ์แบบ
การติดตั้งบูทสแตรปหากคุณเพียงต้องการเชื่อมต่อไฟล์เฟรมเวิร์กกับเอกสาร HTML (เช่น เพื่อการฝึกฝน) เพียงดาวน์โหลดเฟรมเวิร์กจากเว็บไซต์อย่างเป็นทางการ getbootstrap.com คัดลอกไฟล์ลงในโปรเจ็กต์และเชื่อมต่อไฟล์ที่คุณต้องการ ฉันขอสรุปภาพรวมโดยย่อของไฟล์เหล่านี้:
นี่คือชุดมาตรฐานของกรอบงาน ในความเป็นจริงคุณสามารถปรับแต่งและเปลี่ยนแปลงให้เหมาะกับคุณได้ ตัวอย่างเช่น อย่าใช้สคริปต์เลยหรือเชื่อมต่อเพียงตารางเดียว โดยทั่วไปเราจะพูดถึงเรื่องนี้ด้วย
เอกสาร Bootstrap ของรัสเซียเมื่อคุณเยี่ยมชม getbootstrap คุณอาจสังเกตเห็นว่าทุกอย่างที่นี่เป็นภาษาอังกฤษ เราสามารถใช้ความช่วยเหลือจากรัสเซียในกรอบงานได้ มันหาง่าย เมื่อต้องการทำเช่นนี้ ให้ไปจากหน้าหลักไปยังส่วนการเริ่มต้นใช้งาน เลื่อนลงไปด้านล่างสุดจะมีลิงค์คำแปล มองหาภาษารัสเซียที่นั่นแล้วคลิกที่มัน เพียงเท่านี้คุณก็อยู่ในเว็บไซต์เวอร์ชันรัสเซียแล้ว จริงอยู่ ไม่ใช่ทุกอย่างที่ได้รับการแปลที่นี่ แต่มีบางที่ประมาณ 70-80% ที่ถูกต้อง ดังนั้นคุณจะเข้าใจทุกอย่าง
ตาราง Bootstrapไม่ว่าใครจะพูดอะไร องค์ประกอบหลักของ Bootstrap ก็คือตารางที่ตอบสนอง โดยทั่วไปหากไม่มีเฟรมเวิร์กก็จะสูญเสียคุณค่าเกือบทั้งหมด เนื่องจากกริดที่คุณสามารถสร้างเทมเพลตที่ปรับเปลี่ยนได้อย่างรวดเร็ว ในเวลาเดียวกัน คุณอาจไม่คุ้นเคยกับ Media Queries เลย คุณไม่จำเป็นต้องใช้มันเลย เนื่องจากเฟรมเวิร์กจะดูแลเรื่องความสามารถในการปรับตัว คุณเพียงแค่ต้องกำหนดคลาสที่ถูกต้องให้กับบล็อก
คลาสเหล่านี้คืออะไร? มาดูเอกสารกันดีกว่ามันจะช่วยเราได้มาก ไปที่ส่วน CSS - ระบบกริด กฎทั่วไปสำหรับการทำงานกับกริดนั้นเรียบง่าย ฉันจะแสดงรายการตอนนี้
จะทำงานกับกริดได้อย่างไร?คิดว่ามันเป็นตาราง html หากคุณเคยเขียนโค้ด HTML สำหรับตาราง คุณจะรู้ว่าเนื้อหาทั้งหมดถูกวางไว้ในแท็กตาราง มีแถวหนึ่งอยู่ในแท็ก tr จากนั้นเซลล์จะถูกวางไว้ - td
ดังนั้นทุกอย่างจึงคล้ายกันในตาราง คลาสคอนเทนเนอร์ทำหน้าที่เป็นคอนเทนเนอร์ทั่วไปสำหรับกริด มี 2 ตัวเลือกสำหรับตารางบูตสแตรป - ยางทั้งหมดและยังคงมีความกว้างสูงสุดที่จำกัด ดังนั้น เมื่อบล็อกทั่วไปได้รับคลาสคอนเทนเนอร์ ไซต์จะมีความกว้างสูงสุด 1170 พิกเซล มันจะไม่ขยายตัวอีกต่อไป โดยปกติแล้วเนื้อหาจะเป็นศูนย์กลาง
หากคุณตั้งค่าคลาสของเหลวในคอนเทนเนอร์ ตาข่ายจะเป็นยางทั้งหมด กล่าวคือ จะไม่มีข้อจำกัดด้านขนาด ตัวอย่างเช่น หากมีคนเปิดเว็บไซต์บนจอภาพกว้าง 1920 พิกเซล เขาจะเห็นเว็บไซต์เต็มความกว้าง
ดังนั้นสิ่งแรกในการพัฒนาเว็บไซต์คือการตัดสินใจว่าเทมเพลตจะเป็นอย่างไร - ยางทั้งหมดหรือความกว้างยังคงต้องจำกัด
เยี่ยมเลย บล็อกคอนเทนเนอร์ควรมีแถวตาราง คุณต้องวางบล็อกทั้งหมดที่อยู่ในบรรทัดเดียว นั่นคือถ้าเราใช้เทมเพลตทั่วไปที่สุด: ส่วนหัว, ส่วนหลัก, คอลัมน์ด้านขวาและส่วนท้ายก็จะมี 3 คอลัมน์ อันแรกจะมีเฉพาะส่วนหัว ส่วนอันที่สองจะมีเนื้อหาและแถบด้านข้าง และอันสุดท้ายจะมีส่วนท้าย มาร์กอัปสำหรับไซต์ดังกล่าวจะมีลักษณะดังนี้:
เนื้อหาส่วนหัว... และแถบด้านข้างส่วนท้าย
แต่สำหรับตอนนี้ นี่เป็นมาร์กอัปที่ผิด เพราะมันหายไป... อะไรนะ? ถูกต้องเซลล์! ในกรณีของ Bootstrap จะเรียกว่าคอลัมน์ ตารางบูตสแตรปประกอบด้วย 12 คอลัมน์ สามารถฝังลงในบล็อกที่มีความกว้างใดก็ได้ อย่างน้อย 1,200 พิกเซล อย่างน้อย 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 ประกอบด้วยความจริงที่ว่าคุณสามารถซ่อนหรือทำให้มองเห็นบล็อกใด ๆ ตามความกว้างที่คุณต้องการได้ ตัวอย่างเช่น ซ่อนคอลัมน์ด้านข้างโดยสิ้นเชิงบนหน้าจอแคบ เพิ่มองค์ประกอบใหม่บนอุปกรณ์เคลื่อนที่ เพิ่มคอลัมน์บนหน้าจอกว้าง เป็นต้น
มีตัวเลือกแอปพลิเคชันมากมาย แต่ฉันไม่ได้บอกคุณเกี่ยวกับสิ่งที่สำคัญที่สุด: จะใช้ยูทิลิตี้เหล่านี้อย่างไร ในการดำเนินการนี้ เพียงเพิ่มคลาสลงในบล็อกที่ต้องการ หากคุณต้องการซ่อนมัน เพียงระบุคลาสต่อไปนี้:
ส่วนท้าย
คลาส Hidden-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 Block เพิ่มเติมสำหรับเมนู ซึ่งควรวางไว้หลังบล็อกด้วยคลาส Container-fluid อย่าลืมปิดบล็อคนี้นะครับ ฉันให้คลาส navbar-wrap แก่มัน นี่คือสไตล์ของมัน:
นั่นคือคุณสามารถจำกัดความกว้างและจัดกึ่งกลางได้ หรือเริ่มแรกแทนที่คอนเทนเนอร์-ของเหลวด้วยคอนเทนเนอร์
อย่างที่คุณเห็น เราได้เพิ่มโลโก้ รายการง่ายๆ สองรายการ รายการแบบเลื่อนลง และแบบฟอร์มการค้นหาลงในเมนู นั่นคือมีองค์ประกอบหลายอย่าง คุณสามารถปรับแต่งเมนูด้วยตัวคุณเองได้อย่างง่ายดายโดยเพิ่มคลาสของคุณเองลงไป แต่สำหรับตอนนี้เป้าหมายของฉันคือเพียงแสดงให้คุณเห็นส่วนประกอบนี้
นี่คือลักษณะของเมนูบนอุปกรณ์ที่มีความกว้างหน้าจอน้อยกว่า 768 พิกเซล:
อย่างที่คุณเห็นเมนูยุบลง จะเปิดขึ้นเมื่อคุณคลิกที่ปุ่มที่มุมขวาบน มีเพียงโลโก้เท่านั้นที่ยังคงอยู่บนหน้าจอ
เมนูแบบเลื่อนลงในเวลาเดียวกัน จากตัวอย่างด้านบน คุณจะเข้าใจได้ว่ารายการเมนูแบบเลื่อนลงถูกสร้างขึ้นใน Bootstrap อย่างไร มาแยกโค้ดนี้เพื่อดูรายละเอียดเพิ่มเติม:
ดังนั้นคอนเทนเนอร์สำหรับรายการแบบเลื่อนลงจึงเป็นรายการปกติที่มีคลาสแบบเลื่อนลง ข้างในเป็นลิงค์หลักซึ่งจะเปิดเมนูแบบเลื่อนลง มันสำคัญมากที่จะต้องกำหนดแอตทริบิวต์ข้อมูลซึ่งคุณเห็นในโค้ด หากไม่มีสิ่งนี้ก็จะไม่มีอะไรทำงาน คุณควรตรวจสอบให้แน่ใจด้วยว่าไฟล์ bootstrap.js เชื่อมต่อกับหน้าเว็บแล้ว
ช่วงที่มีคลาสคาเร็ตนั้นไม่มีอะไรมากไปกว่าลูกศรซึ่งคุณสามารถเข้าใจได้ว่ารายการนั้นเป็นรายการแบบเลื่อนลงและด้านล่างเมนูนั้นถูกสร้างขึ้นโดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อยมาตรฐาน เพียงเท่านี้ ทุกอย่างก็ค่อนข้างง่าย คุณสามารถใช้โค้ดนี้เพื่อใช้งานรายการแบบเลื่อนลงได้
การเพิ่ม Breadcrumbs (Breadcrumbs) โดยใช้ Bootstrapในร้านค้าหลายแห่ง คุณจะพบสิ่งที่เรียกว่าก้อนขนมปังซึ่งมีเส้นทางแบบเต็มไปยังหน้าปัจจุบัน นอกจากนี้ยังทำได้ง่ายโดยใช้เฟรมเวิร์ก ดูโค้ด:
ในความเป็นจริงการระบุคลาส breadcrumb สำหรับรายการลำดับเลขก็เพียงพอแล้วและป้อนรายการปกติลงไป อย่างไรก็ตาม ฉันจะจัดส่วนหัวระดับที่สองไว้ตรงกลางในเทมเพลต (ซึ่งต้องเขียนด้วย CSS):
H2( การจัดข้อความ: กึ่งกลาง; )
หากคุณต้องการเปลี่ยนรูปลักษณ์ของ breadcrumb เพียงใช้ตัวเลือก .breadcrumb ใน CSS ตัวอย่างเช่น คุณสามารถลบสีพื้นหลังได้ดังนี้:
เกล็ดขนมปัง (พื้นหลัง: โปร่งใส; )
นี่คือลักษณะของไซต์ตอนนี้:
ตามค่าเริ่มต้น ตารางจะขยายออกไปทั่วทั้งหน้าต่าง ดังนั้นให้ห่อตารางไว้ในกล่องที่มีความกว้างจำกัดเพื่อจำกัดขนาด ตามค่าเริ่มต้นมันดูแย่มาก แต่ถ้าคุณเพิ่มคลาสตารางลงในแท็กตาราง ทุกอย่างจะดีขึ้นมาก:
