Source

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 bikar bînin, ku ji hêla mirovên li jsDelivr ve belaş tê peyda kirin. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

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

Em avakirina zirav a jQuery bikar tînin , lê guhertoya tevahî jî piştgirî ye.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Meraq dikin ka kîjan pêkhateyan bi eşkere jQuery, JS-ya me û Popper.js 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
  • Dropdowns ji bo xuyangkirin û pozîsyonê (her weha Popper.js 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
  • Pêşniyarên amûr û popoverên ji bo xuyangkirin û cihgirtinê (di heman demê de Popper.js 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.

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, 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-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 partiya sêyemîn ên mîna Google Nexşe û 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ê.

  • Li ser Twitterê @getbootstrap bişopînin .
  • Xwendin û bibin aboneya The Official Bootstrap Blog .
  • Bi hevalên Bootstrappers re di IRC de sohbet bikin. Li ser irc.freenode.netserverê, di ##bootstrapkanalê de.
  • Dibe ku arîkariya bicîhkirinê li Stack Overflow (tagkirî bootstrap-4) 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.