Lae alla

Bootstrapil (praegu v3.3.7) on kiireks alustamiseks mõned lihtsad viisid, millest igaüks meeldib erinevale oskustasemele ja kasutusjuhtumile. Lugege läbi, et näha, mis sobib teie konkreetsetele vajadustele.

Bootstrap CDN

JsDelivr'i inimesed pakuvad lahkelt CDN-i tuge Bootstrapi CSS-i ja JavaScripti jaoks. Kasutage lihtsalt neid Bootstrap CDN-i linke.

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

Paigaldage Boweriga

Boweri abil saate installida ja hallata ka Bootstrapi Lessi, CSS-i, JavaScripti ja fonte :

$ bower install bootstrap

Paigaldage npm-iga

Bootstrapi saate installida ka npm abil :

$ npm install bootstrap@3

require('bootstrap')laadib kõik Bootstrapi jQuery pistikprogrammid jQuery objektile. bootstrapMoodul ise ei ekspordi midagi . Saate Bootstrapi jQuery pistikprogramme käsitsi laadida ükshaaval, laadides /js/*.jsfailid paketi kõrgeima taseme kataloogi alla.

Bootstrap package.jsonsisaldab mõningaid täiendavaid metaandmeid järgmiste klahvide all:

• less- Bootstrapi põhifaili vähem lähtefaili tee
• style- Bootstrapi minimeerimata CSS-i tee, mis on vaikesätete abil eelkompileeritud (ilma kohandamiseta)

Installige koos heliloojaga

Samuti saate installida ja hallata Bootstrapi Lessi, CSS-i, JavaScripti ja fonte kasutades Composerit :

$ composer require twbs/bootstrap

Less/Sass jaoks on vajalik automaatprefikser

Bootstrap kasutab CSS-i tarnija eesliidete käsitlemiseks automaatprefikserit . Kui kompileerite Bootstrapi selle Less/Sass-i allikast ja ei kasuta meie Gruntfile'i, peate automaatprefikseri ise oma ehitusprotsessi integreerima. Kui kasutate eelkompileeritud Bootstrapi või meie Gruntfile'i, ei pea te selle pärast muretsema, kuna Autoprefixer on juba meie Gruntfaili integreeritud.

Mis on kaasas

Bootstrap on allalaaditav kahel kujul, millest leiate järgmised kataloogid ja failid, mis rühmitavad loogiliselt ühiseid ressursse ja pakuvad nii kompileeritud kui ka minimeeritud variatsioone.

Eelkompileeritud Bootstrap

Pärast allalaadimist pakkige tihendatud kaust lahti, et näha (kompileeritud) Bootstrapi struktuuri. Näete midagi sellist:

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

See on Bootstrapi kõige elementaarsem vorm: eelkompileeritud failid kiireks sisselülitamiseks peaaegu igas veebiprojektis. Pakume kompileeritud CSS-i ja JS-i ( bootstrap.*), samuti kompileeritud ja minimeeritud CSS-i ja JS-i ( bootstrap.min.*). CSS -i lähtekaardid ( bootstrap.*.map) on saadaval kasutamiseks teatud brauserite arendajatööriistadega. Kaasatud on Glyphiconsi fondid, nagu ka valikuline Bootstrapi teema.

Bootstrapi lähtekood

Bootstrapi lähtekoodi allalaadimine sisaldab eelkompileeritud CSS-i, JavaScripti ja fondivarasid koos lähtekoodiga Less, JavaScripti ja dokumentatsiooniga. Täpsemalt sisaldab see järgmist ja palju muud:

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

less/, js/ja on meie CSS- i fonts/, JS-i ja ikoonifondide lähtekood (vastavalt). Kaust dist/sisaldab kõike, mis on loetletud ülaltoodud eelkompileeritud allalaadimise jaotises. Kaust sisaldab meie dokumentatsiooni ja Bootstrapi kasutamise docs/lähtekoodi . examples/Peale selle pakuvad kõik muud kaasatud failid pakettide, litsentsiteabe ja arenduse tuge.

CSS-i ja JavaScripti kompileerimine

Bootstrap kasutab oma ehitussüsteemis Grunti koos mugavate meetodite abil raamistikuga töötamiseks. Nii kompileerime oma koodi, käitame teste ja palju muud.

Grunti installimine

Grunti installimiseks peate esmalt alla laadima ja installima faili node.js (mis sisaldab npm-i). npm tähistab node pakendatud mooduleid ja on viis arendussõltuvuste haldamiseks node.js-i kaudu.

1. Installige grunt-cliglobaalselt rakendusega npm install -g grunt-cli.
2. Liikuge juurkataloogi /bootstrap/ja seejärel käivitage npm install. npm vaatab package.jsonfaili ja installib automaatselt seal loetletud vajalikud kohalikud sõltuvused.

Kui olete lõpetanud, saate käivitada erinevaid käsurealt pakutavaid Grunti käske.

Saadaolevad Grunti käsud

grunt dist(Lihtsalt kompileerige CSS ja JavaScript)

Taasgenereerib /dist/kataloogi koostatud ja minimeeritud CSS- ja JavaScript-failidega. Bootstrapi kasutajana on see tavaliselt käsk, mida soovite.

grunt watch(Vaata)

Jälgib vähem lähtefaile ja kompileerib need automaatselt uuesti CSS-i, kui muudatuse salvestate.

grunt test(Käivita testid)

Käivitab JSHinti ja QUniti testid peata rakenduses PhantomJS .

grunt docs(Dokumendivarade koostamine ja testimine)

Ehitab ja testib CSS-i, JavaScripti ja muid varasid, mida kasutatakse dokumentatsiooni kohalikul käitamisel bundle exec jekyll serve.

grunt(Ehitage absoluutselt kõike ja käivitage testid)

Kompileerib ja minimeerib CSS-i ja JavaScripti, loob dokumentatsiooniveebisaidi, käitab dokumentide suhtes HTML5-validaatorit, taasloob kohandaja varad ja palju muud. Nõuab Jekylli . Tavaliselt on see vajalik ainult siis, kui häkkite Bootstrapi ennast.

Veaotsing

Kui teil tekib probleeme sõltuvuste installimisel või Grunti käskude käivitamisel, kustutage esmalt /node_modules/npm-i loodud kataloog. Seejärel käivitage uuesti npm install.

Põhimall

Alustage selle lihtsa HTML-i malliga või muutke neid näiteid . Loodame, et kohandate meie malle ja näiteid, kohandades neid vastavalt oma vajadustele.

Kopeerige allolev HTML, et alustada tööd minimaalse Bootstrapi dokumendiga.

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

Näited

Toetage ülaltoodud põhimallile Bootstrapi paljude komponentidega. Soovitame teil Bootstrapi kohandada ja kohandada vastavalt teie individuaalse projekti vajadustele.

Hankige iga alloleva näite lähtekood, laadides alla Bootstrapi hoidla . Näiteid leiate docs/examples/kataloogist.

Raamistiku kasutamine

Stardi mall

Mitte midagi peale põhitõde: kompileeritud CSS ja JavaScript koos konteineriga.

Bootstrapi teema

Visuaalselt täiustatud kogemuse saamiseks laadige valikuline Bootstrapi teema.

Võred

Mitu näidet ruudustiku paigutusest kõigi nelja tasemega, pesastamine ja palju muud.

Jumbotron

Ehitage ümber jumbotroni navigeerimisriba ja mõne põhivõrgu veergu abil.

Kitsas jumbotron

Looge kohandatud leht, kitsendades vaikekonteinerit ja jumbotronit.

Navbarid töös

Navibar

Ülimalt lihtne mall, mis sisaldab navigeerimisriba koos täiendava sisuga.

Staatiline ülemine navigeerimisriba

Ülimalt lihtne mall staatilise ülemise navigeerimisribaga ja täiendava sisuga.

Parandatud navigeerimisriba

Ülimalt lihtne mall fikseeritud ülemise navigeerimisribaga ja täiendava sisuga.

Kohandatud komponendid

Kaas

Üheleheline mall lihtsate ja ilusate kodulehtede loomiseks.

Karussell

Kohandage navigeerimisriba ja karusselli ning lisage seejärel mõned uued komponendid.

Blogi

Lihtne kaheveeruline ajaveebi paigutus kohandatud navigeerimise, päise ja tüübiga.

Armatuurlaud

Fikseeritud külgriba ja navigeerimisribaga administraatori armatuurlaua põhistruktuur.

Sisselogimisleht

Kohandatud vormipaigutus ja kujundus lihtsa märgivormi jaoks.

Põhjendatud nav

Looge kohandatud navigeerimisriba koos õigustatud linkidega. Pea püsti! Mitte liiga Safari sõbralik.

Kleepuv jalus

Kui sisu on sellest lühem, kinnitage jalus vaateava alaossa.

Kleepuv jalus koos navigeerimisribaga

Kinnitage jalus vaateava allserva, mille ülaosas on fikseeritud navigeerimisriba.

Eksperimendid

Mittereageeriv Bootstrap

Keelake Bootstrapi reageerimisvõime meie dokumentide järgi hõlpsalt välja .

Lõuendiväline

Koostage Bootstrapiga kasutamiseks lülitatav lõuendiväline navigeerimismenüü.

Tööriistad

Bootlint

Bootlint on ametlik Bootstrap HTML-i linteritööriist . See kontrollib automaatselt mitmeid levinud HTML-vigu veebilehtedel, mis kasutavad Bootstrapi üsna "vanilje" viisil. Vanilla Bootstrapi komponendid/vidinad nõuavad, et nende DOM-i osad vastaksid teatud struktuuridele. Bootlint kontrollib, kas Bootstrapi komponentide eksemplaridel on õigesti struktureeritud HTML. Kaaluge Bootlinti lisamist oma Bootstrapi veebiarenduse tööriistaahelasse, et ükski levinud viga ei aeglustaks teie projekti arengut.

kogukond

Olge Bootstrapi arenguga kursis ja võtke nende kasulike ressursside abil ühendust kogukonnaga.

• Lugege ametlikku Bootstrapi ajaveebi ja tellige see .
• Vestelge teiste Bootstrapperitega, kasutades IRC-d irc.freenode.netserveris ##bootstrap kanalis .
• Bootstrapi kasutamisel abi saamiseks küsige StackOverflow'st, kasutades silditwitter-bootstrap-3 .
• Arendajad peaksid kasutama märksõna bootstrappakettidel, mis muudavad või täiendavad Bootstrapi funktsionaalsust npm - i või sarnaste edastamismehhanismide kaudu levitamisel, et tagada maksimaalne leitavus.
• Bootstrapi näituselt leiate inspireerivaid näiteid inimestest, kes Bootstrapi abil ehitavad .

Viimaseid kuulujutte ja ägedaid muusikavideoid saate jälgida ka Twitteris @getbootstrap .

Reageerimisvõime keelamine

Bootstrap kohandab teie lehti automaatselt erinevate ekraanisuurustega. Siit saate teada, kuidas seda funktsiooni keelata, et teie leht töötaks nagu see mittereageeriva näite puhul .

Lehe reageerimise keelamise juhised

1. Jätke CSS-i dokumentides<meta> mainitud vaateava välja
2. Alistage widthiga .containerruudustiku tasandi väärtus ühe laiusega, näiteks width: 970px !important;Veenduge, et see tuleb pärast vaikebootstrapi CSS-i. Saate valikuliselt vältida !importantmeediumipäringute või mõne selektor-fu-ga.
3. Kui kasutate navigeerimisribasid, eemaldage kõik navigeerimisriba ahendamis- ja laienemiskäitumised.
4. Ruudustiku paigutuste puhul kasutage .col-xs-*klasside kõrval või nende asemel keskmised/suured. Ärge muretsege, eriti väike seadme ruudustik ulatub kõigi eraldusvõimeteni.

Vajate endiselt faili Respond.js IE8 jaoks (kuna meie meediapäringud on endiselt alles ja neid tuleb töödelda). See keelab Bootstrapi "mobiilisaidi" aspektid.

Alglaadimismall, mille reageerimisvõime on keelatud

Rakendasime need sammud näite jaoks. Lugege selle lähtekoodi, et näha konkreetseid rakendatud muudatusi.

Vaadake mittereageerivat näidet

Brauseri ja seadme tugi

Bootstrap on loodud töötama kõige paremini uusimates lauaarvutite ja mobiilibrauserites, mis tähendab, et vanemad brauserid võivad kuvada teatud komponentide erineva stiiliga, kuigi täielikult toimivaid renderdusi.

Toetatud brauserid

Täpsemalt toetame järgmiste brauserite ja platvormide uusimaid versioone .

Alternatiivseid brausereid, mis kasutavad WebKiti, Blinki või Gecko uusimat versiooni kas otse või platvormi veebivaate API kaudu, ei toetata. Kuid Bootstrap peaks (enamikul juhtudel) kuvama ja toimima õigesti ka nendes brauserites. Täpsem tugiteave on toodud allpool.

Mobiilseadmed

Üldiselt toetab Bootstrap iga suurema platvormi vaikebrauserite uusimaid versioone. Pange tähele, et puhverserveri brausereid (nt Opera Mini, Opera Mobile'i Turbo režiim, UC Browser Mini, Amazon Silk) ei toetata.

Lauaarvuti brauserid

Samamoodi toetatakse enamiku lauaarvuti brauserite uusimaid versioone.

Windowsis toetame Internet Explorer 8–11 .

Firefoxi puhul toetame lisaks uusimale tavalisele stabiilsele versioonile ka Firefoxi uusimat laiendatud toe väljalaske (ESR) versiooni.

Mitteametlikult peaks Bootstrap Chromiumis ja Chrome'is Linuxile, Firefoxis Linuxile ja Internet Explorer 7-le ning Microsoft Edge'ile piisavalt hästi välja nägema ja käituma, kuigi neid ametlikult ei toetata.

Mõne brauseri vigade loendi vaatamiseks, millega Bootstrap peab võitlema, vaadake meie brauseri vigade seina .

Internet Explorer 8 ja 9

Toetatud on ka Internet Explorer 8 ja 9, kuid pidage meeles, et need brauserid ei toeta täielikult mõnda CSS3 atribuuti ja HTML5 elementi. Lisaks nõuab Internet Explorer 8 meediumipäringute toe lubamiseks faili Respond.js .

CSS3 ja HTML5 funktsioonide brauseri toe kohta lisateabe saamiseks külastage lehte Kas ma saan kasutada....

Internet Explorer 8 ja Respond.js

Rakenduse Respond.js kasutamisel Internet Explorer 8 arendus- ja tootmiskeskkondades pidage meeles järgmisi hoiatusi.

Respond.js ja domeenidevaheline CSS

Respond.js-i kasutamine erineval (alam)domeenil (näiteks CDN-il) hostitud CSS-iga nõuab täiendavat seadistust. Üksikasju vaadake dokumentidest Respond.js .

Respond.js jafile://

Brauseri turvareeglite tõttu ei tööta Respond.js file://protokolli kaudu vaadatud lehtedega (nt kohaliku HTML-faili avamisel). IE8 reageerivate funktsioonide testimiseks vaadake oma lehti HTTP(S) kaudu. Üksikasju vaadake dokumentidest Respond.js .

Respond.js ja@import

Respond.js ei tööta CSS-iga, millele viidatakse @import. Eelkõige on teada, et mõned Drupali konfiguratsioonid kasutavad @import. Üksikasju vaadake dokumentidest Respond.js .

Internet Explorer 8 ja karbi suuruse muutmine

IE8 ei toeta täielikult , box-sizing: border-box;kui see on kombineeritud min-width, max-width, min-heightvõi max-height. Sel põhjusel ei kasuta me alates versioonist 3.0.1 enam max-widths .container.

Internet Explorer 8 ja @font-face

IE8-l on mõningaid probleeme, @font-facekui seda kombineerida :before. Bootstrap kasutab seda kombinatsiooni oma Glyphiconidega. Kui leht on vahemällu salvestatud ja laaditakse ilma hiirega akna kohal (st vajutada värskendamisnuppu või laadida midagi iframe'is), renderdatakse leht enne fondi laadimist. Kui hõljute kursorit lehe (keha) kohal, kuvatakse mõned ikoonid ja ülejäänud ikoonide kohal kuvatakse ka need. Üksikasju vaadake numbrist 13863 .

IE ühilduvusrežiimid

Bootstrapi ei toetata Internet Exploreri vanades ühilduvusrežiimides. Et olla kindel, et kasutate IE jaoks uusimat renderdusrežiimi, kaaluge <meta>oma lehtedele sobiva märgendi lisamist.

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

Kinnitage dokumendirežiim, avades silumistööriistad: vajutage F12ja märkige ruut "Dokumendirežiim".

See silt sisaldub kogu Bootstrapi dokumentatsioonis ja näidetes, et tagada parim võimalik renderdamine igas Internet Exploreri toetatud versioonis.

Lisateabe saamiseks vaadake seda StackOverflow küsimust .

Internet Explorer 10 opsüsteemides Windows 8 ja Windows Phone 8

Internet Explorer 10 ei erista seadme laiust vaateava laiusest ega rakenda seetõttu Bootstrapi CSS-is meediumipäringuid õigesti . Tavaliselt lisate selle parandamiseks lihtsalt kiire CSS-i väljavõtte:

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

See ei tööta aga seadmete puhul, mis kasutavad Windows Phone 8 versiooni, mis on vanemad kui värskendus 3 (teise nimega GDR3) , kuna see põhjustab sellistes seadmetes enamasti töölauavaate kuvamise kitsa telefonivaate asemel. Selle probleemi lahendamiseks peate vea vältimiseks lisama järgmised CSS-i ja JavaScripti .

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

Lisateabe ja kasutusjuhiste saamiseks lugege Windows Phone 8 ja Device-Width .

Etteruttavalt lisame selle demonstratsioonina kogu Bootstrapi dokumentatsiooni ja näidetesse.

Safari protsendi ümardamine

Safari versioonidele 7.1 OS X jaoks ja Safari iOS v8.0 jaoks varasemate versioonide renderdusmootoril oli probleeme meie .col-*-1ruudustikuklassides kasutatavate kümnendkohtade arvuga. Nii et kui teil oleks 12 eraldi ruudustiku veergu, märkaksite, et need on teiste veergude ridadega võrreldes lühikesed. Lisaks Safari/iOS-i uuendamisele on teil mõned lahendused:

• .pull-rightTugeva parempoolse joonduse saamiseks lisage oma viimasesse ruudustiku veergu
• Kohandage oma protsente käsitsi, et saada Safari jaoks täiuslik ümardamine (keerulisem kui esimene valik)

Modaalid, navigeerimisribad ja virtuaalsed klaviatuurid

Ülevool ja kerimine

Elemendi tugi overflow: hiddenon <body>iOS-is ja Androidis üsna piiratud. <body>Sel eesmärgil hakkab sisu kerima, kui kerite mõlema seadme brauseris modaali üla- või alaosast mööda . Vaadake Chrome'i viga nr 175502 (parandatud versioonis Chrome v40) ja WebKiti viga nr 153852 .

iOS-i tekstiväljad ja kerimine

<input>Alates iOS 9.3-st, kui modaal on avatud, siis kui kerimisliigutuse esmane puudutus jääb teksti või i piiridesse, keritakse modaali enda asemel modaali all olevat sisu <textarea>. <body>Vaadake WebKiti viga nr 153856 .

Virtuaalsed klaviatuurid

Samuti pange tähele, et kui kasutate fikseeritud navigeerimisriba või modaalisiseseid sisendeid, on iOS-is renderdusviga, mis ei värskenda virtuaalse klaviatuuri käivitamisel fikseeritud elementide asukohta. Mõned lahendused selle jaoks hõlmavad elementide teisendamist position: absolutevõi fookuse taimeri käivitamist, et proovida positsioneerimist käsitsi parandada. Sellega ei tegele Bootstrap, seega on teie enda otsustada, milline lahendus on teie rakenduse jaoks parim.

Navibari rippmenüüd

Seda .dropdown-backdropelementi ei kasutata iOS-i navigeerimisrežiimis z-indekseerimise keerukuse tõttu. Seega peate navigeerimisribade rippmenüüde sulgemiseks klõpsama otse rippmenüü elemendil (või mis tahes muul elemendil, mis käivitab iOS-is klikisündmuse ).

Brauseri suumimine

Lehekülje suumimisel esineb nii Bootstrapis kui ka ülejäänud veebis paratamatult mõnes komponendis renderdusartefakte. Olenevalt probleemist saame selle võib-olla parandada (esmalt otsige ja seejärel vajadusel avage probleem). Siiski kipume neid ignoreerima, kuna neil pole sageli muud otsest lahendust kui häkkivad lahendused.

Kleepuv :hover/ :focusmobiilis

Kuigi tegelik hõljumine pole enamikul puuteekraanidel võimalik, jäljendab enamik mobiilibrausereid hõljumise tuge ja muudab selle :hover"kleepuvaks". Teisisõnu, :hoverstiilide rakendamine algab pärast elemendi puudutamist ja lõpetatakse rakendamine alles pärast seda, kui kasutaja puudutab mõnda muud elementi. See võib põhjustada Bootstrapi :hoverolekute soovimatut "kinnijäämist" sellistes brauserites. Mõned mobiilibrauserid muudavad ka :focussarnaselt kleepuvaks. Praegu pole nendele probleemidele muud lihtsat lahendust kui selliste stiilide täielik eemaldamine.

Trükkimine

Isegi mõnes kaasaegses brauseris võib printimine olla omapärane.

Täpsemalt, alates Chrome'i versioonist 32 ja veeriseadistustest olenemata kasutab Chrome veebilehe printimise ajal meediumipäringute lahendamisel füüsilisest paberiformaadist oluliselt väiksemat vaateava laiust. Selle tulemusena võib Bootstrapi eriti väike ruudustik printimisel ootamatult aktiveeruda. Üksikasju leiate numbrist 12078 ja Chrome'i veast 273306 . Soovitatavad lahendused:

• Võtke omaks eriti väike ruudustik ja veenduge, et teie leht näeks selle all vastuvõetav välja.
• Kohandage @screen-*muutujate Vähem väärtusi nii, et teie printeripaberit peetaks suuremaks kui eriti väikeseks.
• Lisage kohandatud kandjapäringud, et muuta ainult prindikandjate ruudustiku suuruse katkestuspunkte.

Lisaks võivad alates Safari v8.0-st fikseeritud laiusega .containers-d põhjustada Safari printimisel ebatavaliselt väikese fondi suuruse kasutamise. Vaadake lisateavet #14868 ja WebKiti viga #138192 . Üks võimalik lahendus sellele on järgmise CSS-i lisamine:

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

Androidi aktsiabrauser

Karbist väljas on Android 4.1 (ja ilmselt isegi mõned uuemad väljaanded) koos brauserirakendusega, mis on valitud vaikeveebibrauser (erinevalt Chrome'ist). Kahjuks on brauserirakendusel üldiselt CSS-iga palju vigu ja ebakõlasid.

Valige menüüd

<select>Elementide puhul ei kuva Androidi aktsiabrauser külgmisi juhtnuppe, kui need on ja border-radius/või borderrakendatud. (Üksikasjade saamiseks vaadake seda StackOverflow küsimust .) Kasutage allolevat koodilõiku, et eemaldada rikkuv CSS ja renderdada <select>Androidi aktsiabrauseris stiilita elemendina. Kasutajaagendi nuusutamine väldib häireid Chrome'i, Safari ja Mozilla brauserites.

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

Kas soovite näidet näha? Vaadake seda JS Bin'i demot.

Validaatorid

Parima võimaliku kasutuskogemuse pakkumiseks vanadele ja lollakatele brauseritele kasutab Bootstrap mitmes kohas CSS-i brauseri häkke , et sihtida teatud brauseriversioonidele spetsiaalset CSS-i, et vältida brauserite endi vigu. Need häkkimised põhjustavad arusaadavalt CSS-i valideerijatel kaebusi, et need on kehtetud. Mõnes kohas kasutame ka tipptasemel CSS-i funktsioone, mis pole veel täielikult standarditud, kuid neid kasutatakse ainult järkjärguliseks täiustamiseks.

Need valideerimishoiatused ei oma praktikas tähtsust, kuna meie CSS-i mittehäkkiv osa valideerub täielikult ja häkkivad osad ei sega mittehäkkiva osa nõuetekohast toimimist, mistõttu me neid konkreetseid hoiatusi teadlikult eirame.

Meie HTML-dokumentidel on samuti mõned triviaalsed ja ebaolulised HTML-i valideerimise hoiatused, kuna oleme lisanud lahenduse teatud Firefoxi veale .

Kolmanda osapoole tugi

Kuigi me ei toeta ametlikult ühtegi kolmanda osapoole pistikprogrammi ega lisandmoodulit, anname siiski kasulikke nõuandeid, mis aitavad vältida teie projektides tekkivaid võimalikke probleeme.

Karbi suuruse määramine

Mõni kolmanda osapoole tarkvara, sealhulgas Google Maps ja Google'i kohandatud otsingumootor, on Bootstrapiga vastuolus, kuna * { box-sizing: border-box; }see reegel paddingei mõjuta elemendi lõplikku arvutatud laiust. Lisateavet kasti mudeli ja suuruse kohta leiate veebisaidilt CSS Tricks .

Sõltuvalt kontekstist saate vajaduse korral alistada (1. valik) või lähtestada tervete piirkondade kasti suuruse (valik 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();
}

Juurdepääsetavus

Bootstrap järgib üldlevinud veebistandardeid ja seda saab kasutada minimaalse lisapingutusega saitide loomiseks, millele on juurdepääs AT -d kasutavatele kasutajatele .

Jäta navigeerimine vahele

Kui teie navigeerimine sisaldab palju linke ja asub DOM-is enne põhisisu, lisage Skip to main contentlink enne navigeerimist (lihtsa selgituse saamiseks vaadake seda A11Y projekti artiklit navigeerimislinkide vahelejätmise kohta ). Klassi kasutamine .sr-onlypeidab visuaalselt vahelejätmise lingi ja .sr-only-focusableklass tagab, et link muutub fookustamisel nähtavaks (nägevatele klaviatuurikasutajatele).

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

Pesastatud pealkirjad

<h1>Pealkirjade ( - ) pesastamisel <h6>peaks teie esmane dokumendi päis olema <h1>. Järgnevad pealkirjad peaksid loogiliselt ära kasutama <h2>– <h6>nii, et ekraanilugejad saaksid koostada teie lehtedele sisukorra.

Lisateavet leiate veebisaidilt HTML CodeSniffer ja Penn State's AccessAbility .

Värvi kontrast

Praegu on mõned Bootstrapis saadaolevad vaikevärvikombinatsioonid (nt erinevad stiiliga nupuklassid, mõned põhikoodiplokkides kasutatavad koodi esiletõstmise värvid , .bg-primary kontekstipõhine taustaabiklass ja lingi vaikevärv, kui seda kasutatakse valgel taustal) neil on madal kontrastsuse suhe (alla soovitatava suhte 4,5:1 ). See võib halva nägemisega või värvipimedatele kasutajatele probleeme tekitada. Neid vaikevärve võib olla vaja muuta, et suurendada nende kontrasti ja loetavust.

Lisaressursid

• Järjehoidja "HTML Codesniffer" juurdepääsetavuse probleemide tuvastamiseks
• Chrome'i juurdepääsetavuse arendaja tööriistade laiendus
• Värvi kontrasti analüsaator
• Projekt A11Y
• MDN-i juurdepääsetavuse dokumentatsioon

Litsentsi KKK

Bootstrap vabastatakse MIT-i litsentsi alusel ja selle autoriõigused kuuluvad 2016. aasta Twitterisse. Väiksemateks tükkideks keedetuna saab seda kirjeldada järgmiste tingimustega.

See nõuab teilt:

• Hoidke Bootstrapi CSS- ja JavaScript-failides sisalduv litsents ja autoriõiguse teatis alles siis, kui kasutate neid oma teostes

See võimaldab teil:

• Saate Bootstrapi täielikult või osaliselt alla laadida ja kasutada isiklikel, era-, ettevõttesisesetel või ärilistel eesmärkidel
• Kasutage Bootstrapi oma loodud pakettides või distributsioonides
• Muutke lähtekoodi
• Andke all-litsents Bootstrapi muutmiseks ja levitamiseks kolmandatele osapooltele, mida litsents ei sisalda

See keelab teil:

• Autorid ja litsentsiomanikud vastutavad kahjude eest, kuna Bootstrapile antakse garantiid
• Hoidke Bootstrapi loojaid või autoriõiguste omanikke vastutavaks
• Levitage mis tahes Bootstrapi tükki ilma nõuetekohase omistamiseta
• Kasutage Twitterile kuuluvaid märke mis tahes viisil, mis võib väita või vihjata, et Twitter toetab teie levitamist
• Kasutage Twitterile kuuluvaid märke mis tahes viisil, mis võib väita või vihjata, et lõite kõnealuse Twitteri tarkvara

See ei nõua teilt:

• Kaasake Bootstrapi enda allikas või mis tahes muudatused, mille olete selles teinud, igasse seda sisaldavasse ümberjaotusse, mille võite koostada
• Esitage Bootstrapis tehtud muudatused tagasi Bootstrapi projekti (kuigi selline tagasiside on soovitatav)

Täielik Bootstrapi litsents asub lisateabe saamiseks projektihoidlas .

Tõlked

Kogukonna liikmed on tõlkinud Bootstrapi dokumentatsiooni erinevatesse keeltesse. Ühtegi neist ei toetata ametlikult ja need ei pruugi alati olla ajakohased.

• Bootstrap 中文文档 (hiina)
• Bootstrap 3 中文手冊 (hiina (traditsiooniline))
• Bootstrap på Dansk (taani keel)
• Bootstrap en Français (prantsuse keel)
• Bootstrap auf Deutsch (saksa)
• Bootstrap itaalia keeles (itaalia)
• Bootstrap 한국어 (korea)
• Bootstrap em Português do Brasil (Brasiilia portugali keel)
• Bootstrap по-русски (vene)
• Bootstrap en Español (hispaania)
• Türkçe Bootstrap (türgi keel)
• Bootstrap українською (ukraina)
• Bootstrap bằng tiếng Việt (vietnami)

Me ei aita tõlkeid korraldada ega majutada, vaid lingime neile lihtsalt.

Kas olete valmis saanud uue või parema tõlke? Avage tõmbetaotlus, et see meie loendisse lisada.