วัตถุประสงค์หลักของบทความนี้ช่วยให้คุณเรียนรู้ที่จะใช้ Twitter Bootstrap เพื่อสร้างเว็บไซต์ภายใน 20 นาที วิธีการสร้างเว็บไซต์มีการแนะนำด้านล่าง:
สิ่งแรกที่จะพูดคือ Twitter Bootstrap เป็นเฟรมเวิร์กโอเพ่นซอร์สด้านหน้าที่ยอดเยี่ยมมาก มันให้กรณีการใช้งานโดยละเอียดสำหรับการจัดกลุ่มคีย์ทั้งหมดช่วยให้คุณสามารถแนบกับการออกแบบของคุณได้อย่างง่ายดายโดยการคัดลอกและวาง
เทมเพลต HTML พื้นฐาน
เราจำเป็นต้องใช้เทมเพลต HTML พื้นฐานเพื่อให้เราสามารถรวมไฟล์ bootstrap ที่เราต้องการ นี่คือจุดเริ่มต้นของโครงการ Bootstrap Twitter ของเราคัดลอกรหัสเหล่านี้ลงในไฟล์และชื่อ It Index.html
<! doctype html> <head> <title> twitter bootstrap tutorial - การสอนเค้าโครงตอบสนอง </title> <style type = 'text/css'> body {พื้นหลังสี: #ccc; } </style> </head> <body> </body> </html>ในรหัสนี้เราได้เพิ่ม CSS บางส่วนเพื่อทำให้พื้นหลังของหน้าเว็บสดใสเป็นสีเทาเพราะวิธีนี้เราสามารถเห็นคอลัมน์ที่แตกต่างกันในการออกแบบของเราทำให้เข้าใจได้ง่ายขึ้น
แนะนำไฟล์ bootstrap Twitter
ในการใช้ Twitter Bootstrap เราต้องแนะนำไฟล์ลงในเทมเพลตของเราเท่านั้น มีหลายวิธีในการแนะนำไฟล์ หากคุณต้องการทราบวิธีการเหล่านี้โปรดปรึกษาเอกสารที่เกี่ยวข้อง
จากจุดเริ่มต้นของบทช่วยสอนนี้เราจะแนะนำไฟล์ bootstrap-combined.min.css ผ่าน CDN โดยไม่ต้องดาวน์โหลดไฟล์ใด ๆ
การคัดลอกรหัสมีดังนี้: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "Stylesheet">>
Twitter Bootstrap CSS มีผลในเทมเพลตของเรา
คอนเทนเนอร์ของ Twitter Bootstrap
คลาสคอนเทนเนอร์ของ bootstrap มีประโยชน์มาก มันสามารถสร้างพื้นที่ศูนย์กลางในหน้าแล้วเราสามารถใส่เนื้อหาของสถานที่อื่น ๆ ภายใน คลาสคอนเทนเนอร์เทียบเท่ากับการสร้างกล่อง DIV ที่มีความกว้างคงที่และค่า Magin ของอัตโนมัติ ข้อได้เปรียบของคลาสคอนเทนเนอร์ของ Bootstrap Twitter คือการตอบสนองและคำนวณความกว้างที่ดีที่สุดตามความกว้างของหน้าจอปัจจุบันเพื่อจุดประสงค์ในทางปฏิบัติ
ในแท็กร่างกายใช้คลาสคอนเทนเนอร์เพื่อสร้าง div มันจะทำหน้าที่เป็น wrapper ด้านนอกหลักสำหรับรหัสอื่น ๆ ในหน้า
หากคุณปรับความสูงของ div นี้และตั้งค่าสีพื้นหลังเป็นสีขาวเอฟเฟกต์ที่คุณเห็นจะเป็นเช่นนี้:
ชื่อและการนำทาง
ตอนนี้เรามีสถานที่ที่จะเพิ่มรหัส HTML พิเศษเราสามารถเพิ่มข้อความชื่อเรื่องแล้วสร้างแถบการนำทางหลักสำหรับเว็บไซต์
เพิ่มข้อความต่อไปนี้หรือข้อความที่คุณเลือกไปยังแท็ก div ของคลาสคอนเทนเนอร์
<h1> บทช่วยสอน bootstrap Twitter </h1>
ตอนนี้ไม่ค่อยใหม่มากตอนนี้เป็นเพียงชื่อเรื่องเรามาย้ายไปที่มุมมองที่น่าสนใจยิ่งขึ้นของการนำทาง Bootstrap Twitter
Bootstrap มีคลาส NAV ที่ช่วยให้เราสามารถสร้างองค์ประกอบการนำทางที่หลากหลาย คุณสามารถเพิ่มรหัสต่อไปนี้หลังจากแท็ก H1
<div class = 'navbar navbar-inverse'> <div class = 'nav-collapse' style = "ความสูง: auto;"> <ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> หน้าหนึ่ง </a> </li>
คลาสที่เกี่ยวข้องกับ Navbar มีสไตล์ทั้งหมดของแถบการนำทาง การเพิ่มคลาส Navbar-Inverse จะใช้สไตล์สีดำเย็นซึ่งเป็นการผสมผสานระหว่าง Twitter Bootstrap ฉันขอแนะนำให้ขยายสไตล์นี้เพื่อสร้างการนำทางที่เป็นเอกลักษณ์ของคุณ แต่ในบทช่วยสอนนี้เราจะยังคงใช้สไตล์ bootstrap พื้นฐาน
ใน div ที่มี Class Navbar เราเพิ่ม DIV อื่นด้วย class nav-collapse และเพิ่มความสูงสไตล์อินไลน์: อัตโนมัติ; สิ่งนี้บอก Bootstrap ว่าเมื่อหน้านี้อยู่ในหน้าต่างเบราว์เซอร์ที่มีความกว้างน้อยกว่า 970px มันจะให้มุมมองสวิตช์บีบอัด
หากคุณบันทึกไฟล์ index.html และเปิดในเบราว์เซอร์คุณจะสามารถเห็นการเปลี่ยนแปลงนี้เมื่อคุณปรับความกว้างของหน้าต่างเบราว์เซอร์ดังที่แสดงในรูป
มากกว่า 979px:
น้อยกว่า 979px:
นอกจากนี้เราสามารถเพิ่มคลาส NAV ในองค์ประกอบรายการ HTML ที่ไม่ได้เรียงลำดับเพื่อใช้สไตล์เพิ่มเติมจากไฟล์ Bootstrap CSS หรือเราสามารถเพิ่มคลาสที่ใช้งานได้ในรายการ "บ้าน"
แบ่งปันบทความที่ยอดเยี่ยมเกี่ยวกับการนำทาง bootstrap: "การนำทางที่ต้องเรียนรู้ทุกวันโดย bootstrap", "การนำทางที่ต้องเรียนรู้ทุกวันโดย bootstrap"
เนื้อหาหลักและแถบด้านข้าง
เราได้เสร็จสิ้นการนำทางหลักของเว็บไซต์และตอนนี้เราจำเป็นต้องเพิ่มพื้นที่เนื้อหาหลักและแถบด้านข้างเพื่อรองรับลิงก์หรือเส้นทางการนำทางเพิ่มเติม โปรดเพิ่มรหัสต่อไปนี้ลงในแถบการนำทาง
<div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2> ส่วนเนื้อหาหลัก </h2> </div> <div class = 'span3 แถบด้านข้าง'> <h2> แถบด้านข้าง </h2> </div> </div>
นี่คือสิ่งที่เราต้องเข้าใจเกี่ยวกับระบบแรสเตอร์ของ Bootstrap แน่นอนว่าเอกสาร Bootstrap อย่างเป็นทางการครอบคลุมรายละเอียดเพิ่มเติม แต่เราจะเริ่มต้นด้วยพื้นฐานและให้คุณเข้าใจได้ดีขึ้น
ระบบแรสเตอร์ใช้เลย์เอาต์ 12 คอลัมน์ซึ่งหมายความว่าสามารถแบ่งหน้าออกเป็น 12 คอลัมน์ที่เหมือนกัน ภาพต่อไปนี้ที่ได้จากเอกสาร Bootstrap อย่างเป็นทางการให้การแสดงผลที่ดี
ในรหัสเราเพิ่งวางในแถบการนำทางคุณจะเห็นคลาสที่ชื่อว่า Span9 และ Span3 พวกเขาจะแบ่งหน้าออกเป็นสองส่วนของคอลัมน์ 9 ทางด้านซ้ายและ 3 คอลัมน์ทางด้านขวาสร้างพื้นที่เนื้อหาและแถบด้านข้างของเรา หนึ่งในประโยชน์ของการใช้ระบบแรสเตอร์คือมันคำนวณความกว้างของคอลัมน์ตามความกว้างของหน้าต่างแบบไดนามิกดังนั้นคุณไม่จำเป็นต้องเขียนแบบสอบถามสื่อใด ๆ เพื่อให้ไซต์ของคุณทำงานได้ทุกความละเอียดของหน้าจอ
คุณสามารถสังเกตผลของพวกเขาได้โดยการเปลี่ยนจำนวนช่วงและปรับขนาดของเบราว์เซอร์ของคุณ คุณจะสังเกตเห็นว่าเมื่อพื้นที่เนื้อหาน้อยกว่า 724px คอลัมน์เหล่านี้จะเรียงซ้อนในแนวตั้ง
ตอนนี้เราใส่ข้อความต่อไปนี้หรือข้อความอื่น ๆ ที่อยู่ด้านหลังแท็ก H2 ในพื้นที่เนื้อหาหลักเพียงเพื่อยืดหน้าเล็กน้อย
คัดลอกรหัสดังนี้: psum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat UT WISI ENIM AD ขั้นต่ำ Veniam, Quis Nostrud การออกกำลังกาย sta ullamcorper suscipit lobortis nisl ut aliquip ex ea Commodo ผลที่ตามมา duis autem vel eum iriure dolor ใน Hendrerit ใน vulputate velit esse molestie ผลที่ตามมา, vel illum dolore eu feugiat nulla facilisis ที่ Vero eros etcumsan et iusto odio dignisisim qui blanditit Nam Liber Tempor Cum Soluta Nobis Eleifend ตัวเลือก congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
<p> typi non non habent clariitatem insitam; est usus legitis ใน iis qui facit eorum clariitatem การตรวจสอบแสดงให้เห็นถึงการเปิดเผย Clariitres Legende Me Lius Quod II legunt Saepius Claritas Est Etiam Process Dynamicus, Qui Sequencer Mutationem Consuetudium legorum mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum รูปแบบมนุษยธรรมต่อ Seacula quarta decima et Quinta decima Eodem Modo Typi, Qui Nunc Nobis Videntur Parum Clari, Fiant Sollemnes ใน Futurum. </p>
ตอนนี้เว็บไซต์จะแสดงดังนี้:
การนำทางแถบด้านข้าง
คุณสามารถดูองค์ประกอบการนำทางทั้งหมดที่ Twitter Bootstrap มอบให้เราที่นี่ (twitter.github.com/bootstrap/components.html#navs)
เราจะใช้แท็บแนวตั้งเพื่อสร้างพื้นที่นำทางเพิ่มเติม คัดลอกและวางรหัสต่อไปนี้ลงในแท็ก H2 ของแถบด้านข้าง
<ul> <li> <a href = '#'> ลิงค์อื่น 1 </a> </li> <li> <a href = '#'> ลิงค์อื่น 2 </a> </li> <li> <a href = '#'> ลิงค์อื่น 3 </a> </li></ul>
นี่คือจอแสดงผลง่ายๆ! รหัสข้างต้นเป็นเพียงรายการที่ไม่ได้เรียงลำดับด้วยคลาส NAV-TABS และ NAV ที่ซ้อนกัน แต่มันสร้างแผงนำทางสำหรับเรา
เมื่อดูที่เอฟเฟกต์สุดท้ายหน้าเว็บที่ใช้ Twitter Bootstrap เสร็จสิ้นแล้ว
หลังจากอ่านบทช่วยสอนนี้คุณควรใช้ bootstrap เพื่อสร้างหน้าเค้าโครงตอบสนองพื้นฐานเข้าใจระบบกริดและสามารถใช้ bootstrap เพื่อนำทางแถบการนำทางและเข้าใจพื้นฐานของการออกแบบที่ตอบสนอง
เนื้อหาเพิ่มเติมเกี่ยวกับ bootstrap สามารถพบได้ในหัวข้อพิเศษ: "การสอนการเรียนรู้ bootstrap"
ทั้งหมดข้างต้นเป็นความรู้ที่จำเป็นในการใช้ bootstrap Twitter ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน ฉันหวังว่าคุณจะใช้เวลามากขึ้นและทำให้สมบูรณ์แบบ ในอนาคตอันใกล้คุณสามารถเป็นผู้เชี่ยวชาญในการบูตสแตรป