Niżżel

Bootstrap (bħalissa v3.4.1) għandu ftit modi faċli biex tibda malajr, kull wieħed jappella għal livell ta 'ħiliet u każ ta' użu differenti. Aqra biex tara x'jaqbel mal-bżonnijiet partikolari tiegħek.

jsDelivr

In-nies fuq jsDelivr graciously jipprovdu appoġġ CDN għas-CSS u JavaScript ta 'Bootstrap. Uża biss dawn il-links jsDelivr .

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

Installa ma 'Bower

Tista' wkoll tinstalla u timmaniġġja Bootstrap's Less, CSS, JavaScript, u ​​fonts billi tuża Bower :

bower install bootstrap

Installa b'npm

Tista' wkoll tinstalla Bootstrap billi tuża npm :

npm install bootstrap@3

require('bootstrap')se jgħabbi l-plugins jQuery kollha ta' Bootstrap fuq l-oġġett jQuery. Il- bootstrapmodulu innifsu ma jesporta xejn. Tista' tgħabbi manwalment il-plugins jQuery ta' Bootstrap individwalment billi tgħabbi l- /js/*.jsfajls taħt id-direttorju tal-ogħla livell tal-pakkett.

Bootstrap's package.jsonfih xi metadejta addizzjonali taħt iċ-ċwievet li ġejjin:

• less- mogħdija għall- fajl ewlieni tas-sors Less ta ' Bootstrap
• style- mogħdija għas-CSS mhux imminifikat ta' Bootstrap li ġie kkumpilat minn qabel bl-użu tas-settings default (l-ebda customization)

Installa mal-Kompożitur

Tista' wkoll tinstalla u timmaniġġja Bootstrap's Less, CSS, JavaScript, u ​​fonts billi tuża Composer :

composer require twbs/bootstrap

Awtoprefisser meħtieġ għal Less/Sass

Bootstrap juża Autoprefixer biex jittratta l -prefissi tal-bejjiegħ CSS . Jekk qed tikkompila Bootstrap mis-sors Less/Sass tagħha u ma tużax il-Gruntfile tagħna, ikollok bżonn tintegra l-Autoprefixer fil-proċess tal-bini tiegħek innifsek. Jekk qed tuża Bootstrap ikkumpilat minn qabel jew tuża Gruntfile tagħna, m'għandekx għalfejn tinkwieta dwar dan għaliex Autoprefixer huwa diġà integrat fil-Gruntfile tagħna.

X'inhu inkluż

Bootstrap jista' jitniżżel f'żewġ forom, li fihom issib id-direttorji u l-fajls li ġejjin, loġikament jiġbru r-riżorsi komuni u jipprovdu kemm varjazzjonijiet ikkumpilati kif ukoll imminifikati.

Bootstrap ikkumpilat minn qabel

Ladarba titniżżel, unzip il-folder kompressat biex tara l-istruttura ta '(il-kompilat) Bootstrap. Se tara xi ħaġa bħal din:

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

Din hija l-aktar forma bażika ta 'Bootstrap: fajls ikkumpilati minn qabel għal użu ta' drop-in malajr fi kważi kull proġett tal-web. Aħna nipprovdu CSS u JS ikkompilati ( bootstrap.*), kif ukoll CSS u JS ( bootstrap.min.*) ikkumpilati u mminifikati. Il- mapep tas-sors tas- CSS ( bootstrap.*.map) huma disponibbli għall-użu ma' ċerti għodod tal-iżviluppaturi ta' browsers. Fonts minn Glyphicons huma inklużi, bħalma hija t-tema tal-Bootstrap fakultattiva.

Kodiċi tas-sors Bootstrap

It-tniżżil tal-kodiċi tas-sors Bootstrap jinkludi l-assi CSS, JavaScript, u ​​font ikkumpilati minn qabel, flimkien mas-sors Less, JavaScript, u ​​dokumentazzjoni. B'mod aktar speċifiku, jinkludi dan li ġej u aktar:

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

Il- less/, js/, u fonts/huma l-kodiċi tas-sors għas-CSS, JS, u fonts tal-ikoni tagħna (rispettivament). Il- dist/folder jinkludi dak kollu elenkat fit-taqsima tat-tniżżil kkumpilata minn qabel hawn fuq. Il- docs/folder jinkludi l-kodiċi tas-sors għad-dokumentazzjoni tagħna, u examples/tal-użu tal-Bootstrap. Lil hinn minn dan, kwalunkwe fajl ieħor inkluż jipprovdi appoġġ għal pakketti, informazzjoni dwar il-liċenzja, u żvilupp.

