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"

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

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

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

.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="#">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.0/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.0/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="#">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>

Та мөн 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" 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>

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

<nav class="navbar navbar-light bg-light justify-content-between">
  <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>

Байршил

Манай байрлалын хэрэгслүүдийг ашиглан навигацуудыг статик бус байрлалд байрлуул. Дээшээ хүртэл бэхэлсэн, доод тал руу нь бэхэлсэн эсвэл дээд талд нь наасан (хуудастай хамт гүйлгэж, дээд хэсэгт нь хүртлээ гүйлгэж, тэндээ үлдэнэ) гэсэн сонголтоос сонго. Тогтмол навигацууд 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="#">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="#">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="#">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">
      <h4 class="text-white">Collapsed content</h4>
      <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>