วัตถุประสงค์หลักของบทความนี้ช่วยให้คุณเรียนรู้ที่จะใช้ Twitter Bootstrap เพื่อสร้างเว็บไซต์ภายใน 20 นาที วิธีการสร้างเว็บไซต์มีการแนะนำด้านล่าง:
เทมเพลต 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 โดยไม่ต้องดาวน์โหลดไฟล์ใด ๆ
การคัดลอกรหัสมีดังนี้: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "stylesheet">>>
ช่วยให้ 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 หรือเราสามารถเพิ่มคลาสที่ใช้งานได้ในรายการ "บ้าน"
เนื้อหาหลักและแถบด้านข้าง
เราได้เสร็จสิ้นการนำทางหลักของเว็บไซต์และตอนนี้เราจำเป็นต้องเพิ่มพื้นที่เนื้อหาหลักและแถบด้านข้างเพื่อรองรับลิงก์หรือเส้นทางการนำทางเพิ่มเติม โปรดเพิ่มรหัสต่อไปนี้ลงในแถบการนำทาง
<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 ในพื้นที่เนื้อหาหลักเพียงเพื่อยืดหน้าเล็กน้อย
<p> lorem ipsum dolor sit amet, consectetuer apiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat UT WISI ENIM AD ขั้นต่ำ Venia, 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 มอบให้เราได้ที่นี่
เราจะใช้แท็บแนวตั้งเพื่อสร้างพื้นที่นำทางเพิ่มเติม คัดลอกและวางรหัสต่อไปนี้ลงในแท็ก 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 เสร็จสิ้นแล้ว
สรุปแล้ว
ด้วยคุณสมบัติที่จัดทำโดย Twitter Bootstrap เราได้ให้การสอน bootstrap ขั้นพื้นฐานที่รวดเร็วมาก แต่ใช้เวลาสักครู่ในการฝึกฝนและอ่านเอกสารอย่างเป็นทางการเพิ่มเติมและคุณจะกลายเป็นผู้เชี่ยวชาญ bootstrap ในไม่ช้า
หลังจากอ่านบทช่วยสอนนี้คุณควรเข้าใจวิธีการใช้ระบบแรสเตอร์หลักการพื้นฐานของการนำทางและการออกแบบที่ตอบสนองต่อการตอบสนอง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น