Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

Ro-ràdh

Tòisich le Bootstrap, am frèam as mòr-chòrdte san t-saoghal airson làraich freagairteach, gluasadach an toiseach a thogail, le jsDelivr agus duilleag tòiseachaidh teamplaid.

Tòiseachadh luath

A bheil thu airson Bootstrap a chuir ris a’ phròiseact agad gu sgiobalta? Cleachd jsDelivr, CDN le còd fosgailte an-asgaidh. A’ cleachdadh manaidsear pacaid no am feum thu na faidhlichean tùsail a luchdachadh sìos? Rach gu duilleag luchdadh a-nuas .

CSS

Dèan lethbhreac-pas den duilleag stoidhle <link>a-steach don duilleag stoidhle agad <head>ro gach duilleag stoidhle eile gus ar CSS a luchdachadh.

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

JS

Feumaidh mòran de na co-phàirtean againn JavaScript a chleachdadh gus obrachadh. Gu sònraichte, feumaidh iad na plugins JavaScript againn fhèin agus Popper . Cuir aon de na leanas<script> faisg air deireadh do dhuilleagan, dìreach ron </body>taga dùnaidh, gus an cuir an comas.

Bundle

Cuir a-steach gach plugan Bootstrap JavaScript agus eisimeileachd le aon den dà phasgan againn. An dà chuid bootstrap.bundle.jsagus a’ toirt a- bootstrap.bundle.min.jssteach Popper airson ar molaidhean innealan agus popovers. Airson tuilleadh fiosrachaidh mu na tha air a ghabhail a-steach ann am Bootstrap, faic an roinn susbaint againn .

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

Dealaich

Ma cho-dhùnas tu a dhol leis an fhuasgladh sgriobtaichean fa leth, feumaidh Popper a thighinn an toiseach (ma tha thu a’ cleachdadh tooltips no popovers), agus an uairsin na plugins JavaScript againn.

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

Modalan

Ma chleachdas tu <script type="module">, feuch an toir thu sùil air ar bhith a’ cleachdadh Bootstrap mar roinn modal .

Co-phàirtean

A bheil thu neònach dè na pàirtean a tha gu sònraichte feumach air ar JavaScript agus Popper? Cliog air a’ cheangal co-phàirtean taisbeanaidh gu h-ìosal. Mura h-eil thu cinnteach mu structar na duilleige san fharsaingeachd, cùm a’ leughadh airson teamplaid duilleag eisimpleir.

Seall co-phàirtean a dh'fheumas JavaScript
  • Rabhaidhean airson a bhith air an cur às
  • Putanan airson stàitean a thogail agus comas bogsa-seic/rèidio
  • Carousel airson a h-uile giùlan sleamhnag, smachd, agus comharran
  • Lùghdachadh airson a bhith a’ togail faicsinneachd susbaint
  • Dropdowns airson taisbeanadh agus suidheachadh (feumar Popper cuideachd )
  • Modalan airson taisbeanadh, suidheachadh, agus giùlan scrollaidh
  • Navbar airson ar plugan Collapse a leudachadh gus giùlan freagairteach a chuir an gnìomh
  • Offcanvases airson taisbeanadh, suidheachadh, agus giùlan scrollaidh
  • Toasts airson a thaisbeanadh agus a chuir às
  • Molaidhean innealan agus popovers airson a thaisbeanadh agus a shuidheachadh (feumar Popper cuideachd )
  • Scrollspy airson giùlan scrollaidh agus ùrachaidhean seòlaidh

Teamplaid tòiseachaidh

Dèan cinnteach gu bheil na duilleagan agad air an stèidheachadh a rèir nan inbhean dealbhaidh is leasachaidh as ùire. Tha sin a’ ciallachadh a bhith a’ cleachdadh doctype HTML5 agus a’ toirt a-steach taga meta viewport airson giùlan freagairteach ceart. Cuir a h-uile càil ri chèile agus bu chòir do dhuilleagan coimhead mar seo:

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

