U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Hordhac

Ku billow Bootstrap, qaabka ugu caansan aduunka ee lagu dhiso ka jawaabida, moobilka-goobaha kowaad, leh jsDelivr iyo bogga bilowga template.

Boggan

Bilaw degdeg ah

Ma waxaad raadineysaa inaad si degdeg ah ugu darto Bootstrap mashruucaaga? Isticmaal jsDelivr, il furan oo bilaash ah CDN. Isticmaalka maamulaha xirmada ama ma u baahan tahay inaad soo dejiso faylasha isha? Madaxa bogga soo dejinta

CSS

Nuqul-ku dheji xaashida qaab-dhismeedka ka hor dhammaan xaashiyaha qaab-dhismeedka si aad ugu shubto CSS- <link>gayada <head>.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Qaybo badan oo ka mid ah qaybahayagu waxay u baahan yihiin isticmaalka JavaScript si uu u shaqeeyo. Gaar ahaan, waxay u baahan yihiin plugins JavaScript noo gaar ah iyo Popper . Dhig mid ka mid ah kuwan soo socda meel <script>u dhow dhammaadka bogaggaaga, isla markiiba ka hor xiritaanka </body>summada, si aad awood ugu yeelatid.

Xidhmo

Ku dar plugin kasta oo Bootstrap JavaScript ah iyo ku-tiirsanaanta mid ka mid ah labada xidhmo. Labaduba bootstrap.bundle.jsoo ay ku bootstrap.bundle.min.jsjiraan Popper -ka qalabyadayada iyo popovers. Wixii macluumaad dheeraad ah oo ku saabsan waxa ku jira Bootstrap, fadlan eeg qaybtayada waxa ku jira .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Kala saar

Haddii aad go'aansato inaad raacdo xalka qoraallada gaarka ah, Popper waa inuu marka hore yimaadaa (haddii aad isticmaalayso tilmaamo ama popovers), ka dibna pluginsyadayada JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

Haddii aad isticmaasho <script type="module">, fadlan tixraac annaga oo adeegsanayna Bootstrap qayb module ah.

Qaybaha

Ma rabtaa inaad ogaato qaybaha sida cad ugu baahan JavaScript iyo Popper? Guji isku xirka qaybaha bandhiga hoose. Haddii aadan gabi ahaanba ka hubin qaabka guud ee bogga, sii wad akhrinta tusaalaha bogga template.

Muuji qaybaha u baahan JavaScript
  • Ogeysiisyada shaqo ka joojinta
  • Badhamada roga gobolada iyo sanduuqa hubinta/shaqaynta raadiyaha
  • Carousel ee dhammaan dabeecadaha slide, kontaroolada, iyo tilmaamayaasha
  • U dumi si aad u leexiso muuqaalka nuxurka
  • Hoos u dhigista muujinta iyo meelaynta (sidoo kale waxay u baahan tahay Popper )
  • Hababka muujinta, meelaynta, iyo hab-dhaqanka-rogid
  • Navbar oo loogu talagalay fidinta pluginkeena Burbur si loo hirgeliyo habdhaqan ka jawaab celin ah
  • Garoomada bannaanka ah ee muujinta, meel dhigista, iyo dhaqanka duuduubka
  • Roodhadhka bandhigga iyo tuurista
  • Aaladaha iyo kor u qaadida bandhigga iyo meelaynta (sidoo kale waxay u baahan tahay Popper )
  • Scrollspy ee habdhaqanka rogrogid iyo cusboonaysiinta navigation

Qaabka bilowga

U hubso in boggagaagu ay ku rakiban yihiin naqshadihii ugu dambeeyay iyo heerar horumarineed. Taas macneheedu waxa weeye isticmaalka HTML5 doctype oo ay ku jirto calaamada meta ee daawashada habdhaqanka jawaabta saxda ah. Isku soo wada duuboo boggagaagu waa inay u ekaadaan sidan:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Tallaabooyinka xiga, booqo dukumeentiyada Layout ama tusaalayaashayada rasmiga ah si aad u bilawdo dejinta waxa ku jira boggaaga iyo qaybaha.

