Okufuna

Bootstrap (mu kiseera kino v3.3.7) erina engeri ntono ennyangu ez’okutandika amangu, buli emu esikiriza omutindo gw’obukugu ogw’enjawulo n’engeri y’okukozesaamu. Soma olabe ekituukagana n’ebyetaago byo ebitongole.

Okutandika CDN

Abantu ku jsDelivr n'ekisa okuwa obuwagizi bwa CDN ku Bootstrap's CSS ne JavaScript. Kozesa enkolagana zino eza Bootstrap CDN zokka .

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

Teeka ne Bower

Osobola n'okussaako n'okuddukanya efonti za Bootstrap eza Less, CSS, JavaScript, n'okukozesa Bower :

$ bower install bootstrap

Teeka ne npm

Osobola n'okussaako Bootstrap ng'okozesa npm :

$ npm install bootstrap@3

require('bootstrap')ejja kutikka byonna ebya Bootstrap ebya jQuery ku kintu kya jQuery. Module bootstrapyennyini tefulumya kintu kyonna. Osobola okutikka mu ngalo ebikozesebwa bya Bootstrap ebya jQuery kinnoomu ng'otikka /js/*.jsfayiro wansi wa dayirekita y'omutendera ogw'oku ntikko ogw'ekipapula.

Bootstrap's package.jsonerimu metadata endala wansi w'ebisumuluzo bino wammanga:

• less- ekkubo erigenda mu fayiro ya Bootstrap enkulu eya Less source
• style- ekkubo erigenda ku CSS ya Bootstrap etakendeezeddwa ebadde ekuŋŋaanyiziddwa nga ekozesa ensengeka ezisookerwako (tewali kulongoosa)

Teeka ne Composer

Osobola n'okuteeka n'okuddukanya efonti za Bootstrap eza Less, CSS, JavaScript, n'okukozesa Composer :

$ composer require twbs/bootstrap

Autoprefixer yeetaagibwa ku Less/Sass

Bootstrap ekozesa Autoprefixer okukola ku CSS vendor prefixes . Bw’oba ​​okuŋŋaanya Bootstrap okuva mu nsibuko yaayo eya Less/Sass era nga tokozesa Gruntfile yaffe, ojja kwetaaga okugatta Autoprefixer mu nkola yo ey’okuzimba ggwe kennyini. Bw’oba ​​okozesa Bootstrap eyakung’aanyiziddwa oba ng’okozesa Gruntfile yaffe, teweetaaga kweraliikirira kino kubanga Autoprefixer yayingizibwa dda mu Gruntfile yaffe.

Ebirimu

Bootstrap esobola okuwanulibwa mu ngeri bbiri, munda mu yo ojja kusangamu dayirekita ne fayiro zino wammanga, nga zigatta mu ngeri entuufu eby’obugagga ebya bulijjo era nga biwa enjawulo zombi ezikung’aanyiziddwa n’ezikendeezeddwa.

Bootstrap eyakunganyizibwa nga tezinnabaawo

Bw’omala okuwanula, sumulula ekitabo ekinyigirizibwa okulaba ensengeka ya (ekung’aanyiziddwa) Bootstrap. Ojja kulaba ekintu nga kino:

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

Eno y’engeri esinga obukulu eya Bootstrap: fayiro ezikuŋŋaanyiziddwa nga tezinnabaawo okukozesa amangu okugwa kumpi mu pulojekiti yonna ey’omukutu. Tuwa CSS ne JS ( bootstrap.*) ezikung’aanyiziddwa, awamu ne CSS ne JS ( bootstrap.min.*) ezikung’aanyiziddwa era ezikendeezeddwa. Maapu z’ensibuko ya CSS ( bootstrap.*.map) ziriwo okukozesebwa n’ebikozesebwa by’abakola bbulawuzi ezimu. Empandiika okuva mu Glyphicons zirimu, nga bwe kiri ku mulamwa gwa Bootstrap ogw’okwesalirawo.

Bootstrap ensibuko ya koodi

Okuwanula koodi y’ensibuko ya Bootstrap erimu eby’obugagga bya CSS, JavaScript, n’empandiika ebyakuŋŋaanyizibwa nga tebinnabaawo, wamu n’ensibuko Less, JavaScript, n’ebiwandiiko. Okusingawo, erimu bino wammanga n’ebirala:

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

The less/, js/, ne fonts/ze source code zaffe eza CSS, JS, ne icon fonts (mu kulondako). Ekitabo dist/kino kirimu buli kimu ekiwandiikiddwa mu kitundu eky’okuwanula ekikuŋŋaanyiziddwa waggulu. Ekitabo docs/kirimu source code y'ebiwandiiko byaffe, examples/n'enkozesa ya Bootstrap. Okusukka awo, fayiro endala yonna erimu egaba obuwagizi eri packages, amawulire ga layisinsi, n'okukulaakulanya.