Airson na h-ath cheumannan, tadhal air na docaichean Layout no na h-eisimpleirean oifigeil againn gus tòiseachadh air susbaint agus co-phàirtean na làraich agad a chuir a-mach.

Cruinneil cudromach

Bidh Bootstrap a’ cleachdadh dòrlach de stoidhlichean agus shuidheachaidhean cruinne cudromach air am feum thu a bhith mothachail nuair a bhios tu ga chleachdadh, agus tha iad uile cha mhòr dìreach ag amas air gnàthachadh stoidhlichean tar-bhrobhsair. Rachamaid a-steach.

HTML5 sgrìobhainn

Feumaidh Bootstrap an doctype HTML5 a chleachdadh. Às aonais, chì thu cuid de stoidhle funky neo-choileanta, ach a’ toirt a-steach cha bu chòir dha cnapan mòra adhbhrachadh.

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

Tag meta freagairteach

Tha Bootstrap air a leasachadh gluasadach an toiseach , ro-innleachd anns am bi sinn a’ dèanamh an fheum as fheàrr de chòd airson innealan gluasadach an toiseach agus an uairsin a’ leudachadh cho-phàirtean mar a dh’ fheumar a’ cleachdadh ceistean meadhanan CSS. Gus dèanamh cinnteach gu bheilear a’ toirt seachad ceart agus a’ gluasad suathadh airson a h-uile inneal, cuir an taga meta port-seallaidh freagairteach ris an fhaidhle <head>.

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

Chì thu eisimpleir de seo ann an gnìomh anns an teamplaid tòiseachaidh .

Meud bogsa

Airson meud nas sìmplidhe ann an CSS, bidh sinn ag atharrachadh an box-sizingluach cruinneil content-boxbho border-box. Bidh seo a’ dèanamh cinnteach paddingnach toir e buaidh air leud àireamhaichte deireannach eileamaid, ach faodaidh e duilgheadasan adhbhrachadh le cuid de bhathar-bog treas-phàrtaidh leithid Google Maps agus Google Custom Search Engine.

Nuair a dh'fheumas tu a dhol thairis air, cleachd rudeigin mar a leanas:

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

Leis a’ chriomag gu h-àrd, bidh eileamaidean neadachaidh - a’ toirt a-steach susbaint air a ghineadh tro ::beforeagus ::after- uile a’ sealbhachadh na chaidh a shònrachadh box-sizingairson sin .selector-for-some-widget.

Ionnsaich tuilleadh mu mhodail bogsa agus meud aig CSS Tricks .

Ath-thòisich

Airson tairgse thar-bhrobhsair nas fheàrr, bidh sinn a’ cleachdadh Reboot gus neo-chunbhalachd a cheartachadh thar brobhsairean agus innealan fhad ‘s a bheir sinn seachad ath-shuidheachadh beagan nas beachdaiche gu eileamaidean HTML cumanta.

Coimhearsnachd

Cum suas ris an fhiosrachadh as ùire mu leasachadh Bootstrap agus ruig a-mach don choimhearsnachd leis na goireasan feumail sin.

  • Leugh agus fo-sgrìobh don Bhlog Bootstrap Oifigeil .
  • Bruidhinn ri co-Bootstrappers ann an IRC. Air an irc.libera.chatfhrithealaiche, anns an t- #bootstrapsianal.
  • Faodar cuideachadh buileachaidh a lorg aig Stack Overflow (tagged bootstrap-5).
  • Bu chòir do luchd-leasachaidh am prìomh fhacal a chleachdadh bootstrapair pacaidean a bhios ag atharrachadh no a’ cur ri gnìomhachd Bootstrap nuair a bhios iad a’ cuairteachadh tro npm no dòighean lìbhrigidh coltach ris airson an lorg as motha.

Faodaidh tu cuideachd @getbootstrap a leantainn air Twitter airson na gossip as ùire agus bhideothan ciùil sgoinneil.