Tòisich le Bootstrap

Tha Bootstrap na ghoireas aghaidh cumhachdach, làn fheartan. Tog rud sam bith - bho prototype gu cinneasachadh - ann am mionaidean.

Air an duilleig seo

Tòiseachadh luath

Tòisich le bhith a’ toirt a-steach CSS deiseil airson cinneasachadh Bootstrap agus JavaScript tro CDN gun fheum air ceumannan togail. Faic e ann an cleachdadh leis an demo Bootstrap CodePen seo .

Cruthaich index.htmlfaidhle ùr ann am freumh a’ phròiseict agad. Cuir a-steach an <meta name="viewport">taga cuideachd airson giùlan freagairteach ceart ann an innealan gluasadach.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Cuir a-steach CSS agus JS aig Bootstrap. Cuir an <link>taga a-steach don <head>CSS againn, agus an <script>taga airson ar pasgan JavaScript (a’ toirt a-steach Popper airson a bhith a’ suidheachadh dropdowns, poppers, agus molaidhean innealan) mus dùin thu </body>. Ionnsaich tuilleadh mu na ceanglaichean CDN againn .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Faodaidh tu cuideachd Popper agus an JS againn a thoirt a-steach air leth. Mura h-eil thu an dùil dropdowns, popovers, no molaidhean innealan a chleachdadh, sàbhail cuid de kilobytes le bhith gun a bhith a’ toirt a-steach Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Hàlo a Shaoghail! Fosgail an duilleag sa bhrobhsair as fheàrr leat gus an duilleag Bootstrapped agad fhaicinn. A-nis faodaidh tu tòiseachadh air togail le Bootstrap le bhith a’ cruthachadh do chruth fhèin , a’ cur dusanan de cho- phàirtean ris , agus a’ cleachdadh na h-eisimpleirean oifigeil againn .

Ceanglaichean CDN

Mar iomradh, seo na prìomh cheanglaichean CDN againn.

Tuairisgeul	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Faodaidh tu cuideachd an CDN a chleachdadh gus gin de na togalaichean a bharrachd againn a tha air an liostadh air an duilleag Clàr-innse fhaighinn .

Na h-ath cheumannan

Leugh beagan a bharrachd mu chuid de shuidheachaidhean àrainneachd cruinne cudromach a bhios Bootstrap a’ cleachdadh.
Leugh mu na tha air a ghabhail a-steach ann am Bootstrap anns an roinn susbaint againn agus an liosta de cho- phàirtean a dh’ fheumas JavaScript gu h-ìosal.
A bheil feum agad air beagan a bharrachd cumhachd? Beachdaich air togail le Bootstrap le bhith a ’ toirt a -steach na faidhlichean tùsail tro mhanaidsear pacaid .
A bheil thu airson Bootstrap a chleachdadh mar mhodal le <script type="module">? Feuch an toir thu sùil air ar cleachdadh Bootstrap mar roinn modal .

Co-phàirtean JS

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, 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 na plugins Collapse agus Offcanvas againn a leudachadh gus giùlan freagairteach a chuir an gnìomh
Navs leis a’ plugan Tab airson panaichean susbaint a thogail
Offcanvases airson taisbeanadh, suidheachadh, agus giùlan scrollaidh
Scrollspy airson giùlan scrollaidh agus ùrachaidhean seòlaidh
Toasts airson a thaisbeanadh agus a chuir às
Molaidhean innealan agus popovers airson a thaisbeanadh agus a shuidheachadh (feumar Popper cuideachd )

Cruinn-eòlas cudromach

Tha Bootstrap a’ cleachdadh dòrlach de stoidhlichean agus shuidheachaidhean cruinne cudromach, agus iad uile cha mhòr gu tur 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 beagan stoidhle funky agus neo-choileanta.

<!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 aig toiseach tòiseachaidh luath .

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

Leugh agus fo-sgrìobh don Bhlog Bootstrap Oifigeil .
Faighnich agus rannsaich ar Còmhraidhean GitHub .
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.