Okukunganya CSS ne JavaScript

Bootstrap ekozesa Grunt ku nkola yaayo ey'okuzimba, n'enkola ennyangu ez'okukola ne framework. Y'engeri gye tukuŋŋaanyaamu code yaffe, okuddukanya ebigezo, n'ebirala.

Okuteeka mu nkola Grunt

Okuteeka Grunt, olina okusooka okuwanula n’okuteeka node.js (nga muno mulimu npm). npm kitegeeza node packaged modules era y’engeri y’okuddukanya okwesigamizibwa kw’enkulaakulana okuyita mu node.js.

1. Teeka grunt-climu nsi yonna ne npm install -g grunt-cli.
2. Genda ku ndagiriro y'ekikolo /bootstrap/, olwo odduke npm install. npm ejja kutunuulira package.jsonfayiro era eteekewo mu ngeri ey’otoma ebisinziirako ebyetaagisa eby’omu kitundu ebiragiddwa awo.

Bw'omala, ojja kusobola okuddukanya ebiragiro eby'enjawulo ebya Grunt ebiweereddwa okuva ku layini y'ebiragiro.

Ebiragiro bya Grunt ebiriwo

grunt dist(Omala kukungaanya CSS ne JavaScript)

Ezzaawo /dist/dayirekita ne fayiro za CSS ne JavaScript ezikung’aanyiziddwa era ezikendeezeddwa. Nga omukozesa wa Bootstrap, kino mu budde obutuufu kye kiragiro ky’oyagala.

grunt watch(Saawa)

Etunuulira fayiro z'ensibuko ya Less era n'eddamu okuzikuŋŋaanya mu CSS buli lw'otereka enkyukakyuka.

grunt test(Dduka ebigezo)

Eddukanya JSHint era ekola ebigezo bya QUnit nga tewali mutwe mu PhantomJS .

