การจัดแนวข้อความภายในย่อหน้าหรือบล็อก div สามารถตั้งค่าได้โดยใช้คลาส: "text-left", "text-center" และ "text-right"

คุณสามารถตั้งค่าสีเริ่มต้นสำหรับข้อความย่อหน้าได้โดยใช้คลาสเน้นสีต่างๆ เช่น "ปิดเสียง" - สีเทา "คำเตือนข้อความ" - สีแดง "ข้อความผิดพลาด" - สีแดงเข้ม "ข้อมูลข้อความ" - สีฟ้าอ่อน และ “ข้อความ- ความสำเร็จ” - สีเขียว

Twitter Bootstrap ยังรองรับเค้าโครงตารางตามค่าเริ่มต้น รหัสต่อไปนี้ใช้สำหรับสิ่งนี้:

คุณสามารถเพิ่มรูปภาพโดยใช้แท็กปกติ - เพื่อให้การออกแบบของคุณดูน่าสนใจยิ่งขึ้น คุณสามารถเพิ่มคลาส "img-rounded" สำหรับรูปภาพที่มีมุมโค้งมน "img-circle" สำหรับการเลื่อนรูปภาพ และ "img-โพลารอยด์" เพื่อสร้างเงาและเส้นขอบรอบปริมณฑลของรูปภาพ .

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

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

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

เมื่อคุณศึกษาแล้ว คุณจะพบกับแอปพลิเคชันใหม่ๆ มากมายสำหรับตัวคุณเองอย่างแน่นอน

ในบทความถัดไป ฉันจะบอกคุณเกี่ยวกับการสร้างเว็บไซต์แบบตอบสนองโดยใช้ Twitter Bootstrap

การแปลบทความ “Twitter Bootstrap Tutorial – การจัดการการออกแบบที่ซับซ้อน” จัดทำขึ้นโดยทีมงานโครงการที่เป็นมิตร

ดีไม่ดี

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

ข้อเสียของการใช้เฟรมเวิร์กคือ เพจจะต้องมีสไตล์พิเศษของเฟรมเวิร์กทั้งหมด แม้ว่าจะใช้งานเพียงส่วนเล็กๆ เท่านั้นก็ตาม เฟรมเวิร์กเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างต้นแบบและการสร้างเพจที่มีการออกแบบเป็นรอง เช่น หน้าผู้ดูแลระบบ หากคุณมีการออกแบบที่เฉพาะเจาะจงมาก การจัดวางโดยใช้เฟรมเวิร์กอาจทำได้ยากกว่าการใช้เครื่องมือแบบเนทีฟ อย่างไรก็ตาม สิ่งนี้ก็เป็นไปได้เช่นกัน

หลังจากนั้นเพื่อที่จะเปลี่ยนสไตล์ Bootstrap คุณต้องเปลี่ยนสไตล์ใน styles.css ของคุณดังนี้:

