Download

Bootstrap (niha v3.4.1) çend awayên hêsan hene ku meriv zû dest pê bike, her yek ji astek jêhatîbûn û doza karanîna cûda re mêze dike. Bixwînin da ku bibînin ka çi li gorî hewcedariyên we yên taybetî ye.

jsDelivr

Kesên li ser jsDelivr bi dilovanî piştgirîya CDN-ê ji bo CSS û JavaScript-a Bootstrap peyda dikin. Tenê van girêdanên jsDelivr bikar bînin .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Bi Bower re saz bikin

Her weha hûn dikarin Bootstrap's Less, CSS, JavaScript û fontên bi karanîna Bower saz bikin û rêvebirin :

bower install bootstrap

Bi npm saz bikin

Her weha hûn dikarin Bootstrap-ê bi karanîna npm saz bikin :

npm install bootstrap@3

require('bootstrap')dê hemî pêvekên jQuery yên Bootstrap li ser tiştê jQuery bar bike. Modul bootstrapbixwe tiştek dernaxe. Hûn dikarin pêvekên jQuery yên Bootstrap-ê bi destan bar bikin û /js/*.jspelan li binê pelrêça jorîn a pakêtê bar bikin.

Bootstrap package.jsondi bin bişkojkên jêrîn de hin metadaneyên din vedihewîne:

• less- riya pelê sereke ya çavkaniya Kêm a Bootstrap
• style- Rêya berbi CSS-ya ne-kêmkirî ya Bootstrap ku bi karanîna mîhengên xwerû hatî berhev kirin (bê xwerû)

Bi Composer re saz bikin

Her weha hûn dikarin Bootstrap's Less, CSS, JavaScript, û tîpên bi karanîna Composer saz bikin û rêvebirin :

composer require twbs/bootstrap

Ji bo Kêm/Sass pêşgirkera otomatîkî pêwîst e

Bootstrap Autoprefixer bikar tîne da ku bi pêşgirên firoşkarê CSS re mijûl bibe . Ger hûn Bootstrap-ê ji çavkaniya wê ya Less/Sass berhev dikin û Gruntfile me bikar neynin, hûn ê hewce bikin ku Autoprefixer bixwe di pêvajoya avakirina xwe de yek bikin. Heke hûn Bootstrap-a pêşwextkirî bikar tînin an jî Gruntfile-ya me bikar tînin, hûn ne hewce ne ku ji vê yekê bitirsin ji ber ku Autoprefixer jixwe di Gruntfile me de yekgirtî ye.

Çi tê de ye

Bootstrap di du awayan de tê dakêşandin, di nav wan de hûn ê peldank û pelên jêrîn bibînin, bi mentiqî çavkaniyên hevpar kom dikin û hem guhertoyên berhevkirî û hem jî kêmkirî peyda dikin.

Bootstrap ji berê ve hatî berhev kirin

Piştî dakêşandinê, peldanka pêçandî vekin da ku avahiya Bootstrap-ê (berhevkirî) bibînin. Hûn ê tiştek weha bibînin:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Ev forma herî bingehîn a Bootstrap e: Pelên pêşdibistanê ji bo karanîna bilez di hema hema her projeyek malperê de têne berhev kirin. Em CSS û JS ( bootstrap.*), û her weha CSS û JS ( bootstrap.min.*) berhevkirî û kêmkirî peyda dikin. Nexşeyên çavkaniya CSS ( bootstrap.*.map) ji bo karanîna bi hin amûrên pêşdebirên gerokan re hene. Fontên ji Glyphicons tê de hene, wekî mijara vebijarkî ya Bootstrap.

Koda çavkaniyê ya Bootstrap

Dakêşana koda çavkaniyê ya Bootstrap, CSS, JavaScript, û hebûnên fontê yên pêşwext berhevkirî, digel çavkanî Less, JavaScript, û belgekirinê vedihewîne. Bi taybetî, ew tiştên jêrîn û bêtir dihewîne:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/û fonts/ji bo tîpên me yên CSS, JS, û îkonê koda çavkaniyê ne (bi rêzê). Peldanka dist/her tiştê ku di beşa dakêşana pêşîn a li jor de hatî destnîşan kirin vedihewîne. Peldanka docs/koda çavkaniyê ji bo belgeyên me, û examples/karanîna Bootstrap vedihewîne. Ji xeynî wê, pelek din a tê de piştgirî ji pakêtan, agahdariya lîsansê û pêşkeftinê re peyda dike.

Berhevkirina CSS û JavaScript

Bootstrap ji bo pergala avakirina xwe, bi rêbazên hêsan ên ji bo xebata bi çarçoweyê re, Grunt bikar tîne. Bi vî rengî em koda xwe berhev dikin, ceribandinan dimeşînin, û hêj bêtir.

Sazkirina Grunt

Ji bo sazkirina Grunt, divê hûn pêşî dakêşin û saz bikin node.js (ku npm tê de ye). npm ji bo modulên pakêtkirî yên nodê radiweste û rêyek e ku meriv pêgirêdanên pêşkeftinê bi navgîniya node.js ve rêve bibe.

1. Bi grunt-cligerdûnî saz bikin npm install -g grunt-cli.
2. Biçe pelrêça root /bootstrap/, paşê bimeşîne npm install. npm dê li package.jsonpelê binêre û bixweber pêwendiyên herêmî yên ku li wir hatine navnîş kirin saz bike.

Dema ku qediya, hûn ê bikaribin fermanên cihêreng ên Grunt ên ku ji rêzika fermanê têne peyda kirin bimeşînin.

Fermanên Grunt ên berdest

grunt dist(Tenê CSS û JavaScript berhev bikin)

/dist/Bi pelên CSS û JavaScript-ê yên berhevkirî û kêmkirî pelrêçek ji nû ve çêdike . Wekî bikarhênerek Bootstrap, ev bi gelemperî fermana ku hûn dixwazin e.

grunt watch(Seet)

Pelên çavkaniya Kêmtir temaşe dike û gava ku hûn guhartinek hilînin bixweber wan ji nû ve li CSS berhev dike.

grunt test(Testanan bike)

JSHint dimeşîne û bi saya Karma ceribandinên QUnit di gerokên rastîn de dimeşîne .

grunt docs(Avakirin û ceribandina malikên belgeyan)

CSS, JavaScript, û hebûnên din ên ku dema ku belgeyên herêmî bi rê ve diçin têne bikar anîn ava dike û diceribîne bundle exec jekyll serve.

grunt(Bi tevahî her tiştî ava bikin û ceribandinan bimeşînin)

CSS û JavaScript-ê berhev dike û piçûk dike, malpera belgekirinê ava dike, verastkera HTML5 li hember belgeyan dimeşîne, malzemeyên Customizer ji nû ve çêdike, û hêj bêtir. Jekyll hewce dike. Bi gelemperî tenê hewce ye ku hûn li ser Bootstrap bixwe hack dikin.

Çareserkirina pirsgirêkan

Ger hûn di sazkirina girêdanan an xebitandina fermanên Grunt de bi pirsgirêkan re rû bi rû bimînin, pêşî /node_modules/pelrêça ku ji hêla npm ve hatî çêkirin jêbirin. Piştre, dubare npm installbikin.

şablonê bingehîn

Bi vê şablonê HTML-a bingehîn dest pê bikin, an jî van mînakan biguherînin . Em hêvî dikin ku hûn ê şablon û nimûneyên me xweş bikin, wan li gorî hewcedariyên xwe biguncînin.

HTML-ya jêrîn kopî bikin da ku bi belgeyek Bootstrap-a hindiktirîn dest bi xebatê bikin.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Examples

Bi gelek hêmanên Bootstrap-ê li ser şablona bingehîn a li jor ava bikin. Em ji we re teşwîq dikin ku Bootstrap li gorî hewcedariyên projeya xweya kesane xweş bikin û biguncînin.

Ji bo her nimûneya jêrîn koda çavkaniyê bi dakêşana depoya Bootstrap bistînin . Nimûne di pelrêçê de têne dîtin docs/examples/.

Bikaranîna çarçoveyê

Şablonê destpêk

Tiştek lê bingehîn: CSS û JavaScript ligel konteynerek berhev kirin.

Mijara Bootstrap

Ji bo ezmûnek pêşkeftî ya dîtbarî mijara vebijarkî ya Bootstrap barkirin.

Grids

Nimûneyên pirjimar ên sêwirana torê bi her çar qatan, hêlîn, û hêj bêtir.

Jumbotron

Li dora jumbotronê bi navbar û hin stûnên torê yên bingehîn ava bikin.

Jumbotron teng

Bi tengkirina konteynir û jumbotronê xwerû, rûpelek xwerû ava bikin.

Navbar di çalakiyê de

Navbar

Şablonek super bingehîn a ku navbar û hin naverokên din jî vedihewîne.

Navbara jorîn a statîk

Şablonek super bingehîn bi navbarek jorîn a statîk digel hin naverokek zêde.

Navbara rastkirî

Şablonek super bingehîn bi navbarek jorîn a sabît digel hin naverokek zêde.

pêkhateyên Custom

Lihêv

Şablonek yek-rûpelî ji bo avakirina rûpelên malê yên hêsan û xweşik.

Carousel

Navbar û carousel xweş bikin, dûv re hin hêmanên nû lê zêde bikin.

Blog

Plansaziya blogê ya du-stûnî ya hêsan bi navîgasyon, sernav û tîpa xwerû.

Dashboard

Struktura bingehîn ji bo dashboardek rêveberê bi kêlek û navbarê sabît.

Rûpelê têketinê

Plansaziya forma xwerû û sêwirana ji bo nîşanek hêsan a di formê de.

Nav rastdar

Navbarek xwerû bi girêdanên rastdar biafirînin. Serê xwe! Ne pir Safari dostane.

Sticky footer

Dema ku naverok ji wê kurttir be pêvek bi binê dîmenderê ve girêdin.

Pêveka pêvekirî ya bi navbar

Bi navbarek sabît li jor pêvekek bi binê dîmenderê ve girêdin.

Experiments

Bootstrap ne-bersiv

Li gorî belgeyên me bi hêsanî bersivdana Bootstrap neçalak bikin .

Off-canvas

Ji bo karanîna bi Bootstrap re menuyek navîgasyonê ya li derveyî-canvas-ê ya veguhezbar ava bikin.

Amûrên

Bootlint

Bootlint amûra fermî ya HTML-ê ya Bootstrap e . Ew bixweber çend xeletiyên hevpar ên HTML-ê di nav rûpelên malperê de ku Bootstrap-ê bi rengek "vanilla" bikar tînin kontrol dike. Pêkhatên / widgetên Vanilla Bootstrap hewce dike ku beşên wan ên DOM-ê li gorî hin avahiyan tevbigerin. Bootlint kontrol dike ku nimûneyên pêkhateyên Bootstrap HTML-ê rast-avakirî ne. Bifikirin ku Bootlint li zincîra amûra pêşkeftina webê ya Bootstrap zêde bikin da ku yek ji xeletiyên hevpar pêşkeftina projeya we hêdî neke.

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 bi karanîna IRC di irc.freenode.netserverê de, di kanala ##bootstrap de sohbet bikin.
• Ji bo alîkariya karanîna Bootstrap, li StackOverflow bi karanîna tagêtwitter-bootstrap-3 bipirsin .
• 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 .
• Mînakên îlhamê yên mirovên ku bi Bootstrap re li Bootstrap Expo ava dikin bibî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.

Neçalakkirina bersivdayînê

Bootstrap bixweber rûpelên we ji bo pîvanên cihêreng ên dîmenderê adapte dike. Li vir e ku meriv çawa vê taybetmendiyê neçalak dike da ku rûpela we mîna vê mînaka nebersiv kar bike .

Gavên ji bo neçalakkirina bersivdana rûpelê

1. Dîtina ku di belgeyên CSS <meta>de hatî destnîşan kirin derxe
2. widthJi bo her rêza .containertorê bi yek firehiyek veguhezînin, mînakî Pê width: 970px !important;bawer bin ku ev li dû Bootstrap CSS-ya xwerû tê. Hûn dikarin vebijarkî ji !importantpirsên medyayê an hin hilbijêr-fu dûr bixin.
3. Ger navbaran bikar bînin, hemî tevgerên navbarê yên hilweşandî û berfireh bibin jêbirin.
4. Ji bo sêwiranên torê, ji .col-xs-*bilî, an li şûna yên navîn/mezin ders bikar bînin. Xem neke, tora cîhaza zêde-biçûk li gorî hemî biryaran hûr dibe.

Hûn ê hîn jî ji bo IE8 hewceyê Respond.js bin (ji ber ku pirsên me yên medyayê hîn jî li wir in û hewce ne ku bêne pêvajo kirin). Ev aliyên "malpera mobîl" ya Bootstrap neçalak dike.

Şablonên Bootstrap bi bersivdayînê neçalak

Me van gavan ji bo mînakekê sepand. Koda çavkaniya wê bixwînin da ku hûn guhertinên taybetî yên hatine bicîh kirin bibînin.

Mînaka ne-bersiv bibînin

Piştgiriya gerok û cîhazê

Bootstrap hatiye çêkirin ku di gerokên herî dawî yên sermaseyê û mobîl de çêtirîn bixebite, tê vê wateyê ku gerokên kevintir dibe ku bi şêwazên cûda, her çend bi tevahî fonksiyonel, vegotinên hin pêkhateyan nîşan bidin.

Gerokên piştgirî kirin

Bi taybetî, em guhertoyên herî dawî yên gerok û platformên jêrîn piştgirî dikin.

Gerokên alternatîf ên ku guhertoya herî dawî ya WebKit, Blink, an Gecko bikar tînin, çi rasterast an bi riya API-ya dîtina webê ya platformê, bi eşkere nayê piştgirî kirin. Lêbelê, Bootstrap divê (di pir rewşan de) di van gerokan de jî rast nîşan bide û bixebite. Agahdariya piştevaniya taybetî ya li jêr tê peyda kirin.

Amûrên mobîl

Bi gelemperî, Bootstrap guhertoyên herî paşîn ên gerokên xwerû yên her platforma sereke piştgirî dike. Têbînî ku gerokên proxy (wek Opera Mini, moda Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) nayên piştgirî kirin.

Gerokên sermaseyê

Bi heman rengî, guhertoyên herî dawî yên piraniya gerokên sermaseyê têne piştgirî kirin.

Li ser Windows-ê, em piştgirî didin Internet Explorer 8-11 .

Ji bo Firefox, ji bilî serbestberdana asayî ya herî paşîn, em guhertoya herî dawî ya berdana Piştgiriya Berfireh (ESR) ya Firefox-ê jî piştgirî dikin.

Nefermî, Bootstrap divê li Chromium û Chrome ji bo Linux, Firefox ji bo Linux, û Internet Explorer 7, û hem jî Microsoft Edge bi têra xwe baş xuya bike û tevbigere, her çend ew bi fermî nayên piştgirî kirin.

Ji bo navnîşek hin xeletiyên gerokê ku Bootstrap neçar e ku bi wan re mijûl bibe, li Dîwarê xeletiyên gerokê binêrin .

Internet Explorer 8 û 9

Internet Explorer 8 û 9 jî piştgirî ne, lêbelê, ji kerema xwe hay ji xwe hebin ku hin taybetmendiyên CSS3 û hêmanên HTML5 bi tevahî ji hêla van gerokan ve nayên piştgirî kirin. Wekî din, Internet Explorer 8 hewce dike ku Respond.js bikar bîne da ku piştgiriya pirsa medyayê çalak bike.

Ji bo hûrguliyên li ser piştgirîya gerokê ya taybetmendiyên CSS3 û HTML5, biçin Ez dikarim bikar bînim...

Internet Explorer 8 û Respond.js

Dema ku Respond.js di hawîrdorên pêşkeftin û hilberîna xwe de ji bo Internet Explorer 8 bikar tînin, hay ji hişyariyên jêrîn hebin.

Respond.js û CSS-a-domain

Bikaranîna Respond.js bi CSS-ê re ku li ser domanek (bine) cihê (mînak, li ser CDN) hatî mêvandar kirin, hin sazûmanek din hewce dike. Ji bo hûragahiyan li belgeyên Respond.js binêre.

Bersiv bidin.js ûfile://

Ji ber qaîdeyên ewlehiyê yên gerokê, Respond.js bi rûpelên ku bi file://protokolê têne dîtin re naxebite (wek dema vekirina pelek HTML ya herêmî). Ji bo ceribandina taybetmendiyên bersivdar ên di IE8 de, rûpelên xwe li ser HTTP (S) bibînin. Ji bo hûragahiyan li belgeyên Respond.js binêre.

Bersiv bidin.js û@import

Respond.js bi CSS-ya ku ji hêla referansê ve tê vegerandin re naxebite @import. Bi taybetî, hin mîhengên Drupal têne zanîn ku bikar tînin @import. Ji bo hûragahiyan li belgeyên Respond.js binêre.

Internet Explorer 8 û mezinbûna qutiyê

IE8 bi tevayî piştgirî nake box-sizing: border-box;dema ku bi min-width, max-width, min-height, an re tê hev kirin max-height. Ji ber vê yekê, ji v3.0.1-ê pê ve, em êdî max-widthli ser .containers-ê bikar nakin.

Internet Explorer 8 û @font-face

@font-faceIE8 dema ku bi hev re tê de hin pirsgirêk :beforehene. Bootstrap wê kombînasyona bi Glyphicons xwe bikar tîne. Ger rûpelek cache be, û bêyî mişkê li ser pencereyê were barkirin (ango bişkoka nûvekirinê bixin an jî tiştek di iframeyekê de bar bikin) wê hingê rûpel berî ku font were barkirin tê pêşkêş kirin. Li ser rûpela (bedenê) hejandin dê hin îkonan nîşan bide û li ser îkonên mayî jî dê wan nîşan bide. Ji bo hûragahiyan li hejmara #13863 binêre.

Modên lihevhatina IE

Bootstrap di modên lihevhatina Internet Explorer-ê yên kevn de nayê piştgirî kirin. Ji bo ku hûn pê ewle bin ku hûn ji bo IE-yê moda nûvekirina nûvekirinê bikar tînin, <meta>di nav rûpelên xwe de nîşana guncan bihesibînin:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Bi vekirina amûrên xeletkirinê moda belgeyê piştrast bikin: F12"Moda Belgeyê" bikirtînin û kontrol bikin.

Ev etîket di hemî belgekirin û nimûneyên Bootstrap de cih digire da ku di her guhertoya piştgirîkirî ya Internet Explorer-ê de çêtirîn pêşkêşkirina gengaz peyda bike.

Ji bo bêtir agahdarî li vê pirsa StackOverflow binêre.

Internet Explorer 10 di Windows 8 û Windows Phone 8 de

Internet Explorer 10 firehiya cîhazê ji firehiya porta dîtinê cuda nake , û ji ber vê yekê pirsên medyayê yên di CSS-ya Bootstrap de rast naxebitîne. Bi gelemperî hûn ê tenê pişkek bilez a CSS-ê lê zêde bikin da ku vê rast bikin:

@-ms-viewport       { width: device-width; }

Lêbelê, ev ji bo cîhazên ku guhertoyên Windows Phone 8-ê ji Nûvekirin 3 (ango GDR3) kevintir dixebitin ne kar dike , ji ber ku ew dihêle ku cîhazên weha li şûna dîtina "telefonê" ya teng bi piranî dîmenek sermaseyê nîşan bidin. Ji bo çareserkirina vê, hûn ê hewce bikin ku CSS û JavaScript-a jêrîn têxin nav xwe da ku li dora xeletiyê bixebitin .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Ji bo bêtir agahdarî û rêbernameyên karanîna, Windows Phone 8 û Device-Width bixwînin .

Wekî serî, em vê yekê di hemî belgekirin û mînakên Bootstrap de wekî xwenîşandanek vedigirin.

Ji sedî Safari dorpêçkirin

Motora vegotina guhertoyên Safari yên beriya v7.1-ê ji bo OS X û Safari-ya ji bo iOS v8.0-ê bi hejmara dehiyên ku di .col-*-1dersên tora me de têne bikar anîn de hin pirsgirêk hebûn. Ji ber vê yekê heke we 12 stûnên torê yên takekesî hebin, hûn ê bala xwe bidinê ku ew li gorî rêzikên stûnên din kurt bûne. Ji xeynî nûvekirina Safari/iOS-ê, ji bo çareyan hin vebijarkên we hene:

• Li stûna .pull-righttora xweya paşîn zêde bikin da ku hevrêziya rast-rast-hişk bistînin
• Rêjeyên xwe bi destan biguhezînin da ku ji bo Safari dorpêça bêkêmasî bistînin (ji vebijarka yekem dijwartir)

Modal, navbar, û klavyeyên virtual

Zêdebûn û gerandin

Piştgiriya overflow: hiddenli ser <body>hêmanê di iOS û Android-ê de pir kêm e. Ji bo wê armancê, gava ku hûn di gerokên van cîhazan de ji jor an binê modalekê derbas bikin, <body>naverok dê dest bi gerokê bike. Binêre xeletiya Chrome #175502 (di Chrome v40 de hatî rast kirin) û xeletiya WebKit #153852 .

Zeviyên nivîsê yên iOS û gerok

Ji iOS 9.3-ê ve, dema ku modalek vekirî ye, heke destana destpêkê ya jestek gerok di nav sînorê nivîsek <input>an a- ê de be <textarea>, dê <body>naveroka li binê modalê li şûna modal bixwe were gerandin. Binêre xeletiya WebKit #153856 .

Klavyeyên virtual

Di heman demê de, bala xwe bidin ku heke hûn navbarek sabît bikar tînin an têketinên di nav modalekê de bikar tînin, iOS xwedan xeletiyek renderkirinê ye ku dema ku klavyeya virtual tê kişandin pozîsyona hêmanên sabît nûve nake. Ji bo vê yekê çend rêgez di nav xwe de veguheztina hêmanên xwe position: absolutean vekêşana demjimêrek li ser balê vedihewîne da ku hewl bidin ku cîh bi destan rast bikin. Ev ji hêla Bootstrap ve nayê rêve kirin, ji ber vê yekê li ser we ye ku hûn biryar bidin ka kîjan çareserî ji bo serîlêdana we çêtirîn e.

Navbar Dropdowns

Element .dropdown-backdropji ber tevliheviya z-indekskirinê li ser iOS-ê di nav de nayê bikar anîn. Bi vî rengî, ji bo girtina dakêşanên di navbaran de, divê hûn rasterast li ser hêmana dakêşanê bikirtînin (an jî hêmanek din a ku dê bûyerek klîk di iOS-ê de bişewitîne ).

Browser zoom

Zêdekirina rûpelan bi neçarî di hin beşan de, hem di Bootstrap û hem jî di tevnên mayî de, hunerên renderkirinê pêşkêşî dike. Bi pirsgirêkê ve girêdayî, dibe ku em karibin wê rast bikin (pêşî bigerin û dûv re heke hewce be pirsgirêkek vekin). Lêbelê, em mêl dikin ku vana paşguh bikin ji ber ku ew bi gelemperî ji bilî rêwerzên hacky ti çareseriyek rasterast tune.

Asteng :hover/ :focusli ser mobîl

Her çend hejandina rastîn li ser pir ekranên destan ne mumkun be jî, pir gerokên desta piştgirîya hilavêtinê dişibînin û :hover"zeliqandî" dikin. Bi gotinek din, :hoverşêwaz piştî lêdana hêmanek dest bi sepandinê dikin û tenê piştî ku bikarhêner li ser hêmanek din tap dike sepanê rawestîne. Ev dikare bibe sedem ku dewletên Bootstrap bi rengek :hovernexwestî li ser gerokên weha "qeliqî" bibin. Hin gerokên mobîl jî bi :focusheman rengî hişk dikin. Heya nuha ji bo van pirsgirêkan ji bilî rakirina şêwazên weha bi tevahî rêyek hêsan tune.

Çapnivîs

Tewra di hin gerokên nûjen de, çapkirin dibe ku qeşeng be.

Bi taybetî, wekî Chrome v32 û bêyî ku mîhengên marjînal bigire, Chrome dema ku di çapkirina rûpelek malperekê de pirsên medyayê çareser dike, firehiya porta dîtinê ji mezinahiya kaxeza laşî pir tengtir bikar tîne. Ev dikare bibe sedema ku tora zêde-biçûk a Bootstrap di dema çapkirinê de ji nedîtî ve were çalak kirin. Ji bo hin hûrguliyan pirsgirêka #12078 û xeletiya Chrome #273306 bibînin. Rêbazên pêşniyarkirî:

• Tora zêde-biçûk hembêz bikin û pê ewle bin ku rûpela we di binê wê de qebûlkirî xuya dike.
• Nirxên @screen-*guhêrbarên Kêmtir xweş bikin da ku kaxeza çapera we ji piçûktir-mezintir were hesibandin.
• Pirsên medyaya xwerû lê zêde bikin da ku xalên veqetandinê yên mezinahiya torê tenê ji bo medyaya çapkirî biguhezînin.

Di heman demê de, wekî Safari v8.0, s-yên bi firehiya sabît .containerdikare bibe sedem ku Safari dema çapkirinê mezinahiya tîpek piçûk a bêhempa bikar bîne. Ji bo bêtir agahdarî, #14868 û xeletiya WebKit #138192 bibînin. Ji bo vê yekê çareseriyek potansiyel zêdekirina CSS-ya jêrîn e:

@media print {
  .container {
    width: auto;
  }
}

geroka stock Android

Ji derveyî qutiyê, Android 4.1 (û tewra hin serbestberdanên nûtir jî xuya ye) bi sepana Gerokê re wekî geroka webê ya xwerû ya bijartî (li dijî Chrome) tê şandin. Mixabin, sepana Gerokê bi gelemperî bi CSS-ê re gelek xeletî û nakokî hene.

Menuyan hilbijêrin

Li ser <select>hêmanan, gerokek stokê ya Android-ê ger hebe border-radiusû/an borderwere sepandin dê kontrolên alî nîşan nede. (Ji bo hûragahiyan li vê pirsa StackOverflow binêre.) Parçeya kodê ya li jêr bikar bînin da ku CSS- <select>ya sûcdar derxînin û li ser geroka stokê ya Android-ê wekî hêmanek neguhêz bikin. Sniffing nûnerê bikarhêner ji destwerdana gerokên Chrome, Safari û Mozilla dûr dikeve.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Dixwazin mînakek bibînin? Vê demoya JS Bin kontrol bikin.

Validators

Ji bo ku ezmûna çêtirîn gengaz ji gerokên kevn û xelet re peyda bike, Bootstrap li gelek cihan hakên geroka CSS bikar tîne da ku CSS -ya taybetî ji hin guhertoyên gerokê re bike armanc da ku li dora xeletiyên di gerokên xwe de bixebite. Van hacks bi têgihîştin dibe sedem ku erêkerên CSS gilî bikin ku ew nederbasdar in. Di çend cihan de, em taybetmendiyên CSS-ê yên xwînrij ên ku hîn bi tevahî standardkirî ne jî bikar tînin, lê ev bi tenê ji bo pêşkeftina pêşkeftî têne bikar anîn.

Van hişyariyên erêkirinê di pratîkê de ne girîng in ji ber ku beşa ne-hacky ya CSS-a me bi tevahî dipejirîne û beşên hacky di xebata rast a beşa ne-hacky de mudaxele nakin, ji ber vê yekê em bi qestî van hişyariyên taybetî paşguh dikin.

Di heman demê de belgeyên me yên HTML-ê jî hin hişyariyên erêkirina HTML-ê yên piçûk û bêbandor hene ji ber tevlêbûna me ya çareseriyek ji bo xeletiyek Firefox-ê .

Piştgiriya partiya sêyemîn

Digel ku em bi fermî piştgirî nadin pêvek an pêvekên partiya sêyemîn, em hin şîretên kêrhatî pêşkêş dikin da ku ji pirsgirêkên potansiyel ên di projeyên we de dûr bikevin.

Box-sizing

Hin nermalava partiya sêyemîn, di nav de Google Nexşe û Motora Lêgerîna Xweser a Google, bi Bootstrap re nakokî hene ji ber * { box-sizing: border-box; }, qaîdeyek ku wiya paddingdike ku bandorê li firehiya hesabkirî ya paşîn a hêmanekê neke. Li CSS Tricks di derbarê modela qutiyê û mezinbûnê de bêtir fêr bibin .

Li gorî çarçoveyê, hûn dikarin li gorî hewcedariyê (Vebijarka 1) bişopînin an mezinbûna qutiyê ji bo tevahiya herêman ji nû ve bikin (Vebijêrk 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Gihîştina

Bootstrap standardên webê yên hevpar dişopîne û - bi hewildana zêde ya hindiktirîn - dikare were bikar anîn da ku malperên ku ji kesên ku bikar tînin re bigihînin biafirînin. AT- ê bikar tînin re bigihînin biafirînin .

Navîgasyon derbas bibe

Ger navîgasyon we gelek lînkan dihewîne û berî naveroka sereke ya DOM-ê tê, Skip to main contentberî navîgasyonê zencîreyekê lê zêde bikin (ji bo ravekirinek hêsan, li vê gotara Projeya A11Y li ser girêdanên navîgasyonê derbikevin binêre ). Bikaranîna .sr-onlypolê dê bi dîtbarî veşêre zencîreyê veşêre, û .sr-only-focusableçîn dê piştrast bike ku zencîre piştî balkişandinê xuya bibe (ji bo bikarhênerên klavyeyê yên dîtbar).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Sernavên nested

Dema ku sernavên hêlînê ( <h1>- <h6>), divê sernavê belgeya weya bingehîn bibe <h1>. Sernavên paşîn divê karanîna mantiqî bikin <h2>- <h6>wusa ku xwendevanên ekranê dikarin ji bo rûpelên we tabloyek naverokê ava bikin.

Li ser HTML CodeSniffer û AccessAbility ya Penn State bêtir fêr bibin .

Berevajî rengîn

Heya nuha, hin hevbendên rengên xwerû yên ku di Bootstrap de peyda dibin (wek çînên bişkojkên cûrbecûr ên şêwazê , hin rengên ronîkirina kodê ku ji bo blokên kodê yên bingehîn têne bikar anîn , çîna alîkarê .bg-primary paşnavê ya bingehîn , û rengê girêdana xwerû dema ku li ser paşxaneyek spî tê bikar anîn) rêjeyek berevajî kêm heye (li jêr rêjeya pêşniyarkirî ya 4,5:1 ). Ev dikare bibe sedema pirsgirêkan ji bo bikarhênerên bi vîzyona kêm an kesên ku reng kor in. Dibe ku ev rengên xwerû hewce ne ku werin guheztin da ku berevajî û xwendina wan zêde bibin.

Çavkaniyên zêde

• Pirtûka "HTML Codesniffer" ji bo destnîşankirina pirsgirêkên gihîştinê
• Berfirehkirina Amûrên Pêşkêşkera Gihîştina Chrome
• Rengê Berevajî Analyzer
• Projeya A11Y
• Belgekirina gihîştina MDN

FAQs License de

Bootstrap di bin lîsansa MIT-ê de tê berdan û ji 2019-an Twitter-ê mafdar e. Bi perçeyên piçûktir têne kelandin, ew dikare bi şertên jêrîn were ravekirin.

Ew ji we re hewce dike ku:

• Gava ku hûn wan di karên xwe de bikar tînin, lîsans û agahdariya mafparêziyê di pelên CSS û JavaScript ên Bootstrap de bihêlin.

Ew destûrê dide we ku:

• Ji bo armancên kesane, nepenî, yên navxweyî, an bazirganî, Bootstrap, bi tevahî an jî beş, belaş dakêşin û bikar bînin
• Di pakêt an belavkirinên ku hûn diafirînin de Bootstrap bikar bînin
• Koda çavkaniyê biguherînin
• Ji bo guheztin û belavkirina Bootstrap ji aliyên sêyemîn ên ku di destûrnameyê de ne de destûrnameyek jêrîn bidin

Ew ji we re qedexe dike ku:

• Ji ber ku Bootstrap bêyî garantî tê peyda kirin, nivîskar û xwedan lîsansa berpirsiyar bihêlin
• Afirîner an xwediyên mafên xwedan Bootstrap berpirsiyar bihêlin
• Her perçeyek Bootstrap bêyî destnîşankirina rast ji nû ve belav bikin
• Nîşanên ku xwediyê Twitterê ne bi her awayî bikar bînin ku dibe ku diyar bike an tê vê wateyê ku Twitter belavkirina we dipejirîne
• Nîşaneyên ku xwediyê Twitterê ne bi her awayî bikar bînin ku dibe ku diyar bike an tê vê wateyê ku we nermalava Twitter-ê ya navborî afirandiye

Ew hewce nake ku hûn:

• Çavkaniya Bootstrap bi xwe, an guheztinên ku we li wê kirine, di her vebelavkirinek ku hûn lê dihewîne de bicivînin.
• Guhertinên ku hûn li Bootstrap dikin bişînin projeya Bootstrap (her çend bertekên weha têne teşwîq kirin)

Lîsansa tevahî Bootstrap ji bo bêtir agahdarî di depoya projeyê de cih digire.

Wergeran

Endamên civakê belgeyên Bootstrap wergerandine zimanên cihê. Yek bi fermî nayê piştgirî kirin û dibe ku ew her gav ne nûve bin.

• Bootstrap 中文文档 (Çînî)
• Bootstrap li Dansk (Danîmarkî)
• Bootstrap en Français (Fransî)
• Bootstrap auf Deutsch (Almanî)
• Bootstrap di Zimanê îtalî (Îtalî) de
• Bootstrap 한국어 (Koreyî)
• Bootstrap em Português do Brasil (Brazili Portekîzî)
• Bootstrap по-русски (Rûsî)
• Bootstrap en Español (Spanî)
• Türkçe Bootstrap (Tirkî)
• Bootstrap українською (Ukrainî)
• Bootstrap bằng tiếng Việt (Vietnamî)

Em alîkariyê nadin organîzekirin an mêvandariya wergerê, em tenê bi wan ve girêdidin.

Wergera nû an çêtir qedandiye? Daxwazek kişandinê vekin da ku wê li navnîşa me zêde bikin.