Pêşkêş

Bi Bootstrap-ê, çarçoweya herî populer a cîhanê ji bo avakirina malperên bersivdar, yekem-mobîl, bi jsDelivr û rûpelek destpêkek şablonê dest pê bikin.

Li ser vê rûpelê

Destpêka bilez

Ma hûn dixwazin zû Bootstrap li projeya xwe zêde bikin? JsDelivr, CDN-ya çavkaniya vekirî ya belaş bikar bînin. Rêvebirek pakêtê bikar tînin an pêdivî ye ku pelên çavkaniyê dakêşin? Serî rûpela dakêşanan bikin .

CSS

Ji bo barkirina CSS-a me , pelgeya şêwazê <link>li ber hemî şêwazên din li ser xwe kopî bikin .<head>

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

JS

Gelek pêkhateyên me ji bo fonksiyonê karanîna JavaScript-ê hewce dikin. Bi taybetî, ew pêvekên me yên JavaScript û Popper hewce dikin . Yek ji yên jêrîn<script> li nêzî dawiya rûpelên xwe, rast li ber </body>etîketa girtinê bixin da ku wan çalak bikin.

Deste

Her pêvek û pêveka Bootstrap JavaScript-ê bi yek ji du pakêtên me re vehewînin. Hem bootstrap.bundle.jsû hem bootstrap.bundle.min.jsjî Popper ji bo serişteyên amûr û popoverên me vedigirin. Ji bo bêtir agahdarî li ser tiştê ku di Bootstrap de tê de heye, ji kerema xwe li beşa naveroka me binêre.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Veqetî

Ger hûn biryar didin ku hûn bi çareseriya skrîptên cihêreng biçin, divê pêşî Popper were (heke hûn serişteyên amûran an popoveran bikar tînin), û dûv re jî pêvekên me yên JavaScript-ê.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Modules

Heke hûn bikar tînin <script type="module">, ji kerema xwe serî li Bootstrap-ê wekî beşa modulê bidin.

Components

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êveka meya Hilweşînê ji bo pêkanîna tevgerê bersivdar
Toastên ji bo nîşandan û avêtinê
Pêşniyarên amûr û popoverên ji bo xuyangkirin û cihgirtinê (her weha Popper hewce dike )
Scrollspy ji bo tevgerên gerok û nûvekirinên navîgasyonê

Şablonê destpêk

Bawer bikin ku rûpelên we bi standardên sêwiran û pêşkeftinê yên herî dawî ve hatine saz kirin. Ev tê vê wateyê ku ji bo tevgerên bersivdar ên rast bi karanîna doktîpek HTML5-ê û tevlêbûna meta tagek viewport-ê. Hemî li hev bikin û rûpelên we divê bi vî rengî xuya bikin:

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ji bo gavên paşîn, biçin belgeyên Layout an mînakên me yên fermî da ku dest bi danîna naverok û pêkhateyên malpera xwe bikin.

Cîhanên girîng

Bootstrap çend şêwaz û mîhengên girîng ên gerdûnî bikar tîne ku hûn hewce ne ku dema ku wê bikar bînin hay ji wan hebin, 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 ê hin şêwazek bêkêmasî ya dilşewat bibînin, lê tevî wê jî nabe ku bibe sedema hîçên girîng.

<!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 şablona destpêkê 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êşveçûna Bootstrap-ê rojane bimînin û bi van çavkaniyên arîkar xwe bigihînin civakê.

Xwendin û bibin aboneya The Official Bootstrap Blog .
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.