Deskargatu

Bootstrap-ek (gaur egun 3.3.7) modu erraz batzuk ditu azkar hasteko, bakoitza trebetasun-maila eta erabilera-kasu desberdinetara erakartzen du. Irakurri zure beharretara egokitzen dena ikusteko.

Bootstrap CDN

JsDelivr -eko lagunek CDN laguntza eskaintzen dute Bootstrap-en CSS eta JavaScript. Erabili Bootstrap CDN esteka hauek.

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

Instalatu Bower-ekin

Bootstrap-en Less, CSS, JavaScript eta letra-tipoak ere instalatu eta kudeatu ditzakezu Bower erabiliz :

$ bower install bootstrap

Instalatu npm-rekin

Bootstrap ere instala dezakezu npm erabiliz :

$ npm install bootstrap@3

require('bootstrap')Bootstrap-en jQuery plugin guztiak jQuery objektuan kargatuko ditu. Moduluak berak ez du bootstrapezer esportatzen. Bootstrap-en jQuery pluginak eskuz karga ditzakezu banan-banan /js/*.jsfitxategiak paketearen goi-mailako direktorioan kargatuz.

Bootstrap- package.jsonek metadatu gehigarri batzuk ditu gako hauen azpian:

• less- Bootstrap-en Less iturburu-fitxategi nagusirako bidea
• style- Ezarpen lehenetsiak erabiliz aurrez konpilatu den Bootstrap-en txikitu gabeko CSSrako bidea (pertsonalizaziorik ez)

Instalatu Composer-ekin

Bootstrap-en Less, CSS, JavaScript eta letra-tipoak ere instalatu eta kudeatu ditzakezu Composer erabiliz :

$ composer require twbs/bootstrap

Autoaurrizkia behar da Less/Sass-erako

Bootstrap- ek Autoprefixer erabiltzen du CSS saltzaileen aurrizkiei aurre egiteko . Bootstrap bere Less/Sass iturburutik konpilatzen ari bazara eta gure Gruntfile erabiltzen ez baduzu, Autoprefixer zure eraikuntza-prozesuan integratu beharko duzu. Aurrez konpilatutako Bootstrap erabiltzen ari bazara edo gure Gruntfile erabiltzen ari bazara, ez duzu honetaz kezkatu behar Autoprefixer dagoeneko gure Gruntfilean integratuta dagoelako.

Zer sartzen den

Bootstrap bi formatan deskarga daiteke, eta horien barruan honako direktorio eta fitxategi hauek aurkituko dituzu, baliabide komunak logikoki multzokatuz eta konpilatutako eta txikitutako aldaerak eskainiz.

Aurrez konpilatutako Bootstrap

Deskargatu ondoren, deskonprimitu karpeta Bootstrap-en (konpilatua) egitura ikusteko. Horrelako zerbait ikusiko duzu:

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

Hau da Bootstrap-en formarik oinarrizkoena: aurrez konpilatutako fitxategiak ia edozein web proiektutan azkar erabiltzeko. CSS eta JS konpilatuak ( bootstrap.*) eskaintzen ditugu, baita CSS eta JS konpilatuak eta txikituak ( bootstrap.min.*). CSS iturburu-mapak ( bootstrap.*.map) erabilgarri daude arakatzaile batzuen garatzaile-tresnekin erabiltzeko. Glyphicons-en letra-tipoak sartzen dira, baita aukerako Bootstrap gaia ere.

Bootstrap iturburu kodea

Bootstrap iturburu-kodearen deskargak aurrez konpilatutako CSS, JavaScript eta letra-tipoen aktiboak biltzen ditu, iturri Less, JavaScript eta dokumentazioarekin batera. Zehazkiago, honako hauek eta gehiago biltzen ditu:

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

, less/, js/eta fonts/gure CSS, JS eta ikonoen letra-tipoen iturburu-kodea dira (hurrenez hurren). dist/Karpetak goian aurrez konpilatutako deskarga atalean zerrendatutako guztia biltzen du . docs/Karpetak gure dokumentazioaren iturburu-kodea eta Bootstrap examples/erabilerarenak ditu. Horretaz gain, barne hartzen den beste edozein fitxategi paketeak, lizentziaren informazioa eta garapenerako laguntza eskaintzen du.

CSS eta JavaScript konpilatzen

Bootstrap -ek Grunt erabiltzen du bere eraikuntza sistemarako, markoarekin lan egiteko metodo egokiekin. Horrela konpilatzen dugu gure kodea, probak exekutatzen eta abar.

Grunt instalatzen

Grunt instalatzeko, lehenik deskargatu eta instalatu behar duzu node.js (npm barne). npm nodo paketatutako moduluak esan nahi du eta garapenaren mendekotasunak kudeatzeko modu bat da node.js bidez.

1. Instalatu grunt-cliglobalki npm install -g grunt-cli.
2. Nabigatu erroko /bootstrap/direktoriora, gero exekutatu npm install. npm-k fitxategia begiratuko du package.jsoneta automatikoki instalatuko ditu bertan zerrendatutako beharrezko mendekotasun lokalak.

Amaitutakoan, komando lerrotik emandako Grunt komando ezberdinak exekutatu ahal izango dituzu.

Eskuragarri dauden Grunt komandoak

grunt dist(Konpilatu CSS eta JavaScript besterik ez)

/dist/Direktorioa CSS eta JavaScript fitxategi konpilatu eta txikituekin birsortzen du . Bootstrap erabiltzaile gisa, hau da normalean nahi duzun komandoa.

grunt watch(Ikusi)

Less iturburu-fitxategiak ikusten ditu eta automatikoki birkonpilatzen ditu CSS-ra aldaketa bat gordetzen duzun bakoitzean.

grunt test(Egin probak)

JSHint exekutatzen du eta QUnit probak bururik gabe exekutatzen ditu PhantomJS -en .

grunt docs(Eraiki eta probatu dokumentuen aktiboak)

Dokumentazioa lokalean exekutatzen denean erabiltzen diren CSS, JavaScript eta beste aktibo batzuk eraiki eta probatzen ditu bundle exec jekyll serve.

grunt(Eraiki dena eta exekutatu probak)

CSS eta JavaScript konpilatu eta murrizten ditu, dokumentazio webgunea eraikitzen du, HTML5 baliozkotzailea dokumentuekin exekutatzen du, Customizer aktiboak birsortzen ditu eta abar. Jekyll eskatzen du . Normalean bakarrik beharrezkoa da Bootstrap bera hackeatzen ari bazara.

Arazoak konpontzea

Mendekotasunak instalatzeko edo Grunt komandoak exekutatzeko arazoak aurkitzen badituzu, lehenik ezabatu /node_modules/npm-k sortutako direktorioa. Ondoren, berriro exekutatu npm install.

Oinarrizko txantiloia

Hasi oinarrizko HTML txantiloi honekin, edo aldatu adibide hauek . Espero dugu gure txantiloiak eta adibideak pertsonalizatzea, zure beharretara egokituz.

Kopiatu beheko HTMLa Bootstrap dokumentu minimo batekin lanean hasteko.

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

Adibideak

Eraiki goiko oinarrizko txantiloian Bootstrap-en osagai askorekin. Bootstrap pertsonalizatzera eta egokitzera animatzen zaitugu zure proiektuaren beharretara egokitzeko.

Lortu beheko adibide bakoitzaren iturburu-kodea Bootstrap biltegia deskargatuz . Adibideak direktorioa aurki daitezke docs/examples/.

Esparrua erabiliz

Hasierako txantiloia

Oinarriak baino ez: CSS eta JavaScript konpilatuak edukiontzi batekin batera.

Bootstrap gaia

Kargatu aukerako Bootstrap gaia bisualki hobetutako esperientzia izateko.

Sareak

Sare-diseinuen adibide anitz lau maila, habia eta abarrekin.

Jumbotron

Eraiki jumbotronaren inguruan nabigazio-barra eta oinarrizko sareta-zutabe batzuekin.

Jumbotron estua

Eraiki orri pertsonalizatuagoa edukiontzi eta jumbotron lehenetsia murriztuz.

Nabigazio-barrak martxan

Nabigazio barra

Oinarrizko txantiloia, nabigazio barra eduki gehigarri batekin batera.

Goiko nabigazio barra estatikoa

Oinarrizko txantiloia goiko nabigazio barra estatiko batekin, eduki gehigarri batekin.

Nabigazio barra finkoa

Oinarrizko txantiloia goiko nabigazio-barra finko batekin, eduki gehigarri batekin.

Osagai pertsonalizatuak

Estalkia

Orrialde bateko txantiloia hasierako orrialde sinple eta ederrak eraikitzeko.

Karrusela

Pertsonalizatu nabigazio-barra eta karrusela, eta gehitu osagai berri batzuk.

Bloga

Bi zutabeko blogaren diseinu sinplea nabigazio, goiburu eta mota pertsonalizatuekin.

Aginte-panela

Alboko barra eta nabigazio-barra finko dituen administrazio-arbelaren oinarrizko egitura.

Saioa hasteko orria

Inprimaki-diseinu pertsonalizatua eta diseinua saio-inprimaki sinple baterako.

Nabigazio justifikatua

Sortu nabigazio barra pertsonalizatu bat justifikatutako estekekin. Buruak gora! Ez da oso Safari atsegina.

Oin itsaskorra

Erantsi orri-oina ikuslearen behealdean edukia hura baino laburragoa denean.

Oin itsaskorra nabigazio barrarekin

Erantsi orri-oin bat bistaratzearen behealdean nabigazio-barra finko batekin goiko aldean.

Esperimentuak

Ez erantzuten duen Bootstrap

Desgaitu erraz Bootstrap-en erantzuna gure dokumentuen arabera .

Oihaletik kanpo

Eraiki oihaletik kanpoko nabigazio-menu aldagarri bat Bootstrap-ekin erabiltzeko.

Tresnak

Bootlint

Bootlint Bootstrap HTML linter tresna ofiziala da. Automatikoki egiaztatzen ditu Bootstrap nahiko "banilla" modu batean erabiltzen ari diren web-orrietako HTML akats arrunt batzuk. Vanilla Bootstrap-en osagai/widget-ek DOM-aren zatiak egitura jakin batzuetara egokitzea eskatzen du. Bootlint-ek egiaztatzen du Bootstrap osagaien instantziek HTML egitura egokia dutela. Demagun Bootlint gehitzea zure Bootstrap web garapeneko tresna-katean, akats arruntek zure proiektuaren garapena moteldu ez dezan.

Komunitatea

Egon zaitez Bootstrap-en garapenaren berri eta jarri komunitateari baliabide lagungarri hauekin.

• Irakurri eta harpidetu The Official Bootstrap Blogera .
• Txateatu Bootstrappers lagunekin IRC erabiliz irc.freenode.netzerbitzarian, ##bootstrap kanalean .
• Bootstrap erabiltzeko laguntza lortzeko, galdetu StackOverflow-en etiketa erabiliztwitter-bootstrap-3 .
• bootstrapGaratzaileek Bootstrap-en funtzionaltasuna aldatzen edo gehitzen duten paketeetan erabili beharko lukete gako -hitza npm edo antzeko bidalketa-mekanismoen bidez banatzean, aurkikuntzarik handiena lortzeko.
• Aurkitu Bootstrap-ekin eraikitzen duten pertsonen adibide inspiratzaileak Bootstrap Expo -n .

Twitterren @getbootstrap ere jarraitu dezakezu azken esamesak eta musika-bideo ikaragarriak ikusteko.

Erantzunkortasuna desgaitzea

Bootstrap-ek automatikoki egokitzen ditu zure orriak pantaila-tamaina desberdinetara. Hona hemen eginbide hau nola desgaitu zure orrialdeak erantzuten ez duen adibide honen antzera funtziona dezan .

Orrialdearen erantzuna desgaitzeko urratsak

1. Utzi CSS dokumentuetan<meta> aipatutako ikuspegia
2. Gainidatzi sare- widthmaila .containerbakoitzeko zabalera bakarrarekin, adibidez. width: 970px !important;Ziurtatu hau Bootstrap CSS lehenetsiaren ondoren datorrela. Aukeran saihestu dezakezu !importantmultimedia-kontsultekin edo hautatzaile-fu batekin.
3. Nabigazio-barrak erabiltzen badituzu, kendu nabigazio-barrak tolesten eta zabaltzen diren portaera guztiak.
4. Sare-diseinuetarako, erabili .col-xs-*klaseak ertain/handiez gain, edo horien ordez. Ez kezkatu, gailu txikien sarea bereizmen guztietara egokitzen da.

Oraindik Respond.js beharko duzu IE8rako (gure komunikabideen kontsultak oraindik hor baitaude eta prozesatu behar baitira). Horrek Bootstrap-en "gune mugikorren" alderdiak desgaitzen ditu.

Bootstrap txantiloia erantzuteko gaitasuna desgaituta dago

Urrats hauek adibide bati aplikatu dizkiogu. Irakurri bere iturburu kodea inplementatutako aldaketa zehatzak ikusteko.

Ikusi erantzuten ez duen adibidea

Arakatzailea eta gailuaren laguntza

Bootstrap azken mahaigaineko eta mugikorreko arakatzaileetan ondoen funtzionatzeko eraikita dago, hau da, arakatzaile zaharrenek zenbait osagairen errendaketak estilo desberdineko, guztiz funtzionalak izan arren, bistara ditzakete.

Onartutako arakatzaileak

Zehazki, honako nabigatzaile eta plataforma hauen azken bertsioak onartzen ditugu.

WebKit, Blink edo Gecko-ren azken bertsioa erabiltzen duten arakatzaile alternatiboak, zuzenean edo plataformaren web ikuspegiaren APIaren bidez, ez dira esplizituki onartzen. Hala ere, Bootstrap-ek (kasu gehienetan) behar bezala erakutsi eta funtzionatu beharko luke arakatzaile hauetan ere. Laguntza-informazio zehatzagoa behean ematen da.

Gailu mugikorrak

Oro har, Bootstrap-ek plataforma nagusi bakoitzaren arakatzaile lehenetsien azken bertsioak onartzen ditu. Kontuan izan proxy arakatzaileak (adibidez, Opera Mini, Opera Mobile-ren Turbo modua, UC Browser Mini, Amazon Silk) ez direla onartzen.

Mahaigaineko arakatzaileak

Era berean, mahaigaineko arakatzaile gehienen azken bertsioak onartzen dira.

Windows-en, Internet Explorer 8-11 onartzen dugu .

Firefox-erako, azken bertsio egonkor arruntaz gain, Firefox-en azken laguntza hedatua (ESR) bertsioa ere onartzen dugu.

Ez-ofizialki, Bootstrap-ek nahikoa ondo begiratu eta jokatu beharko luke Chromium eta Chrome Linux-en, Firefox Linux-en eta Internet Explorer 7-n, baita Microsoft Edge-n ere, ofizialki onartzen ez diren arren.

Bootstrap-ek aurre egin behar dion arakatzailearen akatsen zerrenda ikusteko, ikus gure arakatzailearen akatsen horma .

Internet Explorer 8 eta 9

Internet Explorer 8 eta 9 ere onartzen dira, hala ere, kontuan izan CSS3 propietate eta HTML5 elementu batzuk ez dituztela guztiz onartzen arakatzaile hauek. Horrez gain, Internet Explorer 8-k Respond.js erabiltzea eskatzen du multimedia-kontsulten laguntza gaitzeko.

Bisitatu Can I use... CSS3 eta HTML5 funtzioen arakatzailearen laguntzari buruzko xehetasunak lortzeko.

Internet Explorer 8 eta Respond.js

Kontuz hurrengo ohartarazpenekin Respond.js Internet Explorer 8rako garapen eta ekoizpen inguruneetan erabiltzean.

Respond.js eta domeinu arteko CSS

Respond.js beste (azpi)domeinu batean (adibidez, CDN batean) ostatatutako CSSarekin erabiltzeak konfigurazio gehigarri bat behar du. Ikusi Respond.js dokumentuak xehetasunetarako.

Erantzun.js etafile://

Arakatzailearen segurtasun-arauak direla eta, Respond.js-ek ez du funtzionatzen protokoloaren bidez ikusitako orriekin file://(adibidez, HTML fitxategi lokal bat irekitzean). IE8-n erantzuteko funtzioak probatzeko, ikusi zure orriak HTTP(S) bidez. Ikusi Respond.js dokumentuak xehetasunetarako.

Erantzun.js eta@import

Respond.js-k ez du funtzionatzen . bidez erreferentziatutako CSS-ekin @import. Bereziki, ezagutzen dira Drupal-en konfigurazio batzuk erabiltzen @import. Ikusi Respond.js dokumentuak xehetasunetarako.

Internet Explorer 8 eta kutxa-tamaina

IE8-k ez du guztiz onartzen box-sizing: border-box;, min-width, max-width, min-heightedo max-height. Hori dela eta, v3.0.1etik aurrera, jada ez dugu erabiltzen max-widths .container.

Internet Explorer 8 eta @font-face

IE8-k arazo batzuk ditu rekin @font-facekonbinatzean :before. Bootstrap-ek konbinazio hori erabiltzen du bere glifikoekin. Orrialde bat cachean gordetzen bada eta sagua leihoaren gainean sakatu gabe kargatzen bada (hau da, sakatu freskatzeko botoia edo kargatu zerbait iframe batean), orduan orria letra-tipoa kargatu baino lehen errendatuko da. Orrialdearen (gorputza) pasatzean ikono batzuk erakutsiko dira eta gainerako ikonoen gainean pasatzean horiek ere erakutsiko dira. Ikusi #13863 alea xehetasunetarako.

IE bateragarritasun moduak

Bootstrap ez da onartzen Internet Explorer zaharreko bateragarritasun moduetan. IErako azken errendatze modua erabiltzen ari zarela ziurtatzeko, kontuan hartu <meta>etiketa egokia zure orrietan sartzea:

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

Egiaztatu dokumentuaren modua arazketa tresnak irekiz: sakatu F12eta egiaztatu "Dokumentu modua".

Etiketa hau Bootstrap-en dokumentazio eta adibide guztietan sartzen da, Internet Explorer-en onartzen den bertsio bakoitzean ahalik eta errendatze onena ziurtatzeko.

Ikusi StackOverflow galdera hau informazio gehiago lortzeko.

Internet Explorer 10 Windows 8 eta Windows Phone 8-n

Internet Explorer 10-k ez du bereizten gailuaren zabalera eta ikuspegiaren zabalera , eta, beraz, ez ditu behar bezala aplikatzen Bootstrap-en CSS-ko multimedia-kontsultak. Normalean CSS zati azkar bat gehituko duzu hau konpontzeko:

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

Hala ere, honek ez du funtzionatzen Update 3 (GDR3) baino zaharragoak diren Windows Phone 8 bertsioak exekutatzen dituzten gailuetan, horrelako gailuek batez ere mahaigaineko ikuspegia erakusten baitute "telefono" ikuspegi estuaren ordez. Horri aurre egiteko , CSS eta JavaScript hauek sartu beharko dituzu akatsari aurre egiteko .

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

Informazio gehiago eta erabilera-jarraibideak lortzeko, irakurri Windows Phone 8 eta Device-Width .

Adibide gisa, hau Bootstrap-en dokumentazio eta adibide guztietan sartzen dugu erakusgarri gisa.

Safari ehuneko biribilketa

OS X-rako Safari-ren v7.1 eta iOS v8.0-rako Safari-ren bertsioen errendatze-motorrak arazoak izan zituen gure sareko .col-*-1klaseetan erabilitako hamartar kopuruarekin. Beraz, sareko 12 zutabe indibidual izan bazenitu, beste zutabe-lerro batzuekin alderatuta labur geratu zirela nabarituko zenuke. Safari/iOS berritzeaz gain, konponbideetarako aukera batzuk dituzu:

• Gehitu .pull-rightzure azken sareko zutabeari eskuineko lerrokatzea lortzeko
• Doitu zure ehunekoak eskuz Safarirako biribilketa ezin hobea lortzeko (lehen aukera baino zailagoa)

Modalak, nabigazio-barrak eta teklatu birtualak

Gainezka eta korritzea

Elementurako laguntza nahiko mugatua da iOS eta Android-en overflow: hidden. <body>Horretarako, gailu horietako edozein arakatzaileetan modal baten goiko edo behealdetik mugitzen zarenean, <body>edukia korritzen hasiko da. Ikusi Chrome akatsa #175502 (Chrome v40-n konponduta) eta WebKit akatsa #153852 .

iOS testu-eremuak eta desplazamendua

iOS 9.3-tik aurrera, modal bat irekita dagoen bitartean, korritze-keinu baten hasierako ukitua testu baten <input>edo baten mugaren barruan badago <textarea>, <body>modalaren azpian dagoen edukia modalaren ordez korrituko da. Ikusi WebKit akatsa #153856 .

Teklatu birtualak

Gainera, kontuan izan nabigazio barra finko bat erabiltzen ari bazara edo modal baten barruan sarrerak erabiltzen ari bazara, iOS-ek errendatze-akats bat duela, teklatu birtuala abiarazten denean elementu finkoen posizioa eguneratzen ez duena. Honetarako konponbide batzuk zure elementuak eraldatzea position: absoluteedo fokuan tenporizadorea deitzea, kokapena eskuz zuzentzen saiatzeko. Hau ez da Bootstrap-ek kudeatzen, beraz, zure esku dago zure aplikaziorako zein irtenbide egokiena den erabakitzea.

Nabigazio-barrako goitibehurrak

Elementua .dropdown-backdropez da iOS-n erabiltzen nabigazioan, z-indexazioaren konplexutasuna dela eta. Horrela, nabigazio-barren goitibeherako zerrendak ixteko, zuzenean egin behar duzu klik goitibeherako elementuan (edo iOS-en klik-gertaera bat piztuko duen beste edozein elementu ).

Arakatzailea zooma

Orriaren zoomak ezinbestean errendatze-artefaktuak aurkezten ditu osagai batzuetan, bai Bootstrap-en, bai gainerako sarean. Arazoaren arabera, konpondu ahal izango dugu (lehenik bilatu eta gero arazo bat ireki behar izanez gero). Hala ere, hauek alde batera utzi ohi ditugu, askotan ez baitute soluzio zuzenik hackearen konponbideez gain.

Itsaskorra :hover/ :focusmugikorrean

Nahiz eta ukipen-pantaila gehienetan benetako pasatzea posible ez den, mugikorrentzako arakatzaile gehienek pasabidearen euskarria imitatzen dute eta :hover"itxikorra" egiten dute. Beste era batera esanda, :hoverestiloak elementu bat ukitu ondoren aplikatzen hasten dira eta erabiltzaileak beste elementuren bat sakatu ondoren soilik gelditzen dira aplikatzea. Honek Bootstrap-en :hoveregoerak horrelako arakatzaileetan nahi ez diren "itsatsita" bihurtzea eragin dezake. Mugikorreko arakatzaile batzuek ere :focusitsaskorra egiten dute. Gaur egun ez dago arazo hauetarako konponbide sinplerik, estiloak guztiz kentzeaz gain.

Inprimaketa

Nahiz eta arakatzaile moderno batzuetan inprimatzea bitxia izan daiteke.

Bereziki, Chrome v32-tik aurrera eta marjinaren ezarpenak kontuan hartu gabe, Chrome-k paperaren tamaina fisikoa baino askoz estuagoa den bistaratze-zabalera erabiltzen du web-orri bat inprimatzean multimedia-kontsultak ebazteko. Honek Bootstrap-en sare txikia ustekabean aktibatzea eragin dezake inprimatzean. Ikusi #12078 alea eta #273306 Chrome akatsa xehetasun batzuk lortzeko. Iradokitako konponbideak:

• Besarkatu sareta txikia eta ziurtatu zure orriaren itxura onargarria dela.
• Pertsonalizatu @screen-*Gutxiago aldagaien balioak, zure inprimagailuaren papera txikia baino handiagoa izan dadin.
• Gehitu multimedia-kontsulta pertsonalizatuak sareta-tamaina eten-puntuak inprimatzeko euskarrietarako soilik aldatzeko.

Gainera, Safari v8.0-tik aurrera, zabalera finkoek Safari- .containerk inprimatzean ezohiko letra-tamaina txikia erabiltzea eragin dezake. Ikus #14868 eta WebKit akats #138192 xehetasun gehiagorako. Honetarako konponbide potentzial bat CSS hau gehitzea da:

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

Android stock arakatzailea

Kutxaz kanpo, Android 4.1 (eta, itxuraz, bertsio berriagoak ere) Arakatzailea aplikazioarekin bidaltzen da aukeratutako web arakatzaile lehenetsi gisa (Chrome-ren aurka). Zoritxarrez, Arakatzailea aplikazioak akats eta inkoherentzia asko ditu CSSrekin orokorrean.

Hautatu menuak

Elementuetan , <select>Android stock arakatzaileak ez ditu alboko kontrolak bistaratuko border-radiuseta/edo borderaplikatuta badago. (Ikusi StackOverflow galdera hau xehetasunetarako.) Erabili beheko kode zatia CSS iraingarria kentzeko eta <select>estilorik gabeko elementu gisa errendatzeko Android stock arakatzailean. Erabiltzaile-agenteak sniffak Chrome, Safari eta Mozilla arakatzaileekin interferentziak saihesten ditu.

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

Adibide bat ikusi nahi? Ikusi JS Bin demo hau.

Balidatzaileak

Arakatzaile zahar eta akatsenei ahalik eta esperientzia onena eskaintzeko, Bootstrap- ek CSS arakatzaileen hackeak erabiltzen ditu hainbat tokitan CSS bereziak arakatzaileen bertsio jakin batzuetara bideratzeko, arakatzaileen akatsak konpontzeko. Hackeatu hauek CSS baliozkotzaileak baliogabeak direla kexatzea eragiten dute. Leku pare batean, oraindik guztiz estandarizatu gabeko CSS funtzionaltasun modernoak ere erabiltzen ditugu, baina hobekuntza progresiborako soilik erabiltzen dira.

Balidazio-abisu hauek ez dute axola praktikan, gure CSS-aren zati ez-hacky-ak guztiz balioztatzen baitu eta zati hackyek ez baitute oztopatzen zati ez-hacky-aren funtzionamendu egokia, horregatik nahita alde batera uzten ditugu abisu jakin hauek.

Gure HTML dokumentuek, halaber, HTML baliozkotze-abisu hutsal eta garrantzizko batzuk dituzte, Firefox-en akats jakin baterako konponbide bat sartu dugulako .

Hirugarrenen laguntza

Ofizialki hirugarrenen plugin edo gehigarririk onartzen ez dugun arren, aholku baliagarri batzuk eskaintzen ditugu zure proiektuetan izan daitezkeen arazoak saihesteko.

Kutxa-tamaina

Hirugarrenen software batzuek, Google Maps eta Google Custom Search Engine barne, Bootstrap-ekin gatazkan daude * { box-sizing: border-box; }, eta arau horrek paddingez dio elementu baten azken kalkulatutako zabalerari eragiten. Lortu informazio gehiago kutxa-ereduari eta tamainari buruz CSS Tricks-en .

Testuinguruaren arabera, behar bezala gainidatzi dezakezu (1 aukera) edo eskualde osoetarako kutxa-tamaina berrezarri (2 aukera).

/* 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();
}

Irisgarritasuna

Bootstrap-ek web estandar arruntak jarraitzen ditu eta —esfortzu gehigarri minimoarekin— AT erabiltzen dutenentzat eskuragarri dauden guneak sortzeko erabil daiteke .

Saltatu nabigazioa

Zure nabigazioak esteka asko baditu eta DOMeko eduki nagusiaren aurretik badator, gehitu Skip to main contentesteka bat nabigazioaren aurretik (azalpen erraz bat lortzeko, ikusi A11Y Project-en artikulu hau nabigazio estekak saltatzeko ). Klasea erabiltzeak .sr-onlybisualki ezkutatuko du saltatzeko esteka, eta .sr-only-focusableklaseak esteka enfokatu ondoren ikusgai egongo dela ziurtatuko du (teklatuaren erabiltzaile ikusgarrientzat).

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

Habiaratutako goiburuak

<h1>Goiburuak ( - ) habiatzerakoan <h6>, zure dokumentuaren goiburu nagusiak <h1>. Ondorengo goiburuek erabilera logikoa egin beharko lukete, <h2>hala <h6>nola, pantaila-irakurleek zure orrietarako edukien taula eraiki dezaten.

Lortu informazio gehiago HTML CodeSniffer eta Penn State-ren AccessAbility-n .

Kolore kontrastea

Gaur egun, Bootstrap-en eskuragarri dauden kolore-konbinazio lehenetsietako batzuk (adibidez, estilo ezberdinetako botoien klaseak, oinarrizko kode blokeetarako erabiltzen diren kode nabarmentzeko kolore batzuk , .bg-primary testuinguruko atzeko plano laguntzailearen klasea eta estekaren kolore lehenetsia hondo zuri batean erabiltzen denean) kontraste-erlazio baxua dute ( 4,5:1 gomendatutako ratioaren azpitik ). Horrek arazoak sor ditzake ikusmen gutxiko edo daltonikoa duten erabiltzaileei. Baliteke kolore lehenetsi hauek aldatu behar izatea kontrastea eta irakurgarritasuna areagotzeko.

Baliabide osagarriak

• "HTML Codesniffer" laster-marka irisgarritasun-arazoak identifikatzeko
• Chrome-ren Erabilerraztasuna garatzeko tresnak luzapena
• Kolore-kontraste analizatzailea
• A11Y proiektua
• MDN irisgarritasun-dokumentazioa

Lizentzien ohiko galderak

Bootstrap MIT lizentziapean kaleratu da eta 2016 Twitterren copyrighta da. Zati txikiagoetan egosita, baldintza hauekin deskriba daiteke.

Honako hau eskatzen dizu:

• Mantendu lizentzia eta copyright-oharra Bootstrap-en CSS eta JavaScript fitxategietan sartuta zure lanetan erabiltzen dituzunean

Hau egiteko aukera ematen dizu:

• Doan deskargatu eta erabili Bootstrap, osorik edo zati batean, helburu pertsonal, pribatu, enpresaren barne edo merkataritza helburuetarako
• Erabili Bootstrap zuk sortzen dituzun pakete edo banaketetan
• Aldatu iturburu kodea
• Eman azpilizentzia bat Bootstrap lizentzian sartzen ez diren hirugarrenei aldatzeko eta banatzeko

Debekatu egiten dizu:

• Eman egileei eta lizentziaren jabeei kalteen erantzule, Bootstrap bermerik gabe eskaintzen baita
• Eman erantzule Bootstrap-en sortzaileei edo copyright-jabeei
• Birbanatu Bootstrap-eko edozein pieza behar bezala egotzi gabe
• Erabili Twitterren jabetzako marka edozein modutan, Twitter-ek zure banaketa onartzen duela adierazi edo esan dezakeen edozein modutan
• Erabili Twitterren jabetzako edozein marka, kasuan kasuko Twitter softwarea sortu duzula esan edo esan dezakeen edozein modutan

Ez du eskatzen:

• Sartu Bootstrap-en iturburua bera, edo horri egin diezazkiokezuen aldaketak, biltzen dituen birbanaketetan
• Bidali Bootstrap-en egiten dituzun aldaketak Bootstrap proiektura (nahiz eta iritzi horiek gomendatzen diren)

Bootstrap lizentzia osoa proiektuaren biltegian dago informazio gehiago lortzeko.

Itzulpenak

Komunitateko kideek Bootstrap-en dokumentazioa hainbat hizkuntzatara itzuli dute. Inor ez dago ofizialki onartzen eta baliteke beti eguneratuta ez egotea.

• Bootstrap 中文文档 (txinera)
• Bootstrap 3 中文手冊 (txinera (tradizionala))
• Bootstrap på Dansk (daniera)
• Bootstrap frantsesez (frantsesa)
• Bootstrap auf Deutsch (Alemaniera)
• Bootstrap italieraz (italieraz)
• Bootstrap 한국어 (koreera)
• Bootstrap en Português do Brasil (Brasilgo portugesa)
• Bootstrap по-русски (errusieraz)
• Bootstrap en Español (gazteleraz)
• Türkçe Bootstrap (turkiera)
• Bootstrap українською (ukrainiera)
• Bootstrap bằng tiếng Việt (vietnamera)

Ez dugu laguntzen itzulpenak antolatzen edo ostatatzen, haiekin lotzen ditugu.

Itzulpen berria edo hobea amaitu al duzu? Ireki tira eskaera bat gure zerrendara gehitzeko.