การใช้งาน Navs ใน Bootstrap 4

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1853
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน Navs ใน Bootstrap 4

โพสต์โดย 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>

      ผลลัพธ์
      d1.JPG


      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
      d2.JPG (18.89 KiB) เปิดดู 411 ครั้ง


อ้างอิง : https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน