Amataina
O se aotelega o Bootstrap, auala e sii mai ai ma faʻaoga, faʻataʻitaʻiga ma faʻataʻitaʻiga, ma isi mea.
O se aotelega o Bootstrap, auala e sii mai ai ma faʻaoga, faʻataʻitaʻiga ma faʻataʻitaʻiga, ma isi mea.
O le Bootstrap (v3.3.7 i le taimi nei) e iai ni nai auala faigofie e vave amata ai, o mea taʻitasi e fiafia i se tulaga eseʻese tomai ma faʻaoga tulaga. Faitau e va'ai po'o le a le mea e fetaui ma ou mana'oga fa'apitoa.
Fa'aopoopoina ma fa'aitiitia le CSS, JavaScript, ma fonuka. Leai ni fa'amaumauga po'o faila fa'apogai o lo'o aofia ai.
Source Less, JavaScript, ma faila faila, faʻatasi ai ma a matou pepa. E manaʻomia se faʻapipiʻi Itiiti ma nisi seti.
O le Bootstrap o loʻo faʻapipiʻiina mai le Itiiti i le Sass mo le faigofie ona faʻaofi i Rails, Compass, poʻo Sass-naʻo poloketi.
O tagata i luga o le jsDelivr o loʻo tuʻuina atu ma le agalelei le CDN lagolago mo Bootstrap's CSS ma JavaScript. Fa'aaoga nei sootaga Bootstrap CDN .
E mafai foi ona e faʻapipiʻi ma pulea Bootstrap's Less, CSS, JavaScript, ma fonuka e faʻaaoga ai le Bower :
E mafai foi ona e faʻapipiʻi Bootstrap faʻaaoga npm :
require('bootstrap')
o le a la'u uma ia Bootstrap's jQuery plugins i luga o le mea jQuery. O le bootstrap
module lava ia e le auina atu i fafo se mea. E mafai ona e utaina ma le lima ia Bootstrap's jQuery plugins ta'ito'atasi e ala i le utaina o /js/*.js
faila i lalo o le lisi pito i luga o le afifi.
Bootstrap o package.json
loʻo i ai nisi metadata faaopoopo i lalo o ki nei:
less
- ala ile Bootstrap's main Less source filestyle
- auala i le CSS e le faʻaititia a Bootstrap lea na faʻapipiʻiina muamua e faʻaaoga ai le faʻaogaina o tulaga (leai se faʻapitoa)E mafai foi ona e faʻapipiʻi ma pulea Bootstrap's Less, CSS, JavaScript, ma fonuka e faʻaaoga ai le Composer :
E fa'aaoga e Bootstrap le Autoprefixer e fa'atautaia ai fa'atauga fa'atau CSS . Afai o loʻo e tuʻufaʻatasia le Bootstrap mai lona Less/Sass puna ae e te le faʻaaogaina le matou Gruntfile, e tatau ona e tuʻufaʻatasia le Autoprefixer i lau faʻagasologa o le fausiaina oe lava. Afai o loʻo e faʻaaogaina le Bootstrap muamua poʻo le faʻaaogaina o la matou Gruntfile, e te le manaʻomia le popole i lenei mea aua o le Autoprefixer ua uma ona tuʻufaʻatasia i la matou Gruntfile.
Bootstrap e mafai ona sii mai i ni faiga se lua, i totonu e te maua ai lisi ma faila o loʻo i lalo, faʻavasega lelei punaoa masani ma tuʻuina atu faʻatasi ma faʻaititia suiga.
Faamolemole ia matau o mea uma JavaScript e manaomia le jQuery e aofia ai, e pei ona faaalia i le mamanu amata . Fa'afeso'ota'i matoubower.json
e va'ai po'o fea fa'aliliuga o le jQuery e lagolagoina.
A maeʻa ona sii mai, tatala le faila faʻapipiʻi e vaʻai i le fausaga o (le tuufaatasia) Bootstrap. O le ae vaai i se mea e pei o lenei:
Ole faiga sili lea ole Bootstrap: faila fa'apipi'i muamua mo le fa'aogaina vave i totonu o le toetoe lava o so'o se poloketi i luga ole laiga. Matou te tuʻuina atu CSS tuʻufaʻatasia ma JS ( bootstrap.*
), faʻapea foʻi ma CSS tuʻufaʻatasia ma faʻaititia ma JS ( bootstrap.min.*
). CSS puna fa'afanua ( bootstrap.*.map
) o lo'o avanoa mo le fa'aoga i nisi mea faigaluega a le au su'esu'e. Fonts mai Glyphicons o loʻo aofia ai, faʻapea foʻi ma le autu Bootstrap filifiliga.
O le download code source Bootstrap e aofia ai le CSS, JavaScript, ma le font assets, faatasi ai ma le puna Less, JavaScript, ma faʻamaumauga. Aemaise lava, e aofia ai mea nei ma sili atu:
O le less/
, js/
, ma fonts/
o le fa'ailoga fa'apogai mo la tatou CSS, JS, ma fa'ailoga fa'ailoga (fa'atatau). O le dist/
pusa e aofia ai mea uma o loʻo lisiina i le vaega o loʻo faʻapipiʻiina muamua i luga. O le docs/
pusa e aofia ai le faʻailoga autu mo a matou faʻamaumauga, ma examples/
le faʻaaogaina o Bootstrap. I tua atu o lena, soʻo se isi faila e aofia ai e tuʻuina atu le lagolago mo afifi, faʻamatalaga laisene, ma atinaʻe.
Fa'aaoga e Bootstrap le Grunt mo lona faiga fau, fa'atasi ai ma auala faigofie mo le galue ai ma le fa'avae. O le auala tatou te tuufaatasia ai a tatou code, faʻataʻitaʻi suʻega, ma isi mea.
Ina ia faʻapipiʻi Grunt, e tatau ona e sii muamua ma faʻapipiʻi le node.js (lea e aofia ai le npm). npm o loʻo faʻatusalia mo node faʻapipiʻi modules ma o se auala e pulea ai faʻalagolago i atinaʻe e ala i le node.js.
Ona, mai le laina o le poloaiga:grunt-cli
i le lalolagi atoa ma npm install -g grunt-cli
./bootstrap/
directory, ona tamoe lea npm install
. npm o le a tilotilo i le package.json
faila ma faʻapipiʻi faʻapipiʻi faʻalagolago i le lotoifale o loʻo lisiina iina.A maeʻa, o le a mafai ona e faʻatautaia le tele o Grunt poloaiga na tuʻuina mai le laina o le poloaiga.
grunt dist
(Na'o le tuufaatasia o le CSS ma le JavaScript)Toe fa'afouina le /dist/
fa'atonuga ma fa'aputuina ma fa'aitiitiga faila CSS ma JavaScript. I le avea ai o se tagata faʻaoga Bootstrap, e masani lava o le poloaiga e te manaʻo ai.
grunt watch
(matamata)Matamata i le Less source files ma otometi ona toe tuufaatasia i le CSS i soo se taimi e te teuina ai se suiga.
grunt test
(Ta'e su'ega)Fa'agasolo le JSHint ma fa'agasolo su'ega QUnit i le PhantomJS .
grunt docs
(Fausia & fa'ata'ita'i aseta docs)Fausia ma fa'ata'ita'i le CSS, JavaScript, ma isi aseta o lo'o fa'aogaina pe a fa'agasolo fa'amaumauga i le lotoifale e ala ile bundle exec jekyll serve
.
grunt
(Fausia atoatoa mea uma ma fai suʻega)Tu'ufa'atasi ma fa'aititia le CSS ma le JavaScript, fausia le upega tafa'ilagi o fa'amaumauga, fa'atautaia le HTML5 validator e fa'asaga i fa'amaumauga, toe fa'afouina aseta Customizer, ma isi mea. Manaomia Jekyll . E masani lava na'o le mana'omia pe afai o lo'o e su'eina le Bootstrap lava ia.
Afai e te feagai ma faʻafitauli i le faʻapipiʻiina o faʻalagolago poʻo le faʻaogaina o Grunt commands, muamua tape le /node_modules/
lisi na faia e npm. Ona toe fai lea npm install
.
Amata i lenei faʻataʻitaʻiga HTML faavae, pe suia nei faʻataʻitaʻiga . Matou te fa'amoemoe o le a e fa'avasegaina a matou fa'ata'ita'iga ma fa'ata'ita'iga, fa'afetaui i latou e fetaui ma ou mana'oga.
Kopi le HTML o loʻo i lalo e amata galue ai ma se pepa Bootstrap laʻititi.
Fausia i luga o le mamanu autu o loʻo i luga ma le tele o vaega a Bootstrap. Matou te fa'amalosia oe e fa'avasega ma fa'afetaui le Bootstrap ina ia fetaui ma mana'oga o lau lava poloketi.
Maua le code source mo faʻataʻitaʻiga uma o loʻo i lalo e ala i le siiina mai o le faleoloa Bootstrap . E mafai ona maua faʻataʻitaʻiga i le docs/examples/
lisi.
E leai se mea ae o mea faʻavae: faʻapipiʻi CSS ma JavaScript faʻatasi ma se atigipusa.
Le tele o faʻataʻitaʻiga o faʻasologa o faʻasologa faʻatasi ma vaega uma e fa, ofaga, ma isi mea.
Fa'ata'ita'iga fa'akomepiuta faigofie e lua-koluma fa'atasi ai ma aga masani, ulutala, ma le ituaiga.
Fuafuaga fa'avae mo se admin dashboard fa'atasi ma fa'amaufa'ailoga pito i luma ma le navbar.
Fausia se navbar masani ma so'oga fa'amaonia. Ulu i luga! E le faauo tele Safari.
Bootlint o le meafaigaluega faʻapipiʻi HTML Bootstrap aloaia. E otometi lava ona siaki le tele o mea sese HTML masani i itulau web o loʻo faʻaogaina le Bootstrap i se auala "vanila". Vanilla Bootstrap's parts/widgets e mana'omia a latou vaega o le DOM e fa'afetaui i nisi fausaga. E siaki e Bootlint o fa'ata'ita'iga o vaega Bootstrap e sa'o le fa'atulagaina o HTML. Mafaufau e fa'aopoopo le Bootlint i lau Bootstrap web development toolchain ina ia leai se mea sese masani e fa'agesegese ai le atina'eina o lau poloketi.
Tumau i le taimi nei i le atinaʻeina o Bootstrap ma aapa atu i le alalafaga ma nei punaoa fesoasoani.
irc.freenode.net
'auʻaunaga, i le ##bootstrap channel .twitter-bootstrap-3
.bootstrap
i luga o afifi e suia pe faʻaopoopo i le faʻatinoga o Bootstrap pe a tufatufa atu ile npm poʻo auala faʻapipiʻi tutusa mo le maualuga o le mauaina.E mafai fo'i ona e mulimuli i le @getbootstrap i luga ole Twitter mo tala faitatala fou ma ata mata'utia musika.
E otometi lava ona fetuutuunai e Bootstrap au itulau mo le tele o lau lau. O le auala lenei e faʻamalo ai lenei vaega ina ia galue lau itulau e pei o lenei faʻataʻitaʻiga e le tali mai .
<meta>
lo'o ta'ua i le CSS docswidth
luga .container
mo fa'asologa fa'asologa ta'itasi ma le lautele e tasi, mo se fa'ata'ita'iga width: 970px !important;
Ia mautinoa e sau lenei mea pe a uma le Bootstrap CSS fa'aletonu. E mafai ona e filifili e aloese mai ai !important
i fesili a le aufaasālalau poʻo nisi tagata filifilia-fu..col-xs-*
vasega fa'aopoopo i, po'o le suitulaga o, vasega feololo/tele. Aua e te popole, o le fa'aopoopo-tama'i masini grid fua i iugafono uma.E te mana'omia pea le Respond.js mo le IE8 (talu ai o lo'o iai pea a matou fa'asalalauga ma e mana'omia ona fa'agasolo). Ole mea lea e fa'agata ai vaega ole "mobile site" o Bootstrap.
Ua matou fa'aogaina laasaga nei i se fa'ata'ita'iga. Faitau lana source code e va'ai i suiga fa'apitoa ua fa'atinoina.
O lo'o va'ava'ai e fa'asolo mai se lomiga tuai o Bootstrap i le v3.x? Siaki le matou taiala femalagaiga .
Ua fausia le Bootstrap ina ia sili ona aoga i luga o le komepiuta fou ma su'esu'ega feavea'i, o lona uiga e mafai e tagata su'esu'e matutua ona fa'aalia siili eseese, e ui ina atoatoa, fa'aliliuga o nisi vaega.
Aemaise lava, matou te lagolagoina lomiga fou o su'esu'ega ma fa'avae nei.
O isi su'esu'ega o lo'o fa'aogaina le WebKit, Blink, po'o Gecko, pe tu'u sa'o po'o ala i luga ole laiga ole upegatafa'ilagi API, e le o lagolagoina manino. Ae ui i lea, Bootstrap e tatau (i le tele o tulaga) faʻaalia ma galue saʻo i nei suʻesuʻega. O fa'amatalaga lagolago fa'apitoa o lo'o tu'uina atu i lalo.
I le tulaga masani, e lagolagoina e Bootstrap lomiga fou o su'esu'ega fa'aletonu ta'itasi. Manatua o su'esu'ega sui (pei o le Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) e le lagolagoina.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Lagolagoina | Lagolagoina | N/A |
iOS | Lagolagoina | Lagolagoina | Lagolagoina |
E fa'apena fo'i, o lo'o lagolagoina fo'i fa'amatalaga lata mai o le tele o su'esu'ega o le desktop.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Lagolagoina | Lagolagoina | N/A | Lagolagoina | Lagolagoina |
Pupuni | Lagolagoina | Lagolagoina | Lagolagoina | Lagolagoina | Le lagolagoina |
I luga o Windows, matou te lagolagoina Internet Explorer 8-11 .
Mo Firefox, fa'aopoopo i le fa'asalalauga fa'amaumau masani, matou te lagolagoina fo'i le fa'amatalaga lata mai o le Extended Support Release (ESR) a Firefox.
E le aloaia, Bootstrap e tatau ona foliga lelei ma amio lelei i Chromium ma Chrome mo Linux, Firefox mo Linux, ma Internet Explorer 7, faʻapea foʻi ma Microsoft Edge, e ui lava e leʻo lagolagoina aloaia.
Mo se lisi o nisi o masini suʻesuʻe e tatau ona tauivi ma Bootstrap, vaʻai i le matou Wall of browser bugs .
E lagolagoina foi le Internet Explorer 8 ma le 9, peita'i, faamolemole ia nofouta o nisi o meatotino CSS3 ma elemene HTML5 e le o lagolagoina atoatoa e nei tagata su'esu'e. E le gata i lea, o le Internet Explorer 8 e mana'omia le fa'aogaina o le Respond.js e fa'aagaaga ai le lagolago a le aufaasālalau.
Fa'aaliga | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Le lagolagoina | Lagolagoina |
box-shadow |
Le lagolagoina | Lagolagoina |
transform |
Le lagolagoina | Lagolago, faatasi ai ma -ms prefix |
transition |
Le lagolagoina | |
placeholder |
Le lagolagoina |
Asiasi E mafai ona ou fa'aoga... mo fa'amatalaga ile lagolago ole su'esu'e ole CSS3 ma HTML5.
Fa'aeteete i fa'atonuga nei pe a fa'aogaina le Respond.js i lau atina'e ma le gaosiga o siosiomaga mo Internet Explorer 8.
O le fa'aogaina o le Respond.js ma le CSS o lo'o fa'afeiloa'i i se isi (sub) domain (fa'ata'ita'iga, i luga o le CDN) e mana'omia ai se fa'aopoopo fa'aopoopo. Va'ai le Respond.js docs mo fa'amatalaga.
file://
Ona o tulafono o le saogalemu o su'esu'ega, e le galue le Respond.js i itulau o lo'o va'aia e ala i le file://
protocol (pei o le tatalaina o se faila HTML i le lotoifale). Ina ia faʻataʻitaʻiina foliga tali i le IE8, vaʻai au itulau ile HTTP(S). Va'ai le Respond.js docs mo fa'amatalaga.
@import
Respond.js e le galue i le CSS lea e fa'asino ile @import
. Aemaise lava, o nisi o faʻasalalauga Drupal ua iloa e faʻaaoga @import
. Va'ai le Respond.js docs mo fa'amatalaga.
E le lagolagoina atoatoa e le IE8 box-sizing: border-box;
pe a tu'ufa'atasia ma min-width
, max-width
, min-height
, po'o max-height
. Mo lena mafuaaga, e pei o le v3.0.1, matou te le toe faʻaogaina max-width
i luga o .container
le s.
IE8 ei ai ni faʻafitauli @font-face
pe a tuʻufaʻatasia ma :before
. E faʻaaogaina e Bootstrap lena tuʻufaʻatasiga ma ana Glyphicons. Afai e teu se itulau, ma uta e aunoa ma le isumu i luga o le faamalama (e pei o le kiliki i le faʻamau faʻamau poʻo le utaina o se mea i totonu o se iframe) ona faʻaalia lea o le itulau aʻo leʻi utaina le vai papatisoga. O le fa'afefe i luga o le itulau (tino) o le a fa'aalia ai nisi o ata ma fa'afefe i luga o ata o lo'o totoe o le a fa'aalia ai fo'i. Va'ai le lomiga #13863 mo fa'amatalaga.
E le lagolagoina le Bootstrap i faiga tuai o feso'ota'iga Internet Explorer. Ina ia mautinoa o loʻo e faʻaogaina le faiga faʻaliliuga lata mai mo le IE, mafaufau e aofia ai le <meta>
pine talafeagai i au itulau:
Faʻamaonia le faiga o pepa e ala i le tatalaina o meafaigaluega faʻapipiʻi: lolomi F12ma siaki le "Document Mode".
O lenei pine o loʻo aofia i totonu o faʻamaumauga uma a Bootstrap ma faʻataʻitaʻiga e faʻamautinoa ai le sili ona lelei faʻaaliga e mafai i taʻitasi lagolago o Internet Explorer.
Va'ai lenei fesili StackOverflow mo nisi fa'amatalaga.
Internet Explorer 10 e le fa'avasegaina le lautele o le masini mai le lautele o le va'aiga , ma o lea e le fa'aogaina lelei ai fesili fa'asalalau i le Bootstrap's CSS. E masani lava e na'o le fa'aopoopoina o se snippet vave o le CSS e fa'aleleia ai lenei mea:
Ae ui i lea, e le aoga lenei mea mo masini o loʻo faʻaogaina Windows Phone 8 versions e sili atu nai lo le Update 3 (aka GDR3) , aua e mafua ai ona faʻaalia e ia masini le tele o le vaaiga i luga o le komepiuta nai lo le vaapiapi "telefoni" vaʻai. Ina ia fa'atalanoaina lenei mea, e mana'omia lou fa'aofiina o le CSS ma le JavaScript lea e fa'atino ai le pusa .
Mo nisi fa'amatalaga ma ta'iala fa'aoga, faitau le Windows Phone 8 ma le Device-Width .
I le avea ai ma ulu i luga, matou te faʻaofiina lenei mea i faʻamaumauga uma a Bootstrap ma faʻataʻitaʻiga o se faʻataʻitaʻiga.
O le fa'aliliuga afi o fa'aliliuga o Safari a'o le'i o'o i le v7.1 mo le OS X ma le Safari mo le iOS v8.0 sa i ai fa'afitauli i le numera o nofoaga tesimale o lo'o fa'aogaina i a tatou .col-*-1
vasega fa'asologa. Afai la e 12 au koluma fa'asologa ta'itasi, e te maitauina na fa'apuupuu pe a fa'atusatusa i isi laina o koluma. E ese mai i le faʻaleleia o Safari/iOS, e iai ni au filifiliga mo faʻafitauli:
.pull-right
i lau koluma fa'asologa mulimuli e maua ai le fa'aoga sa'o faigataLagolago mo overflow: hidden
luga ole <body>
elemene e faʻatapulaʻaina ile iOS ma le Android. I lena tulaga, pe a e taʻavale i tua i luga poʻo le pito i lalo o se auala i soʻo se tasi o na masini suʻesuʻe, o le <body>
a amata ona taʻavale le anotusi. Va'ai Chrome bug #175502 (fa'amau i Chrome v40) ma WebKit bug #153852 .
E pei o le iOS 9.3, a'o tatala se auala, pe afai o le paʻi muamua o se tusi taʻavale o loʻo i totonu o le tuaoi o se tusitusiga <input>
poʻo se <textarea>
, o <body>
mea o loʻo i lalo o le modal o le a taʻavale nai lo le auala lava ia. Va'ai WebKit bug #153856 .
E le gata i lea, ia maitauina afai o loʻo e faʻaogaina se navbar faʻamautu poʻo le faʻaogaina o mea e faʻaoga i totonu o se modal, o loʻo i ai i le iOS se pusa faʻaliliuga e le faʻafouina ai le tulaga o elemene faʻapipiʻi pe a faʻaosoina le keyboard virtual. O nai fofo mo lenei mea e aofia ai le suia o au elemene i position: absolute
poʻo le faʻaogaina o se taimi e taulaʻi e taumafai e faʻasaʻo le faʻatulagaina ma le lima. E le o taulimaina e Bootstrap lenei mea, o lea e pule ai oe pe o le fea fofo e sili ona lelei mo lau talosaga.
E .dropdown-backdrop
le fa'aogaina le elemene ile iOS ile nav ona o le lavelave ole z-indexing. O lea la, ina ia tapunia pa'ū i lalo navbars, e tatau ona e kiliki saʻo le pa'ū elemene elemene (poʻo soʻo se isi elemene e faʻapupulaina ai se kiliki mea na tupu i iOS ).
O le fa'aliga o itulau e mautinoa lava e fa'aalia ai le tu'uina atu o mea taulima i nisi vaega, i totonu o Bootstrap ma isi vaega o le upega tafa'ilagi. Faʻalagolago i le mataupu, atonu e mafai ona matou faʻaleleia (saili muamua ona tatala lea o se mataupu pe a manaʻomia). Ae ui i lea, e masani ona tatou le amanaiaina nei mea ona e masani ona leai ni fofo tuusaʻo e ese mai i le hacky workarounds.
:hover
/ :focus
luga ole telefoni feaveaiE ui lava e le mafai ona faʻafefeteina i luga o le tele o laupepa paʻi, o le tele o suʻesuʻega feaveaʻi e faʻataʻitaʻiina le lagolago faʻafefe ma fai :hover
"pipii". I se isi faaupuga, :hover
o sitaili e amata ona faʻaoga pe a uma ona taina se elemene ma naʻo le tuʻuina o le faʻaogaina pe a uma le tagata faʻaoga o le isi elemene. O lenei mea e mafai ona mafua ai setete o Bootstrap :hover
e le manaʻomia ona "pipii" i luga o ia suʻesuʻega. O nisi su'esu'ega feavea'i e :focus
fa'apea fo'i ona pipii. E leai se fofo faigofie i le taimi nei mo nei faʻafitauli e ese mai le aveese atoa o ia ituaiga sitaili.
E oo lava i nisi suʻesuʻega faʻaonaponei, lolomi e mafai ona faʻafefe.
Aemaise lava, e pei o le Chrome v32 ma e tusa lava po o le a le tulaga o le pito, e faʻaogaina e Chrome le lautele o le vaʻai vaʻai e sili atu le vaapiapi nai lo le tele o le pepa faaletino pe a foʻia faʻamatalaga a le aufaasālalau aʻo lolomi se itulau web. Ole mea lea e mafai ai ona fa'afuase'i ona fa'agaoioia le laina fa'aopoopo a Bootstrap pe a lolomi. Va'ai mataupu #12078 ma Chrome bug #273306 mo nisi fa'amatalaga. Fautuaga fofo:
@screen-*
Less fesuiaiga ina ia manatu lau pepa lomitusi e sili atu nai lo le laititi.E le gata i lea, e pei o le Safari v8.0, fa'amau-lautele .container
s e mafai ona fa'aaogaina e Safari se la'ititi la'ititi la'ititi pe a lolomi. Va'ai #14868 ma WebKit bug #138192 mo nisi fa'amatalaga. O se tasi e mafai ona fofo mo lenei mea o le faʻaopoopoina o le CSS lea:
I fafo atu o le pusa, Android 4.1 (ma e oʻo lava i nisi faʻasalalauga fou e foliga mai) faʻatasi ma le Browser app e avea o le upega tafaʻilagi le lelei o filifiliga (e ese mai le Chrome). O le mea e leaga ai, o le Browser app e tele naua ma faʻalavelave ma le CSS lautele.
I luga o <select>
elemene, o le a le faʻaalia e le suʻesuʻega o oloa a le Android le faʻatonuga o le itu pe a iai se border-radius
ma / pe border
faʻaaogaina. (Vaai i lenei fesili StackOverflow mo faʻamatalaga.) Faʻaaoga le snippet of code o loʻo i lalo e aveese ai le CSS solitulafono ma faʻaalia <select>
e avea o se elemene e le faʻaalia i luga o le suʻega o oloa Android. Ole sogisogi ole tagata fa'aoga e aloese mai le fa'alavelave ile Chrome, Safari, ma Mozilla browsers.
E te fia va'ai i se fa'ata'ita'iga? Siaki lenei JS Bin demo.
Ina ia mafai ona maua le poto masani sili ona lelei i suʻesuʻega tuai ma taʻavale, e faʻaogaina e Bootstrap hacks suʻesuʻe CSS i le tele o nofoaga e faʻatatau ai le CSS faʻapitoa i nisi o suʻega suʻesuʻe ina ia mafai ai ona faʻaogaina faʻamau i totonu o latou lava suʻesuʻega. O nei hacks ma le malamalama e mafua ai ona faitio tagata faʻamaonia CSS e le aoga. I ni nofoaga se lua, matou te fa'aogaina fo'i vaega CSS e le'i fa'ata'atia atoatoa, ae o lo'o fa'aogaina mo le fa'aleleia atili.
O nei lapataiga faʻamaonia e le afaina i le faʻatinoga talu ai o le vaega e le-hacky o la tatou CSS e faʻamaonia atoatoa ma o vaega hacky e le faʻalavelave i le faʻaogaina lelei o le vaega e le-hacky, o le mea lea tatou te le amanaiaina ai nei lapataiga faapitoa.
O a matou HTML docs foi e iai ni lapataiga faʻamaonia HTML e le taua ma e le taua ona o lo matou faʻaofiina o se fofo mo se pusa Firefox patino .
E ui e matou te le lagolagoina aloaia soʻo se isi vaega faʻapipiʻi poʻo faʻaopoopoga, matou te ofoina atu ni fautuaga aoga e fesoasoani e aloese mai faʻafitauli e ono tutupu i au poloketi.
O nisi polokalama faakomepiuta lona tolu, e aofia ai Google Maps ma Google Custom Search Engine, feteenai ma Bootstrap ona o le * { box-sizing: border-box; }
, o se tulafono padding
e le afaina ai le lautele mulimuli o se elemene. A'oa'o atili e uiga i pusa fa'ata'ita'iga ma le fa'avasegaina ile CSS Tricks .
Fa'alagolago i le fa'amatalaga, e mafai ona e fa'asili pe a mana'omia (Filifiliga 1) po'o le toe setiina o le fa'avasegaina o pusa mo itulagi atoa (Filifiliga 2).
O le Bootstrap e mulimulitaia tulaga masani i luga o le upega tafaʻilagi ma-ma le itiiti o taumafaiga faʻaopoopo-e mafai ona faʻaoga e fai ai saite e mafai ona maua e i latou o loʻo faʻaaogaina AT .
Afai o lau folauga o loʻo i ai le tele o fesoʻotaʻiga ma e sau i luma o le autu autu i totonu o le DOM, faʻaopoopo se Skip to main content
fesoʻotaʻiga aʻo leʻi faia le faʻasalalauga (mo se faʻamatalaga faigofie, vaʻai i lenei A11Y Project article i luga ole navigation links ). O le fa'aaogaina o le .sr-only
vasega o le a natia ai le so'otaga fa'ase'e, ma o le .sr-only-focusable
a fa'amautinoa e le vasega o le a fa'aalia le so'otaga pe'ā taula'i atu (mo tagata fa'aoga keyboard).
Ona o ni faaletonu ua leva ona iai i Chrome (silasila i le lomiga 262171 i le Chromium bug tracker ) ma Internet Explorer (silasila i lenei tusiga i luga o itulau-itulau so'oga ma le fa'atonuga o le fa'atonuga ), e tatau ona e mautinoa o le sini o lau so'oga fa'ase'e . e le itiiti ifo i le fa'apolokalame le taula'i e ala i le fa'aopoopoina tabindex="-1"
.
E le gata i lea, atonu e te manaʻo e faʻamalo manino se faʻaaliga faʻaalia i luga o le taulaʻiga (aemaise lava o loʻo faʻatulagaina e Chrome i le taimi nei le taulaʻi i elemene tabindex="-1"
pe a kiliki i le isumu) ma #content:focus { outline: none; }
.
Manatua o lenei pusa o le a aʻafia ai foʻi soʻo se isi i-itulau soʻotaga o loʻo faʻaogaina e lau 'upega tafaʻilagi, ma faʻaleagaina ai mo tagata faʻaoga keyboard. E mafai ona e mafaufau e fa'aopoopo i ai se fa'amautu-gap fa'apena i isi fa'aigoa uma o taula/vaega fa'ailoa e fai ma taula'iga so'otaga.
Pe a fa'aulu fa'aulutala ( <h1>
- <h6>
), o lau ulutala pepa muamua e tatau ona avea ma <h1>
. O ulutala mulimuli ane e tatau ona fa'aoga tatau <h2>
- <h6>
ina ia mafai ai e le au faitau lautusi ona fausia se lisi o mea mo au itulau.
A'oa'o atili ile HTML CodeSniffer ma Penn State's AccessAbility .
I le taimi nei, o nisi o tu'ufa'atasiga lanu e maua i le Bootstrap (e pei o vasega fa'avasega fa'amau , o nisi o fa'ailoga e fa'ailoa ai lanu e fa'aaoga mo poloka fa'ailoga autu , le vasega fesoasoani i .bg-primary
tua , ma le lanu o feso'ota'iga pe a fa'aoga i luga o se papa'e pa'epa'e) e maualalo le fa'atusatusaga fa'atusatusa (i lalo ifo o le fua fa'atatau o le 4.5:1 ). E mafai ona tupu ai fa'afitauli i tagata fa'aoga e vaivai le va'ai po'o e tauaso lanu. O nei lanu fa'aletonu atonu e mana'omia ona toe fa'aleleia ina ia fa'atele ai le fa'atusatusaga ma le fa'amaonia.
O le Bootstrap o loʻo tuʻuina atu i lalo o le laisene MIT ma o le puletaofia 2016 Twitter. Fa'apala i lalo i ni pusi laiti, e mafai ona faamatalaina i tulaga nei.
O le laisene Bootstrap atoa o loʻo i totonu o le fale teu oloa mo nisi faʻamatalaga.
Ua faaliliuina e tagata o le nuu ia faamaumauga a Bootstrap i gagana eseese. E leai se tasi e lagolagoina aloa'ia ma atonu e le o fa'afou i taimi uma.
Matou te le fesoasoani e fa'atulaga pe fa'afeiloa'i fa'aliliuga, matou te feso'ota'i i ai.
Ua uma se faaliliuga fou pe sili atu? Tatala se talosaga toso e faaopoopo i la matou lisi.