Caalamka oo muhiim ah

Bootstrap waxa ay shaqaalaysiisay dhawr nooc oo muhiim ah oo caalami ah iyo habayn aad u baahan doonto in aad ka digtoonaato marka aad isticmaalayso, kuwaas oo dhamaantood si gaar ah ugu jihaysan sidii caadiga ahayd ee hababka browserka isdhaafsan. Aan quusno.

HTML5 docture

Bootstrap wuxuu u baahan yahay isticmaalka HTML5 doctype. La'aanteed, waxaad arki doontaa habayn aan dhammaystirnayn oo madadaalo leh, laakiin ay ku jirto ma aha inay keento xiiqdo la taaban karo.

<!doctype html>
<html lang="en">
  ...
</html>

Meta tag jawaabta leh

Bootstrap ayaa marka hore la horumariyaa mobilka , waa istaraatijiyad aan ugu wanajino koodka aaladaha moobaylka marka hore ka dibna kor u qaadno qaybaha sida loo baahdo anagoo adeegsanayna su'aalaha warbaahinta CSS. Si aad u hubiso samaynta saxda ah iyo taabashada soo dhawaynta qalabka oo dhan, ku dar calaamada meta ee daawashada<head> jawaabta kaaga

<meta name="viewport" content="width=device-width, initial-scale=1">

Waxaad ku arki kartaa tusaale tan ficil ahaan qaabka bilowga ah .

Cabbirka sanduuqa

Si loo cabbiro toosan badan ee CSS, waxaan ka beddeleynaa box-sizingqiimaha caalamiga ah oo aan content-boxu beddelno border-box. Tani waxay hubinaysaa in paddingaanay saamaynaynin ballaca ugu dambeeya ee curiyaha, laakiin waxay dhibaato ku keeni kartaa qaar ka mid ah barnaamijyada software-ka sida Khariidadaha Google iyo Google Custom Search Engine.

Marar dhif ah oo aad u baahan tahay inaad ka gudubto, isticmaal wax sida kuwan soo socda:

.selector-for-some-widget {
  box-sizing: content-box;
}

Qaybaha kore, walxaha buulka leh - oo ay ku jiraan macluumaadka la soo saaray iyadoo la sii marayo ::beforeiyo ::after— dhamaantood waxay dhaxli doonaan waxa loo box-sizingcayimay .selector-for-some-widget.

Baro wax badan oo ku saabsan moodelka sanduuqa iyo cabbirida CSS Tricks .

Dib u bilow

Si loo horumariyo samaynta biraawsarraha, waxaanu isticmaalnaa Reboot si aanu u saxno ismaandhaafka ka dhex jira daalacashada iyo aaladaha anagoo bixinayna dib-u-dejinno fikrado badan leh oo ku saabsan curiyeyaasha HTML ee caadiga ah.

Bulshada

La soco wixii ku saabsan horumarinta Bootstrap oo la xiriir bulshada agabkan waxtarka leh.

  • Akhri oo rukunso Blog-ga Bootstrap-ka Rasmiga ah .
  • La hadal Bootstrappers kale ee IRC. On irc.libera.chatserver-ka, #bootstrapkanaalka.
  • Caawinta hirgelinta waxaa laga heli karaa Stack Overflow (tagged bootstrap-5).
  • Horumariyayaashu waa inay adeegsadaan ereyga muhiimka ah bootstrapee xirmooyinka wax ka beddelaya ama ku dara shaqada Bootstrap marka loo qaybinayo npm ama hababka gudbinta la midka ah si loo helo ugu badnaan.

Waxaad sidoo kale kala socon kartaa @getbootstrap Twitter- ka xanta ugu dambeysay iyo muuqaalada muusiga ee cajiibka ah.