Bi Bootstrap dest pê bikin

Bootstrap amûrek pêşiyê ya hêzdar, taybetmendî ye. Tiştek - ji prototîpê bigire heya hilberînê - di çend hûrdeman de ava bikin.

Li ser vê rûpelê

Destpêka bilez

Bi tevlêkirina CSS-ya amade-hilberîna Bootstrap û JavaScript-ê bi navgîniya CDN-ê ve bêyî hewcedariya gavên çêkirinê dest pê bikin. Bi vê demoya Bootstrap CodePen re wê di pratîkê de bibînin .

index.htmlDi koka projeya xwe de pelek nû biafirînin . Ji bo behreya bersivdar a rast di cîhazên mobîl de <meta name="viewport">tagê jî têxin nav xwe.

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

CSS û JS-a Bootstrap-ê tê de bin. Etîketê <link>ji <head>bo CSS-ya me, û <script>nîşana ji bo pakêta meya JavaScript-ê (tevî Popper ji bo danîna dakêşan, popper, û serişteyên amûran) berî girtinê bixin </body>. Di derbarê girêdanên me yên CDN de bêtir fêr bibin .

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

Her weha hûn dikarin Popper û JS-ya me ji hev veqetînin. Ger hûn ne plan dikin ku dakêşan, popover, an şîretên amûran bikar bînin, hin kilobytes hilînin û Popper negirin.

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

Silav, dinya! Rûpelê di geroka xweya bijartî de vekin da ku rûpela xweya Bootstrapped bibînin. Naha hûn dikarin dest bi avakirina Bootstrap-ê bikin bi çêkirina sêwirana xwe , bi dehan hêman lê zêde bikin û mînakên me yên fermî bikar bînin .

girêdanên CDN

Wekî referans, li vir girêdanên me yên bingehîn ên CDN hene.

Terîf	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`

Her weha hûn dikarin CDN-ê bikar bînin da ku yek ji avahîyên me yên din ên ku di rûpela naverokê de hatine navnîş kirin bistînin .

gavên Next

Li ser hin mîhengên hawîrdora gerdûnî yên girîng ên ku Bootstrap bikar tîne hinekî bêtir bixwînin .
Li ser tiştên ku di Bootstrap-ê de di beşa naveroka me de û navnîşa hêmanên ku JavaScript -ê li jêr hewce dike bixwînin.
Pêdiviya hêzek piçûktir heye? Bi tevlêkirina pelên çavkaniyê bi navgîniya rêveberê pakêtê ve bi Bootstrap re avakirina bifikirin .
Ma hûn dixwazin Bootstrap-ê wekî modulek bi kar bînin <script type="module">? Ji kerema xwe li me binihêrin ku Bootstrap-ê wekî beşa modul bikar tîne.

pêkhateyên JS

Meraq dikin ka kîjan hêman bi eşkere JavaScript û Popperê me hewce dike? Li lînka hêmanên pêşandanê li jêr bikirtînin. Heke hûn di derbarê strukturê rûpelê gelemperî de nebawer in, xwendina ji bo şablonek rûpelek nimûne bidomînin.

Hêmanên ku JavaScript hewce ne nîşan bide

Alerts ji bo betalkirinê
Bişkokên ji bo guheztina dewletan û qutiya kontrolê / fonksiyona radyoyê
Carousel ji bo hemî tevgerên slide, kontrol û nîşanan
Ji bo guheztina dîtina naverokê hilweşe
Dropdownên ji bo pêşandan û pozîsyonê (her weha Popper hewce dike )
Modalên ji bo pêşandan, cihgirtin, û tevgera gerokê
Navbar ji bo dirêjkirina pêvekên me yên Collapse û Offcanvas ji bo pêkanîna tevgerên bersivdar
Bi pêveka Tabê re ji bo guheztina paceyên naverokê naverok
Offcanvases ji bo pêşandan, cihgirtin, û tevgera gerokê
Scrollspy ji bo tevgerên gerok û nûvekirinên navîgasyonê
Toastên ji bo nîşandan û avêtinê
Pêşniyarên amûr û popoverên ji bo xuyangkirin û cihgirtinê (her weha Popper hewce dike )

Cîhanên girîng

Bootstrap çend şêwaz û mîhengên girîng ên gerdûnî bi kar tîne, ku hemî jî hema hema bi taybetî ji bo normalîzekirina şêwazên gerokên xaçê têne rêve kirin. Ka em têkevin hundur.

HTML5 doctype

Bootstrap bikaranîna doctype HTML5 hewce dike. Bêyî wê, hûn ê şêwazek dilşewat û netemam bibînin.

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

Meta taga bersivdar

Bootstrap yekem mobîl tête pêşve xistin , stratejiyek ku tê de em pêşî kodê ji bo cîhazên mobîl xweştir dikin û dûv re jî bi karanîna pirsên medya CSS-ê bi hewcedarî pêkhateyan mezin dikin. Ji bo ku ji bo hemî cîhazan renderkirina rast û zoomkirina destikê bicîh bikin, meta-taga dîmendera bersivdar li xwe zêde bikin <head>.

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

Hûn dikarin mînakek vê çalakiyê di destpêka bilez de bibînin .

Box-sizing

Ji bo pîvana sadetir di CSS-ê de, em box-sizingnirxa gerdûnî ji content-boxbo veguherînin border-box. Ev piştrast dike paddingku bandorê li firehiya hesabkirî ya paşîn a hêmanek nake, lê ew dikare bi hin nermalava sêyemîn ên mîna Google Maps û Motora Lêgerîna Xweser a Google re bibe sedema pirsgirêkan.

Di hin rewşan de ku hûn hewce ne ku wê ji holê rakin, tiştek wekî jêrîn bikar bînin:

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

Digel perçeya jorîn, hêmanên hêlînkirî - di nav de naveroka hilberandî bi rêya ::beforeû - dê hemî ji bo wê hatî destnîşan kirin mîras bistînin .::afterbox-sizing.selector-for-some-widget

Li CSS Tricks di derbarê modela qutiyê û mezinbûnê de bêtir fêr bibin .

Reboot

Ji bo pêşdebirina xaça gerokê, em Reboot -ê bikar tînin da ku nakokiyên di nav gerok û cîhazan de rast bikin û di heman demê de ji hêmanên HTML-ê yên hevpar re vesazkirinên piçûktir ên nerîn peyda dikin.

Civatî

Li ser pêşkeftina Bootstrap-ê rojane bimînin û bi van çavkaniyên arîkar xwe bigihînin civakê.

Xwendin û bibin aboneya The Official Bootstrap Blog .
Nîqaşên me yên GitHub bipirsin û lêkolîn bikin .
Bi hevalên Bootstrappers re di IRC de sohbet bikin. Li ser irc.libera.chatserverê, di #bootstrapkanalê de.
Dibe ku arîkariya bicîhkirinê li Stack Overflow (tagkirî bootstrap-5) were dîtin.
bootstrapPêdivî ye ku pêşdebir li ser pakêtên ku fonksiyona Bootstrap-ê diguhezînin an lê zêde dikin dema ku bi navgîniya npm an mekanîzmayên radestkirina mîna hev belav dikin ji bo vedîtina herî zêde peyva sereke bikar bînin .

Her weha hûn dikarin @getbootstrap li ser Twitter-ê ji bo gotegot û vîdyoyên muzîkê yên hêja bişopînin.