Il-kumpilazzjoni ta' CSS u JavaScript

Bootstrap juża Grunt għas-sistema tal-bini tiegħu, b'metodi konvenjenti biex jaħdem mal-qafas. Huwa kif niġbru l-kodiċi tagħna, inmexxu testijiet, u aktar.

Installazzjoni Grunt

Biex tinstalla Grunt, l- ewwel trid tniżżel u tinstalla node.js (li jinkludi npm). npm tirreferi għal moduli ppakkjati node u huwa mod kif timmaniġġja d-dipendenzi tal-iżvilupp permezz ta 'node.js.

1. Installa grunt-cliglobalment b' npm install -g grunt-cli.
2. Innaviga lejn id-direttorju tal-għeruq /bootstrap/, imbagħad mexxi npm install. npm se jħares lejn il- package.jsonfajl u jinstalla awtomatikament id-dipendenzi lokali meħtieġa elenkati hemmhekk.

Meta titlesta, tkun tista' tmexxi d-diversi kmandi Grunt ipprovduti mil-linja tal-kmand.

Kmandi Grunt disponibbli

grunt dist(Ikkumpila biss CSS u JavaScript)

Jiġġenera d- /dist/direttorju b'fajls CSS u JavaScript kkompilati u mminifikati. Bħala utent Bootstrap, dan huwa normalment il-kmand li trid.

grunt watch(Għassa)

Jħares il-fajls tas-sors Inqas u awtomatikament jikkompilahom għal CSS kull meta tissejvja bidla.

grunt test(Mexxi testijiet)

Imexxi JSHint u jmexxi t- testijiet QUnit fi browsers reali grazzi għal Karma .

grunt docs(Ibni u ttestja l-assi tad-doks)

Jibni u jittestja CSS, JavaScript, u ​​assi oħra li jintużaw meta tħaddem id-dokumentazzjoni lokalment permezz ta' bundle exec jekyll serve.

grunt(Ibni assolutament kollox u agħmel testijiet)

Jiġbor u jimminifizza CSS u JavaScript, jibni l-websajt tad-dokumentazzjoni, imexxi l-validatur HTML5 kontra d-doks, jirriġenera l-assi Customizer, u aktar. Jirrikjedi Jekyll . Normalment meħtieġ biss jekk int hacking fuq Bootstrap innifsu.

Issolvi l-problemi

Jekk tiltaqa' ma' problemi bl-installazzjoni tad-dipendenzi jew it-tħaddim tal-kmandi Grunt, l-ewwel ħassar id- /node_modules/direttorju ġġenerat minn npm. Imbagħad, erġa' wettaq npm install.

Mudell bażiku

Ibda b'dan il-mudell HTML bażiku, jew immodifika dawn l-eżempji . Nittamaw li tippersonalizza l-mudelli u l-eżempji tagħna, billi tadattahom skont il-bżonnijiet tiegħek.

Ikkopja l-HTML hawn taħt biex tibda taħdem b'dokument Bootstrap minimu.

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

Eżempji

Ibni fuq il-mudell bażiku hawn fuq bil-bosta komponenti ta 'Bootstrap. Inħeġġuk tippersonalizza u tadatta Bootstrap biex taqdi l-bżonnijiet tal-proġett individwali tiegħek.

Ikseb il-kodiċi tas-sors għal kull eżempju hawn taħt billi tniżżel ir-repożitorju Bootstrap . Eżempji jistgħu jinstabu fid- docs/examples/direttorju.

Bl-użu tal-qafas

Mudell tal-bidu

Xejn ħlief l-affarijiet bażiċi: CSS u JavaScript miġbura flimkien ma 'kontenitur.

Tema Bootstrap

Tgħabbi t-tema Bootstrap fakultattiva għal esperjenza viżwalment imsaħħa.

Grids

Eżempji multipli ta 'tqassim tal-grilja bl-erba' saffi kollha, nesting, u aktar.

Jumbotron

Ibni madwar il-jumbotron b'navbar u xi kolonni bażiċi tal-grilja.

Jumbotron dejjaq

Ibni paġna aktar personalizzata billi tnaqqas il-kontenitur default u jumbotron.

Navbars fl-azzjoni

Navbar

Mudell super bażiku li jinkludi n-navbar flimkien ma 'xi kontenut addizzjonali.

Navbar ta 'fuq statiku

Mudell super bażiku b'navbar ta 'fuq statiku flimkien ma' xi kontenut addizzjonali.

Navbar fiss

Mudell super bażiku b'navbar ta 'fuq fiss flimkien ma' xi kontenut addizzjonali.

Komponenti tad-dwana

Qoxra

Mudell ta’ paġna waħda għall-bini ta’ paġni tad-dar sempliċi u sbieħ.

Karużell

Ippersonalizza n-navbar u l-karużell, imbagħad żid xi komponenti ġodda.

Blog

Tqassim sempliċi tal-blog b'żewġ kolonni b'navigazzjoni, header u tip personalizzati.

Dashboard

Struttura bażika għal dashboard tal-amministrazzjoni b'sidebar u navbar fissi.

Paġna ta' dħul

Tqassim u disinn tal-formola apposta għal sinjal sempliċi fil-forma.

Nav ġustifikat

Oħloq navbar personalizzat b'links ġustifikati. Irjus up! Mhux wisq favur Safari.

Footer li jwaħħal

Waħħal footer fil-qiegħ tal-viewport meta l-kontenut ikun iqsar minnu.

Footer li jwaħħal b'navbar

Waħħal footer mal-qiegħ tal-viewport b'navbar fiss fin-naħa ta 'fuq.

Esperimenti

Bootstrap li ma jirrispondix

Iddiżattiva faċilment ir-rispons ta' Bootstrap skont id-dokumenti tagħna .

Off-kanvas

Ibni menu ta' navigazzjoni 'l barra mill-kanvas li jista' jinbidel għall-użu ma' Bootstrap.

Għodda

Bootlint

Bootlint hija l-għodda uffiċjali Bootstrap HTML linter . Tiċċekkja awtomatikament għal diversi żbalji komuni HTML f'paġni web li qed jużaw Bootstrap b'mod pjuttost "vanilla". Il-komponenti/widgets ta' Vanilla Bootstrap jeħtieġu li l-partijiet tagħhom tad-DOM jikkonformaw ma' ċerti strutturi. Bootlint jiċċekkja li l-istanzi tal-komponenti Bootstrap għandhom HTML strutturat korrettament. Ikkunsidra li żżid Bootlint mal-għodda tal-iżvilupp tal-web Bootstrap tiegħek sabiex l-ebda żball komuni ma jnaqqas l-iżvilupp tal-proġett tiegħek.

Komunità

Ibqa' aġġornat dwar l-iżvilupp ta' Bootstrap u ikkuntattja lill-komunità b'dawn ir-riżorsi ta' għajnuna.

• Aqra u abbona għal The Official Bootstrap Blog .
• Iċċettja ma' Bootstrappers sħabi billi tuża l-IRC fis- irc.freenode.netserver, fil- kanal ##bootstrap .
• Għal għajnuna billi tuża Bootstrap, staqsi fuq StackOverflow billi tuża t-tikkettatwitter-bootstrap-3 .
• L-iżviluppaturi għandhom jużaw il-kelma prinċipali bootstrapfuq pakketti li jimmodifikaw jew iżidu mal-funzjonalità ta' Bootstrap meta jqassmu permezz ta' npm jew mekkaniżmi ta' kunsinna simili għal skoperta massima.
• Sib eżempji ta' ispirazzjoni ta' nies li jibnu b'Bootstrap fil- Bootstrap Expo .

Tista 'wkoll issegwi @getbootstrap fuq Twitter għall-aħħar gossip u vidjows mużikali tal-biża'.

Ir-reazzjoni ta' diżabilitazzjoni

Bootstrap jadatta awtomatikament il-paġni tiegħek għal diversi daqsijiet tal-iskrin. Ara kif tiddiżattiva din il-karatteristika sabiex il-paġna tiegħek taħdem bħal dan l-eżempju li ma jirrispondix .

Passi biex tiddiżattiva r-rispons tal-paġna

1. Ħalli barra l-viewport <meta>imsemmi fid -doks tas-CSS
2. Ikkalkola l- widthfuq .containergħal kull saff tal-grilja b'wisa 'wieħed, pereżempju width: 970px !important;Kun żgur li dan jiġi wara l-CSS Bootstrap default. Tista' b'għażla tevita l- !importantmal-midja mistoqsijiet jew xi selettur-fu.
3. Jekk tuża n-navbars, neħħi l-imġieba kollha tan-navbar li tiġġarraf u tespandi.
4. Għat-tqassim tal-grilja, uża .col-xs-*klassijiet flimkien ma', jew minflok, dawk medji/kbar. Tinkwetax, il-grilja tal-apparat extra-żgħar tiskala għar-riżoluzzjonijiet kollha.

