โดย Parichat » 10/01/2018 3:10 pm
Navigation Bar คือเมนูหลักที่ลิงค์ไปยังเนื้อหาของเว็บไซน์นั้นๆที่ทำสร้างด้วย
Bootstrap
โครงสร้างหลักๆที่ต้องมีคือ
โค้ด: เลือกทั้งหมด
<nav class="navbar navbar-default">
//*******text********
</nav>
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MindPHP</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JAVA</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>ตัวอย่างพื้นฐานการใช้ Navbar</h3>
<p>โดยสามารถนำไปปรับใช้กับงานอะไรก็ได้และสามารถปรับแต่งเปลี่ยนสีได้</p>
</div>
</body>
</html>
ผลลัพธ์
อ้างอิง :
https://www.w3schools.com/bootstrap/boo ... navbar.asp
[b]Navigation Bar[/b] คือเมนูหลักที่ลิงค์ไปยังเนื้อหาของเว็บไซน์นั้นๆที่ทำสร้างด้วย [url=https://www.mindphp.com/forums/viewforum.php?f=76]Bootstrap[/url]
โครงสร้างหลักๆที่ต้องมีคือ
[code]<nav class="navbar navbar-default">
//*******text********
</nav>[/code]
ตัวอย่าง
[code]<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MindPHP</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JAVA</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>ตัวอย่างพื้นฐานการใช้ Navbar</h3>
<p>โดยสามารถนำไปปรับใช้กับงานอะไรก็ได้และสามารถปรับแต่งเปลี่ยนสีได้</p>
</div>
</body>
</html>
[/code]
ผลลัพธ์
[attachment=0]tghjk.JPG[/attachment]
อ้างอิง : [url]https://www.w3schools.com/bootstrap/bootstrap_navbar.asp[/url]