Source

Navbar

Bootstrap-ийн хүчирхэг, хариу үйлдэл үзүүлэх навигацийн толгой хэсэг болох navbar-д зориулсан баримт бичиг, жишээнүүд. Брэнд, навигаци болон бусад зүйлсийн дэмжлэг, үүнд манай задрах залгаасын дэмжлэг орно.

Хэрхэн ажилладаг

Navbar-г ашиглаж эхлэхээсээ өмнө та дараах зүйлсийг мэдэх хэрэгтэй:

Навбарууд нь мэдрэгчтэй уналт .navbarболон .navbar-expand{-sm|-md|-lg|-xl}өнгөний схемийн ангиудад боодолтой байхыг шаарддаг.
Navbars болон тэдгээрийн агуулга нь анхдагч байдлаар шингэн байдаг. Хэвтээ өргөнийг хязгаарлахын тулд нэмэлт савыг ашигла .
Navbar доторх зай болон зэрэгцүүлэлтийг хянахын тулд манай зай , уян хатан хэрэгслийн ангиллыг ашиглана уу.
Navbars нь анхдагч байдлаар хариу үйлдэл үзүүлдэг боловч та үүнийг өөрчлөхийн тулд тэдгээрийг хялбархан өөрчилж болно. Хариуцлагатай байх нь бидний Collapse JavaScript залгаасаас хамаарна.
Хэвлэх үед Navbars анхдагчаар далдлагдсан байдаг. .d-print-д нэмэх замаар тэдгээрийг хэвлэхийг албадах .navbar. Дэлгэцийн хэрэгслийн ангиллыг харна уу .
Элемент ашиглан хүртээмжтэй байдлыг баталгаажуулах <nav>, эсвэл жишээлбэл, илүү ерөнхий элемент ашиглаж байгаа бол туслах технологи хэрэглэгчдэд зориулсан тэмдэглэгээний бүс гэж тодорхой тодорхойлохын тулд навигацийн талбар бүрт <div>a-г нэмнэ үү.role="navigation"

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Дэмжигдсэн дэд бүрэлдэхүүн хэсгүүдийн жишээ болон жагсаалтыг үргэлжлүүлэн уншина уу.

Дэмжигдсэн контент

Навбарууд нь цөөн хэдэн дэд бүрэлдэхүүн хэсгүүдийн суурилуулсан дэмжлэгтэй ирдэг. Шаардлагатай бол дараахь зүйлсээс сонгоно уу.

.navbar-brandтанай компани, бүтээгдэхүүн эсвэл төслийн нэр.
.navbar-navбүрэн өндөр, хөнгөн навигацийн хувьд (унадаг цэсийг дэмждэг).
.navbar-togglerманай задрах залгаас болон бусад навигацыг асаах үйлдэлтэй ашиглахад зориулагдсан .
.form-inlineаливаа хэлбэрийн хяналт, үйлдлүүдийн хувьд.
.navbar-textбосоо төвтэй текстийн мөрүүдийг нэмэхэд зориулагдсан.
.collapse.navbar-collapsenavbar контентыг эцэг эхийн таслах цэгээр бүлэглэх, нуух зориулалттай.

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="#" tabindex="-1" aria-disabled="true">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.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Нав

Navbar навигацийн холбоосууд нь өөрсдийн .navтохируулагч анги бүхий бидний сонголтууд дээр тулгуурладаг бөгөөд зохих хариу үйлдэл үзүүлэхийн тулд шилжүүлэгч ангиудыг ашиглахыг шаарддаг. Navbar дээрх навигаци нь таны навигацийн контентыг найдвартай зэрэгцүүлэхийн тулд аль болох их хэвтээ зай эзэлнэ.

Идэвхтэй төлөвүүд--тэй - одоогийн хуудсыг s эсвэл тэдгээрийн шууд эх s-д .activeшууд хэрэглэж болно ..nav-link.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="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Та мөн navbar-н цэсэнд унадаг цэсүүдийг ашиглаж болно. Унждаг цэсүүд нь байршлыг тогтоохдоо ороох элемент шаарддаг тул доор үзүүлсэн шиг тусад нь .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>

Маягтууд