Xorta jkollok bżonn Respond.js għal IE8 (peress li l-mistoqsijiet tal-midja tagħna għadhom hemm u jeħtieġ li jiġu pproċessati). Dan iwaqqaf l-aspetti tas-"sit mobbli" ta' Bootstrap.

Mudell tal-bootstrap bir-rispons diżattivat

Applikajna dawn il-passi għal eżempju. Aqra l-kodiċi tas-sors tagħha biex tara l-bidliet speċifiċi implimentati.

Ara eżempju li ma jirrispondix

Appoġġ għall-browser u l-apparat

Bootstrap huwa mibni biex jaħdem l-aħjar fl-aħħar browsers tad-desktop u tal-mowbajl, li jfisser li browsers anzjani jistgħu juru stil differenti, għalkemm jiffunzjonaw bis-sħiħ, renderings ta' ċerti komponenti.

Brawżers appoġġjati

Speċifikament, aħna nappoġġjaw l- aħħar verżjonijiet tal-browsers u l-pjattaformi li ġejjin.

Brawżers alternattivi li jużaw l-aħħar verżjoni ta' WebKit, Blink, jew Gecko, kemm jekk direttament jew permezz tal-API tal-vista tal-web tal-pjattaforma, mhumiex appoġġjati b'mod espliċitu. Madankollu, Bootstrap għandu (f'ħafna każijiet) juri u jaħdem b'mod korrett f'dawn il-browsers ukoll. Aktar informazzjoni speċifika dwar l-appoġġ hija pprovduta hawn taħt.

Apparat mobbli

B'mod ġenerali, Bootstrap jappoġġja l-aħħar verżjonijiet tal-browsers default ta' kull pjattaforma ewlenija. Innota li browsers prokura (bħal Opera Mini, il-mod Turbo ta 'Opera Mobile, UC Browser Mini, Amazon Silk) mhumiex appoġġjati.

Browsers tad-desktop

Bl-istess mod, l-aħħar verżjonijiet tal-biċċa l-kbira tal-browsers tad-desktop huma appoġġjati.

Fuq il-Windows, aħna nappoġġjaw l-Internet Explorer 8-11 .

Għal Firefox, minbarra l-aħħar rilaxx normali stabbli, aħna nappoġġjaw ukoll l-aħħar verżjoni Extended Support Release (ESR) ta’ Firefox.

B'mod mhux uffiċjali, Bootstrap għandu jidher u jġib ruħu tajjeb biżżejjed f'Chromium u Chrome għal Linux, Firefox għal Linux, u Internet Explorer 7, kif ukoll Microsoft Edge, għalkemm mhumiex appoġġjati uffiċjalment.

Għal lista ta’ xi wħud mill-bugs tal-browser li Bootstrap għandu jitħabat magħhom, ara l- Ħajt tal-bugs tal-browser tagħna .

Internet Explorer 8 u 9

Internet Explorer 8 u 9 huma wkoll appoġġjati, madankollu, jekk jogħġbok kun konxju li xi proprjetajiet CSS3 u elementi HTML5 mhumiex appoġġjati bis-sħiħ minn dawn il-browsers. Barra minn hekk, l-Internet Explorer 8 jeħtieġ l-użu ta ' Respond.js biex jippermetti l-appoġġ għall-mistoqsijiet tal-midja.

Żur Nista' nuża... għal dettalji dwar l-appoġġ tal-browser tal-karatteristiċi CSS3 u HTML5.

Internet Explorer 8 u Respond.js

Oqgħod attent mit-twissijiet li ġejjin meta tuża Respond.js fl-ambjenti ta' żvilupp u produzzjoni tiegħek għall-Internet Explorer 8.

Respond.js u CSS trans-dominju

L-użu ta' Respond.js b'CSS ospitat fuq (sub)dominju differenti (pereżempju, fuq CDN) jeħtieġ xi setup addizzjonali. Ara d-dokumenti Respond.js għad-dettalji.

Irrispondi.js ufile://

Minħabba r-regoli tas-sigurtà tal-brawżer, Respond.js ma jaħdimx b'paġni li jidhru permezz tal- file://protokoll (bħal meta tiftaħ fajl HTML lokali). Biex tittestja l-karatteristiċi li jirrispondu f'IE8, ara l-paġni tiegħek fuq HTTP(S). Ara d-dokumenti Respond.js għad-dettalji.

Irrispondi.js u@import

Respond.js ma jaħdimx ma' CSS li huwa referenzjat permezz ta' @import. B'mod partikolari, xi konfigurazzjonijiet Drupal huma magħrufa li jużaw @import. Ara d-dokumenti Respond.js għad-dettalji.

Internet Explorer 8 u box-sizing

IE8 ma jappoġġjax bis-sħiħ box-sizing: border-box;meta kkombinat ma ' min-width, max-width, min-height, jew max-height. Għal dik ir-raġuni, minn v3.0.1, m'għadniex nużaw max-widthfuq .containers.

Internet Explorer 8 u @font-face

IE8 għandu xi kwistjonijiet ma @font-facemeta kkombinat ma :before. Bootstrap juża dik il-kombinazzjoni mal-Glyphicons tiegħu. Jekk paġna hija cached, u mgħobbija mingħajr il-maws fuq it-tieqa (jiġifieri agħfas il-buttuna ta 'aġġornament jew tagħbija xi ħaġa f'iframe) allura l-paġna tiġi mogħtija qabel it-tagħbijiet tat-tipa. Meta tgħaddi fuq il-paġna (korp) se turi xi wħud mill-ikoni u meta tgħaddi fuq l-ikoni li jifdal se juru dawk ukoll. Ara l-ħarġa #13863 għad-dettalji.

IE modi ta' kompatibilità

Bootstrap mhuwiex appoġġjat fil-modi ta' kompatibilità l-qodma ta' l-Internet Explorer. Biex tkun żgur li qed tuża l-aħħar modalità ta' rendering għal IE, ikkunsidra li tinkludi t- <meta>tikketta xierqa fil-paġni tiegħek:

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

Ikkonferma l-modalità tad-dokument billi tiftaħ l-għodda tad-debugging: agħfas F12u ċċekkja l-"Modalità Dokument".

Din it-tikketta hija inkluża fid-dokumentazzjoni u l-eżempji kollha tal-Bootstrap biex tiżgura l-aħjar rendering possibbli f'kull verżjoni appoġġjata tal-Internet Explorer.

Ara din il-mistoqsija StackOverflow għal aktar informazzjoni.

Internet Explorer 10 fil-Windows 8 u Windows Phone 8

Internet Explorer 10 ma jiddistingwix il-wisa' tal- apparat mill-wisa' tal- viewport , u għalhekk ma japplikax sew il-mistoqsijiet tal-midja fis-CSS ta' Bootstrap. Normalment inti biss iżżid snippet ta 'malajr ta' CSS biex tirranġa dan:

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

Madankollu, dan ma jaħdimx għal apparati li jħaddmu Windows Phone 8 verżjonijiet eqdem minn Aġġornament 3 (magħruf ukoll bħala GDR3) , peress li jikkawża tali apparati biex juru veduta fil-biċċa l-kbira tad-desktop minflok veduta dejqa tat-"telefon". Biex tindirizza dan, ikollok bżonn tinkludi s-CSS u l-JavaScript li ġejjin biex taħdem madwar il-bug .

@-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)
}

