Source

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, oo ay si bilaash ah u bixiyeen dadka jsDelivr. Isticmaalka maamulaha xirmada ama ma u baahan tahay inaad soo dejiso faylasha isha? U gudub 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.js , iyo pluginsyadayada JavaScript. Dhig <script>s soo socda meel u dhow dhamaadka boggaaga, isla markiiba ka hor xiritaanka </body>summada, si aad awood ugu yeelatid. jQuery waa in ay marka hore timaado, ka dib Popper.js, ka dibna JavaScript plugins our.

Waxaan isticmaalnaa jQuery's slim slim , laakiin nooca buuxa sidoo kale waa la taageerayaa.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Ma yaaban tahay qaybaha sida cad ugu baahan jQuery, our JS, iyo Popper.js? Guji isku xirka qaybaha bandhiga hoose. Haddii aadan gabi ahaanba ka hubin qaabka guud ee bogga, sii wad akhrinta tusaalaha bogga template.

Anaga bootstrap.bundle.jsoo ay ku bootstrap.bundle.min.jsjiraan Popper , laakiin maaha jQuery . Wixii macluumaad dheeraad ah oo ku saabsan waxa ku jira Bootstrap, fadlan eeg qaybtayada waxa ku jira .

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.js )
  • Hababka muujinta, meelaynta, iyo hab-dhaqanka-rogid
  • Navbar oo loogu talagalay fidinta pluginkeena Burbur si loo hirgeliyo habdhaqan ka jawaab celin ah
  • Aaladaha iyo kor-u-qaadista muujinta iyo meelaynta (sidoo kale waxay u baahan tahay Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Raac @getbootstrap Twitterka .
  • Akhri oo rukunso Blog-ga Bootstrap-ka Rasmiga ah .
  • La hadal Bootstrappers kale ee IRC. On irc.freenode.netserver-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.