เอ ( color: #beceda; )
ข้อเสียที่เห็นได้ชัดเจน แนวทางนี้คือคุณจะต้องค้นหาสไตล์ที่จำเป็นที่คุณต้องการขัดจังหวะด้วยตนเอง ซึ่งสิ่งนี้จะไม่ใช่เรื่องเล็กน้อยเสมอไป เพราะ ตัวเลือก Bootstrap บางตัวใช้ได้กับตัวเลือกหลายตัวในรูปแบบที่แก้ไข เช่น ผ่านสูตร เครื่องมือปรับแต่งสามารถช่วยรวบรวมการเปลี่ยนแปลงของคุณได้อย่างถูกต้อง แต่เพียงครั้งเดียวเท่านั้น หากในอนาคตคุณต้องการเปลี่ยนพารามิเตอร์บางอย่าง คุณจะต้องป้อนค่าที่เปลี่ยนแปลงสำหรับทุกฟิลด์อีกครั้งเพื่อรวบรวมสไตล์ของคุณ

มีอยู่ จำนวนมากวิธีรวบรวมไฟล์ LESS และ Bootstrap ปล่อยให้สิ่งนี้ขึ้นอยู่กับดุลยพินิจของผู้พัฒนา Bootstrap ใช้ Grunt ในการรวบรวม คุณอาจต้องการปลั๊กอินสำหรับผลิตภัณฑ์ JetBrains และเนื่องจากบทความนี้มุ่งเป้าไปที่ผู้เริ่มต้น เราจะมองหาวิธีแก้ปัญหาที่ง่ายกว่า โซลูชันดังกล่าว ได้แก่ WinLess สำหรับ Windows, SimpleLESS สำหรับ Mac หรือ Koala สำหรับ Linux โปรแกรมทั้งหมดนี้ทำสิ่งเดียวกันโดยประมาณ: รับโฟลเดอร์ที่มีไฟล์ LESS เป็นอินพุตและรับฟังการเปลี่ยนแปลงในโปรแกรมเหล่านั้น ทันทีที่คุณทำการเปลี่ยนแปลงไฟล์ใด ๆ ไฟล์นั้นจะถูกคอมไพล์ทันที CSS ที่ระบุไฟล์. ด้วยวิธีนี้คุณไม่จำเป็นต้องรันการคอมไพล์ด้วยตนเองหลังการเปลี่ยนแปลงทุกครั้ง คุณเปลี่ยนไฟล์ LESS บันทึกและดูการเปลี่ยนแปลงบนไซต์ทันทีในรูปแบบที่คอมไพล์และบีบอัดแล้ว

• ภาพจะถูกตัดยังไง?
• จะใช้ส่วนประกอบอะไรบ้าง?
• รูปแบบหลักจะเป็นอย่างไร?
• เราจะได้เค้าโครงหน้าแบบใด

บันทึกภาพแผนที่:

มาบันทึกโลโก้ดังต่อไปนี้:

รูปภาพ/logo.png
รูปภาพ/ส่วนท้าย-logo.png

ซ้ำ ภาพพื้นหลังต้องตัดเป็นชิ้นขั้นต่ำพอที่จะขึ้นรูป ภาพเต็มการทำซ้ำในแนวตั้งและแนวนอน

/images/bg.png
/images/h1-bg.png

สะดวกในการบันทึกไอคอนเครือข่ายโซเชียลที่มีขนาดเท่ากันเป็นไฟล์เดียวและใช้เป็นสไปรท์เพื่อการโหลดที่รวดเร็วยิ่งขึ้น รายละเอียดเพิ่มเติมเกี่ยวกับการติดภาพมีการอธิบายไว้ในส่วนแรก ผลลัพธ์จะเป็นสองไฟล์:

/images/social.png
/images/social-small.png

หากคุณดูเทมเพลตของเรา คุณจะเห็นว่าเราต้องการส่วนประกอบต่อไปนี้:

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

@brand-font: "Oswald",sans-serif;
หากคุณต้องการใช้เทมเพลตสำหรับไซต์ในรัสเซีย คุณสามารถลองแทนที่ฟอนต์ Oswald ด้วย Cuprum ที่ใกล้เคียงที่สุด ซึ่งรองรับ Cyrillic

ตอนนี้มาแทนที่การตั้งค่า Bootstrap ด้วยของเราเอง:

ตอนนี้เราเสร็จสิ้นกับตัวแปรแล้ว มาเริ่มจัดสไตล์การออกแบบของเราในไฟล์ styles.less กันดีกว่า ก่อนอื่น มาเชื่อมต่อ Bootstrap กับตัวแปรของเรากันก่อน:

@import "bootstrap/bootstrap.less"; @import "ตัวแปร.น้อย";
สไตล์เริ่มต้นของ Bootstrap ไม่สามารถเปลี่ยนแปลงได้ทั้งหมดโดยใช้ตัวแปร ดังนั้นเรามาดำเนินการด้วยตนเอง:

P ( ระยะขอบ: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( ตระกูลแบบอักษร: @brand-font; )
ที่นี่เราได้ลบเงาออกจากองค์ประกอบของแบบฟอร์ม และกำหนดแบบอักษรของหน้าเฉพาะให้กับข้อความในปุ่ม

จากนั้นเราจะอธิบายพื้นหลังของหน้าและแถบด้านบน:

เนื้อความ ( ขอบบน: 5px solid #7e7e7e; ภาพพื้นหลัง: url(../images/bg.png); )
นอกจากนี้ในข้อความจะไม่ระบุว่าไฟล์ใดที่มีการเขียนสไตล์ เพียงจำไว้ว่าเราบันทึกตัวแปรทั้งหมดในไฟล์ Variables.less และสไตล์ CSS จะถูกจัดเก็บไว้ใน Styles.less

ไวท์สแควร์
บล็อกนี้สร้างโครงสร้างเอกสาร HTML5 ในชื่อเรื่องเราระบุชื่อเพจของเรา – Whitesquare ด้วยเมตาแท็กวิวพอร์ต เราระบุว่าความกว้างของหน้าคือ อุปกรณ์เคลื่อนที่ ax จะเท่ากับความกว้างของหน้าจอและมาตราส่วนเริ่มต้นจะเป็น 100% จากนั้นรวมไฟล์สไตล์ไว้ด้วย และสำหรับรุ่นต่างๆ อินเทอร์เน็ตเอ็กซ์พลอเรอร์น้อยกว่าเก้า เราเชื่อมต่อสคริปต์ที่ช่วยให้เราสามารถแสดงเค้าโครงของเราได้อย่างถูกต้อง

มาเพิ่มโค้ดต่อไปนี้ในเนื้อหา:

ที่นี่เราเจอส่วนประกอบ Bootstrap แรก - คอลัมน์ องค์ประกอบหลักของคอลัมน์จะได้รับคลาส "แถว" และคลาสคอลัมน์เริ่มต้นด้วยคำนำหน้า "col-" จากนั้นขนาดหน้าจอ (xs, sm, md, lg) และลงท้ายด้วยความกว้างสัมพัทธ์ของคอลัมน์ .

คอลัมน์สามารถกำหนดคลาสที่แตกต่างกันพร้อมกันด้วยค่าสำหรับหน้าจอเช่น class="col-xs-12 col-md-8" คลาสเหล่านี้เพียงตั้งค่าความกว้างของคอลัมน์เป็นเปอร์เซ็นต์สำหรับขนาดหน้าจอเฉพาะ หากคอลัมน์ไม่ได้รับคลาสหน้าจอเฉพาะ คลาสสำหรับหน้าจอเฉพาะขั้นต่ำจะถูกนำไปใช้ และหากไม่ได้ระบุ จะไม่มีการใช้ความกว้าง และบล็อกจะใช้ความกว้างสูงสุดที่เป็นไปได้

คลาสของเรา "col-md-7" และ "col-md-17" ระบุว่าบล็อกเป็นคอลัมน์ที่มีความกว้าง 7 และ 17 สัมพันธ์กับคอนเทนเนอร์หลัก ตามค่าเริ่มต้น ผลรวมของความกว้างคอลัมน์ใน Bootstrap คือ 12 แต่เราเพิ่มจำนวนนี้สองเท่าเพื่อให้เกิดความยืดหยุ่นที่เราต้องการ

เนื้อความ ( … .wrapper ( padding: 0 0 50px 0; ) ส่วนหัว ( padding: 20px 0; ) )
เราวางโครงสร้างนี้ไว้ภายในร่างกาย ไวยากรณ์ LESS ช่วยให้คุณสามารถซ้อนกฎภายในกันและกันได้ ซึ่งจากนั้นจะรวบรวมเป็นโครงสร้างต่อไปนี้:

Body .wrapper (…) ส่วนหัวของเนื้อหา (…)
วิธีนี้จะทำให้คุณมองเห็น โครงสร้าง HTMLอยู่ภายใน CSS และให้ "ขอบเขต" บางอย่างแก่กฎต่างๆ

ใส่โลโก้ลงในแท็กส่วนหัว:

ไม่จำเป็นต้องมีรูปแบบเพิ่มเติม

ในการสร้างการค้นหา เราจำเป็นต้องมีส่วนประกอบ Bootstrap ต่อไปนี้: แบบฟอร์มอินไลน์ การควบคุมที่จัดกลุ่ม และปุ่ม
ในแท็กส่วนหัว เราสร้างแบบฟอร์มอินไลน์โดยจัดชิดขวา ฟิลด์ของแบบฟอร์มดังกล่าวจะต้องมีคลาส "การควบคุมแบบฟอร์ม" และป้ายกำกับ

เราวางส่วนประกอบ "การควบคุมแบบกลุ่ม" ลงในแบบฟอร์ม การควบคุมการจัดกลุ่มช่วยให้คุณสามารถลบช่องว่างระหว่างการป้อนข้อความและปุ่ม และรวมเข้าด้วยกันเป็นองค์ประกอบเดียว
เป็น div ที่มีคลาสและฟิลด์ "input-group" และปุ่มของส่วนประกอบดังกล่าวจะอยู่ในบล็อกที่มีคลาส "input-group-btn"

เนื่องจากเราไม่จำเป็นต้องแสดงป้ายกำกับสำหรับช่องค้นหา เราจะซ่อนมันไว้ในคลาส "sr-only" สิ่งนี้จำเป็นสำหรับโปรแกรมอ่านหน้าจอโดยเฉพาะ

มีการเพิ่มคลาส "btn-primary" ให้กับปุ่ม ซึ่งหมายความว่านี่คือปุ่มหลักของแบบฟอร์มนี้

…ค้นหาไป
สิ่งที่เราเหลือคือตั้งค่าความกว้างของแบบฟอร์มการค้นหาในสไตล์

เนื้อความ ( … .wrapper ( … ส่วนหัว ( … .form-search ( width: 200px; ) ) ) )

หากต้องการแสดงเมนู ให้ใช้ส่วนประกอบ "แผงนำทาง" และวางองค์ประกอบ "การนำทาง" ซึ่งเป็นรายการพร้อมลิงก์ สำหรับการนำทาง จะมีการเพิ่มคลาส "navbar-nav" ซึ่งใช้รูปแบบการนำทางพิเศษภายในแถบการนำทาง

• บ้าน
• เกี่ยวกับเรา
• บริการ
• พันธมิตร
• ลูกค้า
• โครงการ
• อาชีพ
• ติดต่อ

/*ความสูงแถบนำทาง*/ @navbar-height: 37px; /*ตั้งค่าช่องว่างภายในแนวนอนเพิ่มเติม*/ @nav-link-padding: 10px 30px; /*พื้นหลังสำหรับรายการเมนู*/ @navbar-default-bg: @panel-bg; /*สีข้อความในรายการเมนู*/ @navbar-default-link-color: #b2b2b2; /*และเมื่อเลื่อนเมาส์ - เหมือนกัน*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*พื้นหลังของรายการเมนูที่ใช้งานอยู่คือสีน้ำเงินเฉพาะของเรา*/ @navbar-default-link-active-bg: @brand-primary; /*สีข้อความของรายการเมนูที่ใช้งานอยู่*/ @navbar-default-link-active-color: #fff;
นอกเหนือจากพารามิเตอร์ที่ปรับแต่งได้ เราจะอธิบายพารามิเตอร์เพิ่มเติมในรูปแบบ - นี่คือข้อความตัวพิมพ์ใหญ่และแบบอักษรเฉพาะของเรา:

เนื้อความ ( … .wrapper ( … .navbar a ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; แบบอักษร: 14px @brand-font; ) ) )

ชื่อหน้าถูกวางไว้ใน div โดยมีคลาส "หัวเรื่อง"

เกี่ยวกับเรา
และมีรูปแบบดังนี้

เนื้อความ ( … .wrapper ( … .heading ( height: 40px; พื้นหลัง: transparent url(../images/h1-bg.png); Margin: 30px 0; padding-left: 20px; h1 ( display: inline-block; สี: #7e7e7e; แบบอักษร: ปกติ 40px/40px "Oswald", sans-serif; พื้นหลัง: url(../images/bg.png);
ที่นี่เราวาดแถบสีเทาเป็นพื้นหลังบน div และแทรก h1 แบบอินไลน์ลงไปพร้อมกับแบบอักษรและพื้นหลังสีหน้าที่ต้องการเพื่อสร้างความรู้สึกของพื้นหลังโปร่งใสสำหรับ h1

เมื่อสร้างเมนูย่อยเราจะไม่ใช้องค์ประกอบ "การนำทาง" เนื่องจากในรูปแบบไม่เหมาะกับเรามากนัก ดังนั้นองค์ประกอบ "รายการที่จัดกลุ่ม" จึงเหมาะกับเรามากกว่ามาก แต่ละองค์ประกอบขององค์ประกอบดังกล่าวมีคลาส "list-group-item"

เมนูย่อยควรอยู่ในแท็กข้างกัน เราสร้างรายการลิงก์ในลักษณะเดียวกับเมนูหลัก

• ลอเรม อิปซัม
• ดอนเน็ก ลังเลใจ เล่ารีต
• ห้องโถงชั้นสูง
• เอเทียม ภารตรา
• เฟสเซลลัส พลารัต
• Cras และ nisi vitae odio

@ รายชื่อกลุ่ม-bg: @ แผง-bg; @ list-group-border: @ แผงด้านในขอบ;
และใช้สไตล์ต่อไปนี้กับเมนูย่อย:

เนื้อความ ( … .wrapper ( … .submenu ( ขอบด้านล่าง: 30px; li ( จอแสดงผล: list-item; แบบอักษร: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding : 10px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; &.active ( สี: @brand-primary; ) a ( สี: @text-color; ตกแต่งข้อความ: ไม่มี; &:hover ( สี: @text-color; ) ) ) )
ขั้นแรก เราจะคืนสไตล์มาตรฐานให้กับองค์ประกอบรายการ เนื่องจาก Bootstrap แทนที่สไตล์เหล่านั้นด้วยสไตล์ของตัวเอง เพิ่มช่องว่างภายในที่ด้านล่าง เมนูย่อยใช้แบบอักษรที่บางกว่าและเครื่องหมายสี่เหลี่ยม และสำหรับลิงก์ เราได้ตั้งค่าสี ตัวพิมพ์ใหญ่ และลบการขีดเส้นใต้ออก เครื่องหมายและในโค้ด "&.active" จะถูกแทนที่ด้วยตัวเลือกหลัก ณ เวลาคอมไพล์โดยใช้ไวยากรณ์ LESS: ".submenu li.active"

ในการแสดง เราจะใช้ส่วนประกอบ "แผง" หรือใช้รูปแบบ "แผง-หลัก" แทนสำหรับการระบายสีชื่อเรื่อง ส่วนประกอบนี้ประกอบด้วยบล็อกส่วนหัว (ส่วนหัวของแผง) และบล็อกเนื้อหาแผง (เนื้อหาแผง) เราเพิ่มคลาส "img-responsive" ให้กับภาพแผนที่ ซึ่งจะทำให้ภาพหดตัวลงเมื่อความกว้างของหน้าจอมีขนาดเล็ก

… สำนักงานของเรา
ในตัวแปร Bootstrap เราได้ตั้งค่าสีสำหรับพื้นหลังของพาเนล (panel-bg) แล้ว และตอนนี้เราจะระบุว่าพาเนล "หลัก" จะมีเส้นขอบสีเทาของพาเนลเริ่มต้น แทนที่จะเป็นสีน้ำเงินเริ่มต้น:

@ แผงหลักเส้นขอบ: @ แผงภายในเส้นขอบ;
ขณะนี้ในรูปแบบไซต์คุณต้องเปลี่ยนการตั้งค่าพาเนลมาตรฐานซึ่งไม่เปลี่ยนแปลงผ่านตัวแปร:

แผงหน้าปัด ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body ( padding: 10px; ) )
ที่นี่เราลบเงาออกจากแผง เพิ่มการเยื้องของเราเอง และตั้งค่าแบบอักษรหัวเรื่องของเราเอง

องค์ประกอบของหน้านี้คล้ายกับส่วนประกอบ Jumbotron มากที่สุด มาเพิ่มลงในคอลัมน์เนื้อหา:

“แปลกใน enim velit ที่ dignissim est” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat”

@jumbotron-bg: @brand-primary; @jumbotron-สี: #fff;
และมาอธิบายสไตล์ของเรา:

Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 ตัวเอียง 33px @brand-font; text-transform: ตัวพิมพ์ใหญ่; ขอบล่าง: 0; ) เล็ก ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before ( content: ""; ) ) )
ในนั้น เราจะลบการปัดเศษมุม การเสริมส่วนประกอบ และการตกแต่งเครื่องหมายคำพูดที่ Bootstrap กำหนดไว้ตามค่าเริ่มต้น เราจะเพิ่มสไตล์ให้กับแบบอักษรของเราด้วย

Lorem ipsum dolor นั่งด้วยกัน...

Donec vel nisl nibh…

Donec vel nisl nibh…

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

@ การขยายภาพขนาดย่อ: 1px; @ รูปขนาดย่อ-เส้นขอบ: #c9c9c9;

เมื่อจะวางบล็อกนี้ เรามาเพิ่มชื่อเรื่องกันก่อน:

ทีมงานของเรา
มีสไตล์:

เนื้อความ ( … .wrapper ( … h2 ( พื้นหลัง: none เลื่อนซ้ำ 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; ) ) )
จากนั้นเราจะเพิ่มบล็อกด้วยคลาส "ทีม" ซึ่งประกอบด้วยสองบรรทัดที่มีบัตรพนักงาน การ์ดแต่ละใบเป็นคอลัมน์ การ์ดมีความกว้างเท่ากับสี่คอลัมน์ในตารางของเรา การ์ดทั้งหมดยกเว้นใบแรกในบรรทัดจะมีการเยื้องซ้าย ซึ่งสร้างขึ้นโดยคลาส "col-md-offset-1" เนื้อหาของการ์ดประกอบด้วยรูปภาพและคำอธิบาย (.caption)

จอห์น โด ซอนดรา พิตต์สลีย์

หัวหน้ากลุ่ม

ผู้กำกับศิลป์

นักออกแบบ UI อาวุโส

เนื้อความ ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- ซ้าย: 3.7%; ) .caption ( h3 ( แบบอักษร: 300 16px @brand-font; ระยะขอบ: 0; ) p ( แบบอักษร: 300 14px @brand-font; สี: @brand-primary; ระยะขอบ: 0; ) ) ) )
นอกเหนือจากการเยื้องและรูปแบบแบบอักษรที่ตั้งไว้ที่นี่แล้ว เรายังเปลี่ยนคลาส “col-md-offset-1” เขาต้องตั้งค่าเยื้องเป็น 3.7% เพราะ... การเยื้องมาตรฐานใหญ่เกินไป

ขั้นแรก เรามาสร้างคอนเทนเนอร์ส่วนท้ายด้วยบล็อกเหล่านี้:

และใช้การออกแบบกับมัน:

ส่วนท้าย ( พื้นหลัง: #7e7e7e; สี: #dbdbdb; ขนาดตัวอักษร: 11px; .container ( ความสูง: 110px; การขยาย: 10px 0; ) )
แท็กส่วนท้ายจะกำหนดพื้นที่สีเทาตลอดความกว้างทั้งหมดของหน้าจอ และคอนเทนเนอร์ที่อยู่ภายในจะแสดงพื้นที่ตรงกลางบนหน้าจอขนาดใหญ่ และระบุความสูงและช่องว่างภายในของส่วนท้าย เราใช้คอลัมน์เพื่อจัดแนวบล็อกไว้ในส่วนท้าย

ฟีดทวิตเตอร์ 23 ต.ค

ในคำฟุ่มเฟือย pellentesque Massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper และ nulla ใน eget mi dui นั่ง amet scelerisque nunc เอเนียน ส.ค

เนื้อความ ( ... ส่วนท้าย ( ... .container ( ... h3 ( border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand -font; ระยะขอบ: 0 0 10px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ) p ( ระยะขอบ: 5px 0; ) .twitter ( p ( padding-right: 15px; ) เวลา a ( สี: #b4aeae; การตกแต่งข้อความ: ขีดเส้นใต้; ) ) )
สำหรับส่วนหัวของส่วนท้ายทั้งหมด เราจะตั้งค่าแบบอักษรและการเยื้อง และยังสร้างขีดเส้นใต้ผ่านกรอบด้านล่างอีกด้วย สำหรับย่อหน้า ให้ระบุการเยื้อง สำหรับลิงค์ที่แสดงวันที่ ให้ตั้งค่าสีและขีดเส้นใต้

แผนผังเว็บไซต์ บ้าน เกี่ยวกับ บริการ พันธมิตร สนับสนุน ติดต่อ
เราตั้งค่าลิงก์ไปยังสี แบบอักษร และช่องว่างระหว่างลิงก์เหล่านั้น

เนื้อความ ( ... ส่วนท้าย ( ... .container ( ... a ( color: #dbdbdb; ) .sitemap a ( display: block; font-size: 12px; margin-bottom: 5px; ) ) ) )

เราแทรกชุดลิงก์ลงในบล็อกด้วยคลาส "โซเชียล"

สังคมออนไลน์
และจัดสไตล์พวกเขา:

เนื้อความ ( … ส่วนท้าย ( … .container ( … .social ( .social-icon ( width: 30px; height: 30px; พื้นหลัง: url(../images/social.png) no-repeat; display: inline-block; Margin - ขวา: 10px; .social-icon-small ( กว้าง: 16px; ความสูง: 16px; พื้นหลัง: url(../images/social-small.png) ไม่ซ้ำ; แสดง: บล็อกอินไลน์; ระยะขอบ: 5px 6px 0 0; ) .twitter ( ตำแหน่งพื้นหลัง: 0 0; ) .facebook ( ตำแหน่งพื้นหลัง: -30px 0; ) .google-plus ( ตำแหน่งพื้นหลัง: -60px 0; ) .vimeo ( ตำแหน่งพื้นหลัง: 0 0 ; ) .youtube ( ตำแหน่งพื้นหลัง: -16px 0; ) .flickr ( ตำแหน่งพื้นหลัง: -32px 0; ) .instagram ( ตำแหน่งพื้นหลัง: -48px 0; ) .rss ( ตำแหน่งพื้นหลัง: -64px 0; ) ) ) ) )
ที่นี่เราใช้เทคนิคสไปรท์ - เมื่อใช้ไฟล์รูปภาพหนึ่งไฟล์สำหรับรูปภาพที่ต่างกัน ลิงก์ทั้งหมดแบ่งออกเป็นไอคอนขนาดใหญ่ (.social-icon) และลิงก์ขนาดเล็ก (.social-icon-small) เราตั้งค่าคลาสเหล่านี้ให้แสดงเป็นบล็อกอินไลน์ด้วย ขนาดคงที่และพื้นหลังเดียวกัน แล้วด้วย ใช้ CSSเราย้ายพื้นหลังนี้เพื่อให้รูปภาพที่เกี่ยวข้องปรากฏในแต่ละลิงก์

Copyright 2012 Whitesquare. การสร้าง pcklab

เนื้อความ ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; ขนาดตัวอักษร: 10px; text-align: right; a ( การตกแต่งข้อความ: ขีดเส้นใต้; ) ) ) ) )

นี่เป็นการเสร็จสิ้นเค้าโครง สามารถดาวน์โหลดโครงการที่เสร็จแล้วได้

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

เลย์เอาต์ Adaptive Bootstrap - มันเชื่อมโยงถึงกันอย่างไร? ทำไมคุณถึงต้องมี Framework อยู่แล้ว มันคืออะไร ช่วยได้อย่างไร และทำให้ชีวิตง่ายขึ้นจริงหรือ? ฉันจะบอกวิธีใช้โปรแกรมให้เกิดประโยชน์สูงสุดโดยไม่กระทบต่อโครงการในอนาคตและจะหาบทเรียนดีๆ ได้ที่ไหน เรามาเริ่มกันเลยดีมั้ย?

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

นี่คือชุดของแอปพลิเคชัน สคริปต์ หรือปลั๊กอิน ที่ทำให้ง่ายต่อการสร้างแบบฟอร์มพิเศษบนไซต์ ภาพหมุนพร้อมรูปภาพ แสดงไซต์บนอุปกรณ์มือถือ หรือไม่ทำเช่นนี้ และอื่น ๆ

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

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

คุณสามารถดูว่า Bootstrap 3 มีความสามารถอะไรบ้างบนเว็บไซต์พร้อมเอกสารภาษารัสเซียในส่วน css, JavaScript และส่วนประกอบ หลังจากคลิกที่แท็บที่ต้องการ เมนูที่สะดวกมากจะปรากฏขึ้นทางด้านขวา ซึ่งช่วยให้คุณไปยังตำแหน่งที่ต้องการในเอกสารได้

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

หลักสูตรนั้นเอง ฝึกตั้งแต่ A ถึง Z“ใช้เวลาประมาณ 17 ชั่วโมง ในช่วงเวลานี้ คุณจะได้รับความรู้ทางทฤษฎีที่สำคัญ จากนั้นจึงฝึกฝนวิธีใช้องค์ประกอบบางอย่างอย่างถูกต้อง เช่น องค์ประกอบใดที่ต้องลบออกจากโค้ด สิ่งที่จำเป็นในการทำให้ไซต์ทำงานเร็วขึ้น คืออะไร และอื่นๆ อีกมากมาย

อีกหนึ่งหลักสูตรโบนัส โปรแกรมเสริม TOP 4 สำหรับ Bootstrap ที่จะช่วยให้เฟรมเวิร์กทำงานได้อย่างมีประสิทธิภาพมากขึ้น

นั่นดูเหมือนจะเป็นทั้งหมด สมัครรับจดหมายข่าวและเรียนรู้เพิ่มเติมเกี่ยวกับวิธีแก้ปัญหาง่ายๆ สำหรับปัญหาที่ซับซ้อนและแนวทางที่ถูกต้องเมื่อทำงานกับผลิตภัณฑ์ที่ไม่ค่อยเหมาะสม