Navbar

Zolemba ndi zitsanzo zamutu wamphamvu wa Bootstrap, womvera, navbar. Mulinso chithandizo chotsatsa, kusaka, kugwa, ndi zina zambiri.

Momwe zimagwirira ntchito

Izi ndi zomwe muyenera kudziwa musanayambe ndi navbar:

Ma Navbar amafunikira kukulunga .navbarndi makalasi .navbar-expand{-sm|-md|-lg|-xl}akugwa komanso masinthidwe amitundu .
Navbar ndi zomwe zili mkati mwake ndi zamadzimadzi mwachisawawa. Gwiritsani ntchito zotengera zomwe mukufuna kuti muchepetse m'lifupi mwake.
Gwiritsani ntchito makalasi athu otalikirana komanso osinthika kuti muwongolere katayanidwe ndi kuyanjanitsa mkati mwa navbar.
Ma Navbars amayankha mwachisawawa, koma mutha kuwasintha mosavuta kuti asinthe. Kuyankha kumadalira pulagi yathu ya Collapse JavaScript.
Ma Navbar amabisika mwachisawawa mukasindikiza. Akakamiza kuti asindikizidwe powonjezera .d-printku .navbar. Onani kalasi yothandiza yowonetsera .
Onetsetsani kupezeka pogwiritsa ntchito <nav>chinthu kapena, ngati mukugwiritsa ntchito chinthu chodziwika bwino monga a <div>, onjezani a role="navigation"pa navbar iliyonse kuti muwonetsere kuti ndi gawo lodziwika bwino kwa ogwiritsa ntchito matekinoloje othandizira.

Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Zothandizira

Ma Navbars amabwera ndi chithandizo chomangidwira chamagulu ang'onoang'ono. Sankhani kuchokera pazifukwa zotsatirazi:

.navbar-brandza kampani yanu, malonda, kapena dzina la polojekiti.
.navbar-navpakuyenda kwautali komanso kopepuka (kuphatikiza kuthandizira kutsika).
.navbar-togglerkuti mugwiritse ntchito ndi pulagi yathu yakugwa ndi machitidwe ena osinthira ma navigation .
.form-inlinekwa maulamuliro amtundu uliwonse ndi zochita.
.navbar-textpowonjezera zingwe zolunjika pakati pa mawu.
.collapse.navbar-collapsepakuyika m'magulu ndi kubisa zomwe zili pa navbar potsata kholo lotha.

Nachi chitsanzo cha zigawo zonse zazing'ono zomwe zikuphatikizidwa mu navbar yoyankhidwa yopepuka yomwe imangogwera pamalo lg(aakulu).

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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>

Chitsanzochi chimagwiritsa ntchito makalasi amtundu ( bg-light) ndi masitayilo ( my-2, my-lg-0, mr-sm-0) othandiza.my-sm-0

Mtundu

Itha .navbar-brandkugwiritsidwa ntchito pazinthu zambiri, koma nangula amagwira ntchito bwino, chifukwa zinthu zina zingafunike makalasi othandizira kapena masitayilo achikhalidwe.

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

Kuwonjezera zithunzi .navbar-brandkumafuna masitayelo anthawi zonse kapena zofunikira kuti zikule bwino. Nazi zitsanzo zowonetsera.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

Maulalo oyenda pa Navbar amamanga pazosankha zathu .navndi kalasi yawo yosinthira ndipo amafuna kugwiritsa ntchito makalasi owongolera pamakongoletsedwe oyenera. Kuyenda m'ma navbar kudzakulanso kukhala malo opingasa momwe mungathere kuti zomwe zili mu navbar yanu zigwirizane bwino.

Mayiko omwe akugwira ntchito - ndi .active-kuwonetsa tsamba lomwe lilipo lingagwiritsidwe ntchito mwachindunji kwa .nav-links kapena makolo awo .nav-itemapamtima.

<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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Ndipo chifukwa timagwiritsa ntchito makalasi pama navs athu, mutha kupewa njira yozikidwa pamndandanda ngati mukufuna.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Mukhozanso kugwiritsa ntchito dropdowns mu navbar yanu. Mindandanda yotsitsa imafunikira chinthu chomangirira kuti muyike, chifukwa chake onetsetsani kuti mukugwiritsa ntchito zinthu zosiyana ndi zomwe zili m'malo .nav-itemndi .nav-linkmonga momwe ziliri pansipa.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Mafomu

Ikani zowongolera mafomu osiyanasiyana ndi zida mkati mwa navbar ndi .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>

Zinthu zamwana zomwe .navbarzimagwiritsa ntchito masinthidwe osinthika ndipo zidzasintha kukhala justify-content: space-between. Gwiritsani ntchito zowonjezera zosinthika ngati pakufunika kusintha izi.

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

Magulu olowetsa amagwiranso ntchito:

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

Mabatani osiyanasiyana amathandizidwa ngati gawo la mawonekedwe a navbar, nawonso. Ichinso ndi chikumbutso chachikulu kuti zida zoyankhulirana zoyima zitha kugwiritsidwa ntchito kugwirizanitsa zinthu zazikuluzikulu zosiyanasiyana.

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

Mawu

Navbar ikhoza kukhala ndi tinthu tating'ono ta mawu mothandizidwa ndi .navbar-text. Kalasi iyi imasintha mizere yoyima ndi mipata yopingasa pamawu amitundu.

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

Sakanizani ndikugwirizanitsa ndi zigawo zina ndi zofunikira ngati mukufunikira.

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

Mitundu yamitundu