Għal aktar informazzjoni u linji gwida dwar l-użu, aqra Windows Phone 8 u Device-Width .

Bħala heads up, aħna ninkludu dan fid-dokumentazzjoni u l-eżempji kollha ta 'Bootstrap bħala turija.

Arrotondament fil-mija Safari

Il-magna tar-rendi tal-verżjonijiet ta 'Safari qabel v7.1 għal OS X u Safari għal iOS v8.0 kellha xi problemi bin-numru ta' postijiet deċimali użati fil- .col-*-1klassijiet tal-grilja tagħna. Mela jekk kellek 12-il kolonna tal-grilja individwali, tinnota li ħarġu qosra meta mqabbla ma 'ringieli oħra ta' kolonni. Minbarra li ttejjeb Safari/iOS, għandek xi għażliet għal soluzzjonijiet:

• Żid .pull-rightmal-aħħar kolonna tal-grilja tiegħek biex tikseb l-allinjament iebes-dritt
• Agħfas il-perċentwali tiegħek manwalment biex tikseb l-arrotondament perfett għal Safari (aktar diffiċli mill-ewwel għażla)

Modali, navbars, u tastieri virtwali

Overflow u scrolling

L-appoġġ għal overflow: hiddenfuq l- <body>element huwa pjuttost limitat fl-iOS u l-Android. Għal dak il-għan, meta tiskrollja mill-parti ta' fuq jew t'isfel ta' modal f'wieħed mill-browsers ta' dawk l-apparati, il- <body>kontenut jibda jiskrollja. Ara l-bug Chrome #175502 (fissat fi Chrome v40) u l- bug WebKit #153852 .

oqsma tat-test iOS u scrolling

