วิธีสร้างแถบนำทาง Bootstrap มาตรฐานและปุ่มสำหรับอุปกรณ์มือถือ
เผยแพร่แล้ว: 2022-02-16
Bootstrap เป็นเฟรมเวิร์ก HTML, CSS และ JavaScript คุณสามารถสร้างเว็บไซต์ที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นอันดับแรกได้อย่างง่ายดาย นำเสนอสไตล์ CSS ที่กำหนดไว้ล่วงหน้ามากมายสำหรับองค์ประกอบเว็บ รวมถึงแถบนำทาง
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างแถบนำทางแบบตอบสนอง Bootstrap พื้นฐานอย่างง่ายดาย จากนั้น คุณจะได้เรียนรู้วิธีใช้ปุ่ม Bootstrap Standard Navbar สำหรับอุปกรณ์มือถือ
เพื่อให้สามารถใช้ Bootstrap ได้ คุณต้องติดตั้งก่อน สำหรับจุดประสงค์ของบทช่วยสอนนี้ คุณสามารถติดตั้งได้ทุกที่บนพีซีในพื้นที่ของคุณ ไม่จำเป็นต้องเป็นเว็บเซิร์ฟเวอร์ ขอทำมันด้วยกัน.
ขั้นตอนที่ 1. ดาวน์โหลด Bootstrap
- ไปที่ getboostrap.com และคลิกที่ปุ่ม "ดาวน์โหลด Bootstrap":
- ในหน้า "เริ่มต้นใช้งาน" ถัดไป ให้คลิกปุ่ม "ดาวน์โหลด Bootstrap" อื่น:
- บันทึกไฟล์นี้ไว้ที่ใดก็ได้บนฮาร์ดไดรฟ์ของคุณ:
ขั้นตอนที่ 2. ติดตั้ง Bootstrap บนพีซีในพื้นที่ของคุณ
- เปิดเครื่องรูดไฟล์นี้
- เปลี่ยนชื่อโฟลเดอร์ผลลัพธ์เป็น bootstrap
ขั้นตอนที่ #3 สร้างไฟล์ index.html พื้นฐาน
- ในโฟลเดอร์ บูต สแตรปของคุณ ให้สร้างไฟล์ index.htm l ด้วยรหัสต่อไปนี้:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>ขั้นตอนที่ #4 สร้างแถบนำทางที่ตอบสนอง
- ใต้ div ของการเปิด ให้สร้าง div ใหม่ด้วยคลาส Bootstrap ของ คอนเทนเนอร์ :
<div class="container"><!-- Start navbar container div -->
- กด Enter สองสามครั้งเพื่อสร้างช่องว่างและปิด div ใหม่นี้:
</div><!-- Finish navbar container div -->
- ภายใน div คอนเทนเนอร์ ใหม่ของคุณ สร้างแท็ก nav สำหรับ navbar ใหม่ของคุณ:
<nav class="navbar navbar-default">
- บนแป้นพิมพ์ของคุณ ให้กดปุ่ม Enter สองสามครั้งแล้วปิดแท็ก:
- ภายในแท็ก nav ให้สร้าง div คอนเทนเนอร์ อื่นและเริ่มสร้างเนื้อหาจริงของ navbar:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- ลบแท็ก <h1> และเนื้อหา
- ค้นหาตำแหน่งที่ div navbar-header ของคุณปิดและด้านล่างสร้าง div อื่นโดยยังไม่มีคลาส
- ภายใน div นี้ ให้เริ่มรายการที่ไม่เรียงลำดับซึ่งมีองค์ประกอบจริงของแถบนำทางที่ตอบสนองของคุณ:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- บันทึกไฟล์ index.html ของคุณ
- เปิดไฟล์นี้ในเบราว์เซอร์ของคุณ ตอนนี้คุณควรเห็นแถบนำทางที่ตอบสนองของคุณ คุณเกือบจะพร้อมที่จะทำให้เป็นแถบนำทางมือถือมาตรฐานแล้ว ก่อนทำ เรามาปรับปรุงกันสักหน่อย
- โปรดกลับไปที่ไฟล์ index.html ของคุณ
- ในแท็ก การนำ ทางของคุณ ให้เปลี่ยน ค่าเริ่มต้น เป็น ผกผัน เพื่อรับโค้ดต่อไปนี้:
<nav class="navbar navbar-inverse">
- บันทึกไฟล์.
- กลับไปที่ไซต์ของคุณและรีเฟรชหน้า แถบนำทางของคุณดูดีขึ้นเล็กน้อยในขณะนี้:
ทำได้ดี! แถบนำทางที่ตอบสนองของคุณพร้อมให้คุณทำงานเพิ่มเติมแล้ว
ดูวิดีโอด้านล่างเพื่อเรียนรู้วิธีแทนที่แถบนำทางที่คุณเพิ่งสร้างด้วยปุ่มเมนู Bootstrap มาตรฐานสำหรับผู้ใช้มือถือ