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.

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

JS

Gelek pêkhateyên me ji bo fonksiyonê karanîna JavaScript-ê hewce dikin. Bi taybetî, ew hewceyê jQuery , Popper , û pêvekên me yên JavaScript-ê hewce ne. Em avakirina zirav a jQuery bikar tînin , lê guhertoya tevahî jî piştgirî ye.

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. Pêdivî ye ku jQuery pêşî were, paşê Popper, û paşê pêvekên me yên JavaScript.

Deste

Her 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 vedihewîne, lê ne jQuery . Pêşî jQuery, paşê pakêtek Bootstrap JavaScript-ê têxin nav xwe. 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/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>

Veqetî

Ger hûn biryar didin ku bi çareseriya skrîptên cihêreng re 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/[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>

Components

Meraq dikin ka kîjan pêkhate bi eşkere jQuery, 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ê de nebawer in, xwendina ji bo şablonek rûpelek mînak bidomînin.

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

Alerts ji bo betalkirina
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
Scrollspy ji bo tevgerên gerok û nûvekirinên navîgasyonê
Pêşniyarên amûr û popoverên ji bo xuyangkirin û cihgirtinê (her weha Popper hewce dike )

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

Ya ku hûn ji bo daxwazên giştî yên rûpelê hewce ne ew e. Serdana belgeyên Layout an mînakên me yên fermî bikin da ku dest bi danîna naverok û pêkhateyên malpera xwe bikin.

Globalê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 pêşkeftî ye , 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, etîketa meta ya nihêrîna bersivdar li xwe zêde bikin <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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-boxguhezî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 partiya 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êşkeşkirina 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 veguheztinê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.
Alîkariya pêkanînê dibe ku li Stack Overflow were dîtin (tagkirî bootstrap-4).
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 radestkirinê yên 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ên herî dawî û vîdyoyên muzîkê yên hêja bişopînin.

CSP û SVG-yên pêvekirî

Gelek hêmanên Bootstrap SVG-yên bicîbûyî di CSS-ya me de vedihewînin da ku li ser gerok û cîhazên bi domdarî û bi hêsanî pêkhateyan şêwaz bikin. Ji bo rêxistinên xwedan mîhengên CSP -ê yên hişktir, me hemî mînakên SVG-yên xwe yên pêvekirî (yên ku hemî jî bi rêya ve têne sepandin background-image) belge kirine da ku hûn vebijarkên xwe bi hûrgulî binirxînin.

Bişkojka Girtinê (di hişyarî û modêlan de tê bikar anîn)
Qutiyên kontrolê yên xweser û bişkokên radyoyê
Guhestina formê
Îkonên erêkirinê form bikin
Pêşekên hilbijêre Custom
Kontrolên carousel
Bişkojkên guheztina navbarê

Li ser bingeha danûstendina civatê , hin vebijarkên ji bo çareserkirina vê yekê di bingeha koda xwe de cîhgirtina URLan bi malikên xwemalî yên herêmî, rakirina wêneyan û karanîna wêneyên hundurîn (di hemî beşan de ne mumkin e), û guheztina CSP-ya xwe vedihewîne. Pêşniyara me ev e ku hûn bi baldarî polîtîkayên ewlehiyê yên xwe binirxînin û ger hewce bike li ser rêyek çêtirîn a pêş de biryar bidin.