Minn iOS 9.3, filwaqt li modali tkun miftuħa, jekk il-mess inizjali ta 'ġest ta' scroll ikun fil-konfini ta 'testwali <input>jew ta' <textarea>, il- <body>kontenut taħt il-modal se jiġi skrolljat minflok il-modal innifsu. Ara l- bug tal-WebKit #153856 .

Tastieri virtwali

Ukoll, innota li jekk qed tuża navbar fiss jew tuża inputs f'modal, iOS għandu bug ta 'l-għoti li ma jaġġornax il-pożizzjoni ta' elementi fissi meta t-tastiera virtwali tiġi attivata. Xi ftit soluzzjonijiet għal dan jinkludu t-trasformazzjoni tal-elementi tiegħek position: absolutejew li tinvoka tajmer fuq il-fokus biex tipprova tikkoreġi l-ippożizzjonar manwalment. Dan mhux immaniġġjat minn Bootstrap, għalhekk huwa f'idejnek li tiddeċiedi liema soluzzjoni hija l-aħjar għall-applikazzjoni tiegħek.

Navbar Dropdowns

L- .dropdown-backdropelement ma jintużax fuq iOS fin-nav minħabba l-kumplessità ta 'z-indexing. Għalhekk, biex tagħlaq dropdowns fin-navbars, trid tikklikkja direttament l-element dropdown (jew kwalunkwe element ieħor li se jispara avveniment tal-ikklikkja fl-iOS ).

Żumjar tal-browser

Iż-żum tal-paġna inevitabbilment jippreżenta artifacts tar-rendi f'xi komponenti, kemm f'Bootstrap kif ukoll fil-bqija tal-web. Skont il-kwistjoni, nistgħu nkunu kapaċi nirranġawha (l-ewwel fittex u mbagħad tiftaħ kwistjoni jekk ikun hemm bżonn). Madankollu, għandna t-tendenza li ninjoraw dawn peress li ħafna drabi ma jkollhom l-ebda soluzzjoni diretta għajr soluzzjonijiet hacky.

Sticky :hover/ :focusfuq il-mowbajl

Anki jekk id-depożitu reali mhux possibbli fuq il-biċċa l-kbira tat-touchscreens, il-biċċa l-kbira tal-browsers mobbli jimitaw l-appoġġ għall-hovering u jagħmlu :hover"jwaħħal". Fi kliem ieħor, l- :hoveristili jibdew japplikaw wara li ttektek element u jieqfu japplikaw biss wara li l-utent jisfrutta xi element ieħor. Dan jista 'jikkawża li l-istati ta' Bootstrap :hoverisiru mhux mixtieqa "jwaħħlu" fuq browsers bħal dawn. Xi browsers mobbli jagħmlu :focuswkoll twaħħal bl-istess mod. Bħalissa m'hemm l-ebda soluzzjoni sempliċi għal dawn il-kwistjonijiet ħlief li jitneħħew għal kollox tali stili.

Stampar

Anke f'xi browsers moderni, l-istampar jista 'jkun quirky.

B'mod partikolari, minn Chrome v32 u irrispettivament mis-settings tal-marġni, Chrome juża wisa' ta' viewport sinifikament idjaq mid-daqs fiżiku tal-karta meta jsolvi mistoqsijiet tal-midja waqt li jistampa paġna web. Dan jista' jwassal biex il-grilja ż-żgħira ta' Bootstrap tiġi attivata b'mod mhux mistenni meta tipprintja. Ara l-ħarġa #12078 u l- bug Chrome #273306 għal xi dettalji. Soluzzjonijiet ssuġġeriti:

• Iħaddnu l-grilja ż-żgħira u kun żgur li l-paġna tiegħek tidher aċċettabbli taħtha.
• Ippersonalizza l-valuri tal- @screen-*varjabbli Inqas sabiex il-karta tal-printer tiegħek titqies akbar minn ż-żgħira żejda.
• Żid mistoqsijiet tal-midja tad-dwana biex tbiddel il-punti ta 'waqfien tad-daqs tal-grilja għall-midja stampata biss.

Ukoll, minn Safari v8.0, .containers b'wisa 'fiss jista' jikkawża li Safari juża daqs żgħir mhux tas-soltu tat-tipa meta jistampa. Ara #14868 u WebKit bug #138192 għal aktar dettalji. Soluzzjoni potenzjali waħda għal dan hija li żżid is-CSS li ġej:

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

Brawżer tal-istokk tal-Android

