Hordhac

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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 jQuery , Popper , iyo pluginsyadayada JavaScript. Waxaan isticmaalnaa jQuery's slim slim , laakiin nooca buuxa sidoo kale waa la taageerayaa.

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. jQuery waa in ay marka hore timaado, ka dibna Popper, ka dibna JavaScript plugins our.

Xidhmo

Ku dar plugin kasta oo Bootstrap JavaScript leh mid ka mid ah labada xidhmo. Labadaba bootstrap.bundle.jsoo ay ku bootstrap.bundle.min.jsjiraan Popper -ka agabkayaga iyo popovers, laakiin maaha jQuery . Ku dar jQuery marka hore, ka dibna xidhmo Bootstrap JavaScript ah. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Qaybaha

Ma yaabban tahay qaybaha sida cad ugu baahan jQuery, JavaScript-kayaga, iyo Popper? Guji isku xirka qaybaha bandhiga hoose. Haddii aadan hubin qaabka bogga, sii wad akhrinta tusaale ahaan qaab-dhismeedka bogga.

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
Scrollspy ee habdhaqanka rogrogid iyo cusboonaysiinta navigation
Aaladaha iyo kor u qaadida bandhigga iyo meelaynta (sidoo kale waxay u baahan tahay Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Taasi waa waxa kaliya ee aad uga baahan tahay guud ahaan shuruudaha bogga. Booqo dukumeentiyada Layout ama tusaalayaashayada rasmiga ah si aad u bilowdo 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, shrink-to-fit=no">

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 softiweerka ah 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-4).
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.

CSPs iyo SVGs-ku-xidhan

Qaybo dhowr ah oo Bootstrap ah waxaa ka mid ah SVG-yada ku dhex jira CSS si loo qaabeeyo qaybaha si joogto ah oo fudud daalacashada iyo qalabka. Ururada leh qaabaynta CSP ee aad u adag , waxaanu diiwaangelinay dhammaan tusaalooyinka SVG-yadayada guntanka ah (dhammaantood lagu dabaqo background-image) si aad si fiican dib ugu eegto fursadahaaga.

Xir badhanka (loo isticmaalo digniinaha iyo hababka)
Sanduuqyada hubinta gaarka ah iyo badhamada raadiyaha
Qaabka beddelayaasha
Astaamaha xaqiijinta foomka
Xulashada gaarka ah ee liiska
Xakamaynta carousel
Navbar beddel badhamada

Iyada oo ku saleysan wada sheekeysiga bulshada , qaar ka mid ah xulashooyinka wax looga qabanayo tan gudaha codebase-kaaga waxaa ka mid ah in URL-yada lagu beddelo hantida maxalli ah, ka saarida sawirada iyo adeegsiga sawirada khad dhexe (aan suurtagal ahayn dhammaan qaybaha), iyo wax ka beddelka CSP-gaaga. Taladayadu waa in aad si taxadar leh dib u eegto siyaasadahaaga amniga oo aad go'aansato dariiqa ugu fiican ee hore loo maro, haddii loo baahdo.