ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Navigation Bar


แถบนำทาง

แถบนำทางเป็นหัวลูกศรที่ถูกวางไว้ที่ด้านบนของหน้านี้:

ด้วย Bootstrap , แถบนำทางสามารถขยายหรือยุบทั้งนี้ขึ้นอยู่กับขนาดของหน้าจอ

แถบนำทางมาตรฐานถูกสร้างขึ้นด้วย <nav class="navbar navbar-default">

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการเพิ่มแถบนำทางด้านบนสุดของหน้าเว็บ:

ตัวอย่าง

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
...
ลองตัวเอง»

ตัวอย่างทั้งหมดในหน้านี้จะแสดงแถบนำทางที่ใช้พื้นที่มากเกินไปในหน้าจอขนาดเล็ก ( แต่แถบนำทางจะอยู่ในบรรทัดหนึ่งเดียวบนหน้าจอขนาดใหญ่ - เพราะ Bootstrap มีการตอบสนอง) ปัญหานี้ (ที่มีหน้าจอขนาดเล็ก) จะได้รับการแก้ไขในตัวอย่างที่ผ่านมาในหน้านี้


Inverted ป้าย

ถ้าคุณไม่ชอบรูปแบบของแถบนำทางเริ่มต้นที่ Bootstrap ยังมีทางเลือก Navbar สีดำ:

เพียงแค่เปลี่ยน .navbar-default ระดับเข้า .navbar-inverse :

ตัวอย่าง

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
ลองตัวเอง»

คงที่ป้าย

แถบนำทางยังสามารถได้รับการแก้ไขที่ด้านบนหรือด้านล่างของหน้า

แถบนำทางคงอยู่ที่มองเห็นอยู่ในตำแหน่งที่คงที่ (บนหรือด้านล่าง) เป็นอิสระจากการเลื่อนหน้า

.navbar-fixed-top ชั้นทำให้แถบนำทางคงที่ด้านบน:

ตัวอย่าง

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
ลองตัวเอง»

.navbar-fixed-bottom ชั้นทำให้การเข้าพักแถบนำทางที่ด้านล่าง:

ตัวอย่าง

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
ลองตัวเอง»

แถบนำทางด้วยแบบเลื่อนลง

แถบนำทางยังสามารถถือเมนูแบบเลื่อนลง

ตัวอย่างต่อไปนี้เพิ่มเมนูแบบเลื่อนลงสำหรับปุ่ม "หน้า 1":

ตัวอย่าง

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
ลองตัวเอง»

ชิดขอบขวาป้าย

.navbar-right ชั้นจะใช้ในการจัดขวาปุ่มแถบนำทาง

ในตัวอย่างต่อไปนี้เราใส่ "Sign Up" และปุ่ม "เข้าสู่ระบบ" ที่ด้านขวาในแถบนำทาง นอกจากนี้เรายังเพิ่ม glyphicon ในแต่ละของทั้งสองปุ่มใหม่:

ตัวอย่าง

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>
ลองตัวเอง»

ยุบป้าย

แถบนำทางใช้พื้นที่มากเกินไปในหน้าจอขนาดเล็ก

เราควรที่จะซ่อนแถบนำทาง; และแสดงเฉพาะเมื่อมันเป็นสิ่งจำเป็น

ในตัวอย่างต่อไปแถบนำทางจะถูกแทนที่ด้วยปุ่มที่มุมขวาด้านบน เฉพาะเมื่อมีการคลิกปุ่มแถบนำทางจะแสดง:

ตัวอย่าง

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»