Landa

I-Bootstrap (okwamanje i-v3.3.7) inezindlela ezimbalwa ezilula zokuqalisa ngokushesha, ngayinye iheha ileveli yekhono ehlukile kanye nekesi yokusebenzisa. Funda ukuze ubone ukuthi yini evumelana nezidingo zakho ezithile.

I-Bootstrap CDN

Abantu lapha e- jsDelivr bahlinzeka ngomusa ukusekelwa kwe-CDN kwe-CSS ye-Bootstrap ne-JavaScript. Vele usebenzise lezi zixhumanisi ze- Bootstrap CDN .

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

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

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

Faka nge-Bower

Ungaphinda ufake futhi uphathe Okuncane, i-CSS, iJavaScript, namafonti e-Bootstrap usebenzisa i- Bower :

$ bower install bootstrap

Faka nge-npm

Ungakwazi futhi ukufaka i-Bootstrap usebenzisa i -npm :

$ npm install bootstrap@3

require('bootstrap')izolayisha wonke ama-plugin e-Bootstrap e-jQuery entweni ye-jQuery. Imojula bootstrapngokwayo ayikhiphi lutho. Ungakwazi ukulayisha mathupha ama-plugin e-Bootstrap e-jQuery ngawodwana ngokulayisha /js/*.jsamafayela ngaphansi kohla lwemibhalo lwezinga eliphezulu lephakheji.

I-Bootstrap's package.jsoniqukethe imethadatha eyengeziwe ngaphansi kokhiye abalandelayo:

• less- indlela eya kufayela eliyinhloko le-Bootstrap eliwumthombo omncane
• style- indlela eya ku-CSS engancishisiwe ye-Bootstrap ehlanganiswe kusengaphambili kusetshenziswa izilungiselelo ezizenzakalelayo (akukho ukwenza ngokwezifiso)

Faka noMqambi

Ungaphinda ufake futhi uphathe Okuncane, i-CSS, i-JavaScript, namafonti e-Bootstrap usebenzisa i- Composer :

$ composer require twbs/bootstrap

I-Autoprefix iyadingeka ku-Less/Sass

I -Bootstrap isebenzisa i -Autoprefixer ukuze ibhekane neziqalo zomthengisi we-CSS . Uma uhlanganisa i-Bootstrap emthonjeni wayo we-Less/Sass futhi ungasebenzisi i-Gruntfile yethu, uzodinga ukuhlanganisa i-Autoprefixer kunqubo yakho yokwakha ngokwakho. Uma usebenzisa i-Bootstrap ehlanganiswe ngaphambili noma usebenzisa i-Gruntfile yethu, awudingi ukukhathazeka ngalokhu ngoba i-Autoprefixer isivele ihlanganiswe ku-Gruntfile yethu.

Yini efakiwe

I-Bootstrap ilayisheka ngezindlela ezimbili, lapho uzothola khona izinkomba namafayela alandelayo, uhlanganisa ngokunengqondo izinsiza ezivamile futhi unikeze kokubili ukuhluka okuhlanganisiwe nokucushiwe.

I-Bootstrap Ehlanganisiwe

Uma isilandiwe, vula unzip ifolda ecindezelwe ukuze ubone ukwakheka kwe-(i-Bootstrap ehlanganisiwe). Uzobona into efana nale:

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

Lolu uhlobo oluyisisekelo kakhulu lwe-Bootstrap: amafayela ahlanganiswe kusengaphambili ukuze asetshenziswe ngokushesha cishe kunoma iyiphi iphrojekthi yewebhu. Sihlinzeka nge-CSS ne-JS ( bootstrap.*) ehlanganisiwe, kanye ne-CSS ne-JS ( bootstrap.min.*). Amamephu omthombo we - CSS ( bootstrap.*.map) ayatholakala ukuze asetshenziswe namathuluzi onjiniyela weziphequluli ezithile. Amafonti asuka ku-Glyphicons afakiwe, njengetimu ye-Bootstrap ekhethwayo.

Ikhodi yomthombo we-Bootstrap

Ukulanda ikhodi yomthombo we-Bootstrap kufaka phakathi i-CSS, i-JavaScript, nezimpahla zefonti esezihlanganiswe ngaphambili, kanye nomthombo othi Less, JavaScript, kanye nemibhalo. Ngokuqondile, kuhlanganisa okulandelayo nokunye okwengeziwe:

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

I- less/, js/, kanye fonts/nekhodi yomthombo ye-CSS yethu, i-JS, namafonti esithonjana (ngokulandelana). Ifolda dist/ihlanganisa konke okusohlwini lwesigaba sokudawuniloda esihlanganiswe ngaphambili ngenhla. Ifolda docs/ihlanganisa ikhodi yomthombo yemibhalo yethu, kanye examples/nokusetshenziswa kwe-Bootstrap. Ngaphandle kwalokho, noma yiliphi elinye ifayela elifakiwe linikeza ukwesekwa kwamaphakheji, ulwazi lwelayisense, nokuthuthukiswa.

Ihlanganisa i-CSS neJavaScript

I- Bootstrap isebenzisa i- Grunt kusistimu yayo yokwakha, enezindlela ezikahle zokusebenza ngohlaka. Kuyindlela esihlanganisa ngayo ikhodi yethu, senze izivivinyo, nokunye okwengeziwe.

Ifaka i-Grunt

Ukuze ufake i-Grunt, kufanele uqale ulande futhi ufake i-node.js (ehlanganisa i-npm). I-npm imele amamojula ahlanganisiwe we-node futhi iyindlela yokuphatha ukuncika kwentuthuko ngokusebenzisa i-node.js.

1. Faka grunt-cliemhlabeni jikelele nge- npm install -g grunt-cli.
2. Zulazulela kuhlu lwemibhalo lwempande /bootstrap/, bese ugijima npm install. i-npm izobheka package.jsonifayela futhi ifake ngokuzenzakalelayo ukuncika kwasendaweni okudingekayo okubalwe lapho.

Uma usuqediwe, uzokwazi ukusebenzisa imiyalo ehlukahlukene ye-Grunt ehlinzekwe emugqeni womyalo.

Imiyalo ye-Grunt etholakalayo

grunt dist(Vele uhlanganise i-CSS neJavaScript)

Ikhiqiza kabusha /dist/uhla lwemibhalo ngamafayela e-CSS ahlanganisiwe futhi ancishisiwe kanye ne-JavaScript. Njengomsebenzisi we-Bootstrap, lokhu kuvamise ukuba ngumyalo owufunayo.

grunt watch(Buka)

Ibuka amafayela omthombo Omncane futhi iwabuyisele ngokuzenzakalelayo ku-CSS noma nini lapho ulondoloza ushintsho.

grunt test(Qalisa izivivinyo)

Isebenzisa i- JSHint futhi iqalise ukuhlolwa kwe-QUnit ngaphandle kwekhanda ku- PhantomJS .

grunt docs(Yakha futhi uhlole amafa amadokhumenti)

Yakha futhi ihlole i-CSS, i-JavaScript, nezinye izimpahla ezisetshenziswa lapho kusetshenziswa amadokhumenti endaweni nge- bundle exec jekyll serve.

grunt(Yakha yonke into futhi wenze izivivinyo)

Ihlanganisa futhi yenze ibe ncane i-CSS ne-JavaScript, yakha iwebhusayithi yemibhalo, isebenzisa isiqinisekisi se-HTML5 ngokumelene namadokhumenti, ivuselela izimpahla ze-Customizer, nokunye okwengeziwe. Idinga i- Jekyll . Ngokuvamile kudingekile kuphela uma ugebenga i-Bootstrap ngokwayo.

Ukuxazulula inkinga

Uma kwenzeka uhlangabezana nezinkinga ngokufaka okuncikile noma ukusebenzisa imiyalo ye-Grunt, qala /node_modules/ngokususa uhla lwemibhalo olukhiqizwe yi-npm. Bese, phinda npm install.

Isifanekiso esiyisisekelo

Qala ngalesi sifanekiso se-HTML esiyisisekelo, noma lungisa lezi zibonelo . Sithemba ukuthi uzokwenza ngendlela oyifisayo izifanekiso nezibonelo zethu, uzivumelanise nezimo ukuze zivumelane nezidingo zakho.

Kopisha i-HTML engezansi ukuze uqale ukusebenza ngedokhumenti encane ye-Bootstrap.

<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Izibonelo

Yakha kusifanekiso esiyisisekelo esingenhla ngezingxenye eziningi ze-Bootstrap. Sikukhuthaza ukuthi wenze ngendlela oyifisayo futhi uvumelanise i-Bootstrap ukuze ivumelane nezidingo zephrojekthi yakho ngayinye.

Thola ikhodi yomthombo yaso sonke isibonelo esingezansi ngokulanda inqolobane ye-Bootstrap . Izibonelo zingatholakala ohlwini docs/examples/lwemibhalo.

Ukusebenzisa uhlaka

Isifanekiso sokuqala

Akukho lutho ngaphandle kwezisekelo: i-CSS ehlanganisiwe ne-JavaScript kanye nesiqukathi.

Itimu ye-Bootstrap

Layisha itimu yokuzikhethela ye-Bootstrap ukuze uthole umuzwa othuthukisiwe obonakalayo.

Amagridi

Izibonelo eziningi zezakhiwo zegridi enazo zonke izigaba ezine, ukuzalanisa, nokunye.

I-Jumbotron

Yakha uzungeze i-jumbotron nge-navbar kanye namakholomu egridi ayisisekelo.

I-jumbotron encane

Yakha ikhasi langokwezifiso ngokwengeziwe ngokunciphisa isiqukathi esizenzakalelayo kanye ne-jumbotron.

Ama-Navbar ayasebenza

Ibha ye-Navbar

Isifanekiso esiyisisekelo esihle esifaka ibha ye-navbar nokunye okuqukethwe okwengeziwe.

I-navbar ephezulu emile

Isifanekiso esiyisisekelo esihle esine-navbar ephezulu emile kanye nokunye okuqukethwe okwengeziwe.

I-navbar elungisiwe

Isifanekiso esiyisisekelo esihle esine-navbar ephezulu engashintshi kanye nokunye okuqukethwe okwengeziwe.

Izingxenye ngokwezifiso

Ikhava

Isifanekiso sekhasi elilodwa sokwakha amakhasi asekhaya alula futhi amahle.

I-Carousel

Yenza ngokwezifiso i-navbar ne-carousel, bese wengeza izingxenye ezintsha.

Ibhulogi

Isakhiwo sebhulogi esilula samakholomu amabili esinokuzulazula kwangokwezifiso, unhlokweni, nohlobo.

Ideshibhodi

Isakhiwo esiyisisekelo sedeshibhodi yomqondisi enebha eseceleni engashintshi kanye ne-navbar.

Ikhasi lokungena ngemvume

Isakhiwo sefomu ngokwezifiso kanye nomklamo wefomu lokungena ngemvume elilula.

I nav

Dala i-navbar yangokwezifiso enezixhumanisi ezifanele. Amakhanda phezulu! Ayihambisani kakhulu neSafari.

Unyaweni onamathelayo

Namathisela unyaweni phansi kwembobo yokubuka lapho okuqukethwe kukufushane kunalo.

Unyaweni onamathelayo onebha ye-navbar

Namathisela unyaweni phansi kwembobo yokubuka nge-navbar engashintshi phezulu.

Izivivinyo

I-Bootstrap engaphenduli

Khubaza kalula ukuphendula kwe-Bootstrap ngamadokhumenti ethu .

I-off-canvas

Yakha imenyu ye-off-canvas navigation eguqulekayo ukuze isetshenziswe nge-Bootstrap.

Amathuluzi

I-Bootlint

I- Bootlint iyithuluzi elisemthethweni le-Bootstrap HTML linter . Ihlola ngokuzenzakalela amaphutha amaningana ajwayelekile e-HTML emakhasini ewebhu asebenzisa i-Bootstrap ngendlela "ye-vanilla". Izingxenye/amawijethi e-Vanilla Bootstrap adinga izingxenye zawo ze-DOM ukuthi zivumelane nezakhiwo ezithile. I-Bootlint ihlola ukuthi izimo zezingxenye ze-Bootstrap zine-HTML eyakhiwe ngendlela efanele. Cabangela ukungeza i-Bootlint kuchungechunge lwakho lwamathuluzi okuthuthukisa iwebhu ye-Bootstrap ukuze kungabikho nelilodwa iphutha elivamile elibambezela ukuthuthukiswa kwephrojekthi yakho.

Umphakathi

Hlala unolwazi lwakamuva mayelana nokuthuthukiswa kwe-Bootstrap futhi ufinyelele umphakathi ngalezi zinsiza eziwusizo.

• Funda futhi ubhalisele Ibhulogi Ye-Bootstrap Esemthethweni .
• Xoxa nabanye oBootstrappers usebenzisa i-IRC irc.freenode.netkuseva, esiteshini ##bootstrap .
• Ngosizo usebenzisa i-Bootstrap, buza ku- StackOverflow usebenzisa ithegitwitter-bootstrap-3 .
• Onjiniyela kufanele basebenzise igama elingukhiye bootstrapkumaphakheji ashintsha noma engeza ekusebenzeni kwe-Bootstrap lapho esabalalisa nge- npm noma izindlela zokulethwa ezifanayo ukuze kutholakale okuphezulu.
• Thola izibonelo ezikhuthazayo zabantu abakha nge-Bootstrap ku- Bootstrap Expo .

Ungakwazi futhi ukulandela u-@getbootstrap ku-Twitter ukuze uthole inhlebo yakamuva namavidiyo omculo amangalisayo.

Ikhubaza ukuphendula

I-Bootstrap ivumelanisa ngokuzenzakalelayo amakhasi akho amasayizi ahlukahlukene wesikrini. Nansi indlela yokukhubaza lesi sici ukuze ikhasi lakho lisebenze njengalesi sibonelo esingaphenduli .

Izinyathelo zokukhubaza ukuphendula kwekhasi

1. Khipha indawo yokubuka <meta>eshiwo kumadokhumenti e -CSS
2. Bhala ngaphezulu kwesigaba widthsegridi .containerngasinye ngobubanzi obubodwa, isibonelo width: 970px !important;Qiniseka ukuthi lokhu kuza ngemva kwe-CSS ye-Bootstrap ezenzakalelayo. Ungakwazi ukugwema ngokuzikhethela !importantngemibuzo yemidiya noma isikhethi-fu.
3. Uma usebenzisa ama-navbar, susa yonke i-navbar egoqayo nokwandisa ukuziphatha.
4. Ukuze uthole izakhiwo zegridi, sebenzisa .col-xs-*amakilasi ngaphezu, noma esikhundleni salezo ezimaphakathi/ezinkulu. Ungakhathazeki, igridi yedivayisi encane kakhulu ifinyelela kukho konke ukulungiswa.

Usazodinga i-Respond.js ye-IE8 (njengoba imibuzo yethu yemidiya isekhona futhi idinga ukucutshungulwa). Lokhu kukhubaza izici "zesayithi yeselula" ze-Bootstrap.

Isifanekiso se-Bootstrap esinokuphendula kukhutshaziwe

Sisebenzise lezi zinyathelo esibonelweni. Funda ikhodi yayo yomthombo ukuze ubone izinguquko ezithile ezisetshenziswayo.

Buka isibonelo esingaphenduli

Usekelo lwesiphequluli nedivayisi

I-Bootstrap yakhelwe ukusebenza kahle kakhulu kwideskithophu yakamuva neziphequluli zeselula, okusho ukuthi iziphequluli ezindala zingase zibonise indlela ehlukile, nakuba zisebenza ngokugcwele, ukunikezwa kwezingxenye ezithile.

Iziphequluli ezisekelwe

Ngokukhethekile, sisekela izinguqulo zakamuva zeziphequluli nezinkundla ezilandelayo.

Ezinye iziphequluli ezisebenzisa inguqulo yakamuva ye-WebKit, i-Blink, noma i-Gecko, kungaba ngokuqondile noma nge-API yokubuka iwebhu yesikhulumi, azisekelwa ngokusobala. Nokho, i-Bootstrap kufanele (ezikhathini eziningi) ibonise futhi isebenze kahle nakulezi ziphequluli. Ulwazi oluthe xaxa losekelo lunikezwe ngezansi.

Amadivaysi eselula

Ngokuvamile, i-Bootstrap isekela izinguqulo zakamuva zeziphequluli ezizenzakalelayo zengxenyekazi ngayinye enkulu. Qaphela ukuthi iziphequluli zommeleli (ezifana ne-Opera Mini, imodi ye-Opera Mobile Turbo, i-UC Browser Mini, i-Amazon Silk) azisekelwe.

Iziphequluli zedeskithophu

Ngokufanayo, izinguqulo zakamuva zeziphequluli eziningi zedeskithophu ziyasekelwa.

Ku-Windows, sisekela i-Internet Explorer 8-11 .

KuFirefox, ngaphezu kokukhishwa kwakamuva okuzinzile okujwayelekile, siphinde sisekele inguqulo yakamuva yokukhululwa kokusekelwa okunwetshiwe (ESR) yeFirefox.

Ngokungafanele, i-Bootstrap kufanele ibukeke futhi iziphathe kahle ngokwanele ku-Chromium ne-Chrome ye-Linux, i-Firefox ye-Linux, ne-Internet Explorer 7, kanye ne-Microsoft Edge, nakuba ingasekelwe ngokusemthethweni.

Ukuze uthole uhlu lwezinye iziphazamisi zesiphequluli i-Bootstrap okufanele ibhekane nazo, bheka i-Wall yethu yeziphazamisi zesiphequluli .

I-Internet Explorer 8 no-9

I-Internet Explorer 8 ne-9 nazo ziyasekelwa, nokho, sicela uqaphele ukuthi ezinye izici ze-CSS3 nezinto ze-HTML5 azisekelwa ngokugcwele yilezi ziphequluli. Ngaphezu kwalokho, i- Internet Explorer 8 idinga ukusetshenziswa kwe- Respond.js ukuze inike amandla ukusekelwa kwemibuzo yemidiya.

Vakashela Can I use... ukuze uthole imininingwane yosekelo lwesiphequluli lwe-CSS3 kanye nezici ze-HTML5.

I-Internet Explorer 8 kanye ne-Respond.js

Qaphela lezi zixwayiso ezilandelayo uma usebenzisa i-Respond.js ekuthuthukisweni kwakho nasekukhiqizeni i-Internet Explorer 8.

Respond.js kanye ne-CSS yesizinda esihlukene

Ukusebenzisa i-Respond.js nge-CSS isingathwe kwesinye (isizinda) esihlukile (isibonelo, ku-CDN) kudinga ukusetha okwengeziwe. Bona amadokhumenti e-Respond.js ukuze uthole imininingwane.

Respond.js kanyefile://

Ngenxa yemithetho yezokuphepha yesiphequluli, i-Respond.js ayisebenzi namakhasi abukwa file://ngephrothokholi (njengalapho uvula ifayela lendawo le-HTML). Ukuze uhlole izici ezisabelayo ku-IE8, buka amakhasi akho nge-HTTP(S). Bona amadokhumenti e-Respond.js ukuze uthole imininingwane.

Respond.js kanye@import

I-Respond.js ayisebenzi ne-CSS ekhonjwa nge- @import. Ikakhulukazi, okunye ukucushwa kwe-Drupal kwaziwa kusetshenziswa @import. Bona amadokhumenti e-Respond.js ukuze uthole imininingwane.

I-Internet Explorer 8 kanye nosayizi webhokisi

I-IE8 ayisekeli ngokugcwele box-sizing: border-box;uma ihlanganiswa ne- min-width, max-width, min-height, noma max-height. Ngaleso sizathu, kusukela ku-v3.0.1, asisasebenzisi max-widthku- .containers.

I-Internet Explorer 8 kanye no-@font-face

I-IE8 inezinkinga ezithile @font-facelapho ihlanganiswa ne- :before. I-Bootstrap isebenzisa leyo nhlanganisela namaGlyphicons ayo. Uma ikhasi ligcinwe kunqolobane, futhi lilayishwa ngaphandle kwegundane phezu kwewindi (okungukuthi shaya inkinobho yokuvuselela noma layisha okuthile ku-iframe) bese ikhasi linikezwa ngaphambi kokuba ifonti ilayishwe. Ukuhambisa phezu kwekhasi (umzimba) kuzobonisa ezinye izithonjana futhi ukuhambisa phezulu kwezithonjana ezisele kuzobonisa nalezo. Bheka ukukhishwa okungu-#13863 ukuze uthole imininingwane.

Izindlela zokuvumelana ze-IE

I-Bootstrap ayisekelwe kumamodi amadala ahambisana ne-Internet Explorer. Ukuze uqiniseke ukuthi usebenzisa imodi yakamuva yokunikeza ye-IE, cabanga ukufaka <meta>umaka ofanele emakhasini akho:

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

Qinisekisa imodi yedokhumenti ngokuvula amathuluzi okulungisa iphutha: cindezela F12bese uhlola "Imodi Yedokhumenti".

Le thegi ifakiwe kuwo wonke amadokhumenti nezibonelo ze-Bootstrap ukuze kuqinisekiswe ukunikezwa okungcono kakhulu ngangokunokwenzeka kunguqulo ngayinye esekelwayo ye-Internet Explorer.

Bona lo mbuzo we-StackOverflow ukuze uthole ulwazi olwengeziwe.

I-Internet Explorer 10 ku-Windows 8 naku-Windows Phone 8

I-Internet Explorer 10 ayihlukanisi ububanzi bedivayisi kububanzi bembobo yokubuka , futhi ngaleyo ndlela ayisebenzisi kahle imibuzo yemidiya ku-CSS ye-Bootstrap. Ngokuvamile ungangeza amazwibela asheshayo we-CSS ukuze ulungise lokhu:

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

Kodwa-ke, lokhu akusebenzi kumadivayisi asebenzisa izinguqulo ze-Windows Phone 8 ezindala kune- Update 3 (aka GDR3) , njengoba kubangela ukuthi amadivayisi anjalo abonise ukubuka kakhulu kwedeskithophu esikhundleni sokubuka "kwefoni" emincane. Ukuze ubhekane nalokhu, uzodinga ukufaka phakathi i-CSS ne-JavaScript elandelayo ukuze usebenze mayelana nesiphazamisi .

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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)
}

Ukuze uthole ulwazi olwengeziwe nemihlahlandlela yokusebenzisa, funda I -Windows Phone 8 kanye Nobubanzi Bedivayisi .

Njengesihloko, sifaka lokhu kuwo wonke amadokhumenti nezibonelo ze-Bootstrap njengomboniso.

Iphesenti le-Safari elijikelezayo

Injini enikezela ngezinguqulo ze-Safari ngaphambi kwe-v7.1 ye-OS X ne-Safari ye-iOS v8.0 ibe nenkinga ngenani lezindawo zamadesimali ezisetshenziswa .col-*-1kumakilasi ethu egridi. Ngakho uma ubunamakholomu egridi angawodwana angu-12, uzoqaphela ukuthi abe mafushane uma kuqhathaniswa neminye imigqa yamakholomu. Ngaphandle kokuthuthukisa iSafari/iOS, unezinketho ezithile zokwenza umsebenzi:

• Engeza .pull-rightkukholomu yakho yokugcina yegridi ukuze uthole ukuqondanisa okuqinile kwesokudla
• Shintsha amaphesenti akho mathupha ukuze uthole ukuzungeza okuphelele kweSafari (kunzima kakhulu kunenketho yokuqala)

Amamodali, ama-navbar, namakhibhodi abonakalayo

Ukuchichima nokuskrola

Ukusekelwa kwesici kukhawulelwe ku-iOS naku-Android overflow: hidden. <body>Ukuze wenze lokho, uma uskrola udlule phezulu noma phansi kwe-modal kunoma yisiphi salezo ziphequluli zalawo madivayisi, <body>okuqukethwe kuzoqala ukuskrola. Bona iphutha le- Chrome #175502 (elilungiswe ku-Chrome v40) kanye nesiphazamisi se- WebKit #153852 .

Izinkambu zombhalo we-iOS nokuskrola

Kusukela ku-iOS 9.3, ngenkathi i-modal ivuliwe, uma ukuthinta kokuqala kokuthinta kokuskrola kungaphakathi komngcele wombhalo <input>noma we- <textarea>, <body>okuqukethwe okungaphansi kwe-modal kuzoskrolwa esikhundleni se-modal ngokwayo. Bona iphutha le-WebKit #153856 .

Amakhibhodi abonakalayo

Futhi, qaphela ukuthi uma usebenzisa i-navbar engaguquki noma usebenzisa okokufaka ngaphakathi kwe-modal, i-iOS inesiphazamisi sokunikeza esingabuyekezi isimo sezinto ezingashintshi lapho ikhibhodi ebonakalayo iqaliswa. Izindlela ezimbalwa zokusebenza zalokhu zihlanganisa ukuguqula izici zakho zibe position: absolutenoma ukuncenga isibali sikhathi ekugxilweni ukuze uzame ukulungisa ukuma ngokwakho. Lokhu akuphathwa yi-Bootstrap, ngakho-ke kukuwe ukuthi unqume ukuthi yisiphi isisombululo esilungele isicelo sakho.

Ukwehliswa kwebha ye-Navbar

Isici .dropdown-backdropasisetshenziswa ku-iOS ku-nav ngenxa yobunkimbinkimbi be-z-indexing. Ngakho, ukuze uvale okwehliswayo kuma-navbar, kufanele uchofoze ngokuqondile into yokudonsela phansi (noma iyiphi enye into ezoqhumisa umcimbi wokuchofoza ku-iOS ).

Ukusondeza isiphequluli

Ukusondeza ikhasi kuveza ngokungagwemeki ukunikezwa kwama-artifact kwezinye izingxenye, ku-Bootstrap nakuyo yonke iwebhu. Kuye ngenkinga, singase sikwazi ukuyilungisa (sesha kuqala bese sivula inkinga uma kudingeka). Kodwa-ke, sivame ukukuziba lezi njengoba ngokuvamile zingenaso isixazululo esiqondile ngaphandle kwama-hacky workaround.

Okunamathelayo :hover/ :focuskuselula

Noma ukuhambisa phezulu kwangempela kungenzeki kuzikrini eziningi zokuthinta, iziphequluli eziningi zeselula zilingisa ukusekela okuzungezayo futhi zenze :hover"okunamathelayo". Ngamanye amazwi, :hoverizitayela ziqala ukusebenza ngemva kokuthepha i-elementi futhi ziyeke ukusebenzisa ngemva kokuthi umsebenzisi ethephe enye into. Lokhu kungabangela ukuthi :hoverizifunda ze-Bootstrap "zinamathele" ngokungafanele kuziphequluli ezinjalo. Ezinye iziphequluli zeselula nazo zenza :focusokufanayo kunamathele. Okwamanje alukho usizo olulula lwalezi zinkinga ngaphandle kokususa izitayela ezinjalo ngokuphelele.

Ukuphrinta

Ngisho nakwezinye iziphequluli zesimanje, ukuphrinta kungaba quirky.

Ikakhulukazi, kusukela ku-Chrome v32 futhi kungakhathaliseki izilungiselelo zemajini, i-Chrome isebenzisa ububanzi bembobo yokubuka obuncane kakhulu kunosayizi wephepha ophathekayo lapho ixazulula imibuzo yemidiya ngenkathi iphrinta ikhasi lewebhu. Lokhu kungaholela ekutheni igridi ye-Bootstrap encane kakhulu isebenze ngokungalindelekile lapho iphrinta. Bona ukukhishwa okungu-#12078 kanye nesiphazamisi se- Chrome #273306 ukuze uthole imininingwane ethile. Izindlela zokulungisa eziphakanyisiwe:

• Yamukela igridi encane futhi uqiniseke ukuthi ikhasi lakho libukeka lamukelekile ngaphansi kwalo.
• Enza ngendlela oyifisayo amanani @screen-*okuguquguquka Okuncane ukuze iphepha lakho lokuphrinta lithathwe njengelikhulu kunelincane kakhulu.
• Engeza imibuzo yemidiya yangokwezifiso ukuze ushintshe amaphoyinti okunqamula usayizi wegridi wemidiya yokuphrinta kuphela.

Futhi, kusukela ku-Safari v8.0, ububanzi obuhleliwe .containers bungabangela i-Safari ukuthi isebenzise usayizi wefonti omncane ngokungavamile lapho iphrinta. Bona i-#14868 kanye nesiphazamisi seWebKit #138192 ukuze uthole imininingwane eyengeziwe. Enye indlela engaba khona yokwenza lokhu ukungeza i-CSS elandelayo:

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

Isiphequluli sesitoko se-Android

Ngaphandle kwebhokisi, i-Android 4.1 (kanye nokunye okusha okukhishiwe ngokusobala) kuhamba ngomkhumbi ngohlelo lokusebenza Lwesiphequluli njengesiphequluli sewebhu esizenzakalelayo esikhethwayo (ngokungafani ne-Chrome). Ngeshwa, uhlelo lokusebenza Lwesiphequluli luneziphazamisi eziningi nokungahambisani ne-CSS ngokuvamile.

Khetha amamenyu

Ezicini <select>, isiphequluli sesitoko se-Android ngeke sibonise izilawuli eziseceleni uma kukhona border-radiuskanye/noma borderkusetshenziswe. (Bona lo mbuzo we-StackOverflow ukuze uthole imininingwane.) Sebenzisa amazwibela ekhodi ngezansi ukuze ususe i-CSS ehlukumezayo futhi unikeze <select>njengento engabhalwanga isitayela kusiphequluli sesitoko se-Android. Umsebenzisi ohogelayo ugwema ukuphazamiseka kweziphequluli ze-Chrome, Safari, ne-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>

Ufuna ukubona isibonelo? Bheka le demo ye-JS Bin.

Abaqinisekisayo

Ukuze unikeze umuzwa ongcono kakhulu ongakhona kuziphequluli ezindala nezinesiphazamiso, i-Bootstrap isebenzisa ama- hack esiphequluli se-CSS ezindaweni ezimbalwa ukuze iqondise i-CSS ekhethekile kuzinguqulo ezithile zesiphequluli ukuze isebenze eduze kweziphazamisi kuziphequluli ngokwazo. Lawa ma-hacks ngokuqondakalayo abangela abaqinisekisi be-CSS ukuthi bakhononde ngokuthi awavumelekile. Ezindaweni ezimbalwa, sisebenzisa izici ze-CSS ezophayo ezingakamiswa ngokugcwele, kodwa lezi zisetshenziselwa ukuthuthukisa okuqhubekayo.

Lezi zexwayiso zokuqinisekisa azinandaba ekusebenzeni njengoba ingxenye engeyona eyokugebenga ye-CSS yethu iqinisekisa ngokugcwele futhi izingxenye ezikhohlisayo aziphazamisi ukusebenza kahle kwengxenye engeyona eyokugebenga, yingakho siziba ngamabomu lezi zexwayiso.

Amadokhumenti ethu e-HTML ngokufanayo anezexwayiso zokuqinisekisa ze-HTML ezingasho lutho nezingabalulekile ngenxa yokufakwa kwethu kwe-workaround yesiphazamisi esithile seFirefox .

Ukwesekwa komuntu wesithathu

Yize singasekeli ngokusemthethweni noma yimaphi ama-plugin noma izengezo zenkampani yangaphandle, sinikeza izeluleko eziwusizo ukusiza ukugwema izinkinga ezingaba khona kumaphrojekthi akho.

Ubukhulu bebhokisi

Enye isofthiwe yenkampani yangaphandle, ehlanganisa i-Google Amamephu kanye ne-Google Custom Search Engine, ingqubuzana ne-Bootstrap ngenxa * { box-sizing: border-box; }, umthetho okwenza kube njalo paddingayithinti ububanzi bokugcina obubaliwe bento. Funda kabanzi mayelana nemodeli yebhokisi nokulinganisa ku-CSS Tricks .

Kuye ngomongo, ungase ubhale ngaphezulu njengoba kudingekile (Inketho 1) noma usethe kabusha usayizi webhokisi kuzo zonke izifunda (Inketho 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();
}

Ukufinyeleleka

I-Bootstrap ilandela izindinganiso zewebhu ezivamile futhi—ngomzamo omncane owengeziwe—ingasetshenziswa ukudala amasayithi afinyeleleka kulabo abasebenzisa i- AT .

Yeqa ukuzulazula

Uma ukuzulazula kwakho kuqukethe izixhumanisi eziningi futhi kuza ngaphambi kokuqukethwe okuyinhloko ku-DOM, engeza Skip to main contentisixhumanisi ngaphambi kokuzulazula (ukuthola incazelo elula, bheka lesi sihloko sephrojekthi ye-A11Y mayelana nokweqa izixhumanisi zokuzulazula ). Ukusebenzisa .sr-onlyikilasi kuzofihla isixhumanisi sokweqa, futhi .sr-only-focusableikilasi lizoqinisekisa ukuthi isixhumanisi sibonakala uma sesigxilile (kubasebenzisi bekhibhodi ababonayo).

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

Izihloko ezifakiwe

Lapho wenza isidleke izihloko ( <h1>- <h6>), unhlokweni wedokhumenti yakho eyinhloko kufanele ube <h1>. Izihloko ezilandelayo kufanele zisebenzise ngokunengqondo <h2>- <h6>kangangokuthi izifundi zesikrini zingakha uhlu lokuqukethwe emakhasini akho.

Funda kabanzi ku- HTML CodeSniffer kanye ne -Penn State's AccessAbility .

Ukungafani kombala

Okwamanje, ezinye izinhlanganisela zemibala ezizenzakalelayo ezitholakala ku-Bootstrap (njengezigaba ezihlukene zezinkinobho ezinesitayela, eminye yemibala egqamisa ikhodi esetshenziselwa amabhulokhi ekhodi eyisisekelo , isigaba somsizi .bg-primary wangemuva komongo , nombala wesixhumanisi ozenzakalelayo uma usetshenziswa kungemuva elimhlophe) ibe nesilinganiso esiphansi sokungafani (ngaphansi kwesilinganiso esinconyiwe esingu-4.5:1 ). Lokhu kungabangela izinkinga kubasebenzisi abangaboni kahle noma abangaboni imibala. Le mibala ezenzakalelayo ingase idinge ukushintshwa ukuze kwandiswe ukugqama nokufaneleka kwayo.

Izinsiza ezengeziwe

• "HTML Codesniffer" ibhukhimakhi yokuhlonza izinkinga zokufinyeleleka
• Isandiso samathuluzi kanjiniyela wokufinyeleleka we-Chrome
• Isihlaziyi Sokugqama Kombala
• Iphrojekthi ye-A11Y
• Amadokhumenti okufinyelela e-MDN

I-FAQ Yelayisensi

I-Bootstrap ikhishwa ngaphansi kwelayisense ye-MIT futhi iyi-copyright ka-2016 Twitter. Ibilisiwe ibe yizingxenyana ezincane, ingachazwa ngalezi zimo ezilandelayo.

Kudinga ukuthi:

• Gcina ilayisense nesaziso selungelo lobunikazi kufakwe ku-CSS ye-Bootstrap kanye namafayela e-JavaScript uma uwasebenzisa emisebenzini yakho

Ikuvumela ukuthi:

• Dawuniloda mahhala futhi usebenzise i-Bootstrap, iyonke noma ingxenye, ngokwezinjongo zomuntu siqu, eziyimfihlo, zangaphakathi zenkampani, noma zezohwebo
• Sebenzisa i-Bootstrap kumaphakheji noma ukusabalalisa okudalayo
• Shintsha ikhodi yomthombo
• Nikeza ilayisensi engaphansi ukuze uguqule futhi usabalalise i-Bootstrap ezinkampanini zangaphandle ezingafakiwe kulayisensi

Ikwenqabela ukuthi:

• Bamba ababhali nabanikazi bamalayisensi benesibopho somonakalo njengoba i-Bootstrap inikezwa ngaphandle kwewaranti
• Bamba abadali noma abanikazi be-copyright be-Bootstrap benecala
• Sabalalisa kabusha noma yiluphi ucezu lwe-Bootstrap ngaphandle kwesibaluli esifanele
• Sebenzisa noma imaphi amamaki akwa-Twitter nganoma iyiphi indlela engase isho noma isho ukuthi i-Twitter ivumela ukusatshalaliswa kwakho
• Sebenzisa noma imaphi amamaki akwa-Twitter nganoma iyiphi indlela engase isho noma isho ukuthi udale isofthiwe ye-Twitter okukhulunywa ngayo

Akudingi ukuthi:

• Bandakanya umthombo we-Bootstrap uqobo, noma wanoma yiziphi izinguquko okungenzeka ukuthi uzenzile kuyo, kunoma yikuphi ukusatshalaliswa kabusha ongase ukuhlanganise okukufaka phakathi
• Thumela izinguquko ozenzayo ku-Bootstrap emuva kuphrojekthi ye-Bootstrap (yize impendulo enjalo ikhuthazwa)

Ilayisensi egcwele ye-Bootstrap itholakala endaweni yephrojekthi ukuze uthole ulwazi olwengeziwe.

Izinguqulo

Amalungu omphakathi ahumushe imibhalo ye-Bootstrap ezilimini ezihlukahlukene. Abekho abasekelwa ngokusemthethweni futhi kungenzeka bangahlali besesimweni.

• I-Bootstrap 中文档 (isiShayina)
• I-Bootstrap 3 中文手冊 (isiShayina (Sesiko))
• I-Bootstrap e-Dansk (Danish)
• I-Bootstrap en Français (French)
• I-Bootstrap auf Deutsch (German)
• I-Bootstrap ngesi-Italiano (isiNtaliyane)
• I-Bootstrap 한국어 (Korean)
• I-Bootstrap em Português do Brasil (isiPutukezi saseBrazil)
• I-Bootstrap по-русски (Russian)
• I-Bootstrap en Español (Spanish)
• I-Türkçe Bootstrap (Turkish)
• I-Bootstrap українською (Ukrainian)
• I-Bootstrap bằng tiếng Việt (Vietnamese)

Asisizi ukuhlela noma ukusingatha ukuhumusha, sivele sikuxhumanise nakho.

Uqedile ukuhumusha okusha noma okungcono? Vula isicelo sokudonsa ukuze usingeze ohlwini lwethu.