Source

Navbar

ឯកសារ និងឧទាហរណ៍សម្រាប់បឋមកថារុករកដែលឆ្លើយតបដ៏មានឥទ្ធិពលរបស់ Bootstrap របាររុករក។ រួមបញ្ចូលការគាំទ្រសម្រាប់ម៉ាកយីហោ ការរុករក និងច្រើនទៀត រួមទាំងការគាំទ្រសម្រាប់កម្មវិធីជំនួយការដួលរលំរបស់យើង។

របៀបដែលវាដំណើរការ

នេះជាអ្វីដែលអ្នកត្រូវដឹងមុនពេលចាប់ផ្តើមជាមួយ navbar៖

Navbars ទាមទារការរុំ .navbarជាមួយ .navbar-expand{-sm|-md|-lg|-xl}សម្រាប់ការដួលរលំឆ្លើយតប និង ថ្នាក់ ពណ៌ចម្រុះ ។
Navbars និងមាតិការបស់ពួកគេគឺរាវតាមលំនាំដើម។ ប្រើ ធុងស្រេចចិត្ត ដើម្បីកំណត់ទទឹងផ្ដេករបស់វា។
ប្រើ ថ្នាក់ឧបករណ៍ប្រើប្រាស់ គម្លាត និង flex របស់យើង សម្រាប់ការគ្រប់គ្រងគម្លាត និងការតម្រឹមនៅក្នុងរបាររុករក។
Navbars ឆ្លើយតបតាមលំនាំដើម ប៉ុន្តែអ្នកអាចកែប្រែវាបានយ៉ាងងាយស្រួលដើម្បីផ្លាស់ប្តូរវា។ ឥរិយាបថឆ្លើយតបអាស្រ័យទៅលើកម្មវិធីជំនួយ JavaScript ដែលដួលរលំរបស់យើង។
Navbars ត្រូវបានលាក់តាមលំនាំដើមនៅពេលបោះពុម្ព។ បង្ខំពួកវាឱ្យបោះពុម្ពដោយបន្ថែម .d-printទៅ .navbar. សូមមើល ថ្នាក់ឧបករណ៍ប្រើប្រាស់ បង្ហាញ ។
ធានាបាននូវភាពងាយស្រួលដោយប្រើ <nav>ធាតុ ឬប្រសិនបើប្រើធាតុទូទៅដូចជា a <div>បន្ថែម a role="navigation"ទៅគ្រប់របារ navbar ដើម្បីកំណត់អត្តសញ្ញាណយ៉ាងច្បាស់ថាវាជាតំបន់សម្គាល់សម្រាប់អ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ។

អានបន្តសម្រាប់ឧទាហរណ៍ និងបញ្ជីនៃសមាសធាតុរងដែលគាំទ្រ។

មាតិកាដែលគាំទ្រ

Navbars ភ្ជាប់មកជាមួយការគាំទ្រដែលភ្ជាប់មកជាមួយសម្រាប់សមាសធាតុរងមួយចំនួន។ ជ្រើសរើសពីខាងក្រោមតាមតម្រូវការ៖

.navbar-brandសម្រាប់ក្រុមហ៊ុន ផលិតផល ឬឈ្មោះគម្រោងរបស់អ្នក។
.navbar-navសម្រាប់ការរុករកកម្ពស់ពេញ និងទម្ងន់ស្រាល (រួមទាំងការគាំទ្រសម្រាប់ការទម្លាក់ចុះ)។
.navbar-togglerសម្រាប់ប្រើជាមួយកម្មវិធីជំនួយការដួលរលំរបស់យើង និង ឥរិយាបថ បិទបើកការរុករក ផ្សេងទៀត។
.form-inlineសម្រាប់ការគ្រប់គ្រងទម្រង់បែបបទ និងសកម្មភាពណាមួយ។
.navbar-textសម្រាប់បន្ថែមខ្សែអក្សរបញ្ឈរនៃអត្ថបទ។
.collapse.navbar-collapseសម្រាប់ការដាក់ជាក្រុម និងលាក់មាតិការបាររុករកដោយចំណុចបំបែកមេ។

នេះគឺជាឧទាហរណ៍នៃសមាសធាតុរងទាំងអស់ដែលរួមបញ្ចូលនៅក្នុងរបាររុករកដែលមានប្រធានបទពន្លឺឆ្លើយតប ដែលដួលរលំដោយស្វ័យប្រវត្តិនៅចំនុច lgឈប់ (ធំ)។

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ឧទាហរណ៍នេះប្រើ ពណ៌ ( bg-light) និង គម្លាត ( my-2, my-lg-0, mr-sm-0, my-sm-0) ថ្នាក់ឧបករណ៍ប្រើប្រាស់។

ម៉ាក