Kupanga navbar sikunakhaleko kosavuta chifukwa cha kuphatikiza makalasi amitu ndi background-colorzofunikira. Sankhani kuchokera .navbar-lightkuti mugwiritse ntchito ndi mitundu yowala yakumbuyo, kapena .navbar-darkmitundu yakuda yakumbuyo. Kenako, sinthani ndi .bg-*zofunikira.

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

Zotengera

Ngakhale sizofunikira, mutha kukulunga navbar kuti muyike .containerpakati patsamba. Kapena mutha kuwonjezera chidebe chomwe chili mkati .navbarmwazomwe zili mu navbar yokhazikika kapena yosasunthika .

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

Chidebecho chikakhala mkati mwa navbar yanu, zopingasa zake zopingasa zimachotsedwa pamalo otsika kuposa .navbar-expand{-sm|-md|-lg|-xl}kalasi yomwe mwasankha. Izi zimatsimikizira kuti sitikuchulukirachulukira pazipata mopanda chifukwa pamawonekedwe otsika pomwe navbar yanu yagwa.

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

Kuyika

Gwiritsani ntchito zida zathu kuti muyike ma navbar m'malo osakhazikika. Sankhani kuchokera ku zokhazikika mpaka pamwamba, zokhazikika pansi, kapena zomamatira pamwamba (mipukutu ndi tsamba mpaka ifike pamwamba, ndiye khalani pamenepo). Ma navbars okhazikika amagwiritsa ntchito position: fixed, kutanthauza kuti amachotsedwa mumayendedwe wamba a DOM ndipo angafunike CSS yokhazikika (mwachitsanzo, padding-toppa <body>) kuti apewe kuphatikizika ndi zinthu zina.

Komanso dziwani kuti .sticky-topntchito position: sticky, zomwe sizimathandizidwa mokwanira mu msakatuli aliyense .

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

Kupukuta

Onjezani .navbar-nav-scrollku .navbar-collapse(kapena gawo lina laling'ono la navbar) kuti muthe kusuntha molunjika mkati mwazosintha za navbar yomwe yagwa. Mwachikhazikitso, kusuntha kumayambira 75vh(kapena 75% ya kutalika kwa malo owonera), koma mutha kupitilira pamenepo ndi masitayelo amzere kapena makonda. Pamalo okulirapo pomwe navbar ikukulitsidwa, zomwe zilimo zimawonekera monga momwe zimakhalira mu navbar yokhazikika.

Chonde dziwani kuti machitidwewa amabwera ndi vuto lomwe lingachitike overflow-pamene mukukhazikitsa overflow-y: auto(zofunikira kuti musunthe zomwe zili pano), overflow-xndizofanana ndi auto, zomwe zingabweretse zopingasa.

Nachi chitsanzo cha navbar chogwiritsa ntchito .navbar-nav-scrollndi style="max-height: 100px;", ndi zina zowonjezera zam'mphepete kuti mutalikirane bwino.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Makhalidwe omvera

Ma Navbar atha kugwiritsa ntchito .navbar-toggler, .navbar-collapse, ndi .navbar-expand{-sm|-md|-lg|-xl}makalasi kuti adziwe ngati zomwe zili zikugwera kuseri kwa batani. Kuphatikiza ndi zida zina, mutha kusankha mosavuta nthawi yoti muwonetse kapena kubisa zinthu zina.

Kwa ma navbar omwe samagwa, onjezani .navbar-expandkalasi pa navbar. Pa ma navbar omwe amagwa nthawi zonse, musawonjezere .navbar-expandkalasi iliyonse.

Toggler

Ma Navbar togglers amalumikizidwa kumanzere mwachisawawa, koma akatsatira chinthu cha m'bale ngati a .navbar-brand, amangoyanjanitsidwa kumanja kwakutali. Kutembenuza chizindikiro chanu kudzasintha kuyika kwa chowongolera. M'munsimu muli zitsanzo za masitayelo osiyanasiyana osinthira.

Popanda .navbar-brandkuwonetsedwa pagawo laling'ono kwambiri:

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

Ndi dzina la mtundu lomwe likuwonetsedwa kumanzere ndi chosinthira kumanja:

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

Ndi chosinthira kumanzere ndi dzina lamtundu kumanja:

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

Zakunja

Nthawi zina mumafuna kugwiritsa ntchito pulogalamu yowonjezera kuti muyambitse chinthu chotengera zinthu zomwe zimakhala kunja kwa fayilo ya .navbar. Chifukwa pulogalamu yowonjezera yathu imagwira ntchito idndikufananiza data-target, ndizovuta!

Zosungidwa

Mutha kusintha kudzera pamtundu wa navbar.

<div class="fixed-top">
  <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>

Mukachita izi, tikupangira kuti muphatikizepo JavaScript yowonjezerapo kuti musunthire chidwi chanu mwadongosolo ku chidebecho chikatsegulidwa. Kupanda kutero, ogwiritsa ntchito kiyibodi ndi ogwiritsa ntchito matekinoloje othandizira atha kukhala ndi nthawi yovuta kupeza zomwe zawululidwa kumene - makamaka ngati chidebe chomwe chidatsegulidwa chimabwera patsogolo pa chowongoleracho. Timalimbikitsanso kuwonetsetsa kuti wotembenuzayo ali ndi mawonekedwe aria-controls, akulozera ku idchidebe chomwe chili. Mwachidziwitso, izi zimalola ogwiritsa ntchito ukadaulo wothandizira kulumphira molunjika kuchokera pa chowongolera kupita ku chidebe chomwe amachiwongolera-koma kuthandizira pa izi ndizovuta kwambiri.