Kuramo

Bootstrap (kuri ubu v3.3.7) ifite inzira nkeya zoroshye zo gutangira vuba, buriwese yitabaza urwego rutandukanye rwubuhanga no gukoresha urubanza. Soma kugirango urebe ibikwiranye nibyo ukeneye.

Bootstrap CDN

Bantu kuri jsDelivr mubuntu batanga inkunga ya CDN kuri CSS ya Bootstrap na JavaScript. Koresha gusa Bootstrap CDN ihuza.

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

Shyiramo na Bower

Urashobora kandi kwinjizamo no gucunga bike bya Bootstrap, CSS, JavaScript, hamwe nimyandikire ukoresheje Bower :

$ bower install bootstrap

Shyiramo npm

Urashobora kandi kwinjizamo Bootstrap ukoresheje npm :

$ npm install bootstrap@3

require('bootstrap')izashyira amacomeka ya jQuery yose ya Bootstrap kubintu bya jQuery. Module bootstrapubwayo ntacyo yohereza hanze. Urashobora kwipakurura intoki za jQuery ya Bootstrap kugiti cyawe ukuramo /js/*.jsdosiye munsi yububiko bwa top-level.

Bootstrap package.jsonirimo metadata yinyongera munsi yimfunguzo zikurikira:

• less- inzira igana Bootstrap nyamukuru Idosiye yinkomoko
• style- inzira igana Bootstrap ya CSS idacukuwe CSS yabanjirijwe hakoreshejwe igenamiterere risanzwe (nta kwihindura)

Shyira hamwe nuwahimbye

Urashobora kandi kwinjizamo no gucunga bike bya Bootstrap, CSS, JavaScript, hamwe nimyandikire ukoresheje Composer :

$ composer require twbs/bootstrap

Autoprefixer isabwa kuri bike / Sass

Bootstrap ikoresha Autoprefixer kugirango ikemure ibicuruzwa bya CSS byabanjirije . Niba urimo gukora Bootstrap uhereye kumasoko yayo make / Sass kandi udakoresha Gruntfile yacu, uzakenera kwinjiza Autoprefixer mubikorwa byawe wenyine. Niba ukoresha Bootstrap yabanjirije cyangwa ukoresha Gruntfile yacu, ntukeneye guhangayikishwa nibi kuko Autoprefixer yamaze kwinjizwa muri Gruntfile yacu.

Harimo iki

Bootstrap irashobora gukururwa muburyo bubiri, muribwo uzasangamo ububiko namadosiye akurikira, muburyo bworoshye guhuza umutungo rusange no gutanga byombi byakusanyirijwe hamwe.

Bootstrap

Bimaze gukuramo, fungura ububiko bwafunzwe kugirango urebe imiterere ya (icyegeranyo) Bootstrap. Uzabona ikintu nkiki:

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

Ubu ni bwo buryo bwibanze bwa Bootstrap: dosiye zabanjirije kubishobora gukoreshwa vuba mumushinga wose wurubuga. Dutanga CSS hamwe na JS ( bootstrap.*), hamwe no gukusanya no kugabanya CSS na JS ( bootstrap.min.*). Ikarita yinkomoko ya CSS ( bootstrap.*.map) irahari kugirango ikoreshwe hamwe nibikoresho bimwe byabateza imbere. Imyandikire ya Glyphicons irimo, kimwe ninsanganyamatsiko ya Bootstrap.

Kode ya Bootstrap

Gukuramo kode ya Bootstrap ikubiyemo CSS, JavaScript, hamwe numutungo wimyandikire, hamwe nisoko Ntoya, JavaScript, hamwe ninyandiko. By'umwihariko, ikubiyemo ibi bikurikira n'ibindi:

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

,,, Kandi less/ni isoko yinkomoko ya CSS, JS, hamwe nimyandikire yimyandikire (uko bikurikirana). Ububiko burimo ibintu byose byashyizwe kumurongo wo gukuramo hejuru. Ububiko burimo inkomoko yinkomoko yinyandiko zacu, hamwe na Bootstrap ikoreshwa. Hejuru yibyo, izindi dosiye zose zirimo gutanga inkunga kubipaki, amakuru yimpushya, niterambere.js/fonts/dist/docs/examples/

Gukusanya CSS na JavaScript

Bootstrap ikoresha Grunt kuri sisitemu yo kubaka, hamwe nuburyo bworoshye bwo gukorana nurwego. Nuburyo dukusanya code yacu, gukora ibizamini, nibindi byinshi.

Gushyira Grunt

Kugirango ushyire Grunt, ugomba kubanza gukuramo no gushiraho node.js (irimo npm). npm igereranya node ipakiye module kandi nuburyo bwo gucunga ibikorwa biterwa niterambere binyuze kuri node.js.

1. Shyira grunt-cliku isi yose hamwe npm install -g grunt-cli.
2. Kujya mumuzi /bootstrap/yububiko, hanyuma ukore npm install. npm izareba package.jsondosiye hanyuma ihite ushyiraho ibikenewe byaho byateganijwe hano.

Numara kuzuza, uzashobora gukoresha amategeko atandukanye ya Grunt yatanzwe kuva kumurongo.

Kuboneka Grunt amategeko

grunt dist(Gukusanya gusa CSS na JavaScript)

Kuvugurura /dist/ububiko hamwe na dosiye ya CSS na JavaScript. Nkumukoresha wa Bootstrap, mubisanzwe ni itegeko ushaka.

grunt watch(Reba)

Reba amadosiye make yinkomoko hanyuma uhite uyasubiramo kuri CSS igihe cyose ubitse impinduka.

grunt test(Koresha ibizamini)

Koresha JSHint kandi ikoresha ibizamini bya QUnit idafite umutwe muri PhantomJS .

grunt docs(Kubaka & kugerageza umutungo wa docs)

Kubaka no kugerageza CSS, JavaScript, nundi mutungo ukoreshwa mugihe ukoresha ibyangombwa ukoresheje bundle exec jekyll serve.

grunt(Wubake byose kandi ukore ibizamini)

Gukusanya no kugabanya CSS na JavaScript, yubaka urubuga rwinyandiko, ikoresha HTML5 yemewe na docs, igarura umutungo wa Customizer, nibindi byinshi. Irasaba Jekyll . Mubisanzwe birakenewe gusa niba wibasiye Bootstrap ubwayo.

Gukemura ibibazo

Ugomba guhura nibibazo byo kwishyiriraho cyangwa gukoresha Grunt amategeko, banza usibe /node_modules/ububiko bwakozwe na npm. Noneho, ongera usubire npm install.

Inyandikorugero shingiro

Tangira niyi shingiro ya HTML, cyangwa uhindure ingero . Turizera ko uzahindura inyandikorugero n'ingero zacu, ukabihuza nibyo ukeneye.

Gukoporora HTML hepfo kugirango utangire gukorana ninyandiko ntoya ya 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>

Ingero

Wubake kurugero rwibanze hejuru hamwe na Bootstrap yibice byinshi. Turagutera inkunga yo guhitamo no guhuza Bootstrap kugirango uhuze ibyo umushinga wawe ukeneye.

Shakisha code yinkomoko kuri buri ngero hepfo ukuramo ububiko bwa Bootstrap . Ingero murashobora kuzisanga mububiko docs/examples/.

Gukoresha urwego

Inyandikorugero

Ntakindi usibye ibyibanze: yakusanyije CSS na JavaScript hamwe na kontineri.

Insanganyamatsiko ya Bootstrap

Ongeramo insanganyamatsiko ya Bootstrap kuburambe bwongerewe uburambe.

Imiyoboro

Ingero nyinshi za grid imiterere hamwe na bine zose, ibyari, nibindi byinshi.

Jumbotron

Wubake hafi ya jumbotron hamwe na navbar hamwe na grid base yibanze.

Jumbotron

Wubake urupapuro rwihariye mugabanya ibintu bisanzwe na jumbotron.

Imiyoboro ikora

Navbar

Inyandikorugero yibanze ikubiyemo navbar hamwe nibindi bintu byongeweho.

Ikibaho cyo hejuru

Inyandikorugero yibanze hamwe na static yo hejuru ya navbar hamwe nibindi byongeweho.

Ikibaho gikwiye

Inyandikorugero yibanze hamwe na navbar yo hejuru ihamye hamwe nibindi byongeweho.

Ibikoresho byihariye

Igipfukisho

Urupapuro rumwe rwicyitegererezo cyo kubaka byoroshye kandi byiza murugo.

Carousel

Hindura navbar na karuseli, hanyuma ongeraho ibice bishya.

Blog

Byoroheje bibiri-inkingi ya blog imiterere hamwe nogukoresha kugiti, umutwe, nubwoko.

Ikibaho

Imiterere shingiro kumwanya wa admin hamwe numurongo uhamye hamwe na navbar.

Urupapuro rwinjira

Imiterere yihariye no gushushanya kubimenyetso byoroshye muburyo.

Nav

Kora igikoresho cyihariye gifite amahuza afite ishingiro. Umutwe! Ntabwo ari inshuti ya Safari.

Umutwe

Ongeraho ikirenge munsi yuburyo bwo kureba mugihe ibirimo ari bigufi kurenza.

Umutwe ufashe hamwe na navbar

Ongeraho ikirenge munsi yuburyo bwo kureba hamwe na navbar ihamye hejuru.

Ubushakashatsi

Bootstrap idasubiza

Byoroshye guhagarika reaction ya Bootstrap kuri doc yacu .

Kanda

Wubake ibintu bidashobora guhinduka kuri canvas yogukoresha kugirango ukoreshe hamwe na Bootstrap.

Ibikoresho

Bootlint

Bootlint nigikoresho cyemewe cya Bootstrap HTML. Irahita igenzura amakosa menshi ya HTML asanzwe kurubuga rukoresha Bootstrap muburyo bwa "vanilla". Ibikoresho bya Vanilla Bootstrap / widgets bisaba ibice byabo bya DOM kugirango bihuze nuburyo bumwe. Bootlint igenzura ko ingero za Bootstrap zifite HTML zubatswe neza. Tekereza kongeramo Bootlint kumurongo wibikoresho byiterambere bya Bootstrap kugirango ntanimwe mumakosa asanzwe adindiza iterambere ryumushinga wawe.

Umuryango

Komeza kugezwaho amakuru yiterambere rya Bootstrap hanyuma ugere kubaturage hamwe nibikoresho bifasha.

• Soma kandi wiyandikishe kuri Blog ya Bootstrap .
• Ganira na Bootstrappers bagenzi bawe ukoresheje IRC muri irc.freenode.netseriveri, mumuyoboro wa ## bootstrap .
• Kubufasha ukoresheje Bootstrap, baza kuri StackOverflow ukoresheje tagitwitter-bootstrap-3 .
• Abashinzwe iterambere bagomba gukoresha ijambo ryibanze bootstrapkumapaki ahindura cyangwa akongera kumikorere ya Bootstrap mugihe akwirakwiza binyuze muri npm cyangwa uburyo busa bwo gutanga kubintu byinshi byavumbuwe.
• Shakisha ingero zubaka zabantu bubaka hamwe na Bootstrap muri Bootstrap Expo .

Urashobora kandi gukurikira @getbootstrap kurubuga rwa Twitter kubwamazimwe agezweho hamwe namashusho yindirimbo nziza.

Kwanga kwitabira

Bootstrap ihita ihuza page yawe kubunini bwa ecran zitandukanye. Dore uburyo bwo guhagarika iyi mikorere kugirango page yawe ikore nkuru rugero rutitabira .

Intambwe zo guhagarika page yitabira

1. Kureka kureba <meta>ibyavuzwe muri CSS
2. Kurenga widthkuri kuri .containerkuri buri grid urwego hamwe nubugari bumwe, kurugero width: 970px !important;Menya neza ko ibi biza nyuma ya Bootstrap CSS isanzwe. Urashobora guhitamo kwirinda !importantitangazamakuru hamwe nibibazo byitangazamakuru cyangwa abatoranya-fu.
3. Niba ukoresha navbars, kura navbar yose gusenyuka no kwagura imyitwarire.
4. Kuri grid imiterere, koresha .col-xs-*amasomo wongeyeho, cyangwa mumwanya wa, hagati / nini. Ntugire impungenge, ibikoresho-bito bito bya gride umunzani kubisubizo byose.

Uzakenera Igisubizo.js kuri IE8 (kuva ibibazo byitangazamakuru byacu biracyahari kandi bigomba gutunganywa). Ibi birahagarika "mobile mobile" ibintu bya Bootstrap.

Bootstrap inyandikorugero hamwe no gusubiza byahagaritswe

Twashyize mubikorwa izi ntambwe kurugero. Soma inkomoko yabyo kugirango urebe impinduka zihariye zashyizwe mubikorwa.

Reba urugero rutitabira

Mucukumbuzi hamwe nibikoresho bifasha

Bootstrap yubatswe kugirango ikore neza muri desktop iheruka na mushakisha igendanwa, bivuze ko mushakisha zishaje zishobora kwerekana uburyo butandukanye, nubwo bukora neza, bwerekana ibice bimwe.

Mucukumbuzi

By'umwihariko, dushyigikiye verisiyo yanyuma ya mushakisha ikurikira.

Ubundi mushakisha ukoresha verisiyo yanyuma ya WebKit, Blink, cyangwa Gecko, haba muburyo butaziguye cyangwa binyuze kumurongo wurubuga rwa API, ntabwo bashyigikiwe neza. Ariko, Bootstrap igomba (mubihe byinshi) kwerekana no gukora neza muriyi mushakisha. Ibisobanuro birambuye byingirakamaro byatanzwe hano hepfo.

Ibikoresho bigendanwa

Muri rusange, Bootstrap ishyigikira verisiyo zigezweho za buri cyiciro kinini cya mushakisha zidasanzwe. Menya ko mushakisha ya porokisi (nka Opera Mini, uburyo bwa Turbo bwa Opera Mobile, UC Browser Mini, Amazone Silk) idashyigikiwe.

Mucukumbuzi ya desktop

Nubundi, verisiyo yanyuma ya mushakisha ya desktop hafi ya yose irashyigikiwe.

Kuri Windows, dushyigikira Internet Explorer 8-11 .

Kuri Firefox, hiyongereyeho gusohora bisanzwe bisanzwe bihamye, dushyigikire kandi verisiyo yanyuma yagutse (ESR) verisiyo ya Firefox.

Mu buryo butemewe, Bootstrap igomba kureba no kwitwara neza bihagije muri Chromium na Chrome kuri Linux, Firefox ya Linux, na Internet Explorer 7, ndetse na Microsoft Edge, nubwo bidashyigikiwe kumugaragaro.

Kurutonde rwa bimwe mubikoresho bya mushakisha Bootstrap igomba guhangana nabyo, reba Urukuta rwacu rwa mushakisha .

Internet Explorer 8 na 9

Internet Explorer 8 na 9 nayo irashyigikiwe, ariko, nyamuneka umenye ko ibintu bimwe na bimwe bya CSS3 nibintu bya HTML5 bidashyigikiwe byuzuye nabashakisha. Mubyongeyeho , Internet Explorer 8 isaba gukoresha Respond.js kugirango ushoboze itangazamakuru ryibibazo.

Sura Nshobora gukoresha ... kubisobanuro birambuye kubufasha bwa mushakisha ya CSS3 na HTML5.

Internet Explorer 8 no Gusubiza.js

Witondere ubuvumo bukurikira mugihe ukoresheje Respond.js mugutezimbere no gutanga umusaruro kuri Internet Explorer 8.

Subiza.js hamwe na CSS yambukiranya imipaka

Gukoresha Respond.js hamwe na CSS yakiriwe kumurongo utandukanye (sub) (urugero, kuri CDN) bisaba gushiraho bimwe. Reba ibisubizo.js ibisobanuro birambuye.

Subiza.js nafile://

Bitewe namategeko yumutekano ya mushakisha, Subiza.js ntabwo ikorana nurupapuro rureba ukoresheje file://protocole (nko gufungura dosiye ya HTML yaho). Kugerageza ibiranga ibisubizo muri IE8, reba page yawe hejuru ya HTTP (S). Reba ibisubizo.js ibisobanuro birambuye.

Subiza.js na@import

Subiza.js ntabwo ikorana na CSS ivugwa binyuze @import. By'umwihariko, Ibice bimwe bya Drupal bizwiho gukoresha @import. Reba ibisubizo.js ibisobanuro birambuye.

Internet Explorer 8 hamwe nubunini-buke

IE8 ntabwo ishigikira byimazeyo box-sizing: border-box;iyo ihujwe na min-width,,, cyangwa . Kubera iyo mpamvu, guhera kuri v3.0.1, ntitukigikoresha kuri s.max-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 na @ Imyandikire-isura

IE8 ifite ibibazo bimwe @font-faceiyo bihujwe hamwe :before. Bootstrap ikoresha iyo mikoranire hamwe na Glyphicons yayo. Niba urupapuro rwabitswe, kandi ruremerewe nta mbeba hejuru yidirishya (ni ukuvuga kanda buto yo kugarura ibintu cyangwa guterura ikintu muri iframe) noneho urupapuro ruhinduka mbere yuko imyandikire yikoreza. Kuzenguruka kurupapuro (umubiri) bizerekana bimwe mubishushanyo hanyuma uzenguruke hejuru yibishushanyo bisigaye bizerekana nabyo. Reba ikibazo # 13863 kugirango ubone ibisobanuro birambuye.

IE Guhuza uburyo

Bootstrap ntabwo ishyigikiwe muburyo bwa kera bwa enterineti ya enterineti. Kugirango umenye neza ko ukoresha uburyo bwanyuma bwo gutanga kuri IE, tekereza <meta>gushyiramo tagi ikwiye kurupapuro rwawe:

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

Emeza uburyo bwinyandiko ufungura ibikoresho byo gukemura: kanda F12hanyuma urebe "Mode Mode".

Iyi tagi yashyizwe mubyangombwa byose bya Bootstrap hamwe nurugero kugirango tumenye neza uburyo bushoboka muri buri verisiyo ishigikiwe na Internet Explorer.

Reba iki kibazo cya StackOverflow kubindi bisobanuro.

Internet Explorer 10 muri Windows 8 na Windows Phone 8

Internet Explorer 10 ntabwo itandukanya ubugari bwibikoresho nubugari bwerekanwe , bityo ntibukoreshe neza ibibazo byitangazamakuru muri CSS ya Bootstrap. Mubisanzwe wakongeramo agace kihuse ka CSS kugirango ukosore ibi:

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

Ariko, ibi ntibikora kubikoresho bikoresha Windows Phone 8 verisiyo ishaje ya 3 (bita GDR3) , kuko itera ibikoresho nkibi kwerekana desktop cyane aho kureba "terefone". Kugira ngo ukemure iki kibazo, uzakenera gushyiramo CSS na JavaScript ikurikira kugirango ukore hafi yikosa .

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

Kubindi bisobanuro hamwe nubuyobozi bukoreshwa, soma Windows Phone 8 na Device-Ubugari .

Nkumutwe hejuru, ibi tubishyira mubyangombwa byose bya Bootstrap hamwe nurugero rwo kwerekana.

Safari ku ijana

Moteri yo kwerekana verisiyo ya Safari mbere ya v7.1 kuri OS X na Safari kuri iOS v8.0 yagize ikibazo cyumubare wimyanya icumi yakoreshejwe mumashuri yacu .col-*-1ya grid. Niba rero ufite 12 grid grid kumurongo, wabona ko byaje bigufi ugereranije nindi mirongo yinkingi. Usibye kuzamura Safari / iOS, ufite amahitamo amwe mukazi:

• Ongeraho .pull-rightkumurongo wanyuma wa grid kugirango ubone gukomera-iburyo
• Koresha ijanisha ryintoki kugirango ubone kuzenguruka neza kuri Safari (biragoye kuruta uburyo bwa mbere)

Moderi, navbars, na clavier isanzwe

Kurengerwa no kuzunguruka

Inkunga overflow: hiddenkuri <body>element ni ntarengwa muri iOS na Android. Kugirango bigerweho, mugihe uzengurutse hejuru cyangwa hepfo ya modal muri kimwe muri ibyo bikoresho bya mushakisha, <body>ibirimo bizatangira kuzunguruka. Reba amakosa ya Chrome # 175502 (yakosowe muri Chrome v40) na WebKit bug # 153852 .

Ibice byanditse bya iOS hamwe no kuzunguruka

Kuva kuri iOS 9.3, mugihe modal ifunguye, niba gukoraho kwambere kwerekanwa ryumuzingo biri mumupaka winyandiko <input>cyangwa a <textarea>, <body>ibirimo munsi yuburyo bizunguruka aho kuba modal ubwayo. Reba WebKit bug # 153856 .

Mwandikisho ya Virtual

Kandi, menya ko niba ukoresha navbar ihamye cyangwa ukoresha inyongeramusaruro muburyo bwa moderi, iOS ifite amakosa yo guhindura ibintu bitavugurura umwanya wibintu byagenwe mugihe clavier yububiko itangiye. Imirimo mike kuriyi ikubiyemo guhindura ibintu byawe position: absolutecyangwa gutabaza igihe cyibanze kugirango ugerageze gukosora imyanya y'intoki. Ibi ntabwo bikemurwa na Bootstrap, bityo rero ni wowe ugomba guhitamo igisubizo cyiza kubyo usaba.

Kumanuka Kumurongo

Ikintu .dropdown-backdropntabwo gikoreshwa kuri iOS muri nav kubera ubunini bwa z-indangagaciro. Rero, kugirango ufunge ibitonyanga muri navbars, ugomba guhita ukanda ibintu byamanutse (cyangwa ikindi kintu icyo aricyo cyose kizarasa ibyabaye muri iOS ).

Mucukumbuzi

Page zooming byanze bikunze yerekana ibihangano mubice bimwe, haba muri Bootstrap hamwe nizindi mbuga. Ukurikije ikibazo, dushobora gushobora kugikemura (shakisha mbere hanyuma ufungure ikibazo nibiba ngombwa). Ariko, dukunze kwirengagiza ibyo kuko akenshi nta gisubizo kiboneye usibye akazi keza.

Kwizirika :hover/ :focuskuri mobile

Nubwo kugendagenda kwukuri bidashoboka kuri ecran nyinshi, mushakisha nyinshi zigendanwa zigana inkunga yo kuguruka no gukora :hover"gukomera". Muyandi magambo, :hoverimisusire itangira gusaba nyuma yo gukanda ikintu hanyuma uhagarike gusaba nyuma yuko umukoresha akanze ikindi kintu. Ibi birashobora gutuma leta ya Bootstrap :hoverihinduka "kwizirika" kuri mushakisha. Mucukumbuzi zimwe zigendanwa nazo zikora :focuskimwe. Kuri ubu nta buryo bworoshye bwo gukemura ibyo bibazo usibye gukuraho ubwo buryo bwose.

Gucapa

Ndetse no muri mushakisha zimwe zigezweho, icapiro rirashobora kuba ikibazo.

By'umwihariko, nka Chrome v32 kandi utitaye kumiterere ya margin, Chrome ikoresha ubugari bwa viewport bugufi cyane ugereranije nubunini bwimpapuro zifatika mugihe gikemura ibibazo byitangazamakuru mugihe ucapura urubuga. Ibi birashobora gutuma Bootstrap idasanzwe-ntoya ya gride ikora muburyo butunguranye mugihe icapiro. Reba ikibazo # 12078 na Chrome bug # 273306 kugirango ubone ibisobanuro birambuye. Igitekerezo cyatanzwe:

• Emera gride-ntoya hanyuma urebe neza ko page yawe isa neza munsi yayo.
• Hindura indangagaciro za @screen-*Ntoya kugirango impapuro zawe zicapwe zifatwe nini kuruta izito-nto.
• Ongeraho ibitangazamakuru byabigenewe kugirango uhindure ingano ya gride ibice byamakuru byandika gusa.

Na none, nka Safari v8.0, ubugari bwagutse .containers burashobora gutuma Safari ikoresha ingano yimyandikire idasanzwe mugihe icapa. Reba # 14868 na WebKit bug # 138192 kugirango ubone ibisobanuro birambuye. Ikintu kimwe gishobora gukemuka kuri ibi nukongeramo CSS ikurikira:

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

Mucukumbuzi ya Android

Mu gasanduku, Android 4.1 (ndetse na bimwe bishya bisohoka bigaragara) yoherejwe hamwe na porogaramu ya Browser nka mushakisha y'urubuga rusanzwe wahisemo (bitandukanye na Chrome). Kubwamahirwe, porogaramu ya Browser ifite amakosa menshi kandi idahuye na CSS muri rusange.

Hitamo Ibikubiyemo

Kubintu <select>, mushakisha yimigabane ya Android ntizerekana kugenzura kuruhande niba hari border-radiusna / cyangwa borderbyashyizwe mubikorwa. . _ _ <select>_ Umukoresha ukoresha kunuka yirinda kwivanga muri mushakisha ya Chrome, Safari, na 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>

Urashaka kubona urugero? Reba kuri iyi JS Bin demo.

Abemeza

Kugirango utange uburambe bwiza bushoboka kuri mushakisha zishaje na buggy, Bootstrap ikoresha amashanyarazi ya CSS ahantu henshi kugirango yereke CSS idasanzwe kuri verisiyo zimwe na zimwe za mushakisha kugirango ikore hafi yamakosa muri mushakisha ubwabo. Izi hack birumvikana ko abemeza CSS binubira ko bitemewe. Ahantu habiri, dukoresha kandi kuva amaraso-CSS ibiranga bitaruzuzwa neza, ariko bikoreshwa gusa mukuzamura iterambere.

Iyi miburo yo kwemeza ntacyo itwaye mubikorwa kuva igice kitari hacki cya CSS yacu cyemeza neza kandi ibice bya hacky ntibibangamira imikorere myiza yigice kitari hacky, niyo mpamvu twirengagiza nkana iyi miburo yihariye.

Inyandiko zacu za HTML nazo zifite imburi zidafite akamaro kandi zidafite ishingiro zo kwemeza HTML kubera ko dushyiramo akazi kubikorwa bya Firefox runaka .

Inkunga ya gatatu

Mugihe tudashyigikiye kumugaragaro amacomeka yundi muntu cyangwa ibyongeweho, turatanga inama zingirakamaro zifasha kwirinda ibibazo bishobora guterwa mumishinga yawe.

Ingano

Porogaramu zimwe zagatatu, zirimo Google Ikarita na Google Ishakisha Imashini ya Google, bivuguruzanya na Bootstrap bitewe * { box-sizing: border-box; }, itegeko ribikora paddingntirishobora guhindura ubugari bwanyuma bwibintu. Wige byinshi kubyerekeye agasanduku k'icyitegererezo n'ubunini kuri CSS Amayeri .

Ukurikije ibivugwamo, urashobora kurenga nkuko bikenewe (Ihitamo 1) cyangwa gusubiramo agasanduku-kangana mu turere twose (Ihitamo 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();
}

Kuboneka

Bootstrap ikurikiza amahame asanzwe y'urubuga kandi-hamwe nimbaraga zidasanzwe-irashobora gukoreshwa mugukora imbuga zishobora kugera kubakoresha AT .

Hunga inzira

Niba kugendana kwawe birimo amahuza menshi kandi akaza mbere yibyingenzi muri DOM, ongeraho umurongo Skip to main contentmbere yo kugendagenda (kubisobanuro byoroshye, reba iyi ngingo ya A11Y Umushinga kuri skip yoguhuza ). Gukoresha .sr-onlyicyiciro bizahisha muburyo bwo gusimbuka, kandi urwego .sr-only-focusableruzemeza ko ihuza rigaragara rimwe ryibanze (kubakoresha clavier babonye).

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

Imitwe yuzuye

Iyo imitwe yicyari ( <h1>- <h6>), inyandiko yawe yibanze igomba kuba an <h1>. Imitwe ikurikira igomba gukoresha muburyo bwumvikana <h2>- <h6>nkabasomyi ba ecran bashobora kubaka imbonerahamwe yibirimo kurupapuro rwawe.

Wige byinshi kuri HTML CodeSniffer na Penn State's AccessAbility .

Itandukaniro ryamabara

Kugeza ubu, amwe mumabara asanzwe ahuza aboneka muri Bootstrap (nkibice bitandukanye byanditseho buto ya classe, amwe muma code agaragaza amabara akoreshwa kumurongo wibanze wibanze , urwego rwabafasha rwibanze , hamwe nibara risanzwe rihuza iyo ryakoreshejwe kumurongo wera) gira itandukaniro rito (munsi yikigereranyo cya 4.5: 1 ). Ibi birashobora gutera ibibazo kubakoresha bafite icyerekezo gito cyangwa bafite ibara rihumye. Amabara asanzwe arashobora gukenera guhindurwa kugirango yongere itandukaniro kandi byemewe..bg-primary

Amikoro yinyongera

• "HTML Codesniffer" akamenyetso ko kumenya ibibazo byoroshye
• Kwagura ibikoresho bya Chrome
• Isesengura ry'amabara
• Umushinga A11Y
• MDN ibyangombwa

Ibibazo by'uruhushya

Bootstrap irekurwa munsi ya MIT kandi ni uburenganzira bwa Twitter 2016. Guteka kugeza kumutwe muto, birashobora gusobanurwa nibihe bikurikira.

Iragusaba:

• Komeza uruhushya nuburenganzira bwuburenganzira bukubiye muri dosiye ya CSS na JavaScript ya Bootstrap mugihe uyikoresha mubikorwa byawe

Irakwemerera:

• Kuramo ubuntu kandi ukoreshe Bootstrap, yose cyangwa igice, kubantu kugiti cyabo, abikorera, sosiyete imbere, cyangwa ubucuruzi
• Koresha Bootstrap mubipaki cyangwa kugabura ukora
• Hindura inkomoko yinkomoko
• Tanga sublicense yo guhindura no gukwirakwiza Bootstrap kubandi bantu batashyizwe muburenganzira

Irakubuza:

• Fata abanditsi naba nyir'uruhushya baryozwe ibyangiritse nkuko Bootstrap itangwa nta garanti
• Fata abaremye cyangwa abafite uburenganzira bwa Bootstrap
• Kugabura igice icyo aricyo cyose cya Bootstrap nta nyito ikwiye
• Koresha ibimenyetso byose bifitwe na Twitter muburyo ubwo aribwo bwose bushobora kuvuga cyangwa kuvuga ko Twitter ishyigikiye ikwirakwizwa ryawe
• Koresha ibimenyetso byose bifitwe na Twitter muburyo ubwo aribwo bwose bushobora kuvuga cyangwa kuvuga ko wakoze software ya Twitter ivugwa

Ntabwo bigusaba:

• Shyiramo inkomoko ya Bootstrap ubwayo, cyangwa iyindi mpinduka ushobora kuba warayikozeho, mugusaranganya kwose ushobora guteranya urimo
• Tanga impinduka ukora kuri Bootstrap gusubira mumushinga wa Bootstrap (nubwo ibitekerezo nkibi birashishikarizwa)

Uruhushya rwuzuye rwa Bootstrap ruherereye mububiko bwumushinga kubindi bisobanuro.

Ubuhinduzi

Abaturage bahinduye inyandiko za Bootstrap mu ndimi zitandukanye. Nta numwe ushyigikiwe kumugaragaro kandi ntibishobora guhora bigezweho.

• Bootstrap 中文 文档 (Igishinwa)
• Bootstrap 3 中文 手冊 (Igishinwa (Gakondo))
• Bootstrap på Dansk (Danemark)
• Bootstrap en Français (Igifaransa)
• Bootstrap auf Deutsch (Ikidage)
• Bootstrap mu Gitaliyani (Igitaliyani)
• Bootstrap 한국어 (Igikoreya)
• Bootstrap em Português do Brasil (Igiporutugali cyo muri Berezile)
• Bootstrap по-русски (Ikirusiya)
• Bootstrap en Español (Icyesipanyoli)
• Türkçe Bootstrap (Turukiya)
• Bootstrap українською (Ukraine)
• Bootstrap bằng tiếng Việt (Abanya Vietnam)

Ntabwo dufasha gutunganya cyangwa kwakira ibisobanuro, turabihuza gusa.

Urangije ubusobanuro bushya cyangwa bwiza? Fungura icyifuzo cyo gukurura kugirango wongere kurutonde rwacu.