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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Feumaidh mòran de na co-phàirtean againn JavaScript a chleachdadh gus obrachadh. Gu sònraichte, feumaidh iad jQuery , Popper , agus na plugins JavaScript againn fhèin. Bidh sinn a’ cleachdadh togail caol jQuery , ach tha an dreach slàn a’ faighinn taic cuideachd.

Cuir aon de na leanas<script> faisg air deireadh do dhuilleagan, dìreach ron </body>taga dùnaidh, gus an cuir an comas. Feumaidh jQuery a thighinn an toiseach, an uairsin Popper, agus an uairsin na plugins JavaScript againn.

Bundle

Cuir a-steach gach plugan Bootstrap JavaScript le aon den dà phasgan againn. An dà chuid bootstrap.bundle.jsagus a’ toirt a- bootstrap.bundle.min.jssteach Popper airson na molaidhean innealan agus popovers againn, ach chan e jQuery . Cuir a-steach jQuery an toiseach, an uairsin pasgan Bootstrap JavaScript. 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/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>

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

Co-phàirtean

A bheil thu neònach dè na pàirtean a tha gu sònraichte feumach air jQuery, ar JavaScript, agus Popper? Cliog air a’ cheangal co-phàirtean taisbeanaidh gu h-ìosal. Mura h-eil thu cinnteach mu structar na duilleige, cumaibh 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
Scrollspy airson giùlan scrollaidh agus ùrachaidhean seòlaidh
Molaidhean innealan agus popovers airson a thaisbeanadh agus a shuidheachadh (feumar Popper cuideachd )

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

Is e sin a tha a dhìth ort airson riatanasan duilleag iomlan. Tadhail 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.

Cruinn-eòlas 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, shrink-to-fit=no">

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 pà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-4).
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.

CSPn agus SVGn freumhaichte

Tha grunn phàirtean Bootstrap a’ toirt a-steach SVGn freumhaichte nar CSS gus co-phàirtean a stoidhleachadh gu cunbhalach agus gu furasta thar brobhsairean agus innealan. Airson buidhnean le rèiteachadh CSP nas cruaidhe , tha sinn air a h-uile suidheachadh de na SVGn freumhaichte againn a chlàradh (tha iad uile air an cur an sàs tro background-image) gus an urrainn dhut na roghainnean agad ath-sgrùdadh nas mionaidiche.

Putan dùin (air a chleachdadh ann an rabhaidhean agus modalan)
Bogsaichean sgrùdaidh gnàthaichte agus putanan rèidio
Tionndaidhean foirm
Ìomhaighean dearbhaidh foirm
Clàir-thaghadh gnàthaichte
Smachdan carousel
Navbar tog putanan

Stèidhichte air còmhradh coimhearsnachd , tha cuid de roghainnean airson dèiligeadh ri seo anns a’ chòd-chòd agad fhèin a’ toirt a-steach maoin le aoigheachd ionadail a chuir an àite URLan, toirt air falbh na h-ìomhaighean agus cleachdadh ìomhaighean in-loidhne (chan eil sin comasach anns a h-uile pàirt), agus ag atharrachadh do CSP. Is e ar moladh ath-sgrùdadh faiceallach a dhèanamh air na poileasaidhean tèarainteachd agad fhèin agus co-dhùnadh air an t-slighe air adhart as fheàrr, ma tha sin riatanach.