Mill-kaxxa, Android 4.1 (u anki xi ħarġiet aktar ġodda apparentement) jintbagħtu bl-app tal-Browser bħala l-web browser default tal-għażla (kuntrarju għal Chrome). Sfortunatament, l-app tal-Browser għandha ħafna bugs u inkonsistenzi mas-CSS b'mod ġenerali.

Agħżel menus

Fuq <select>elementi, il-brawżer tal-istokk Android mhux se juri l-kontrolli tal-ġenb jekk ikun hemm border-radiusu/jew borderapplikat. (Ara din il-mistoqsija StackOverflow għad-dettalji.) Uża s-snippet tal-kodiċi hawn taħt biex tneħħi s-CSS li toffendi u tirrendi l- <select>bħala element unstyled fuq il-brawżer tal-istokk tal-Android. L-aġent tal-utent li jxomm jevita interferenza mal-browsers Chrome, Safari, u Mozilla.

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

Trid tara eżempju? Iċċekkja din id-demo JS Bin.

Validaturi

Sabiex tipprovdi l-aħjar esperjenza possibbli għal browsers qodma u buggy, Bootstrap juża hacks tal-brawżer CSS f'diversi postijiet biex jimmira CSS speċjali għal ċerti verżjonijiet tal-brawżer sabiex jaħdem madwar bugs fil-browsers infushom. Dawn il-hacks jistgħu jifhmu li l-validaturi tas-CSS jilmentaw li huma invalidi. F'xi postijiet, nużaw ukoll karatteristiċi CSS ta' tmiem il-ħin li għadhom mhumiex standardizzati għal kollox, iżda dawn jintużaw purament għal titjib progressiv.

Dawn it-twissijiet ta 'validazzjoni ma jimpurtax fil-prattika peress li l-porzjon mhux hacky tas-CSS tagħna jivvalida bis-sħiħ u l-porzjonijiet hacky ma jinterferixxux mal-funzjonament tajjeb tal-porzjon mhux hacky, għalhekk aħna deliberatament ninjoraw dawn it-twissijiet partikolari.

Id-dokumenti HTML tagħna bl-istess mod għandhom xi twissijiet ta' validazzjoni HTML trivjali u inkonsegwenzjali minħabba l-inklużjoni tagħna ta' soluzzjoni għal ċertu bug ta' Firefox .

Appoġġ ta 'parti terza

Filwaqt li aħna ma nappoġġjawx uffiċjalment l-ebda plugin jew add-ons ta’ partijiet terzi, noffru xi pariri utli biex ngħinu biex jiġu evitati kwistjonijiet potenzjali fil-proġetti tiegħek.

Kaxxa-daqs

Xi softwer ta' partijiet terzi, inklużi Google Maps u Google Custom Search Engine, jikkonfliġġu ma' Bootstrap minħabba * { box-sizing: border-box; }, regola li tagħmilha hekk paddingma taffettwax il-wisa' finali kkalkulata ta' element. Tgħallem aktar dwar il -mudell tal-kaxxa u d-daqs fuq CSS Tricks .

Skont il-kuntest, tista' tegħleb kif meħtieġ (Għażla 1) jew tirrisettja d-daqs tal-kaxxa għal reġjuni sħaħ (Għażla 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();
}

Aċċessibilità

Bootstrap isegwi standards tal-web komuni u—bi sforz minimu żejjed—jista’ jintuża biex jinħolqu siti li huma aċċessibbli għal dawk li jużaw AT .

Aqbeż in-navigazzjoni