grunt docs(Okuzimba & okugezesa eby'obugagga bya docs)

Azimba era agezesa CSS, JavaScript, n'eby'obugagga ebirala ebikozesebwa nga oddukanya ebiwandiiko mu kitundu nga oyita mu bundle exec jekyll serve.

grunt(Zimba ddala buli kimu era odduke ebigezo)

Akungaanya n’okukendeeza ku CSS ne JavaScript, azimba omukutu gw’ebiwandiiko, addukanya ekikakasa HTML5 okusinziira ku biwandiiko, addamu okukola eby’obugagga bya Customizer, n’ebirala. Yeetaaga Jekyll . Ebiseera ebisinga kyetaagisa singa oba oyingidde ku Bootstrap yennyini.

Okugonjoola ebizibu

Singa osanga obuzibu mu kuteeka ebisinziirako oba okuddukanya ebiragiro bya Grunt, sooka osazaamu /node_modules/dayirekita ekoleddwa npm. Oluvannyuma, ddamu okudduka npm install.

Ekifaananyi ekikulu

Tandika n'ekifaananyi kino ekya HTML ekikulu, oba kyusa ebyokulabirako bino . Tusuubira nti ojja kulongoosa ebikozesebwa byaffe n’ebyokulabirako, ng’obikyusa okusinziira ku byetaago byo.

Koppa HTML wansi okutandika okukola n'ekiwandiiko kya Bootstrap ekitono ennyo.

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

Eby’okulabirako

Zimba ku template enkulu waggulu n'ebitundu bya Bootstrap bingi. Tukukubiriza okulongoosa n'okukyusa Bootstrap okusinziira ku byetaago bya pulojekiti yo ssekinnoomu.

Funa source code ya buli kyokulabirako wansi nga owanula etterekero lya Bootstrap . Eby’okulabirako bisobola okusangibwa mu docs/examples/dayirekita.

Okukozesa enkola

Ekifaananyi ky’okutandika

Tewali kirala wabula ebikulu: okukunganya CSS ne JavaScript wamu ne container.

Omulamwa gwa Bootstrap

Tikka omulamwa gwa Bootstrap ogw'okwesalirawo okufuna obumanyirivu obunywezeddwa mu kulaba.

Ebisenge ebiyitibwa Grids

Ebyokulabirako ebiwerako eby'ensengeka za grid nga zirina emitendera gyonna ena, okusimba ebisu, n'ebirala.

Ekirungo kya Jumbotron

Zimba okwetoloola jumbotron nga olina navbar n'empagi ezimu eza grid ezisookerwako.

Jumbotron enfunda

Zimba omuko ogw'enjawulo ennyo ng'ofunza ekintu ekisookerwako ne jumbotron.

Navbars mu bikolwa

Navbar

Super basic template erimu navbar wamu n'ebimu ku birimu ebirala.

Static waggulu navbar

Super basic template nga eriko static top navbar wamu n'ebimu ku birimu ebirala.

Navbar etereezeddwa

Super basic template nga eriko fixed top navbar wamu n'ebimu ku birimu ebirala.

Ebitundu eby’enjawulo

Ekisaanikizo

Ekifaananyi eky’olupapula lumu eky’okuzimba empapula z’awaka ennyangu era ennungi.

Ekyuma ekiyitibwa Carousel

Customize navbar ne carousel, olwo osseeko ebitundu ebipya.

Blog

Enteekateeka ya blog ennyangu ey’ennyiriri bbiri ng’erina okutambula okw’enjawulo, omutwe, n’ekika.

Daasiboodi

Ensengeka enkulu eya dashboard ya admin nga eriko sidebar ne navbar ezitakyukakyuka.

Olupapula lw’okuyingira

Enteekateeka ya foomu eya custom ne dizayini y’akabonero akangu mu foomu.

Obutuufu nav

Tonda navbar eya custom nga erimu enkolagana ezituufu. Emitwe gigulumivu! Si nnyo Safari friendly.

Ekiwandiiko ekikwata wansi

Teeka wansi wansi w’ekifo eky’okulaba ng’ebirimu bimpi okusinga byo.

Footer ekwatagana nga eriko navbar

Teeka wansi wansi w'ekifo eky'okulaba ng'olina navbar eteredde waggulu.

Okugezesa

Bootstrap etali ya kuddamu

Kyangu okulemesa okuddamu kwa Bootstrap buli docs zaffe .

Okuva ku kanvaasi

Zimba menu y'okutambulira ku kanvaasi ekyusibwakyusibwa okukozesebwa ne Bootstrap.

Ebikozesebwa

Bootlint nga bwe kiri

Bootlint kye kimu ku bikozesebwa ekitongole ekya Bootstrap HTML linter . Ekebera mu ngeri ey'otoma ensobi za HTML eziwerako eza bulijjo mu mpapula z'omukutu ezikozesa Bootstrap mu ngeri entuufu eya "vanilla". Ebitundu/widget za Vanilla Bootstrap byetaaga ebitundu byabwe ebya DOM okutuukana n'ensengeka ezimu. Bootlint ekebera nti ebifaananyi by'ebitundu bya Bootstrap birina HTML etegekeddwa obulungi. Lowooza ku kwongera Bootlint ku Bootstrap web development toolchain yo obutabaawo nsobi yonna etera okukendeeza ku nkulaakulana ya pulojekiti yo.

Ekyaalo

Sigala ng’omanyi enkulaakulana ya Bootstrap era otuukirire abantu b’omukitundu n’ebikozesebwa bino ebiyamba.

• Soma era wewandiise ku The Official Bootstrap Blog .
• Yogera ne banno Bootstrappers nga okozesa IRC mu irc.freenode.netserver, mu ##bootstrap channel .
• Okufuna obuyambi mu kukozesa Bootstrap, buuza ku StackOverflow ng'okozesa tagtwitter-bootstrap-3 .
• Abakola balina okukozesa ekigambo ekikulu bootstrapku packages ezikyusa oba okwongera ku nkola ya Bootstrap nga zisaasaanya okuyita mu npm oba enkola ezifaananako bwe zityo ez’okutuusa okusobola okuzuula okusingawo.
• Funa ebyokulabirako ebisikiriza eby'abantu abazimba ne Bootstrap mu Bootstrap Expo .

Osobola n'okugoberera @getbootstrap ku Twitter okufuna olugambo olusembyeyo ne vidiyo z'ennyimba eziwuniikiriza.

Okulemesa okuddamu

Bootstrap ekyusa empapula zo ku sayizi za screen ez’enjawulo. Laba engeri gy'oyinza okulemesaamu ekintu kino omuko gwo gukole ng'ekyokulabirako kino ekitali kya kuddamu .

Emitendera gy’okulemesa okuddamu kw’olupapula

1. Leka ekifo eky'okulaba <meta>ekyogerwako mu biwandiiko bya CSS
2. Override the widthon the .containerfor each grid tier n'obugazi bumu, okugeza width: 970px !important;Kakasa nti kino kijja oluvannyuma lwa Bootstrap CSS eya bulijjo. Osobola okwewala okwewala !importantne media queries oba ebimu selector-fu.
3. Bw'oba okozesa navbars, ggyawo enneeyisa zonna eza navbar ezigwa n'okugaziya.
4. Ku layouts za grid, kozesa .col-xs-*classes nga kwotadde, oba mu kifo kya, eza wakati/ennene. Teweeraliikiriranga, ekisenge ky'ekyuma ekitono ennyo kigerageranya ku biteeso byonna.

Ojja kwetaaga Respond.js ku IE8 (okuva ebibuuzo byaffe eby'emikutu bwe bikyaliwo era byetaaga okukolebwako). Kino kiremesa "omukutu gw'essimu" ebitundu bya Bootstrap.

Bootstrap template nga okuddamu kulemeseddwa

Emitendera gino tugikozesezza ku kyokulabirako. Soma source code yaayo olabe enkyukakyuka ezenjawulo eziteekeddwa mu nkola.

Laba ekyokulabirako ekitali kya kuddamu

Obuwagizi bwa Browser n’ebyuma

Bootstrap ezimbiddwa okukola obulungi mu bbulawuzi za desktop ne mobile ezisembyeyo, ekitegeeza nti browser enkadde ziyinza okulaga sitayiro ey’enjawulo, wadde nga zikola mu bujjuvu, okulaga ebitundu ebimu.

Browser eziwagirwa

Okusingira ddala, tuwagira enkyusa ezisembyeyo eza browser ne platforms zino wammanga.

Browser endala ezikozesa enkyusa ya WebKit, Blink, oba Gecko eyasembyeyo, oba butereevu oba nga ziyita mu API y’okulaba omukutu ku mukutu, teziwagirwa mu bulambulukufu. Naye, Bootstrap erina (mu mbeera ezisinga) okulaga era okukola obulungi mu browser zino nazo. Ebisingawo ebikwata ku buyambi biweereddwa wansi.

Ebyuma ebikozesebwa ku ssimu

Okutwaliza awamu, Bootstrap ewagira enkyusa ezisembyeyo eza buli mukutu omukulu ogwa browser ezisookerwako. Weetegereze nti proxy browsers (nga Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) teziwagirwa.

Ebikozesebwa ku mmeeza

Mu ngeri y’emu, enkyusa ezisembyeyo eza desktop browser ezisinga ziwagirwa.

Ku Windows, tuwagira Internet Explorer 8-11 .

Ku Firefox, ng’oggyeeko okufulumizibwa okwa bulijjo okutebenkedde okusembyeyo, era tuwagira enkyusa ya Firefox eya Extended Support Release (ESR) eyasembyeyo.

Mu ngeri etali ntongole, Bootstrap erina okulabika n’okweyisa obulungi ekimala mu Chromium ne Chrome ku Linux, Firefox ku Linux, ne Internet Explorer 7, wamu ne Microsoft Edge, wadde nga teziwagirwa mu butongole.

Olukalala lw’ebimu ku buzibu bwa bbulawuzi Bootstrap bw’erina okulwana nabyo, laba Bbugwe waffe ow’obuzibu bwa bbulawuzi .

Internet Explorer 8 ne 9

Internet Explorer 8 ne 9 nazo ziwagirwa, wabula, nsaba okimanye nti ebimu ku bintu bya CSS3 n’ebintu bya HTML5 tebiwagirwa mu bujjuvu bulawuzi zino. Okugatta ku ekyo, Internet Explorer 8 yeetaaga okukozesa Respond.js okusobozesa okuwagira okubuuza emikutu.

Kyalira Nsobola okukozesa... okumanya ebisingawo ku buwagizi bwa browser obw'ebintu bya CSS3 ne HTML5.

Internet Explorer 8 ne Respond.js

Weegendereze okulabula kuno wammanga ng’okozesa Respond.js mu mbeera zo ez’okukulaakulanya n’okufulumya Internet Explorer 8.

Respond.js ne CSS ey’omusalaba

Okukozesa Respond.js ne CSS etegekeddwa ku (sub)domain ey'enjawulo (okugeza, ku CDN) kyetaagisa okuteekawo okulala. Laba ebiwandiiko bya Respond.js okumanya ebisingawo.

Respond.js era ngafile://

Olw'amateeka g'obukuumi bwa browser, Respond.js tekola na mpapula ezirabibwa okuyita mu file://protocol (nga nga oggulawo fayiro ya HTML ey'omu kitundu). Okugezesa ebikozesebwa ebiddamu mu IE8, laba empapula zo ku HTTP(S). Laba ebiwandiiko bya Respond.js okumanya ebisingawo.

Respond.js era nga@import

Respond.js tekola na CSS ejuliziddwa okuyita mu @import. Okusingira ddala, ensengeka za Drupal ezimu zimanyiddwa okukozesa @import. Laba ebiwandiiko bya Respond.js okumanya ebisingawo.

Internet Explorer 8 n’okukola obunene bw’ebibokisi

IE8 tewagira mu bujjuvu box-sizing: border-box;nga egattibwa ne min-width, max-width, min-height, oba max-height. Olw’ensonga eyo, okuva ku v3.0.1, tetukyakozesa max-widthku .containers.

Internet Explorer 8 ne @font-face nga bakozesa enkola eno

IE8 erina ensonga ezimu ne @font-facebwe zigatta ne :before. Bootstrap ekozesa omugatte ogwo ne Glyphicons zaayo. Singa omuko guteekebwa mu cache, ne gutikkibwa awatali mouse ku ddirisa (kwe kugamba kwata button ya refresh oba okutikka ekintu mu iframe) olwo omuko gufuna rendered nga font tennatikkibwa. Okuwuuba ku lupapula (omubiri) kijja kulaga ebimu ku bifaananyi ate okuwuuba ku bifaananyi ebisigaddewo kijja kulaga n’ebyo. Laba ensonga #13863 okumanya ebisingawo.

IE Emitendera gy’okukwatagana

Bootstrap tewagirwa mu mbeera za Internet Explorer enkadde ez'okukwatagana. Okukakasa nti okozesa enkola y'okulaga eya IE eyasembyeyo, lowooza ku ky'okussaako <meta>akabonero akatuufu mu mpapula zo:

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

Kakasa embeera y'ekiwandiiko ng'oggulawo ebikozesebwa mu kulongoosa: nyweza F12era okebere "Document Mode".

Taagi eno erimu mu biwandiiko byonna ebya Bootstrap n'ebyokulabirako okukakasa okulaga okusinga obulungi okusoboka mu buli nkyusa ya Internet Explorer ewagirwa.

Laba ekibuuzo kino ekya StackOverflow okumanya ebisingawo.

Internet Explorer 10 mu Windows 8 ne Windows Phone 8

Internet Explorer 10 teyawula bugazi bwa kyuma ku bugazi bwa viewport , era bwe kityo tekozesa bulungi bibuuzo bya mikutu mu CSS ya Bootstrap. Mu budde obwabulijjo wandiyongeddeko ekitundu eky'amangu ekya CSS okutereeza kino:

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

Naye kino tekikola ku byuma ebikozesa enkyusa za Windows Phone 8 enkadde okusinga Update 3 (aka GDR3) , kubanga kireetera ebyuma ng'ebyo okulaga okulaba okusinga ku desktop mu kifo ky'okulaba okufunda "essimu". Okukola ku kino, ojja kwetaaga okussaamu CSS ne JavaScript zino wammanga okukola ku bug .

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

Okumanya ebisingawo n’ebiragiro ebikwata ku nkozesa, soma Windows Phone 8 ne Device-Width .

Nga heads up, kino tukiteeka mu biwandiiko byonna ebya Bootstrap n'ebyokulabirako ng'okwolesebwa.

Safari ebitundu ku kikumi okuzingulula

Yingini y’okulaga enkyusa za Safari nga v7.1 tennabaawo ku OS X ne Safari ku iOS v8.0 yalina obuzibu obumu ku muwendo gw’ebifo bya decimal ebikozesebwa mu .col-*-1bibiina byaffe ebya grid. Kale singa walina ennyiriri za grid 12 ssekinnoomu, wandikirabye nti zajja nga nnyimpi bw’ogeraageranya n’ennyiriri endala ez’ennyiriri. Ng’oggyeeko okulongoosa Safari/iOS, olina ebimu ku by’oyinza okugonjoolamu:

• Yongera .pull-rightku kisenge kyo ekisembayo okufuna ensengeka enzibu-ddyo
• Tweak ebitundu byo mu ngalo okufuna rounding entuufu eya Safari (ekizibu okusinga eky'okulonda ekisooka)

Modals, navbars, ne kibboodi ezirabika (virtual keyboards).

Okujjula n’okuyiringisibwa

Obuwagizi bwa overflow: hiddenku <body>elementi bukoma nnyo mu iOS ne Android. Ku nsonga eyo, bw’oyita waggulu oba wansi ku modal mu bumu ku bbulawuzi z’ebyuma ebyo, <body>ebirimu bijja kutandika okutambula. Laba ekizibu kya Chrome #175502 (ekitereezeddwa mu Chrome v40) n'ekizibu kya WebKit #153852 .

Ennimiro z’ebiwandiiko bya iOS n’okutambula

Okuva ku iOS 9.3, nga modal eggule, singa okukwata okusooka okw’akabonero k’omuzingo kuba mu nsalo y’ekiwandiiko <input>oba a <textarea>, <body>ebirimu wansi wa modal bijja kuyiringisibwa mu kifo kya modal yennyini. Laba ekizibu kya WebKit #153856 .

Ebipande ebiyitibwa virtual keyboards

Era, weetegereze nti bw’oba ​​okozesa fixed navbar oba ng’okozesa inputs munda mu modal, iOS erina ekizibu ky’okulaga ekitatereeza kifo kya fixed elements nga virtual keyboard ekoleddwa. Ebitonotono ebigonjoolwa ku kino mulimu okukyusa elementi zo okudda position: absoluteoba okuyita timer ku focus okugezaako okutereeza positioning mu ngalo. Kino tekikwatibwako Bootstrap, kale kiri gy’oli okusalawo eky’okugonjoola ekisinga obulungi ku nkola yo.

Navbar Ebiwandiiko

Element .dropdown-backdroptekozesebwa ku iOS mu nav olw'obuzibu bwa z-indexing. Bwe kityo, okuggalawo ebigwa mu navbars, olina okunyiga butereevu ekintu ekigwa wansi (oba ekintu ekirala kyonna ekijja okukuba ekintu ekinyiga mu iOS ).

Okuzimba kwa Browser

Okuzimba omuko tekyewalika kwanjula ebikozesebwa mu kulaga mu bitundu ebimu, byombi mu Bootstrap n’omukutu gwonna. Okusinziira ku nsonga, tuyinza okusobola okugitereeza (sooka onoonye n’oluvannyuma oggulewo ensonga bwe kiba kyetaagisa). Naye, tutera okubuusa amaaso bino kuba bitera obutaba na solution butereevu okuggyako hacky workarounds.

Sticky :hover/ :focusku ssimu

Newankubadde nga hovering entuufu tesoboka ku touchscreens ezisinga obungi, mobile browsers ezisinga zikoppa obuwagizi bwa hovering ne zikola :hover"sticky". Mu ngeri endala, :hoversitayiro zitandika okukozesa oluvannyuma lw’okukuba ku elementi era zikoma okukozesa oluvannyuma lw’omukozesa okukuba ku elementi endala. Kino kiyinza okuvaako :hoverembeera za Bootstrap okufuuka "okusibira" mu ngeri etayagala ku bulawuzi ng'ezo. Browser ezimu ku ssimu nazo zikola :focusokukwatagana mu ngeri y’emu. Mu kiseera kino tewali nkola nnyangu ku nsonga zino okuggyako okuggyawo ddala sitayiro ng’ezo.

Okukuba ebitabo

Ne mu browser ezimu ez’omulembe, okukuba ebitabo kuyinza okuba okw’ekyewuunyo.

Okusingira ddala, okuva ku Chrome v32 era awatali kufaayo ku nteekateeka z’oku mabbali, Chrome ekozesa obugazi bw’ekifo eky’okulaba obufunda ennyo okusinga obunene bw’olupapula olulabika ng’egonjoola ebibuuzo by’emikutu ng’ekuba omukutu gwa yintaneeti. Kino kiyinza okuvaamu Bootstrap's extra-small grid okukola mu ngeri etasuubirwa nga ekuba ebitabo. Laba ensonga #12078 ne Chrome bug #273306 okumanya ebisingawo. Ebiteeso by’okukola ku nsonga eno:

• Wambatira ekisenge ekitono ennyo era okakasa nti omuko gwo gulabika nga gukkirizibwa wansi waakyo.
• Customize emiwendo gya @screen-*Less variables olupapula lwo olwa printer lutwalibwa nga olunene okusinga extra-small.
• Okwongerako ebibuuzo by'emikutu egy'ennono okukyusa ebifo eby'okumenyawo sayizi ya giridi ku mikutu gy'okukuba ebitabo gyokka.

Era, okuva ku Safari v8.0, fixed-width .containers esobola okuleeta Safari okukozesa sayizi y’empandiika entono mu ngeri etaali ya bulijjo ng’ekuba ebitabo. Laba #14868 ne WebKit bug #138192 okumanya ebisingawo. Ekimu ku biyinza okugonjoolwa ku kino kwe kwongerako CSS eno wammanga:

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

Obubaka bwa sitokisi ya Android

Okuva mu kibokisi, Android 4.1 (n’ebimu ku bipya ebifulumiziddwa kirabika) egenda ne Browser app nga web browser eya bulijjo gy’olonze (okuwukana ku Chrome). Ebyembi, app ya Browser erina obuzibu bungi n’obutakwatagana ne CSS okutwaliza awamu.

Londa menus

Ku <select>elements, Android stock browser tejja kulaga side controls singa wabaawo border-radiusera/oba borderessiddwako. (Laba ekibuuzo kino ekya StackOverflow okumanya ebisingawo.) Kozesa akatundu ka koodi wansi okuggyawo CSS enyiiza n’okulaga the <select>nga ekintu ekitaliiko sitayiro ku Android stock browser. Okuwunyiriza kwa agenti w’omukozesa kwewala okutaataaganya Chrome, Safari, ne Mozilla browsers.

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

Oyagala kulaba kyakulabirako? Laba demo eno eya JS Bin.

Abakakasa

Okusobola okuwa obumanyirivu obusinga obulungi eri browser enkadde n’erimu obuzibu, Bootstrap ekozesa CSS browser hacks mu bifo ebiwerako okutunuulira CSS ey’enjawulo ku browser versions ezimu okusobola okukola ku bugs mu browsers zennyini. Hacks zino kitegeerekeka kireetera abakakasa CSS okwemulugunya nti si ntuufu. Mu bifo bibiri, era tukozesa bleeding-edge CSS features ezitannaba kutuuka ku mutindo mu bujjuvu, naye bino bikozesebwa purely for progressive enhancement.

Okulabula kuno okw’okukakasa tekulina makulu mu nkola okuva ekitundu ekitali kya hacky ekya CSS yaffe bwe kikola okukakasa mu bujjuvu era ebitundu ebiriko hacky tebiyingirira nkola nnungi ey’ekitundu ekitali kya hacky, y’ensonga lwaki tubuusa amaaso mu bugenderevu okulabula kuno okw’enjawulo.

Ebiwandiiko byaffe ebya HTML nabyo birina okulabula okumu okutali kwa makulu era okutali kwa mugaso ku kukakasa HTML olw'okussaamu kwaffe eky'okugonjoola ekizibu ekimu ekya Firefox .

Obuwagizi bw’abantu ab’okusatu

Wadde nga tetuwagira mu butongole plugins oba add-ons yonna ey’ekibiina eky’okusatu, tuwa amagezi ag’omugaso okuyamba okwewala ensonga eziyinza okubaawo mu pulojekiti zo.

Okukola obunene bw’ebibokisi

Sofutiweya ezimu ez’ekibiina eky’okusatu, omuli Google Maps ne Google Custom Search Engine, zikontana ne Bootstrap olw’okuba * { box-sizing: border-box; }, etteeka erigifuula bwetyo paddingterikosa bugazi bwa elementi obusembayo obubaliriddwa. Manya ebisingawo ku box model ne sizing ku CSS Tricks .

Okusinziira ku mbeera, oyinza okusazaamu nga bwe kyetaagisa (Eky’okukola 1) oba okuddamu okuteekawo obunene bw’ekibokisi ku bitundu byonna (Eky’okulonda 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();
}

Okutuuka ku bantu

Bootstrap egoberera emitendera gya web egya bulijjo era —nga tewali nnyo maanyi mangi —esobola okukozesebwa okukola emikutu egisobola okutuukirirwa abo abakozesa AT .

Skip okutambulira ku nnyanja

Singa okutambulira kwo kulimu enkolagana nnyingi era nga kujja nga ebikulu ebirimu tebinnabaawo mu DOM, yongera ku Skip to main contentnkolagana nga okutambula tekunnabaawo (okusobola okunnyonnyola okwangu, laba ekiwandiiko kino ekya A11Y Project ku kubuuka enkolagana z’okutambuliramu ). Okukozesa .sr-onlyekibiina kijja kukweka mu kulaba enkolagana y’okubuuka, era .sr-only-focusableekibiina kijja kukakasa nti enkolagana efuuka erabika nga emaze okussa essira (eri abakozesa kiiboodi abalaba).

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

Emitwe egy’ebisu

Nga oteeka emitwe ( <h1>- <h6>), omutwe gwo ogw'ekiwandiiko ekikulu gulina okuba <h1>. Emitwe egiddako girina okukozesa obulungi <h2>- <h6>nga abasomi ku screen basobola okuzimba emmeeza y'ebirimu ku mpapula zo.

Manya ebisingawo ku HTML CodeSniffer ne Penn State's AccessAbility .

Okwawukana kwa langi

Mu kiseera kino, ebimu ku bigatta langi ezisookerwako eziri mu Bootstrap (nga kiraasi za button ez’enjawulo eziriko sitayiro , ezimu ku langi eziraga koodi ezikozesebwa ku bulooka za koodi ezisookerwako , ekibiina ky’omuyambi .bg-primary w’emabega w’ensonga, ne langi y’enkolagana eya bulijjo nga ekozesebwa ku mugongo omweru) balina omugerageranyo gw’enjawulo omutono (wansi w’omugerageranyo ogulagirwa ogwa 4.5:1 ). Kino kiyinza okuleeta obuzibu eri abakozesa abatalaba bulungi oba abaziba langi. Langi zino ezisookerwako ziyinza okwetaaga okukyusibwa okusobola okwongera ku njawulo yazo n’okusoma.

Ebikozesebwa ebirala

• "HTML Codesniffer" bookmarklet okuzuula ensonga z'okutuuka ku bantu
• Chrome's Accessibility Developer Tools eky'okugaziya
• Ekyuma ekikebera enjawulo ya langi
• Pulojekiti ya A11Y
• Ebiwandiiko ebikwata ku kutuuka ku MDN

Ebibuuzo ebibuuzibwa ku layisinsi

Bootstrap efulumiziddwa wansi wa layisinsi ya MIT era nga ya copyright 2016 Twitter. Bwe kifumbirwa okutuuka ku bitundutundu ebitonotono, kiyinza okunnyonnyolwa n’embeera zino wammanga.

Kikwetaagisa okukola bino:

• Kuuma ekiwandiiko kya layisinsi n'obuyinza bw'okuwandiika nga birimu mu fayiro za Bootstrap eza CSS ne JavaScript ng'ozikozesa mu mirimu gyo

Kikukkiriza okukola bino:

• Wanula ku bwereere era okozese Bootstrap, mu bujjuvu oba mu kitundu, olw’ebigendererwa by’omuntu, eby’obwannannyini, eby’omunda mu kkampuni, oba eby’obusuubuzi
• Kozesa Bootstrap mu packages oba distributions z'okola
• Kyuusa ennamba y’ensibuko
• Okuwa layisinsi entono okukyusa n'okusaasaanya Bootstrap eri abantu ab'okusatu abatali mu layisinsi

Kikugaana okukola bino:

• Kuba abawandiisi ne bannannyini layisinsi okuvunaanibwa olw'ebyonoonese nga Bootstrap eweebwa awatali ggaranti
• Kuba abatonzi oba abalina copyright ya Bootstrap nga bavunaana
• Ddamu okugabanya ekitundu kyonna ekya Bootstrap awatali kulaga bulungi
• Kozesa obubonero bwonna obwa Twitter mu ngeri yonna eyinza okulaga oba okulaga nti Twitter ewagira okusaasaanya kwo
• Kozesa obubonero bwonna obwa Twitter mu ngeri yonna eyinza okulaga oba okulaga nti ggwe wakola pulogulaamu ya Twitter eyogerwako

Tekyetaagisa:

• Teekamu ensibuko ya Bootstrap yennyini, oba enkyukakyuka zonna z’oyinza okuba nga wagikoze, mu kuddamu okusaasaanya kwonna kw’oyinza okukuŋŋaanya okugirimu
• Weereza enkyukakyuka z'okola ku Bootstrap okudda ku pulojekiti ya Bootstrap (wadde ng'okuddamu ng'okwo kukubirizibwa)

Layisinsi ya Bootstrap enzijuvu esangibwa mu tterekero lya pulojekiti okumanya ebisingawo.

Enzivuunula

Abantu b'omukitundu bavvuunudde ebiwandiiko bya Bootstrap mu nnimi ez'enjawulo. Tewali n’emu ewagirwa mu butongole era eyinza obutaba ya mulembe bulijjo.

• Omusipi gw'okubuuka 中文文档 (Oluchina)
• Bootstrap 3 中文手冊 (Oluchina (Olunnansi))
• Bootstrap på Dansk (Oludaani) .
• Bootstrap en Français (Olufaransa) .
• Bootstrap auf Deutsch (Olugirimaani) .
• Bootstrap mu lulimi Olutaliyano (Oluyitale) .
• Bootstrap 한국어 (Olukorea) .
• Bootstrap em Português do Brasil (Olupotugo olw'e Brazil)
• Omusipi gw'okusiba bootstrap по-русски (Olurussia) .
• Bootstrap en Español (Olusipeyini) .
• Türkçe Omusipi gw’Engatto (Olutuluuki) .
• Bootstrap українською (Oluyukireniya) .
• Bootstrap bằng tiếng Việt (Oluviyetnam) .

Tetuyamba kutegeka oba okukyaza enzivuunula, tumala kuziyungako.

Omaze enzivuunula empya oba okusingawo? Ggulawo okusaba okusika okukyongera ku lukalala lwaffe.