โดย Parichat » 12/01/2018 1:21 pm
Navs ใน
Bootstrap 4 มีความน่าสนใจมากและมีรูปแบบหลากหลายให้เราเลือกใช้งานเพื่อนำไปใช้ link เนื้อหาในเว็บไซน์ของเรา
ตัวอย่างการนำ Navs มาใช้มีดังนี้
- 1.Nav Menus ก็สามารถจัดรูปแบบได้ 2 แบบ คือ
- 1.แนวนอน ก็สามารถจัดได้ว่าจะให้อยู่ซ้ายหรืออยู่ตรงกลางหรืออยู่ขวาของหน้าเว็บ
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ทดสอบการใช้งาน Nav</h2>
<p>การจัดให้อยู่ซ้ายของหน้าเว็บ โดยใช้ Class "nav":</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
<br>
<p class="text-center">การจัดให้อยู่กึ่งกลางของหน้าเว็บ โดยใช้ Class "justify-content-center":</p>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
<br>
<p class="text-right">การจัดให้อยู่ขวาของหน้าเว็บ โดยใช้ Class "justify-content-end":</p>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
</div>
</body>
</html>
ผลลัพธ์
2.แนวตั้ง หารเราอยากให้เว็บของเรามี link เป็นแนวตั้งก็สามารถใช้ class .nav flex-column ได้
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ทดสอบการใช้งาน Nav</h2>
<p>การจัดหน้าเว็บ โดยใช้ Class "nav flex-column":</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
</div>
</body>
</html>
ผลลัพธ์
- d2.JPG (18.89 KiB) Viewed 3787 times
อ้างอิง :
https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
[b][size=150][color=#FF00BF]Navs[/color][/size][/b] ใน [url=https://www.mindphp.com/forums/viewforum.php?f=76]Bootstrap 4[/url] มีความน่าสนใจมากและมีรูปแบบหลากหลายให้เราเลือกใช้งานเพื่อนำไปใช้ link เนื้อหาในเว็บไซน์ของเรา
[b][color=#FF0000]ตัวอย่างการนำ Navs มาใช้มีดังนี้[/color][/b]
[list]1.Nav Menus ก็สามารถจัดรูปแบบได้ 2 แบบ คือ
[list][b][color=#FF00BF]1.แนวนอน [/color][/b]ก็สามารถจัดได้ว่าจะให้อยู่ซ้ายหรืออยู่ตรงกลางหรืออยู่ขวาของหน้าเว็บ
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[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/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ทดสอบการใช้งาน Nav</h2>
<p>การจัดให้อยู่ซ้ายของหน้าเว็บ โดยใช้ Class "nav":</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
<br>
<p class="text-center">การจัดให้อยู่กึ่งกลางของหน้าเว็บ โดยใช้ Class "justify-content-center":</p>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
<br>
<p class="text-right">การจัดให้อยู่ขวาของหน้าเว็บ โดยใช้ Class "justify-content-end":</p>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
</div>
</body>
</html>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=1]d1.JPG[/attachment]
[color=#FF00BF][b]2.แนวตั้ง[/b][/color] หารเราอยากให้เว็บของเรามี link เป็นแนวตั้งก็สามารถใช้ class .nav flex-column ได้
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[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/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ทดสอบการใช้งาน Nav</h2>
<p>การจัดหน้าเว็บ โดยใช้ Class "nav flex-column":</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MindPHP</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">MindPHP Disabled</a>
</li>
</ul>
</div>
</body>
</html>[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=0]d2.JPG[/attachment]
[/list]
[/list]
[b]อ้างอิง[/b] : [url]https://www.w3schools.com/bootstrap4/bootstrap_navs.asp[/url]