Jekk in-navigazzjoni tiegħek fiha ħafna links u tiġi qabel il-kontenut prinċipali fid-DOM, żid Skip to main contentlink qabel in-navigazzjoni (għal spjegazzjoni sempliċi, ara dan l-artikolu tal- Proġett A11Y dwar skip navigazzjoni links ). L-użu tal- .sr-onlyklassi se taħbi viżwalment l-iskip link, u l- .sr-only-focusableklassi tiżgura li l-link issir viżibbli ladarba tkun iffukata (għall-utenti tat-tastiera b'vista).

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

Intestaturi nested

Meta jbejtu l-intestaturi ( <h1>- <h6>), l-intestaturi tad-dokument primarju tiegħek għandu jkun <h1>. L-intestaturi sussegwenti għandhom jagħmlu użu loġiku minn <h2>- <h6>b'tali mod li l-qarrejja tal-iskrin jistgħu jibnu sommarju għall-paġni tiegħek.

Tgħallem aktar fuq HTML CodeSniffer u Penn State's AccessAbility .

Kuntrast tal-kulur

Bħalissa, xi wħud mill-kombinazzjonijiet ta' kuluri default disponibbli f'Bootstrap (bħall-klassijiet varji ta' buttuna b'stil, xi wħud mill-kuluri li jenfasizzaw il-kodiċi użati għal blokki ta' kodiċi bażiċi , il -klassi ta' għajnuna ta' l .bg-primary -isfond kuntestwali , u l-kulur tal-link default meta jintuża fuq sfond abjad) għandhom proporzjon ta 'kuntrast baxx (taħt il- proporzjon rakkomandat ta' 4.5:1 ). Dan jista 'jikkawża problemi lill-utenti b'vista baxxa jew li huma għomja mill-kulur. Dawn il-kuluri default jistgħu jeħtieġu li jiġu modifikati biex iżidu l-kuntrast u l-leġibilità tagħhom.

Riżorsi addizzjonali

• Bookmarklet "HTML Codesniffer" għall-identifikazzjoni ta' kwistjonijiet ta' aċċessibbiltà
• Estensjoni tal-Għodod tal-Iżviluppaturi tal-Aċċessibilità ta' Chrome
• Analizzatur tal-Kuntrast tal-Kulur
• Il-Proġett A11Y
• Dokumentazzjoni tal-aċċessibbiltà tal-MDN

FAQs dwar il-liċenzja

Bootstrap huwa rilaxxat taħt il-liċenzja MIT u huwa awtur 2019 Twitter. Mgħollija għal biċċiet iżgħar, tista 'tiġi deskritta bil-kundizzjonijiet li ġejjin.

Jeħtieġ li:

• Żomm il-liċenzja u l-avviż tad-drittijiet tal-awtur inklużi fil-fajls CSS u JavaScript ta' Bootstrap meta tużahom fix-xogħlijiet tiegħek

Jippermettilek:

• Niżżel u uża Bootstrap b'mod liberu, kollu jew parzjalment, għal skopijiet personali, privati, interni tal-kumpanija jew kummerċjali
• Uża Bootstrap f'pakketti jew distribuzzjonijiet li toħloq
• Immodifika l-kodiċi tas-sors
• Agħti subliċenzja biex timmodifika u tqassam Bootstrap lil partijiet terzi mhux inklużi fil-liċenzja

Tipprojbixxilek li:

• Żomm l-awturi u s-sidien tal-liċenzja responsabbli għad-danni peress li Bootstrap huwa pprovdut mingħajr garanzija
• Żomm lill-ħallieqa jew lid-detenturi tad-drittijiet tal-awtur ta' Bootstrap responsabbli
• Qassam mill-ġdid kwalunkwe biċċa Bootstrap mingħajr attribuzzjoni xierqa
• Uża kwalunkwe marka proprjetà ta' Twitter b'xi mod li jista' jiddikjara jew jimplika li Twitter japprova d-distribuzzjoni tiegħek
• Uża kwalunkwe marka proprjetà ta' Twitter b'xi mod li jista' jiddikjara jew jimplika li inti ħloqt is-softwer Twitter inkwistjoni

Ma teħtieġx li:

• Inkludi s-sors ta' Bootstrap innifsu, jew ta' kwalunkwe modifika li tista' għamiltlu, fi kwalunkwe ridistribuzzjoni li tista' tgħaqqad li tinkludiha
• Ibgħat il-bidliet li tagħmel lil Bootstrap lura lill-proġett Bootstrap (għalkemm feedback bħal dan huwa mħeġġeġ)

Il-liċenzja Bootstrap sħiħa tinsab fir-repożitorju tal-proġett għal aktar informazzjoni.

Traduzzjonijiet

Il-membri tal-komunità ttraduċu d-dokumentazzjoni ta' Bootstrap f'diversi lingwi. L-ebda wieħed ma huwa appoġġjat uffiċjalment u jista 'mhux dejjem ikunu aġġornati.

• Bootstrap 中文文档 (Ċiniż)
• Bootstrap på Dansk (Daniż)
• Bootstrap en Français (Franċiż)
• Bootstrap auf Deutsch (Ġermaniż)
• Bootstrap bl-Italjan (Taljan)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Portugiż Brażiljan)
• Bootstrap по-русски (Russu)
• Bootstrap en Español (Spanjol)
• Türkçe Bootstrap (Turk)
• Bootstrap українською (Ukranjan)
• Bootstrap bằng tiếng Việt (Vjetnamiż)

Aħna ma ngħinux biex norganizzaw jew jospitaw traduzzjonijiet, aħna biss nikkollegaw magħhom.

Lestejt traduzzjoni ġdida jew aħjar? Iftaħ talba tal-ġibda biex iżżidha mal-lista tagħna.