Төрөл бүрийн маягтын удирдлага болон бүрэлдэхүүн хэсгүүдийг navbar дотор байрлуул .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уян хатан байрлалтай байх ба өгөгдмөл байдлаар justify-content: space-between. Энэ зан үйлийг тохируулахын тулд шаардлагатай бол нэмэлт уян хатан хэрэгслийг ашиглана уу.

<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>

Өнгөний схемүүд

background-colorСэдвийн хичээлүүд болон хэрэгслүүдийн хослолын ачаар navbar дээр сэдэв оруулах нь хэзээ ч амар байгаагүй . .navbar-lightЦайвар дэвсгэрийн өнгө, эсвэл .navbar-darkбараан өнгийн дэвсгэрийн өнгөнөөс сонго . Дараа нь .bg-*хэрэгслүүдээр тохируулаарай.

<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>

Контейнер

Хэдийгээр энэ нь шаардлагагүй ч гэсэн та .containerхуудасны голд оруулахын тулд navbar-г a-д боож эсвэл дотор нь нэгийг нэмж, зөвхөн суурин эсвэл хөдөлгөөнгүй дээд навигацийн контентыг голлуулах боломжтой .

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

Контейнер таны navbar дотор байх үед түүний хэвтээ дэвсгэр нь таны заасан .navbar-expand{-sm|-md|-lg|-xl}ангиас доогуур таслах цэгүүдэд арилдаг. Энэ нь таны навигацийн самбарыг хумих үед доод харагдах цонхнуудад нэмэлт дүүргэлт хийх шаардлагагүй гэдгийг баталгаажуулдаг.

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

Байршил

Navbar-г статик бус байрлалд байрлуулахын тулд манай байрлалын хэрэгслийг ашиглана уу. Дээшээ хүртэл бэхэлсэн, доод тал руу нь бэхэлсэн эсвэл дээд талд нь наасан (хуудасны хамт дээд хэсэгт нь хүртлээ гүйлгэж, тэндээ үлдэнэ) гэсэн сонголтуудыг сонго. Тогтмол навигацууд position: fixedнь DOM-ийн ердийн урсгалаас татагдсан гэсэн үг бөгөөд бусад элементүүдтэй давхцахаас сэргийлэхийн тулд тусгай CSS (жишээ нь: padding-topдээр ) шаардаж болно.<body>

Мөн бүх хөтөч дээр бүрэн дэмжигддэггүй.sticky-top ашигладаг position: stickyгэдгийг анхаарна уу .

<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>

Хариуцлагатай зан үйл

Навбарууд нь .navbar-toggler, .navbar-collapse, болон .navbar-expand{-sm|-md|-lg|-xl}ангиудыг ашиглан агуулга нь товчлуурын ард задрах үед өөрчлөх боломжтой. Бусад хэрэгслүүдтэй хослуулан та тодорхой элементүүдийг хэзээ харуулах, нуухыг хялбархан сонгох боломжтой.

Хэзээ ч нурдаггүй navbars .navbar-expand-ийн хувьд navbar дээр анги нэмнэ үү. Үргэлж унадаг navbar-ийн хувьд ямар ч .navbar-expandанги нэмж болохгүй.

Тоглер

Navbar сэлгэн залгагчийг анхдагчаар зүүн тийш зэрэгцүүлдэг боловч , зэрэг эгч элементийг дагавал .navbar-brandавтоматаар хамгийн баруун тийш зэрэгцүүлнэ. Тэмдэглэгээгээ буцаах нь шилжүүлэгчийн байршлыг өөрчлөх болно. Доорх нь өөр өөр солих загварын жишээнүүд юм.

.navbar-brandХамгийн бага завсарлагааны цэгт байхгүй бол:

<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="#" tabindex="-1" aria-disabled="true">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>

Зүүн талд брэндийн нэр, баруун талд сэлгэн залгагчтай:

<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="#" tabindex="-1" aria-disabled="true">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>

Зүүн талд нь унтраалга, баруун талд нь брэндийн нэр:

<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="#" tabindex="-1" aria-disabled="true">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>

Гадаад контент

Заримдаа та хуудасны өөр газар далд агуулгыг идэвхжүүлэхийн тулд задлах залгаасыг ашиглахыг хүсдэг. Манай залгаас тохирох дээр ажилладаг тул 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>