Elŝutu

Bootstrap (nuntempe v3.4.1) havas kelkajn facilajn manierojn por rapide komenci, ĉiu alloga al malsama lerteco kaj uzokazo. Tralegu por vidi kio konvenas al viaj apartaj bezonoj.

jsDelivr

La homoj ĉe jsDelivr kompleze provizas CDN-subtenon por CSS kaj JavaScript de Bootstrap. Nur uzu ĉi tiujn ligilojn jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Instalu kun Bower

Vi ankaŭ povas instali kaj administri Bootstrap's Less, CSS, JavaScript kaj tiparojn uzante Bower :

bower install bootstrap

Instalu kun npm

Vi ankaŭ povas instali Bootstrap uzante npm :

npm install bootstrap@3

require('bootstrap')ŝarĝos ĉiujn jQuery-kromaĵojn de Bootstrap sur la objekton jQuery. La bootstrapmodulo mem nenion eksportas. Vi povas mane ŝargi la jQuery-kromaĵojn de Bootstrap individue ŝarĝante la /js/*.jsdosierojn sub la plej alta dosierujo de la pako.

Bootstrap package.jsonenhavas kelkajn pliajn metadatenojn sub la sekvaj ŝlosiloj:

• less- vojo al la ĉefa Less fontdosiero de Bootstrap
• style- vojo al la ne-minimigita CSS de Bootstrap, kiu estis antaŭkompilita uzante la defaŭltajn agordojn (neniu personigo)

Instalu kun Komponisto

Vi ankaŭ povas instali kaj administri Bootstrap's Less, CSS, JavaScript kaj tiparojn uzante Composer :

composer require twbs/bootstrap

Aŭtomata prefiksilo bezonata por Less/Sass

Bootstrap uzas Autoprefixer por trakti CSS-vendistajn prefiksojn . Se vi kompilas Bootstrap el ĝia Less/Sass-fonto kaj ne uzas nian Gruntfile, vi devos mem integri Autoprefixer en vian konstruprocezon. Se vi uzas antaŭkompilitan Bootstrap aŭ ni uzas nian Gruntfile, vi ne bezonas zorgi pri tio ĉar Aŭtomata prefiksilo jam estas integrita en nia Gruntfile.

Kio estas inkluzivita

Bootstrap estas elŝutebla en du formoj, ene de kiuj vi trovos la sekvajn dosierujojn kaj dosierojn, logike grupigante komunajn rimedojn kaj disponigante kaj kompilitajn kaj minigitajn variaĵojn.

Antaŭkompilita Bootstrap

Post elŝuto, malzipu la kunpremitan dosierujon por vidi la strukturon de (la kompilita) Bootstrap. Vi vidos ion tian:

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

Ĉi tiu estas la plej baza formo de Bootstrap: antaŭkompilitaj dosieroj por rapida uzokutimo en preskaŭ ajna retejo-projekto. Ni provizas kompilitajn CSS kaj JS ( bootstrap.*), same kiel kompilitajn kaj minigitajn CSS kaj JS ( bootstrap.min.*). CSS - fontmapoj ( bootstrap.*.map) estas haveblaj por uzado kun certaj retumiloj ellaboraj iloj. Tiparoj de Glyphicons estas inkluzivitaj, same kiel la laŭvola Bootstrap-temo.

Bootstrap fontkodo

La elŝuto de fontkodo de Bootstrap inkluzivas la antaŭkompilitajn CSS, JavaScript kaj tiparaktivaĵojn, kune kun fonto Less, JavaScript kaj dokumentadon. Pli specife, ĝi inkluzivas la jenajn kaj pli:

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

La less/, js/, kaj fonts/estas la fontkodo por niaj CSS, JS kaj ikontiparoj (respektive). La dist/dosierujo inkluzivas ĉion listigitan en la antaŭkompilita elŝuta sekcio supre. La docs/dosierujo inkluzivas la fontkodon por nia dokumentado, kaj examples/pri Bootstrap-uzado. Preter tio, ajna alia inkluzivita dosiero provizas subtenon por pakaĵoj, licencaj informoj kaj disvolviĝo.

Kompilante CSS kaj JavaScript

Bootstrap uzas Grunt por sia konstrusistemo, kun oportunaj metodoj por labori kun la kadro. Tiel ni kompilas nian kodon, rulas testojn kaj pli.

Instalante Grunt

Por instali Grunt, vi unue devas elŝuti kaj instali node.js (kiu inkluzivas npm). npm signifas nodaj pakitaj moduloj kaj estas maniero administri evoluajn dependecojn per node.js.

1. Instalu grunt-clitutmonde kun npm install -g grunt-cli.
2. Iru al la radika /bootstrap/dosierujo, poste rulu npm install. npm rigardos la package.jsondosieron kaj aŭtomate instalos la necesajn lokajn dependecojn listigitajn tie.

Kiam vi komplete, vi povos ruli la diversajn Grunt-komandojn provizitajn de la komandlinio.

Disponeblaj Grunt-komandoj

grunt dist(Nur kompilu CSS kaj JavaScript)

Regeneras la /dist/dosierujon kun kompilitaj kaj minigitaj CSS kaj JavaScript-dosieroj. Kiel Bootstrap-uzanto, ĉi tio kutime estas la komando, kiun vi volas.

grunt watch(Rigardu)

Rigardas la Less fontdosierojn kaj aŭtomate rekompilas ilin al CSS kiam ajn vi konservas ŝanĝon.

grunt test(Kuru testoj)

Rulas JSHint kaj ruligas la QUnit- testojn en realaj retumiloj danke al Karma .

grunt docs(Konstruu kaj testi la aktivaĵojn de dokumentoj)

Konstruas kaj testas CSS, JavaScript kaj aliajn aktivaĵojn, kiuj estas uzataj dum rulado de la dokumentaro loke per bundle exec jekyll serve.

grunt(Konstruu absolute ĉion kaj faru testojn)

Kompilas kaj malgrandigas CSS kaj JavaScript, konstruas la dokumentarretejon, funkciigas la validigilon HTML5 kontraŭ la dokumentoj, regeneras la aktivaĵojn de Customizer kaj pli. Postulas Jekyll . Kutime nur necesas se vi piratas Bootstrap mem.

Solvado de problemoj

Se vi renkontas problemojn pri instalado de dependecoj aŭ rulado de Grunt-komandoj, unue forigu la /node_modules/dosierujon generitan de npm. Poste, rerulu npm install.

Baza ŝablono

Komencu kun ĉi tiu baza HTML-ŝablono, aŭ modifi ĉi tiujn ekzemplojn . Ni esperas, ke vi personigos niajn ŝablonojn kaj ekzemplojn, adaptante ilin laŭ viaj bezonoj.

Kopiu la HTML sube por komenci labori kun minimuma Bootstrap-dokumento.

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Ekzemploj

Konstruu sur la baza ŝablono supre kun la multaj komponantoj de Bootstrap. Ni kuraĝigas vin personecigi kaj adapti Bootstrap laŭ la bezonoj de via individua projekto.

Akiru la fontkodon por ĉiu ekzemplo sube elŝutante la deponejon Bootstrap . Ekzemploj troviĝas en la docs/examples/dosierujo.

Uzante la kadron

Komenca ŝablono

Nenio krom la bazaĵoj: kompilitaj CSS kaj JavaScript kune kun ujo.

Bootstrap-temo

Ŝarĝu la laŭvolan Bootstrap-temon por videble plibonigita sperto.

Kradoj

Multoblaj ekzemploj de kradaj aranĝoj kun ĉiuj kvar niveloj, nestado kaj pli.

Jumbotron

Konstruu ĉirkaŭ la jumbotron kun navbar kaj kelkaj bazaj kradaj kolumnoj.

Mallarĝa jumbotron

Konstruu pli kutiman paĝon malvastigante la defaŭltan ujon kaj jumbotron.

Navbars en ago

Navbaro

Super baza ŝablono, kiu inkluzivas la navbaron kune kun iu plia enhavo.

Senmova supra navbaro

Superbaza ŝablono kun statika supra navbar kune kun iu plia enhavo.

Riparita navbaro

Superbaza ŝablono kun fiksa supra navbaro kune kun iu plia enhavo.

Propraj komponantoj

Kovrilo

Unupaĝa ŝablono por konstrui simplajn kaj belajn hejmpaĝojn.

Karuselo

Agordu la navbaron kaj karuselon, tiam aldonu kelkajn novajn komponantojn.

Blogo

Simpla dukolumna bloga aranĝo kun kutima navigado, kaplinio kaj tipo.

Panelo

Baza strukturo por administra panelo kun fiksa flanka kolumno kaj navigadbreto.

Ensaluta paĝo

Propra formo aranĝo kaj dezajno por simpla signo en formo.

Pravigita nav

Kreu kutiman navbaron kun pravigitaj ligiloj. Atentu! Ne tro amika Safaro.

Glueca piedlinio

Aligu piedlinion al la fundo de la vidfenestro kiam la enhavo estas pli mallonga ol ĝi.

Glueca piedlinio kun navbaro

Aligu piedlinion al la malsupro de la vidfenestro kun fiksa navbar supre.

Eksperimentoj

Ne-respondema Bootstrap

Facile malebligu la respondecon de Bootstrap laŭ niaj dokumentoj .

Eksterkanvaso

Konstruu ŝanĝeblan ekster-kanvasan navigadmenuon por uzi kun Bootstrap.

Iloj

Bootlint

Bootlint estas la oficiala Bootstrap HTML -linter- ilo. Ĝi aŭtomate kontrolas plurajn oftajn HTML-erarojn en retpaĝoj kiuj uzas Bootstrap en sufiĉe "vanila" maniero. La komponantoj/fenestaĵoj de Vanilla Bootstrap postulas, ke iliaj partoj de la DOM konformiĝu al certaj strukturoj. Bootlint kontrolas, ke okazoj de Bootstrap-komponentoj havas ĝuste strukturitan HTML-on. Konsideru aldoni Bootlint al via Bootstrap-reto-disvolva ilaro por ke neniu el la oftaj eraroj bremsi la disvolviĝon de via projekto.

Komunumo

Restu ĝisdatigita pri la disvolviĝo de Bootstrap kaj kontaktu la komunumon per ĉi tiuj helpemaj rimedoj.

• Legu kaj abonu al La Oficiala Bootstrap Blogo .
• Babilu kun kunuloj Bootstrappers uzante IRC en la irc.freenode.netservilo, en la ##bootstrap kanalo .
• Por helpo uzante Bootstrap, demandu ĉe StackOverflow uzante la etikedontwitter-bootstrap-3 .
• Programistoj devas uzi la ŝlosilvorton bootstrapĉe pakaĵoj, kiuj modifas aŭ aldonas al la funkcioj de Bootstrap dum distribuado per npm aŭ similaj liveraj mekanismoj por maksimuma malkovro.
• Trovu inspirajn ekzemplojn de homoj konstruantaj kun Bootstrap ĉe la Bootstrap Expo .

Vi ankaŭ povas sekvi @getbootstrap en Twitter por la plej novaj klaĉoj kaj mirindaj muzikfilmetoj.

Malebligado de respondeco

Bootstrap aŭtomate adaptas viajn paĝojn por diversaj ekrangrandoj. Jen kiel malŝalti ĉi tiun funkcion por ke via paĝo funkciu kiel ĉi tiu nerespondema ekzemplo .

Paŝoj por malŝalti paĝan respondecon

1. Forlasu la vidpunkton <meta>menciitan en la CSS-dokumentoj
2. Anstataŭigi la widthsur la .containerpor ĉiu krada nivelo kun ununura larĝo, ekzemple width: 970px !important;Certiĝu, ke ĉi tio venas post la defaŭlta Bootstrap CSS. Vi povas laŭvole eviti la !importantkun amaskomunikiloj demandoj aŭ iu elektilo-fu.
3. Se vi uzas navbarojn, forigu ĉiujn navbarojn kolapsantajn kaj vastigantajn kondutojn.
4. Por kradaj aranĝoj, uzu .col-xs-*klasojn aldone al aŭ anstataŭe de la mezaj/grandaj. Ne maltrankviliĝu, la ekstra-malgranda aparato krado skalas al ĉiuj rezolucioj.

Vi ankoraŭ bezonos Respond.js por IE8 (ĉar niaj amaskomunikiloj ankoraŭ estas tie kaj devas esti prilaboritaj). Ĉi tio malŝaltas la "poŝtelefonajn" aspektojn de Bootstrap.

Bootstrap ŝablono kun respondeco malebligita

Ni aplikis ĉi tiujn paŝojn al ekzemplo. Legu ĝian fontkodon por vidi la specifajn ŝanĝojn efektivigitajn.

Vidu ne-respondeman ekzemplon

Subteno por retumilo kaj aparato

Bootstrap estas konstruita por funkcii plej bone en la plej novaj labortablaj kaj moveblaj retumiloj, tio signifas, ke pli malnovaj retumiloj povus montri malsame stilitajn, kvankam plene funkciajn, bildigojn de iuj komponantoj.

Subtenataj retumiloj

Specife, ni subtenas la plej novajn versiojn de la sekvaj retumiloj kaj platformoj.

Alternativaj retumiloj kiuj uzas la lastan version de WebKit, Blink aŭ Gecko, ĉu rekte aŭ per la interreta API de la platformo, ne estas eksplicite subtenataj. Tamen, Bootstrap devus (en la plej multaj kazoj) montri kaj funkcii ĝuste en ĉi tiuj retumiloj ankaŭ. Pli specifaj subtenaj informoj estas provizitaj sube.

Poŝtelefonoj

Ĝenerale, Bootstrap subtenas la plej novajn versiojn de la defaŭltaj retumiloj de ĉiu ĉefa platformo. Notu, ke prokuriloj (kiel Opera Mini, la Turbo-reĝimo de Opera Mobile, UC Browser Mini, Amazon Silk) ne estas subtenataj.

Labortataj retumiloj

Simile, la plej novaj versioj de la plej multaj labortablaj retumiloj estas subtenataj.

En Vindozo, ni subtenas Internet Explorer 8-11 .

Por Fajrovulpo, aldone al la plej nova normala stabila eldono, ni ankaŭ subtenas la lastan Plilongigitan Subtenan Liberigon (ESR) version de Fajrovulpo.

Neoficiale, Bootstrap devus aspekti kaj konduti sufiĉe bone en Chromium kaj Chrome por Linukso, Firefox por Linukso, kaj Internet Explorer 7, same kiel Microsoft Edge, kvankam ili ne estas oficiale subtenataj.

Por listo de iuj el la retumiloj, kiujn Bootstrap devas trakti, vidu nian Muron de retumiloj .

Internet Explorer 8 kaj 9

Interreto Explorer 8 kaj 9 ankaŭ estas subtenataj, tamen bonvolu konscii, ke iuj CSS3-ecoj kaj HTML5-elementoj ne estas plene subtenataj de ĉi tiuj retumiloj. Krome, Interreta Esploristo 8 postulas la uzon de Respond.js por ebligi amaskomunikilajn demandojn.

Vizitu Ĉu mi povas uzi... por detaloj pri retumila subteno de CSS3 kaj HTML5-funkcioj.

Internet Explorer 8 kaj Respond.js

Atentu la sekvajn avertojn kiam vi uzas Respond.js en viaj evoluaj kaj produktadmedioj por Internet Explorer 8.

Respond.js kaj transdomajna CSS

Uzi Respond.js kun CSS gastigita sur malsama (sub)domajno (ekzemple, sur CDN) postulas iun aldonan agordon. Vidu la dokumentojn de Respond.js por detaloj.

Respond.js kajfile://

Pro retumiloj sekurecaj reguloj, Respond.js ne funkcias kun paĝoj rigardataj per la file://protokolo (kiel kiam oni malfermas lokan HTML-dosieron). Por testi respondemajn funkciojn en IE8, rigardu viajn paĝojn per HTTP(S). Vidu la dokumentojn de Respond.js por detaloj.

Respond.js kaj@import

Respond.js ne funkcias kun CSS, kiu estas referencita per @import. Aparte, iuj Drupalaj agordoj povas uzi @import. Vidu la dokumentojn de Respond.js por detaloj.

Interreta Esploristo 8 kaj skatolo-grandeco

IE8 ne plene subtenas box-sizing: border-box;kiam kombinite kun min-width, max-width, min-height, aŭ max-height. Tial, ekde v3.0.1, ni ne plu uzas max-widthsur .containers.

Internet Explorer 8 kaj @font-face

IE8 havas kelkajn problemojn kun @font-facekiam kombinite kun :before. Bootstrap uzas tiun kombinaĵon kun siaj Glifikonoj. Se paĝo estas konservita en kaŝmemoro kaj ŝarĝita sen la muso super la fenestro (t.e. premu la butonon de refreŝigo aŭ ŝargi ion en iframo) tiam la paĝo estas bildigita antaŭ ol la tiparo ŝargas. Ŝvebi super la paĝo (korpo) montros kelkajn el la ikonoj kaj ŝvebi super la ceteraj ikonoj montros ankaŭ tiujn. Vidu numeron #13863 por detaloj.

IE-Kongruaj reĝimoj

Bootstrap ne estas subtenata en la malnovaj kongruaj reĝimoj de Interreto Explorer. Por certigi, ke vi uzas la plej novan bildigan reĝimon por IE, konsideru inkluzivi la taŭgan <meta>etikedon en viaj paĝoj:

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

Konfirmu la dokumentreĝimon malfermante la elpurigajn ilojn: premu F12kaj kontrolu la "Dokumentreĝimon".

Ĉi tiu etikedo estas inkluzivita en la tuta dokumentado kaj ekzemploj de Bootstrap por certigi la plej bonan bildigon ebla en ĉiu subtenata versio de Internet Explorer.

Vidu ĉi tiun StackOverflow demandon por pliaj informoj.

Internet Explorer 10 en Windows 8 kaj Windows Phone 8

Interreta Esploristo 10 ne diferencas larĝon de aparato de larĝo de vidfenestro , kaj tiel ne taŭge aplikas la amaskomunikilajn demandojn en CSS de Bootstrap. Kutime vi simple aldonus rapidan fragmenton de CSS por ripari ĉi tion:

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

Tamen ĉi tio ne funkcias por aparatoj kun versioj de Windows Phone 8 pli malnovaj ol Ĝisdatigo 3 (alinome GDR3) , ĉar ĝi igas tiajn aparatojn montri plejparte labortablan vidon anstataŭ mallarĝan "telefonan" vidon. Por trakti ĉi tion, vi devos inkluzivi la sekvajn CSS kaj JavaScript por ĉirkaŭlabori la cimon .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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)
}

Por pliaj informoj kaj uzado-gvidlinioj, legu Windows Phone 8 kaj Device-Width .

Kiel atentigo, ni inkluzivas ĉi tion en la tuta dokumentado kaj ekzemploj de Bootstrap kiel pruvo.

Safara procento rondigo

La bildiga motoro de versioj de Safaro antaŭ v7.1 por OS X kaj Safaro por iOS v8.0 havis iujn problemojn kun la nombro da decimalaj lokoj uzataj en niaj .col-*-1kradaj klasoj. Do se vi havus 12 individuajn kradkolumnojn, vi rimarkus, ke ili mallonge kompare kun aliaj vicoj de kolumnoj. Krom ĝisdatigi Safari/iOS, vi havas kelkajn eblojn por solvoj:

• Aldonu .pull-rightal via lasta krada kolumno por akiri la malmolan dekstran vicigon
• Ŝanĝu viajn procentojn permane por akiri la perfektan rondigon por Safaro (pli malfacila ol la unua opcio)

Modaloj, navbaroj kaj virtualaj klavaroj

Superfluo kaj movo

Subteno por overflow: hiddenla <body>elemento estas sufiĉe limigita en iOS kaj Android. Tiucele, kiam vi rulumas preter la supro aŭ malsupro de modalo en iu el tiuj aparatoj retumiloj, la <body>enhavo komencos ruliĝi. Vidu Chrome-cimon #175502 (korektita en Chrome v40) kaj WebKit-cimon #153852 .

iOS tekstaj kampoj kaj movo

Ekde iOS 9.3, dum modalo estas malfermita, se la komenca tuŝo de rula gesto estas ene de la limo de teksta <input>aŭ <textarea>, la <body>enhavo sub la modalo estos rulita anstataŭ la modalo mem. Vidu WebKit-cimon #153856 .

Virtualaj klavaroj

Ankaŭ, notu, ke se vi uzas fiksan navbaron aŭ uzas enigojn ene de modalo, iOS havas bildigan cimon, kiu ne ĝisdatigas la pozicion de fiksaj elementoj kiam la virtuala klavaro estas ekigita. Kelkaj solvoj por ĉi tio inkluzivas transformi viajn elementojn al position: absoluteaŭ alvoki tempigilon pri fokuso por provi korekti la poziciigon permane. Ĉi tio ne estas pritraktata de Bootstrap, do dependas de vi decidi, kiu solvo estas plej bona por via aplikaĵo.

Navbar Dropdowns

La .dropdown-backdropelemento ne estas uzata en iOS en la navigado pro la komplekseco de z-indeksado. Tiel, por fermi falmenuojn en navbaroj, vi devas rekte alklaki la falmenuman elementon (aŭ ajnan alian elementon, kiu lanĉos klakan eventon en iOS ).

Retumilo zomi

Paĝa zomado neeviteble prezentas bildigajn artefaktojn en iuj komponantoj, kaj en Bootstrap kaj la resto de la reto. Depende de la problemo, ni eble povos ripari ĝin (serĉu unue kaj poste malfermu problemon se necese). Tamen ni emas ignori ĉi tiujn, ĉar ili ofte ne havas rektan solvon krom hakaj solvoj.

Glueca :hover/ :focussur poŝtelefono

Kvankam vera ŝvebado ne eblas sur la plej multaj tuŝekranoj, la plej multaj moveblaj retumiloj imitas ŝveban subtenon kaj faras :hover"gluiĝema". Alivorte, :hoverstiloj komencas aplikiĝi post frapetado de elemento kaj nur ĉesas apliki post kiam la uzanto frapetas iun alian elementon. Ĉi tio povas kaŭzi, ke la statoj de Bootstrap :hoverfariĝas nedezireble "algluitaj" en tiaj retumiloj. Iuj moveblaj retumiloj ankaŭ faras :focussimile gluecaj. Nuntempe ne ekzistas simpla solvo por ĉi tiuj problemoj krom forigi tute tiajn stilojn.

Presado

Eĉ en iuj modernaj retumiloj, presado povas esti stranga.

Aparte, ekde Chrome v32 kaj sendepende de marĝenaj agordoj, Chrome uzas larĝon de vidpunkto signife pli mallarĝa ol la fizika papera grandeco dum solvado de amaskomunikilaj demandoj dum presado de retpaĝo. Ĉi tio povas rezultigi, ke la ekstra-malgranda krado de Bootstrap estas neatendite aktivigita dum presado. Vidu numeron #12078 kaj Chrome-cimon #273306 por kelkaj detaloj. Sugestaj solvoj:

• Akceptu la ekstra-malgrandan kradon kaj certigu, ke via paĝo aspektas akceptebla sub ĝi.
• Agordu la valorojn de la @screen-*Malpli variabloj por ke via presila papero estu konsiderata pli granda ol ekstra-malgranda.
• Aldonu kutimajn amaskomunikilajn demandojn por ŝanĝi la kradgrandajn rompopunktojn nur por presitaj amaskomunikiloj.

Ankaŭ, ekde Safaro v8.0, fiks-larĝaj .containers povas igi Safaron uzi nekutime malgrandan tiparon dum presado. Vidu #14868 kaj WebKit-cimon #138192 por pliaj detaloj. Unu ebla solvo por ĉi tio estas aldoni la sekvan CSS:

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

Android-akcia retumilo

Ekstere de la skatolo, Android 4.1 (kaj eĉ kelkaj pli novaj eldonoj ŝajne) ekspediĝas kun la Foliumilo kiel la defaŭlta retumilo elektita (kontraste al Chrome). Bedaŭrinde, la Foliumilo havas multajn erarojn kaj nekongruojn kun CSS ĝenerale.

Elektu menuojn

Sur <select>elementoj, la Android-akcia retumilo ne montros la flankajn kontrolojn se estas border-radiuskaj/aŭ borderaplikata. (Vidu ĉi tiun StackOverflow demandon por detaloj.) Uzu la malsupran kodon fragmenton por forigi la ofendan CSS kaj prezenti la <select>kiel senstilan elementon en la Android-akcia retumilo. La uzantagento snufado evitas enmiksiĝon kun Chrome, Safari, kaj Mozilla retumiloj.

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

Ĉu vi volas vidi ekzemplon? Rigardu ĉi tiun JS Bin-demonstron.

Validigiloj

Por provizi la plej bonan eblan sperton al malnovaj kaj fuŝaj retumiloj, Bootstrap uzas CSS-retumilon en pluraj lokoj por celi specialajn CSS al certaj foliumilaj versioj por solvi cimojn en la retumiloj mem. Ĉi tiuj hakoj kompreneble kaŭzas CSS-validigilojn plendi ke ili estas nevalidaj. En kelkaj lokoj, ni ankaŭ uzas antaŭajn CSS-funkciojn, kiuj ankoraŭ ne estas plene normigitaj, sed ĉi tiuj estas uzataj nur por progresema plibonigo.

Ĉi tiuj validaj avertoj ne gravas en la praktiko ĉar la ne-haka parto de nia CSS plene validas kaj la hakaj partoj ne malhelpas la ĝustan funkciadon de la ne-haka parto, tial ni intence ignoras ĉi tiujn apartajn avertojn.

Niaj HTML-dokumentoj ankaŭ havas kelkajn bagatelajn kaj sensignifajn HTML-validigajn avertojn pro nia inkludo de solvo por certa Firefox-cimo .

Subteno de tria partio

Kvankam ni oficiale ne subtenas triajn kromaĵojn aŭ aldonaĵojn, ni proponas iujn utilajn konsilojn por helpi eviti eblajn problemojn en viaj projektoj.

Skatolo-grandeco

Iuj triapartneraj programaroj, inkluzive de Google Maps kaj Google Custom Search Engine, konfliktas kun Bootstrap pro * { box-sizing: border-box; }, regulo kiu igas ĝin tiel paddingne influas la finan kalkulitan larĝon de elemento. Lernu pli pri kestomodelo kaj grandeco ĉe CSS-Trukoj .

Depende de la kunteksto, vi povas anstataŭi laŭbezone (Opcio 1) aŭ restarigi la skatolon-grandecon por tutaj regionoj (Opcio 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();
}

Alirebleco

Bootstrap sekvas komunajn interretajn normojn kaj—kun minimuma ekstra peno—povas esti uzata por krei retejojn, kiuj estas alireblaj por tiuj, kiuj uzas AT .

Saltu navigacion

Se via navigado enhavas multajn ligilojn kaj venas antaŭ la ĉefa enhavo en la DOM, aldonu Skip to main contentligilon antaŭ la navigado (por simpla klarigo, vidu ĉi tiun artikolon de A11Y Project pri salti navigaciajn ligilojn ). Uzado de la .sr-onlyklaso videble kaŝos la skip-ligilon, kaj la .sr-only-focusableklaso certigos, ke la ligilo iĝas videbla post kiam fokusita (por vidantaj klavaruzantoj).

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

Nestitaj rubrikoj

Dum nestado de titoloj ( <h1>- <h6>), via ĉefa dokumentkapo devus esti <h1>. Postaj titoloj devus uzi logikan <h2>- <h6>tiel ke ekranlegiloj povu konstrui enhavtabelon por viaj paĝoj.

Lernu pli ĉe HTML CodeSniffer kaj AccessAbility de Penn State .

Kolora kontrasto

Nuntempe, kelkaj el la defaŭltaj kolorkombinaĵoj disponeblaj en Bootstrap (kiel ekzemple la diversaj stilitaj butonklasoj , kelkaj el la kodaj reliefaj koloroj uzataj por bazaj kodblokoj , la .bg-primary kunteksta fona helpklaso, kaj la defaŭlta ligkoloro kiam uzata sur blanka fono) havas malaltan kontrastan proporcion (sub la rekomendita proporcio de 4.5:1 ). Ĉi tio povas kaŭzi problemojn al uzantoj kun malvidiĝo aŭ kiuj estas kolorblindaj. Ĉi tiuj defaŭltaj koloroj eble devas esti modifitaj por pliigi sian kontraston kaj legeblecon.

Pliaj rimedoj

• "HTML Codesniffer" legomarko por identigi problemojn pri alirebleco
• La etendaĵo de Alirebleco-Programiloj de Chrome
• Kolora Kontrasto-Analizilo
• La A11Y-Projekto
• MDN-alirebleco-dokumentado

Oftaj Demandoj pri Licenco

Bootstrap estas publikigita sub la MIT-licenco kaj estas kopirajto 2019 Twitter. Boligita al pli malgrandaj pecoj, ĝi povas esti priskribita kun la sekvaj kondiĉoj.

Ĝi postulas vin:

• Konservu la permesilon kaj kopirajton en la CSS kaj JavaScript-dosieroj de Bootstrap kiam vi uzas ilin en viaj verkoj

Ĝi permesas vin:

• Libere elŝutu kaj uzu Bootstrap, tute aŭ parte, por personaj, privataj, kompanioj internaj aŭ komercaj celoj
• Uzu Bootstrap en pakaĵoj aŭ distribuaĵoj, kiujn vi kreas
• Modifi la fontkodon
• Donu sublicencon por modifi kaj distribui Bootstrap al triaj ne inkluzivitaj en la permesilo

Ĝi malpermesas al vi:

• Tenu la aŭtorojn kaj licencposedantojn respondecaj pri damaĝoj ĉar Bootstrap estas provizita sen garantio
• Tenu la kreintojn aŭ posedantojn de kopirajto de Bootstrap respondecaj
• Redistribuu ajnan pecon de Bootstrap sen taŭga atribuo
• Uzu ajnajn markojn posedatajn de Twitter iel ajn, kiuj povus konstati aŭ implici, ke Twitter apogas vian distribuadon
• Uzu ajnajn markojn posedatajn de Twitter iel ajn, kiuj povus konstati aŭ implici, ke vi kreis la koncernan programaron de Twitter

Ĝi ne postulas, ke vi:

• Enmetu la fonton de Bootstrap mem, aŭ de iuj ajn modifoj, kiujn vi eble faris al ĝi, en ajna redistribuo, kiun vi povas kunveni, kiu inkluzivas ĝin.
• Sendu ŝanĝojn, kiujn vi faras al Bootstrap, reen al la projekto Bootstrap (kvankam tiaj komentoj estas kuraĝigitaj)

La plena Bootstrap-licenco troviĝas en la projekta deponejo por pliaj informoj.

Tradukoj

Komunumaj membroj tradukis la dokumentaron de Bootstrap en diversajn lingvojn. Neniuj estas oficiale subtenataj kaj ili eble ne ĉiam estas ĝisdatigitaj.

• Bootstrap 中文文档 (ĉina)
• Bootstrap på Dansk (dana)
• Bootstrap en la franca (franca)
• Bootstrap auf Deutsch (germana)
• Bootstrap en la itala (itala)
• Bootstrap 한국어 (korea)
• Bootstrap em Português do Brazil (brazila portugala)
• Bootstrap по-русски (rusa)
• Bootstrap en la hispana (hispana)
• Türkçe Bootstrap (turka)
• Bootstrap українською (ukraina)
• Bootstrap bằng tiếng Việt (vjetnama)

Ni ne helpas organizi aŭ gastigi tradukojn, ni nur ligas al ili.

Ĉu vi finis novan aŭ pli bonan tradukon? Malfermu tiran peton por aldoni ĝin al nia listo.