វា .navbar-brandអាចត្រូវបានអនុវត្តចំពោះធាតុភាគច្រើន ប៉ុន្តែយុថ្កាដំណើរការល្អបំផុត ដោយសារធាតុមួយចំនួនអាចត្រូវការថ្នាក់ឧបករណ៍ប្រើប្រាស់ ឬរចនាប័ទ្មផ្ទាល់ខ្លួន។

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

ការបន្ថែមរូបភាពទៅ .navbar-brandឆន្ទៈតែងតែត្រូវការរចនាប័ទ្មផ្ទាល់ខ្លួន ឬឧបករណ៍ប្រើប្រាស់ដើម្បីឱ្យមានទំហំត្រឹមត្រូវ។ នេះគឺជាឧទាហរណ៍មួយចំនួនដើម្បីបង្ហាញ។

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

ណាវ

តំណភ្ជាប់រុករក Navbar បង្កើតនៅលើ .navជម្រើសរបស់យើងជាមួយនឹងថ្នាក់កែប្រែផ្ទាល់ខ្លួនរបស់ពួកគេ ហើយតម្រូវឱ្យប្រើ ថ្នាក់បិទបើក សម្រាប់រចនាប័ទ្មឆ្លើយតបត្រឹមត្រូវ។ ការរុករកនៅក្នុងរបាររុករកក៏នឹងកើនឡើងផងដែរដើម្បីកាន់កាប់ចន្លោះផ្ដេកឱ្យបានច្រើនតាមដែលអាចធ្វើ ទៅបាន ដើម្បីរក្សាមាតិការបាររុករករបស់អ្នកឱ្យតម្រឹមដោយសុវត្ថិភាព។

ស្ថានភាពសកម្ម — ជាមួយ .active— ដើម្បីចង្អុលបង្ហាញទំព័របច្ចុប្បន្នអាចត្រូវបានអនុវត្តដោយផ្ទាល់ទៅ .nav-links ឬមេរបស់ពួកគេភ្លាមៗ .nav-item។

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

ហើយដោយសារតែយើងប្រើថ្នាក់សម្រាប់ navs របស់យើង អ្នកអាចជៀសវាងវិធីសាស្រ្តផ្អែកលើបញ្ជីទាំងស្រុងប្រសិនបើអ្នកចង់។

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

អ្នកក៏អាចប្រើ dropdowns នៅក្នុង navbar nav របស់អ្នក។ ម៉ឺនុយទម្លាក់ចុះទាមទារធាតុរុំសម្រាប់កំណត់ទីតាំង ដូច្នេះត្រូវប្រាកដថាប្រើធាតុដាច់ដោយឡែក និងដាក់នៅជាប់គ្នាសម្រាប់ .nav-itemនិង .nav-linkដូចបានបង្ហាញខាងក្រោម។

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

ទម្រង់

ដាក់វត្ថុបញ្ជា និងសមាសធាតុផ្សេងៗនៅក្នុងរបាររុករកជាមួយ .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

ធាតុកុមារភ្លាមៗក្នុង .navbarការប្រើប្លង់ flex ហើយនឹងកំណត់លំនាំដើមទៅ justify-content: between. ប្រើ ឧបករណ៍ប្រើប្រាស់ flex បន្ថែម តាមតម្រូវការ ដើម្បីកែសម្រួលឥរិយាបថនេះ។

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

ក្រុមបញ្ចូលក៏ដំណើរការផងដែរ៖

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

ប៊ូតុងផ្សេងៗត្រូវបានគាំទ្រជាផ្នែកនៃទម្រង់របាររុករកទាំងនេះផងដែរ។ នេះក៏ជាការរំលឹកដ៏អស្ចារ្យដែលឧបករណ៍ប្រើប្រាស់តម្រឹមបញ្ឈរអាចត្រូវបានប្រើដើម្បីតម្រឹមធាតុដែលមានទំហំខុសៗគ្នា។

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

អត្ថបទ

Navbars អាចមានប៊ីតនៃអត្ថបទដោយមានជំនួយពី .navbar-text. ថ្នាក់នេះកែតម្រូវការតម្រឹមបញ្ឈរ និងគម្លាតផ្ដេកសម្រាប់ខ្សែអក្សរ។

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

លាយ និងផ្គូផ្គងជាមួយសមាសធាតុ និងឧបករណ៍ប្រើប្រាស់ផ្សេងទៀតតាមតម្រូវការ។

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

គ្រោងការណ៍ពណ៌

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Containers

Although it’s not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Responsive behaviors

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no .navbar-brand shown in lowest breakpoint:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

With a brand name shown on the left and toggler on the right:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

With a toggler on the left and brand name on the right:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

External content

ពេលខ្លះអ្នកចង់ប្រើកម្មវិធីជំនួយការដួលរលំដើម្បីកេះមាតិកាដែលលាក់នៅកន្លែងផ្សេងទៀតនៅលើទំព័រ។ ដោយសារតែកម្មវិធីជំនួយរបស់យើងដំណើរការលើ ការផ្គូផ្គង នោះងាយស្រួលធ្វើ id!data-target

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>