Source

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, air a sholarachadh an-asgaidh leis na daoine aig jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Feumaidh mòran de na co-phàirtean againn JavaScript a chleachdadh gus obrachadh. Gu sònraichte, feumaidh iad jQuery , Popper.js , agus na plugins JavaScript againn fhèin. Cuir 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.js, agus an uairsin na plugins JavaScript againn.

Bidh sinn a’ cleachdadh togail caol jQuery , ach tha an dreach slàn a’ faighinn taic cuideachd.

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

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

Tha Popper againn , achbootstrap.bundle.js chan e jQuery . Airson tuilleadh fiosrachaidh mu na tha air a ghabhail a-steach ann am Bootstrap, faic an roinn susbaint againn .bootstrap.bundle.min.js

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.js 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
  • Molaidhean innealan agus popovers airson a thaisbeanadh agus a shuidheachadh (feumar Popper.js 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, 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>

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 tar-bhrobhsair nas fheàrr, bidh sinn a’ cleachdadh Reboot gus neo-chunbhalachd a cheartachadh thar brobhsairean agus innealan agus aig an aon àm a’ toirt 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.

  • Lean @getbootstrap air Twitter .
  • Leugh agus fo-sgrìobh don Bhlog Bootstrap Oifigeil .
  • Bruidhinn ri co-Bootstrappers ann an IRC. Air an irc.freenode.netfhrithealaiche, 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.