Qallarinapaq
Huk qhaway Bootstrap kaqmanta, imayna uraykachiy chaymanta llamk'achiyta, plantillas básicas chaymanta ejemplokuna, chaymanta aswan.
Huk qhaway Bootstrap kaqmanta, imayna uraykachiy chaymanta llamk'achiyta, plantillas básicas chaymanta ejemplokuna, chaymanta aswan.
Bootstrap (kunan v3.3.7) huk pisi facil ñankunayuq usqhaylla qallariypaq, sapa huk hukniray yachay pataman chaymanta llamk'ana casoman munay. Ñawinchayta imakuna necesitasqaykiman hina kasqanmanta yachanaykipaq.
CSS, JavaScript, chaymanta letrakuna huñusqa chaymanta pisiyachisqa. Mana qillqakuna icha ñawpaq pukyu willañiqikuna churasqachu.
Source Less, JavaScript, chaymanta font willañiqikuna, docsniykuwan kuska. Requiere un compilador Less y alguna configuración.
Bootstrap Less kaqmanta Sass kaqman apachisqa Rails, Compass utaq Sass-lla llamkanakunapi mana sasachu churanapaq.
Chay runakuna chaymanta jsDelivr kaqpi sumaq sunquwan CDN yanapakuyta qunku Bootstrap kaqpa CSS kaqpaq chaymanta JavaScript kaqpaq. Kay Bootstrap CDN t'inkikunata llamk'achiylla.
Bootstrap kaqpa Less, CSS, JavaScript chaymanta qillqakuna Bower kaqwan churayta chaymanta kamachiyta atikunki :
Bootstrap nisqatapas npm nisqawan churayta atinki :
require('bootstrap')
llapa Bootstrap kaqpa jQuery plugins kaqninta jQuery kaqman karganqa. Kikin bootstrap
módulo nisqa mana imatapas hawaman apachinchu. Bootstrap kaqpa jQuery yapayninkunata sapankama makiwan kargayta atikunki, /js/*.js
willañiqikunata paquetepa pata pata willañiqi ukhupi kargaspa.
Bootstrap's package.json
wakin yapasqa metadatokuna kay llavekuna ukhupi kachkan:
less
- Bootstrappa hatun Aswan pisi pukyu willañiqiman ñanstyle
- ñan Bootstrap kaqpa mana pisichasqa CSS kaqman chaymanta ñawpaqmanta huñusqa ñawpaqmanta churasqakuna llamk'achispa (mana sapanchasqa)Bootstrap kaqpa Less, CSS, JavaScript chaymanta qillqakuna Composer kaqwan churayta chaymanta kamachiyta atikunki :
Bootstrap Autoprefixer llamk'achin CSS ranqhaq ñawpaq sutikunawan llamk'ananpaq . Sichus Bootstrap Less/Sass pukyuta huñuchkanki chaymanta mana Gruntfileykuta llamk'achkankichu, Autoprefixer ruwayta ruwanaykiman qam kikiyki tinkinayki tiyan. Sichus ñawpaqmanta huñusqa Bootstrap llamk'achkanki utaq Gruntfileykuta llamk'achkanki, mana kaymanta llakikunaykichu tiyan imaraykuchus Autoprefixer Gruntfileykuman hukllachasqaña kachkan.
Bootstrap iskay formakunapi uraykachiy atikun, mayqinkunapichus kay qatiq directoriokunata chaymanta willakuykunata tarinki, lógicamente común yanapakuykunata huñuspa chaymanta iskaynin huñusqa chaymanta pisichasqa variaciones quy.
Ama hina kaspa, tukuy JavaScript yapaykuna jQuery nisqa churananta munanku , qallariy plantilla nisqapi rikuchisqa hina . Consulta nuestrobower.json
para ver las versiones de jQuery que se apoya.
Huk kuti uraykachisqa, ñit'isqa qillqana mayt'uta kichay (hukllasqa) Bootstrap nisqap ruwayninta qhawanaykipaq. Kay hinatan rikunki:
Kayqa Bootstrap kaqpa aswan sapsi rikchayninmi: ñawpaqmanta huñusqa willañiqikuna yaqa mayqin web ruwaypipas utqaylla urmachiy llamk'anapaq. Huñusqa CSS chaymanta JS ( ) quyku bootstrap.*
, chaymanta huñusqa chaymanta pisiyachisqa CSS chaymanta JS ( bootstrap.min.*
). CSS pukyuta mapakuna ( bootstrap.*.map
) wakin maskaqkunap paqarichiq yanapakuyninkunawan llamk'anapaq kanku. Glyphicons kaqmanta letrakuna churasqa kachkan, chaymanta Bootstrap akllana tema kaqhina.
Bootstrap pukyuta uraykachiyqa ñawpaqmanta huñusqa CSS, JavaScript chaymanta qillqap kaqninkunayuq, pukyuta Less kaqwan, JavaScript kaqwan chaymanta qillqakunawan kuska. Aswan sut'itaqa, kaykunatam, aswan achkakunatapas churan:
Chay less/
, js/
, chaymanta fonts/
CSS, JS, chaymanta icono qillqakunaykupaq pukyuta (hukmanta). Chay dist/
qillqana mayt'upiqa tukuy ima kachkan ñawpaqmanta huñusqa uraykachiy t'aqapi hawapi. Qillqana mayt'upi qillqaykupaq, chaymanta Bootstrap llamk'achinapaq docs/
pukyuta churan . examples/
Chaymanta aswan, mayqin wak yapasqa willañiqipas paquetes kaqpaq, licencia willaypaq chaymanta wiñachiypaq yanapakuyta qun.
Bootstrap Grunt ruwana sistemanpaq llamk'achin, allin ñankunawan marcowan llamk'anapaq. Chayqa imayna codigoykuta huñuyku, pruebakuna purichiyku, chaymanta aswan.
Grunt churanapaq, ñawpaqta node.js (kaytaq npm kaqwan kachkan) uraykachinayki tiyan chaymanta churanayki tiyan. npm node paqueteado módulos kaqmanta riman chaymanta huk ñan wiñariy hapirinakunata node.js kaqnintakama kamachinapaq.
Chaymanta, kamachiy chirumanta:grunt-cli
Tukuy pachapaq churay npm install -g grunt-cli
./bootstrap/
willañiqiman puriy, chaymanta purichiy npm install
. package.json
npm willañiqita qhawanqa chaymanta kikinmanta chaypi listasqa necesario local dependenciakunata churanqa.Tukuptinqa, kamachiy chirumanta qusqa imaymana Grunt kamachiykunata purichiyta atikunki.
grunt dist
(CSS y JavaScript nisqakunata huñuylla)Huñusqa /dist/
chaymanta pisichasqa CSS chaymanta JavaScript willañiqikunawan willañiqita musuqmanta ruwan. Bootstrap llamk'achiq hina, kayqa normalmente munasqayki kamachiymi.
grunt watch
(Qaway)Aswan pisi pukyu willañiqikunata qhawan chaymanta kikinmanta CSS kaqman wakmanta huñun mayk'aqllapas huk tikrayta waqaychanki.
grunt test
(Pruebakunata purichiy)JSHint purichin chaymanta QUnit pruebakunata mana umayuq PhantomJS kaqpi purichin .
grunt docs
(Docs kaqpa kaqninkunata ruway & prueba)CSS, JavaScript chaymanta wak kaqninkunata ruwan chaymanta prueban mayqinkunachus llamk'achkanku mayk'aq qillqakunata kitipi purichichkan via bundle exec jekyll serve
.
grunt
(Construye absolutamente todo y ejecutar pruebas)CSS chaymanta JavaScript huñun chaymanta pisiyachin, qillqa web kitita ruwan, HTML5 chiqaqchaq docs kaqwan purichin, Customizer kaqpa kaqninkunata musuqmanta ruwan, chaymanta aswan. Jekyll sutiyuq runatam munan . Normalmente necesario solamente si estás hacking en el mismo Bootstrap.
Sichus sasachakuykunawan tupanki dependenciakuna churaypi utaq Grunt kamachiykunata purichiypi, ñawpaqta /node_modules/
npm kaqwan ruwasqa directoriota qulluy. Chaymanta, yapamanta purichiy npm install
.
Kay HTML sapsi plantillawan qallariy, icha kay rikch'anakunata tikray . Esperomos que personalizarás nuestras plantillas y ejemplos, adaptandolas para adaptarse a tus necesidades.
Uraypi HTML kaqmanta qillqay huk pisi Bootstrap qillqawan llamk'ayta qallariypaq.
Construye en la plantilla básica de arriba con los muchos componentes de Bootstrap. Kallpanchayku Bootstrap sapan proyectoykipa necesidadninman hina ruwanaykipaq chaymanta adaptanaykipaq.
Uraypi sapa rikch'anapaq pukyuta hapiy Bootstrap waqaychasqata uraykachispa . Ejemplokunataqa tarisunmanmi docs/examples/
directorio nisqapi.
Estructura básica para un salpicadero de admin con barra lateral fija y barra de nav.
Huk sapanchasqa navbar ruway chaninchasqa t'inkikunawan. ¡Umakuna wichayman! Mana ancha Safari amigablechu.
Mana sasachakuspalla Bootstrap kutichiyta sapa docsniykuman mana llamk'achiy .
Bootlint nisqaqa Bootstrap HTML linter nisqa llamkana oficialmi. Kikinmanta qhawan achka común HTML pantaykunata web kitikunapi mayqinkunachus Bootstrap llamk'achkanku huk allin "vanilla" ñanpi. Vanilla Bootstrap kaqpa componentes/widgets kaqnin DOM kaqpa partenkuna wakin estructuras kaqmanhina kanankupaq mañanku. Bootlint Bootstrap componentekuna instanciakuna HTML allin ruwasqa kaqta qhawan. Yuyaykuy Bootlint yapayta Bootstrap web wiñachiy herramientakuna cadenaykiman chaymanta mana mayqinpas común pantaykuna proyectoykipa wiñayninta pisiyachinanpaq.
Bootstrap wiñayninmanta kunan pachallapi qhipakuy chaymanta kay yanapakuq yanapakuykunawan aylluman chayay.
irc.freenode.net
sirwiqpi, ##bootstrap kanalpi .twitter-bootstrap-3
.bootstrap
paquetes kaqpi llamk'achinanku tiyan mayqinkunachus Bootstrap ruwayninta tikranku utaq yapanku mayk'aq npm utaq rikch'aq quy mecanismokuna kaqninta rakinku aswan tariypaq.Hinallataq qatipayta atinki @getbootstrap Twitter nisqapi chay qhipa ch’aqwaykunamanta hinallataq manchay takiy videokunamanta.
Bootstrap kikinmanta p'anqaykikunata imaymana pantalla sayaykunapaq ruwan. Kaypi imayna kay ruwayta mana llamk'achiyta atikun chaymanta p'anqayki kay mana kutichiq rikch'ana hina llamk'an .
<meta>
rimasqa qhaway punkuta saqiywidth
on the kaqmanta llalliy, huk rikch'anapaq Aswan allinta kay ñawpaqmanta Bootstrap CSS kaqmanta hamun. Munasqaykimanta hark'ayta atikunki chaymanta willay mast'ariy tapuykunawan utaq wakin akllaq-fu kaqwan..container
width: 970px !important;
!important
.col-xs-*
clasekunata llamk'achiy, chawpi/hatun kaqkunamanta yapasqa, utaq rantinpi. Ama llakikuychu, extra-huch'uy dispositivo rejilla llapa resolucionkunaman escalan.IE8 kaqpaq Respond.js necesitankiraq (imaraykuchus willayniyku tapuykuna chaypiraq kachkanku chaymanta ruwana tiyan). Kayqa Bootstrap kaqpa "kuyuchina sitio" kaqninta mana llamk'achinchu.
Kay ruwanakunata huk ejemploman churarqayku. Ñawinchay paypa pukyuta, chaymanta chay específico tikraykunata ruwasqa kaqta qhawanaykipaq.
¿Maskachkankichu huk ñawpaq Bootstrap kaqmanta v3.x kaqman astayta? Migracionmanta yanapakuyniykupi qawaykuy .
Bootstrap ruwasqa aswan allin llamk'ananpaq qhipa mesa kaqpi chaymanta kuyuchina maskaqkunapi, niyta munan ñawpaq maskaqkuna hukniray estiloyuq rikuchiyta atinkuman, ichaqa hunt'asqa ruwanayuq, wakin componentekuna ruwanakuna.
Específicamente, yanapayku kay qhipa kaq layakuna kay qatiq maskaqkunamanta chaymanta plataformakunamanta.
Huk maskaqkuna mayqinkunachus WebKit, Blink utaq Gecko qhipa kaq laya llamk'achinku, chiqalla utaq plataforma web qhaway API kaqnintakama, mana sut'i yanapasqachu kanku. Ichaqa, Bootstrap (aswan achka kutipi) kay maskaqkunapi allinta rikuchinan tiyan chaymanta llamk'anan tiyan chaymanta. Aswan sut'i yanapakuy willakuy uraypi qusqa kachkan.
Hatun rimaypi, Bootstrap sapa hatun plataformapa ñawpaqmanta maskaqninpa qhipa kaqninkunata yanapakun. Reparay proxy maskaqkuna (kayhina Opera Mini, Opera Mobile kaqpa Turbo ruwaynin, UC Navegador Mini, Amazon Silk) mana yanapasqachu.
Chrome nisqa | Firefox nisqa | Safari nisqa | |
---|---|---|---|
Android nisqa | Yanapasqa | Yanapasqa | N/A |
iOS nisqapi | Yanapasqa | Yanapasqa | Yanapasqa |
Chaynallataq, aswan qhipa kaq layakuna aswan mesa maskaqkunamanta yanapasqa kanku.
Chrome nisqa | Firefox nisqa | Internet nisqapi maskaq | Opera | Safari nisqa | |
---|---|---|---|---|---|
Mac nisqa | Yanapasqa | Yanapasqa | N/A | Yanapasqa | Yanapasqa |
Ventanakuna | Yanapasqa | Yanapasqa | Yanapasqa | Yanapasqa | Mana yanapasqachu |
Windows kaqpi, Internet Explorer 8-11 kaqmanta yanapayku .
Firefox kaqpaq, aswan qhipa normal takyasqa kacharisqamanta, yanapaykutaq qhipa Mast'arisqa Yanapakuy Kacharisqa (ESR) Firefox kaqmanta.
Mana oficial kaqpi, Bootstrap allinta qhawanan chaymanta ruwanan tiyan Chromium kaqpi chaymanta Chrome kaqpi Linux kaqpaq, Firefox kaqpi Linux kaqpaq, chaymanta Internet Explorer 7 kaqpi, chaymanta Microsoft Edge kaqpi, ichaqa mana oficial yanapasqachu kanku.
Huk lista wakin maskaq pantaykuna Bootstrap kaqwan maqanakunan tiyan, qhaway Perqayku maskaq pantaykuna .
Internet Explorer 8 chaymanta 9 yanapasqallataq kanku, chaywanpas, ama hina kaspa yachay wakin CSS3 propiedades chaymanta HTML5 elementokuna mana hunt'asqa yanapasqachu kay maskaqkunawan. Chaymanta, Internet Explorer 8 Respond.js llamk'ayta munan willaykunata tapuy yanapakuy atichinanpaq.
Imayna kanan | Internet nisqapi maskaq 8 | Internet nisqapi maskaq 9 |
---|---|---|
border-radius |
Mana yanapasqachu | Yanapasqa |
box-shadow |
Mana yanapasqachu | Yanapasqa |
transform |
Mana yanapasqachu | Yanapasqa, -ms ñawpaq simiyuq |
transition |
Mana yanapasqachu | |
placeholder |
Mana yanapasqachu |
Watukuy ¿Utilizaymanchu... CSS3 chaymanta HTML5 ruwanakuna maskaq yanapakuymanta sut'inchaykunapaq.
Cuidakuy kay qatiq advertenciakunamanta mayk'aq Respond.js llamk'achkanki wiñachiyniykipi chaymanta ruwana pachakunapi Internet Explorer 8 kaqpaq.
Respond.js llamk'achiyta CSS kaqwan huk (huch'uy)dominio kaqpi qusqa (kayhina, huk CDN kaqpi) wakin yapasqa churayta munan. Rikuy Respond.js qillqakunata aswan sut'inchaykunapaq.
file://
Navegador harkasqa kamachiykunarayku, Respond.js mana llamkanchu file://
protocolo kaqninta qhawasqa p'anqakunawan (imayna huk llaqta HTML willayta kichaspa). IE8 kaqpi kutichiy ruwanakuna pruebapaq, p'anqaykikuna HTTP(S) kaqpi qhaway. Rikuy Respond.js qillqakunata aswan sut'inchaykunapaq.
@import
Respond.js mana llamkanchu CSS kaqwan chaymanta referenciasqa via @import
. Aswanta, wakin Drupal ruwanakuna riqsisqa kanku llamk'achiyta @import
. Rikuy Respond.js qillqakunata aswan sut'inchaykunapaq.
IE8 mana hunt'asqata yanapanchu box-sizing: border-box;
, min-width
, max-width
, min-height
utaq max-height
. Chayrayku, v3.0.1 kaqmanta, manaña s max-width
kaqpi llamk'achiykuchu..container
IE8 wakin sasachakuykunata kan @font-face
mayk'aq hukllachasqa kaqwan :before
. Bootstrap chay tinkiyta Glyphiconsninwan llamk'achin. Sichus huk p'anqa waqaychasqa kachkan, chaymanta mana silluwan ventanata patapi kargasqa (ichataq musuqyachiy ñit'inata ñit'iy icha iframe kaqpi imatapas kargay) chaymanta p'anqa manaraq qillqap kargakuchkaptin ruwasqa. P'anqa patapi (kurku) kuyurichiyqa wakin iconokuna rikuchinqa chaymanta puchuq iconokuna patapi kuyuchispa chaykunatapas rikuchinqa. Qaway #13863 yupayta astawan yachanaykipaq.
Bootstrap mana yanapasqachu ñawpaq Internet Explorer tupachiy ruwanakunapi. IE kaqpaq qhipa ruway ñanta llamk'achkanki chiqamanta kanaykipaq, <meta>
p'anqaykikunapi tupaq etiqueta churayta yuyaykuy:
Qillqap ruwayninta takyachiy pantasqa allichay yanapakuykunata kichaspa: ñit'iy F12chaymanta qhaway "Qillqap ruwaynin".
Kay etiqueta llapa Bootstrap qillqakunapi chaymanta ejemplokunapi churasqa kachkan aswan allin ruwayta atikun sapa yanapasqa Internet Explorer kaqpi.
Aswan willakuypaq kay StackOverflow tapuyta qhaway.
Internet Explorer 10 mana dispositivo anchota qhaway punku anchomanta t'aqakunchu , chaymanta chayhina mana allintachu Bootstrap kaqpa CSS kaqpi willay tapuykunata ruwan. Normalmente kayta allichanaykipaq huk utqaylla CSS t'aqallata yapawaq:
Ichaqa, kay mana llamkanchu dispositivokuna Windows Phone 8 layakuna aswan ñawpaq Update 3 kaqmanta (aka GDR3) purichiqkuna , imaynachus chayhina dispositivokuna aswan mesa qhawayta rikuchiyta ruwan k'iti "telefono" qhawaymanta ranti. Kayta allichanaykipaq, kay qatiq CSS chaymanta JavaScript churanayki tiyan pantaymanta llamk'anaykipaq .
Aswan willakuypaq chaymanta llamkana kamachiykunapaq, ñawiriy Windows Phone 8 chaymanta Dispositivo-Ancho .
Huk umakuna hina, kayta llapa Bootstrap qillqakunapi chaymanta ejemplokunapi huk rikuchiy hina churayku.
Safari kaqpa ruwanakuna motornin ñawpaq v7.1 kaqmanta OS X kaqpaq chaymanta Safari iOS v8.0 kaqpaq wakin sasachakuyniyuq karqan yupay decimal kitikuna llamk'achisqa .col-*-1
rejilla claseykupi. Chaymi sichus 12 sapalla rejilla columnakunayuq kanki, reparawaqmi huk fila columnakunawan tupachisqa pisilla hamusqankuta. Safari/iOS yapaymanta hawa, wakin akllanakuna llamkanakuna ruwanapaq kanki:
.pull-right
Qhipa kaq llika columnaykiman yapay sinchi-alliq chiqanchayta tarinaykipaqYanapakuypaq elemento kaqpi allin limitasqa iOS kaqpi chaymanta Android kaqpi overflow: hidden
. <body>
Chaypaq, mayk'aq huk modal patamanta utaq uraymanta mayqin chay dispositivokunap navegadorninpipas kuyuchinki, <body>
contenido kuyuchiyta qallarinqa. Qaway Chrome pantay #175502 (Chrome v40 kaqpi allichasqa) chaymanta WebKit pantay #153852 .
<input>
iOS 9.3 kaqmanta, huk modal kichasqa kachkaptin, sichus huk rollo gesto qallariy llamiy huk textual utaq huk kaqpa linderon ukhupi kachkan <textarea>
, <body>
modal urapi contenidoqa kikin modalpa rantinpi kuyuchisqa kanqa. WebKit pantay #153856 nisqapi qhaway .
Hinallataq, reparay sichus huk takyasqa navbar llamk'achkanki utaq huk modal ukhupi yaykuykunata llamk'achkanki, iOS huk ruway pantayniyuq kachkan chaymanta mana takyasqa elementokunap posiciónninta musuqchanchu mayk'aq teclado virtual llamk'achisqa. Huk pisi llamkanakuna kaypaq elementokunayki tikray position: absolute
utaq huk pacha yupayta enfoque kaqpi waqyay makiwan churayta allichayta munaspa. Kayqa mana Bootstrap kaqwan ruwasqachu, chayrayku qammanta kanqa mayqin allichay aswan allin ruwanaykipaq tanteanaykipaq.
Chay .dropdown-backdrop
elementoqa mana iOS kaqpi nav kaqpi llamk'achkanchu z-indexing kaqpa complejidadninrayku. Chayhina, navbars kaqpi urayk'aqkuna wichq'anapaq, chiqalla urayk'aq elementota ñit'inayki tiyan (utaq mayqin wak elemento kaqtapas mayqinchus iOS kaqpi huk ñit'iy ruwayta rawrachinqa ).
P'anqa hatunyachiy mana hark'asqa ruway artefactokunata wakin componentes kaqpi rikuchin, iskaynin Bootstrap kaqpi chaymanta wakin web kaqpi. Chay sasachakuyman hinaqa, ichapas allichayta atichwan (ñawpaqta maskay, chaymanta huk sasachakuyta kichay necesario kaqtin). Ichaqa, kaykunata mana qhawayta munayku imaynachus sapa kuti mana chiqa solucionniyuqchu kanku wak hacky allichaykunamanta.
:hover
/ :focus
en móvilChiqap hovering mana aswan pantallakuna llachpanakunapi atikunchu chaypas, aswan kuyuchina maskaqkuna hovering yanapakuyta qatipanku chaymanta :hover
"k'aspi" ruwanku. Huk rimaypi, :hover
estilokuna huk elementota ñit'iymanta qhipaman churayta qallarinku chaymanta llamk'achiq wak elementota ñit'isqan qhipamanlla churayta saqinku. Kayqa Bootstrap :hover
estadokuna mana munasqa "k'askasqa" kayhina maskaqkunapi ruwayta atin. Wakin movil navegadores kaqkunapas :focus
chayhinata k’aspiyuqta ruwanku. Kunanqa mana kay sasachakuykunapaq sasallawan allichay kanchu wak chayhina estilokunata tukuyninpi hurquymanta.
Kunan tiempopi wakin navegadorkunapipas imprimiyqa quirky kanman.
Aswanta, Chrome v32 kaqmanta chaymanta mana margen churanakuna mana qhawaspa, Chrome huk qhaway punku anchota ancha aswan k'itita llamk'achin kay físico papel sayaymanta mayk'aq huk web kitita imprimichkaspa medios tapuykunata allichan. Kayqa Bootstrap kaqpa yapa-huch'uy rejillanta mana suyasqa llamk'achiyta atinman imprimiypi. Qaway #12078 kaqmanta chaymanta Chrome pantay #273306 wakin willakuypaq. Yuyaychasqa llamkanakuna:
@screen-*
chaymanta impresora papelniyki aswan hatun kaqta qhawasqa kanqa yapa-huch'uy kaqmanta.Hinallataq, Safari v8.0 kaqmanta, takyasqa-ancho .container
s Safari huk mana costumbre kaq huch'uy letra sayayninta llamk'achiyta atin imprimiypi. Aswan sut'inchaykunapaq #14868 chaymanta WebKit pantay #138192 qhaway. Huk llamkana atikuq kaypaq kay CSS yapaymi:
Qutumanta hawa, Android 4.1 (hinallataq wakin musuq lluqsiykuna rikukuq hina) apachinku Navegador ruwanawan akllasqa web maskaq ñawpaqmanta hina (Chrome kaqmanta). Llakikuypaq, Navegador ruwana achka pantaykunayuq chaymanta mana tupaq CSS kaqwan tukuypaq.
Elementokunapi, Android <select>
stock maskaq mana lado kamachiykunata rikuchinqachu sichus huk border-radius
chaymanta/utaq border
churasqa. (Qhaway kay StackOverflow tapuyta sut'inchaykunapaq.) Uraypi codigomanta fragmentota llamk'achiy k'amiq CSSta hurqunaykipaq chaymanta ruwayta kay <select>
mana estiloyuq elemento hina Android stock maskaqpi. Ruwaq agente asnaynin Chrome, Safari chaymanta Mozilla maskaqkunawan hark'ayta harkan.
¿Huk ejemplota qhawayta munankichu? Kay JS Bin demostracionta qhaway.
Aswan allin experienciata ñawpaq chaymanta pantasqa maskaqkunaman qunapaq, Bootstrap CSS maskaq hacks achka kitikunapi llamk'achin especial CSS wakin maskaq layakunaman maskanapaq kikin maskaqkunapi pantaykunata llamk'ananpaq. Kay hacks entiendenapaq hina CSS validadorkuna mana allin kasqankumanta quejakunankupaq ruwanku. Huk iskay kitikunapi, yawar-kantu CSS ruwanakunata llamk'achiykutaq manaraq hunt'asqa estandarizadachu, ichaqa kaykunaqa puramente ñawpaqman allinchaypaq llamk'achisqa kanku.
Kay chiqaqchay willakuykunaqa mana ruwaypi imapaqpaschu kanku chaymanta mana hacky kaq parte CSSniykumanta hunt'asqata chiqaqchanku chaymanta hacky rakikuna mana mana hacky kaqpa allin llamk'ayninta hark'ankuchu, chaymanta imarayku kay particular willaykunata deliberadamente mana qhawaykuchu.
HTML qillqaykupas wakin mana imapaq valeq chaymanta mana imapaqpas HTML chiqaqchay willakuyniyuq kanku huk Firefox pantaypaq huk allichay churasqaykurayku .
Sichus mana oficialmente yanapaykuchu mayqin kimsa kaq plugins utaq yapasqakuna, wakin allin yuyaychaykunata quyku yanapakuypaq mana proyectokunaykipi atikuq sasachakuykunamanta.
Wakin kimsa kaq software, Google Maps chaymanta Google Sapanchasqa Maskana Motor kaqwan, Bootstrap kaqwan ch'aqwankurayku * { box-sizing: border-box; }
, huk kamachiy mayqinchus chayta padding
ruwan mana huk elemento qhipa yupasqa anchunta afectanchu. Aswan yachay caja modelomanta chaymanta sayachiymanta CSS Tricks kaqpi .
Contexto kaqmanhina, necesitasqaykimanhina llalliyta atikunki (1 kaq akllana) utaq llapa suyukunapaq caja-tamaño kaqmanta churayta atikunki (2 kaq akllana).
Bootstrap común web kamachiykunata qatin chaymanta —aslla yapasqa kallpachakuywan— llamk'achiy atikunman sitiokuna ruwanapaq mayqinkunachus AT llamk'achiqkuna yaykuy atikunku .
Sichus puriyniyki achka t'inkikunayuq chaymanta DOM kaqpi hatun willaypa ñawpaqninpi hamun, huk Skip to main content
t'inkiyta yapay ñawpaq puriymanta (huk sanu sut'inchaypaq, kay A11Y Proyecto qillqata qhaway puriy t'inkikuna saltay kaqmanta ). Clase llamk'achiyta .sr-only
qhawaypi pakanqa salta t'inkita, chaymanta .sr-only-focusable
clase t'inki rikukuq kananpaq huk kuti enfocadu kaqpi (rikuq teclado llamk'aqkunapaq).
Chrome kaqpi unaymanta pantaykuna/pantasqakunarayku (qhaway 262171 yupayta Chromium pantay qatiqpi ) chaymanta Internet Explorer kaqpi (kay qillqata qhaway p'anqa ukhupi t'inkikuna chaymanta enfoque orden kaqpi ), qam ruwanayki tiyan chaymanta chay saltay t'inkiykipa meta kaqnin es al menos programaticamente enfocables yapaspa tabindex="-1"
.
Chaymanta, huk rikukuq enfoque rikuchiyta chay meta kaqpi sut'imanta ñit'iyta munanki (aswanta imaynachus Chrome kunan pachataq elementokunapi enfoqueta churan tabindex="-1"
mayk'aqchus silluwan ñit'isqa kanku) kaqwan #content:focus { outline: none; }
.
Reparay kay pantay ima wak p'anqa ukhupi t'inkikunatapas sitioyki llamk'achkanman chayta afectanqa, mana imapaqpas teclado ruwaqkunapaq ruwan. Huk rikch'aq stop-gap allichayta yapayta yuyaykunkiman llapa wak sutichasqa anclakunaman / fragmento riqsichiqkunaman mayqinkunachus t'inki metakuna hina ruwanku.
Umakunata ( <h1>
- <h6>
) k'itichaspaqa, ñawpaq qillqa umalliqniykiqa huk <h1>
. Qhipa umalliqkuna llamk'achinanku tiyan lógico kaqwan <h2>
- <h6>
chayhina pantalla ñawiriqkuna huk tabla de contenido ruwayta atinku p'anqaykikunapaq.
Aswan yachay HTML CodeSniffer kaqpi chaymanta Penn State kaqpa AccessAbility kaqpi .
Kunan, wakin ñawpaqmanta llimp'i tinkiykuna Bootstrap kaqpi tarikun (kayhina imaymana estiloyuq ñit'ina clasekuna, wakin codigo resaltaq llimp'ikuna llamk'achisqa sapsi codigo bloquekunapaq , .bg-primary
contextual qhipa yanapakuq clase, chaymanta ñawpaqmanta t'inki llimp'i yuraq qhipa kaqpi llamk'achisqa kaqtin) pisi contraste ratioyuq kanku ( 4,5:1 ratio yuyaychasqamanta uraypi ). Kayqa sasachakuykunata ruwanman pisi rikuyniyuq utaq color ñawsa kaqkunaman. Kay ñawpaqmanta churasqa llimp’ikunataqa tikrana kanman, chimpapurayninta, ñawiriy atiyninta ima yapananpaq.
Bootstrap nisqaqa MIT nisqap licencianwanmi lluqsimun, chaymantataqmi 2016 Twitter nisqap hayñinmi. Aswan huch’uy t’aqakunaman timpuchisqa, kay condicionkunawanmi willakunman.
Huk hunt'asqa Bootstrap licencia proyecto waqaychasqapi tarikun aswan willakuypaq.
Ayllu runakuna Bootstrap qillqakunata imaymana simikunaman tikrarqanku. Mana mayqinpas oficialmente yanapasqachu kanku chaymanta mana sapa kutichu kunan pachapaq kanku.
Mana yanapaykuchu t'ikraykunata wakichiypi utaq quypi, chaykunaman t'inkiykullayku.
¿Musuq icha aswan allin tikrayta tukunkichu? Huk aysana mañakuyta kichay listaykuman yapanaykipaq.