Sækja

Bootstrap (nú v3.3.7) hefur nokkrar auðveldar leiðir til að byrja fljótt, hver og einn höfðar til mismunandi hæfileikastigs og notkunartilvika. Lestu í gegnum til að sjá hvað hentar þínum þörfum.

Bootstrap CDN

Fólkið hjá jsDelivr veitir náðarsamlega CDN stuðning fyrir Bootstrap CSS og JavaScript. Notaðu bara þessa Bootstrap CDN tengla.

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

Settu upp með Bower

Þú getur líka sett upp og stjórnað Bootstrap's Less, CSS, JavaScript og leturgerð með því að nota Bower :

$ bower install bootstrap

Settu upp með npm

Þú getur líka sett upp Bootstrap með því að nota npm :

$ npm install bootstrap@3

require('bootstrap')mun hlaða öllum jQuery viðbótum Bootstrap á jQuery hlutinn. Einingin bootstrapsjálf flytur ekki neitt út. Þú getur hlaðið jQuery viðbætur Bootstrap's handvirkt fyrir sig með því að hlaða /js/*.jsskránum undir efstu möppu pakkans.

Bootstrap's package.jsoninniheldur nokkur viðbótarlýsigögn undir eftirfarandi lyklum:

• less- slóð að helstu Less frumskrá Bootstrap
• style- slóð að óminnkuðu CSS Bootstrap sem hefur verið forsamlað með sjálfgefnum stillingum (engin sérstilling)

Settu upp með Composer

Þú getur líka sett upp og stjórnað Bootstrap's Less, CSS, JavaScript og leturgerð með því að nota Composer :

$ composer require twbs/bootstrap

Autoprefixer krafist fyrir Less/Sass

Bootstrap notar Autoprefixer til að takast á við forskeyti CSS söluaðila . Ef þú ert að setja saman Bootstrap úr Less/Sass upptökum og notar ekki Gruntfile okkar, þarftu sjálfur að samþætta Autoprefixer inn í smíðaferlið þitt. Ef þú ert að nota forsamsett Bootstrap eða nota Gruntfile okkar þarftu ekki að hafa áhyggjur af þessu vegna þess að Autoprefixer er þegar samþætt í Gruntfile okkar.

Hvað er innifalið

Bootstrap er hægt að hlaða niður í tvennu formi, þar sem þú finnur eftirfarandi möppur og skrár, sem flokkar sameiginlegar auðlindir á rökréttan hátt og býður upp á bæði samansett og smækkuð afbrigði.

Forsamsett Bootstrap

Þegar það hefur verið hlaðið niður, pakkaðu niður þjöppuðu möppunni til að sjá uppbyggingu (samsetta) Bootstrap. Þú munt sjá eitthvað eins og þetta:

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

Þetta er undirstöðuform Bootstrap: forsamlaðar skrár fyrir skjóta notkun í næstum hvaða vefverkefni sem er. Við bjóðum upp á samansett CSS og JS ( bootstrap.*), sem og samansett og smættað CSS og JS ( bootstrap.min.*). CSS upprunakort ( bootstrap.*.map) eru fáanleg til notkunar með þróunarverkfærum ákveðinna vafra. Leturgerðir frá Glyphicons eru innifaldar, sem og valfrjálsa Bootstrap þema.

Bootstrap frumkóði

Bootstrap frumkóðaniðurhalið inniheldur forsamlaðar CSS, JavaScript og letureignir, ásamt uppruna minna, JavaScript og skjölum. Nánar tiltekið inniheldur það eftirfarandi og fleira:

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

, less/, js/og fonts/eru frumkóði fyrir CSS, JS og táknleturgerðina okkar (í sömu röð). Mappan dist/inniheldur allt sem skráð er í forsamsettum niðurhalshlutanum hér að ofan. Mappan docs/inniheldur frumkóðann fyrir skjölin okkar og examples/Bootstrap notkun. Fyrir utan það veitir allar aðrar skrár stuðning fyrir pakka, leyfisupplýsingar og þróun.

Að setja saman CSS og JavaScript

Bootstrap notar Grunt fyrir smíðakerfi sitt, með þægilegum aðferðum til að vinna með rammanum. Það er hvernig við tökum saman kóðann okkar, keyrum próf og fleira.

Að setja upp Grunt

Til að setja upp Grunt verður þú fyrst að hlaða niður og setja upp node.js (sem inniheldur npm). npm stendur fyrir node packaged modules og er leið til að stjórna þróunarfíkn í gegnum node.js.

1. Settu upp grunt-cliá heimsvísu með npm install -g grunt-cli.
2. Farðu í rótarskrána /bootstrap/og keyrðu síðan npm install. npm mun skoða package.jsonskrána og setja sjálfkrafa upp nauðsynlegar staðbundnar ósjálfstæði sem eru skráðar þar.

Þegar því er lokið muntu geta keyrt hinar ýmsu Grunt skipanir sem veittar eru frá skipanalínunni.

Tiltækar Grunt skipanir

grunt dist(Semdu bara saman CSS og JavaScript)

Endurgerir /dist/möppuna með samansettum og smækkuðum CSS og JavaScript skrám. Sem Bootstrap notandi er þetta venjulega skipunin sem þú vilt.

grunt watch(Horfa)

Horfir á Less upprunaskrárnar og safnar þeim sjálfkrafa saman í CSS þegar þú vistar breytingu.

grunt test(Hlaupa próf)

Keyrir JSHint og keyrir QUnit prófin hauslaust í PhantomJS .

grunt docs(Byggðu og prófaðu skjölin)

Byggir og prófar CSS, JavaScript og aðrar eignir sem eru notaðar þegar skjölin eru keyrð á staðnum í gegnum bundle exec jekyll serve.

grunt(Bygðu nákvæmlega allt og keyrðu próf)

Tekur saman og minnkar CSS og JavaScript, byggir skjalavefsíðuna, keyrir HTML5 löggildingartækið gegn skjölunum, endurskapar Customizer eignirnar og fleira. Krefst Jekyll . Venjulega aðeins nauðsynlegt ef þú ert að hakka á Bootstrap sjálft.

Bilanagreining

Ef þú lendir í vandræðum með að setja upp ósjálfstæði eða keyra Grunt skipanir skaltu fyrst eyða /node_modules/möppunni sem er búin til af npm. Síðan skaltu endursýna npm install.

Grunnsniðmát

Byrjaðu á þessu grunn HTML sniðmáti, eða breyttu þessum dæmum . Við vonum að þú sérsniðir sniðmát okkar og dæmi og aðlagar þau að þínum þörfum.

Afritaðu HTML hér að neðan til að byrja að vinna með lágmarks Bootstrap skjal.

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

Dæmi

Byggðu á grunnsniðmátinu hér að ofan með mörgum íhlutum Bootstrap. Við hvetjum þig til að sérsníða og laga Bootstrap að þörfum hvers og eins verkefnis.

Fáðu frumkóðann fyrir hvert dæmi hér að neðan með því að hlaða niður Bootstrap geymslunni . Dæmi er að finna í docs/examples/skránni.

Að nota rammann

Sniðmát fyrir byrjendur

Ekkert nema grunnatriðin: samansett CSS og JavaScript ásamt íláti.

Bootstrap þema

Hladdu valfrjálsu Bootstrap þema fyrir sjónrænt aukna upplifun.

Grids

Mörg dæmi um ristskipulag með öllum fjórum þrepunum, hreiður og fleira.

Jumbotron

Byggðu í kringum júmbotron með stýristiku og nokkrum grunnsúlum.

Þröngt jumbotron

Búðu til sérsniðnari síðu með því að þrengja sjálfgefna gáminn og júmbotron.

Navbars í aðgerð

Navbar

Ofur grunnsniðmát sem inniheldur navbar ásamt einhverju viðbótarefni.

Statísk toppstika

Ofureinfalt sniðmát með kyrrstöðu efstu siglingastiku ásamt einhverju viðbótarefni.

Föst navbar

Ofur grunnsniðmát með fastri toppstýringu ásamt einhverju viðbótarefni.

Sérsniðnir íhlutir

Þekja

Einn síðu sniðmát til að byggja einfaldar og fallegar heimasíður.

Hringekja

Sérsníddu siglingastikuna og hringekjuna og bættu svo við nokkrum nýjum hlutum.

Blogg

Einfalt tveggja dálka bloggskipulag með sérsniðnum flakk, haus og gerð.

Mælaborð

Grunnuppbygging fyrir stjórnborðsstjórnborð með fastri hliðarstiku og stýristiku.

Innskráningarsíða

Sérsniðið eyðublað og hönnun fyrir einfalt innskráningarform.

Réttlæst nav

Búðu til sérsniðna siglingastiku með réttmætum tenglum. Höfuð upp! Ekki of Safari vingjarnlegur.

Límugur fótur

Festu fót neðst á útsýnisglugganum þegar efnið er styttra en það.

Sticky footer með navbar

Festu fót neðst á útsýnisglugganum með fastri stýristiku efst.

Tilraunir

Ósvarandi Bootstrap

Slökktu auðveldlega á svörun Bootstrap samkvæmt skjölum okkar .

Utan striga

Búðu til valmynd utan striga sem hægt er að skipta um til að nota með Bootstrap.

Verkfæri

Bootlint

Bootlint er opinbera Bootstrap HTML linter tólið. Það leitar sjálfkrafa eftir nokkrum algengum HTML mistökum á vefsíðum sem nota Bootstrap á nokkuð „vanillu“ hátt. Íhlutir/græjur Vanilla Bootstrap krefjast þess að hlutar þeirra af DOM séu í samræmi við ákveðin mannvirki. Bootlint athugar að tilvik Bootstrap íhluta hafi rétt uppbyggt HTML. Íhugaðu að bæta Bootlint við Bootstrap vefþróunarverkfærakeðjuna þína svo að engin algengustu mistökin hægi á þróun verkefnisins.

Samfélag

Fylgstu með þróun Bootstrap og náðu til samfélagsins með þessum gagnlegu úrræðum.

• Lestu og gerðu áskrifandi að The Official Bootstrap Blog .
• Spjallaðu við aðra Bootstrappera með því að nota IRC á irc.freenode.netþjóninum, á ##bootstrap rásinni .
• Til að fá aðstoð við að nota Bootstrap skaltu spyrja á StackOverflow með því að nota merkiðtwitter-bootstrap-3 .
• Hönnuðir ættu að nota lykilorðið bootstrapá pökkum sem breyta eða bæta við virkni Bootstrap þegar þeir dreifa í gegnum npm eða álíka afhendingaraðferðir til að fá hámarks uppgötvun.
• Finndu hvetjandi dæmi um fólk sem byggir með Bootstrap á Bootstrap Expo .

Þú getur líka fylgst með @getbootstrap á Twitter fyrir nýjustu slúðrið og frábær tónlistarmyndbönd.

Slökkva á svörun

Bootstrap aðlagar síðurnar þínar sjálfkrafa að ýmsum skjástærðum. Svona á að slökkva á þessum eiginleika svo síðan þín virki eins og þetta dæmi sem ekki svarar .

Skref til að slökkva á svörun síðu

1. Slepptu útsýninu sem <meta>nefnt er í CSS skjölunum
2. Hneka widthá .containerfyrir hvert grid tier með einni breidd, til dæmis width: 970px !important;Vertu viss um að þetta komi á eftir sjálfgefna Bootstrap CSS. Þú getur valfrjálst forðast það !importantmeð fjölmiðlafyrirspurnum eða einhverju vali-fu.
3. Ef þú notar stýristikur skaltu fjarlægja alla hrynjandi og stækkandi hegðun.
4. Notaðu .col-xs-*flokka til viðbótar við, eða í stað, miðlungs/stórra fyrir töfluskipulag. Hafðu engar áhyggjur, hnitanetið sem er sérstaklega lítið tæki skalast í allar upplausnir.

Þú þarft samt Respond.js fyrir IE8 (þar sem fjölmiðlafyrirspurnir okkar eru enn til staðar og þarf að vinna úr þeim). Þetta slekkur á „farsímasíðu“ þáttum Bootstrap.

Bootstrap sniðmát með svörun óvirk

Við höfum beitt þessum skrefum á dæmi. Lestu frumkóðann til að sjá tilteknar breytingar sem framkvæmdar eru.

Skoða dæmi sem ekki svarar

Stuðningur við vafra og tæki

Bootstrap er smíðað til að virka best í nýjustu skrifborðs- og farsímavöfrunum, sem þýðir að eldri vafrar gætu sýnt mismunandi stíl, þó fullkomlega virka, flutning á tilteknum hlutum.

Styður vafrar

Nánar tiltekið styðjum við nýjustu útgáfur af eftirfarandi vöfrum og kerfum.

Aðrir vafrar sem nota nýjustu útgáfuna af WebKit, Blink eða Gecko, hvort sem þeir eru beint eða í gegnum vefskoðunarforritaskil vettvangsins, eru ekki beinlínis studdir. Hins vegar ætti Bootstrap (í flestum tilfellum) að birtast og virka rétt í þessum vöfrum líka. Nánari upplýsingar um aðstoð eru veittar hér að neðan.

Farsímar

Almennt séð styður Bootstrap nýjustu útgáfur af sjálfgefnum vöfrum hvers helstu vettvangs. Athugaðu að proxy vafrar (eins og Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) eru ekki studdir.

Skrifborðsvafrar

Á sama hátt eru nýjustu útgáfur flestra skrifborðsvafra studdar.

Í Windows styðjum við Internet Explorer 8-11 .

Fyrir Firefox, til viðbótar við nýjustu venjulegu stöðugu útgáfuna, styðjum við einnig nýjustu Extended Support Release (ESR) útgáfuna af Firefox.

Óopinberlega ætti Bootstrap að líta út og haga sér nógu vel í Chromium og Chrome fyrir Linux, Firefox fyrir Linux og Internet Explorer 7, auk Microsoft Edge, þó að þau séu ekki opinberlega studd.

Fyrir lista yfir nokkrar vafravillur sem Bootstrap þarf að glíma við, sjá Wall of vafragalla okkar .

Internet Explorer 8 og 9

Internet Explorer 8 og 9 eru einnig studd, en vinsamlegast hafðu í huga að sumar CSS3 eiginleikar og HTML5 þættir eru ekki studdir að fullu af þessum vöfrum. Að auki krefst Internet Explorer 8 notkunar á Respond.js til að virkja stuðning við miðlunarfyrirspurnir.

Heimsæktu Get ég notað... til að fá upplýsingar um vafrastuðning við CSS3 og HTML5 eiginleika.

Internet Explorer 8 og Respond.js

Varist eftirfarandi fyrirvara þegar þú notar Respond.js í þróunar- og framleiðsluumhverfi þínu fyrir Internet Explorer 8.

Respond.js og CSS yfir lén

Notkun Respond.js með CSS hýst á öðru (undir)léni (til dæmis á CDN) krefst einhverrar viðbótaruppsetningar. Sjáðu Respond.js skjölin fyrir frekari upplýsingar.

Respond.js ogfile://

Vegna öryggisreglna vafra virkar Respond.js ekki með síðum sem skoðaðar eru í gegnum file://samskiptareglur (eins og þegar staðbundin HTML skrá er opnuð). Til að prófa móttækilega eiginleika í IE8 skaltu skoða síðurnar þínar í gegnum HTTP(S). Sjáðu Respond.js skjölin fyrir frekari upplýsingar.

Respond.js og@import

Respond.js virkar ekki með CSS sem vísað er til í gegnum @import. Einkum er vitað að sumar Drupal stillingar nota @import. Sjáðu Respond.js skjölin fyrir frekari upplýsingar.

Internet Explorer 8 og kassastærð

IE8 styður ekki að fullu box-sizing: border-box;þegar það er sameinað min-width, max-width, min-height, eða max-height. Af þeirri ástæðu, frá og með v3.0.1, notum við ekki lengur max-widthá .containers.

Internet Explorer 8 og @font-face

IE8 hefur nokkur vandamál með @font-faceþegar það er sameinað :before. Bootstrap notar þá samsetningu með Glyphicons sínum. Ef síða er í skyndiminni og hlaðin án músar yfir gluggann (þ.e. ýttu á endurnýjunarhnappinn eða hlaðið einhverju í iframe) þá verður síðan endurgerð áður en letrið hleðst inn. Með því að sveima yfir síðuna (meginmál) sjást nokkur af táknunum og með því að sveima yfir táknin sem eftir eru munu þau einnig birtast. Sjá tölublað #13863 fyrir nánari upplýsingar.

IE-samhæfisstillingar

Bootstrap er ekki stutt í gömlu Internet Explorer samhæfingarstillingunum. Til að vera viss um að þú sért að nota nýjustu flutningshaminn fyrir IE skaltu íhuga að setja viðeigandi <meta>merki á síðurnar þínar:

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

Staðfestu skjalahaminn með því að opna villuleitarverkfærin: ýttu á F12og athugaðu "Document Mode".

Þetta merki er innifalið í öllum skjölum Bootstrap og dæmum til að tryggja bestu mögulegu birtingu í hverri studda útgáfu af Internet Explorer.

Sjá þessa StackOverflow spurningu fyrir frekari upplýsingar.

Internet Explorer 10 í Windows 8 og Windows Phone 8

Internet Explorer 10 gerir ekki greinarmun á breidd tækis frá breidd útsýnisgáttar og beitir því ekki almennilega miðlunarfyrirspurnum í CSS Bootstrap. Venjulega myndirðu bara bæta við stuttu broti af CSS til að laga þetta:

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

Hins vegar virkar þetta ekki fyrir tæki sem keyra Windows Phone 8 útgáfur eldri en Update 3 (aka GDR3) , þar sem það veldur því að slík tæki sýna að mestu leyti skjáborðssýn í stað þröngs „síma“ útsýnis. Til að bregðast við þessu þarftu að láta eftirfarandi CSS og JavaScript fylgja með til að vinna í kringum villuna .

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

Fyrir frekari upplýsingar og notkunarleiðbeiningar skaltu lesa Windows Phone 8 og Device-Width .

Sem ábending, tökum við þetta með í öllum skjölum Bootstrap og dæmum sem sýnikennslu.

Safari prósent námundun

Útgáfuvél útgáfur af Safari fyrir v7.1 fyrir OS X og Safari fyrir iOS v8.0 átti í nokkrum vandræðum með fjölda aukastafa sem notaðir voru í töfluflokkunum okkar .col-*-1. Þannig að ef þú værir með 12 einstaka töfludálka, myndirðu taka eftir því að þeir voru stuttir miðað við aðrar raðir af dálkum. Fyrir utan að uppfæra Safari/iOS hefurðu nokkra möguleika til að leysa:

• Bættu .pull-rightvið síðasta ristardálkinn þinn til að fá harða-hægri jöfnunina
• Breyttu prósentunum þínum handvirkt til að fá fullkomna námundun fyrir Safari (erfiðara en fyrsti kosturinn)

Modals, siglingastikur og sýndarlyklaborð

Yfirfall og fletting

Stuðningur overflow: hiddenvið <body>þáttinn er frekar takmarkaður í iOS og Android. Í því skyni, þegar þú flettir framhjá efst eða neðst á modal í öðrum vöfrum þessara tækja, mun <body>efnið byrja að fletta. Sjá Chrome villu #175502 (löguð í Chrome v40) og WebKit villu #153852 .

iOS textareitir og skrun

Frá og með iOS 9.3, á meðan mótal er opið, ef upphafssnerting skrunbendinga er innan marka texta <input>eða <textarea>, verður <body>efnið undir mótalanum skrunað í stað formsins sjálfs. Sjá WebKit villu #153856 .

Sýndarlyklaborð

Athugaðu líka að ef þú ert að nota fasta navbar eða notar inntak innan forms, þá er iOS með flutningsvillu sem uppfærir ekki stöðu fastra þátta þegar sýndarlyklaborðið er ræst. Nokkrar lausnir á þessu fela í sér að umbreyta þáttunum þínum í position: absoluteeða kalla fram tímamæli á fókus til að reyna að leiðrétta staðsetninguna handvirkt. Þetta er ekki meðhöndlað af Bootstrap, svo það er undir þér komið að ákveða hvaða lausn er best fyrir umsókn þína.

Navbar fellilista

Einingin .dropdown-backdroper ekki notuð á iOS í nav vegna þess hversu flókin z-vísitölu er. Þannig, til að loka fellivalmyndum í navbars, verður þú að smella beint á fellilistann (eða annan þátt sem kveikir á smelliviðburði í iOS ).

Aðdráttur vafra

Aðdráttur síðu sýnir óhjákvæmilega flutningsgripi í sumum hlutum, bæði í Bootstrap og restinni af vefnum. Það fer eftir vandamálinu, við gætum hugsanlega lagað það (leitaðu fyrst og opnaðu síðan mál ef þörf krefur). Hins vegar höfum við tilhneigingu til að hunsa þetta þar sem þeir hafa oft enga beina lausn aðra en tölvuþrjóta lausnir.

Sticky :hover/ :focusá farsíma

Jafnvel þó að raunveruleg sveima sé ekki möguleg á flestum snertiskjáum, líkja flestir farsímavafrar eftir stuðningi við sveima og gera :hover„límandi“. Með öðrum orðum, :hoverstílar byrja að beita eftir að hafa ýtt á þátt og hætta aðeins að beita eftir að notandinn pikkar á einhvern annan þátt. :hoverÞetta getur valdið því að ríki Bootstrap festist óæskilega í slíkum vöfrum. Sumir farsímavafrar gera líka :focusálíka klístraða. Sem stendur er engin einföld lausn fyrir þessi mál önnur en að fjarlægja slíka stíla alveg.

Prentun

Jafnvel í sumum nútímavöfrum getur prentun verið einkennileg.

Sérstaklega, frá og með Chrome v32 og óháð spássíustillingum, notar Chrome breidd útsýnisgáttar sem er verulega þrengri en líkamleg pappírsstærð þegar leyst er úr miðlunarfyrirspurnum á meðan vefsíðu er prentuð. Þetta getur leitt til þess að mjög lítið rist Bootstrap er óvænt virkjað við prentun. Sjá tölublað #12078 og Chrome villu #273306 fyrir frekari upplýsingar. Ráðlagðar lausnir:

• Faðmaðu ofurlitla ristina og vertu viss um að síðan þín líti vel út undir því.
• Sérsníddu gildi @screen-*Minna breytanna þannig að prentarpappírinn þinn teljist stærri en mjög lítill.
• Bættu við sérsniðnum miðlunarfyrirspurnum til að breyta ristastærðarbrotspunktum eingöngu fyrir prentmiðla.

Eins og í Safari v8.0, geta föst breidd .containers valdið því að Safari notar óvenju litla leturstærð við prentun. Sjá #14868 og WebKit villu #138192 fyrir frekari upplýsingar. Ein hugsanleg lausn á þessu er að bæta við eftirfarandi CSS:

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

Android lager vafri

Upp úr kassanum er Android 4.1 (og jafnvel nokkrar nýrri útgáfur greinilega) sendar með vafraforritinu sem sjálfgefinn vefvafra (öfugt við Chrome). Því miður hefur vafraforritið fullt af villum og ósamræmi við CSS almennt.

Veldu valmyndir

Á <select>þáttum mun Android lager vafri ekki sýna hliðarstýringar ef það er border-radiusog/eða bordernotað. (Sjá þessa StackOverflow spurningu fyrir nánari upplýsingar.) Notaðu kóðabútinn hér að neðan til að fjarlægja móðgandi CSS og gera það <select>sem óstílað þátt í Android hlutabréfavafranum. Umboðsmaður notenda sem þefar kemur í veg fyrir truflun á Chrome, Safari og Mozilla vöfrum.

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

Viltu sjá dæmi? Skoðaðu þessa JS Bin kynningu.

Löggildingaraðilar

Til þess að veita gömlum og gallalausum vöfrum sem besta upplifun notar Bootstrap CSS vafrahakk á nokkrum stöðum til að miða sérstaka CSS að ákveðnum vafraútgáfum til að vinna í kringum villur í vöfrunum sjálfum. Þessar járnsög valda skiljanlega CSS staðfestingaraðilum að kvarta yfir því að þau séu ógild. Á nokkrum stöðum notum við einnig háþróaða CSS eiginleika sem eru ekki enn að fullu staðlaðir, en þeir eru eingöngu notaðir til að auka enn frekar.

Þessar staðfestingarviðvaranir skipta ekki máli í reynd þar sem hluti CSS okkar sem ekki er hakkaður er fullgiltur og innbrotshlutarnir trufla ekki rétta virkni hins óhakkaða hluta, þess vegna hunsum við vísvitandi þessar tilteknu viðvaranir.

HTML skjölin okkar eru sömuleiðis með léttvægar og ómarkvissar HTML staðfestingarviðvaranir vegna þess að við höfum sett inn lausn fyrir ákveðinn Firefox villu .

Stuðningur þriðja aðila

Þó að við styðjum ekki opinberlega nein viðbætur eða viðbætur frá þriðja aðila, bjóðum við upp á gagnleg ráð til að forðast hugsanleg vandamál í verkefnum þínum.

Box-stærð

Sumir hugbúnaður frá þriðja aðila, þar á meðal Google Maps og Google Custom Search Engine, stangast á við Bootstrap vegna * { box-sizing: border-box; }, reglu sem gerir það að verkum að það paddinghefur ekki áhrif á endanlega reiknaða breidd frumefnis. Lærðu meira um gerð kassa og stærð á CSS Tricks .

Það fer eftir samhenginu, þú getur hnekkt eftir þörfum (valkostur 1) eða endurstillt kassastærð fyrir heil svæði (valkostur 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();
}

Aðgengi

Bootstrap fylgir algengum vefstöðlum og - með lágmarks auka fyrirhöfn - er hægt að nota til að búa til síður sem eru aðgengilegar þeim sem nota AT .

Slepptu flakk

Ef flakkið þitt inniheldur marga tengla og kemur á undan aðalinnihaldinu í DOM skaltu bæta við Skip to main contenttengli á undan flakkinu (fyrir einfalda útskýringu, sjá þessa A11Y Project grein um sleppa flakktengla ). Notkun .sr-onlybekkjarins mun sleppa hlekknum sjónrænt fela og .sr-only-focusablebekkurinn mun tryggja að hlekkurinn verði sýnilegur þegar hann hefur einbeitt sér (fyrir sjáandi lyklaborðsnotendur).

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

Hreiður fyrirsagnir

Þegar þú hreiður fyrirsagnir ( <h1>- <h6>) ætti aðalskjalhausinn að vera <h1>. Síðari fyrirsagnir ættu að nýta rökrétt <h2>- <h6>þannig að skjálesarar geti búið til efnisyfirlit fyrir síðurnar þínar.

Lærðu meira á HTML CodeSniffer og Penn State's AccessAbility .

Litaskil

Eins og er, eru nokkrar af sjálfgefnum litasamsetningum sem eru tiltækar í Bootstrap (svo sem ýmsir stílaðir hnappaflokkar, sumir af kóðanum sem auðkenna litina sem notaðir eru fyrir grunnkóðablokkir , .bg-primary samhengisbakgrunnshjálparflokkinn og sjálfgefinn tengilitur þegar hann er notaður á hvítum bakgrunni) hafa lágt birtuhlutfall (undir ráðlagt hlutfall 4,5:1 ). Þetta getur valdið vandamálum hjá notendum með sjónskerta eða litblinda. Þessum sjálfgefna litum gæti þurft að breyta til að auka birtuskil þeirra og læsileika.

Viðbótarúrræði

• "HTML Codesniffer" bókamerki til að bera kennsl á aðgengisvandamál
• Chrome's Accessibility Developer Tools viðbót
• Litabirtugreiningartæki
• A11Y verkefnið
• MDN aðgengisskjöl

Algengar spurningar um leyfi

Bootstrap er gefið út undir MIT leyfinu og er höfundarréttur 2016 Twitter. Soðið niður í smærri bita má lýsa því með eftirfarandi skilyrðum.

Það krefst þess að þú:

• Haltu leyfinu og höfundarréttartilkynningunni innifalinn í CSS- og JavaScript-skrám Bootstrap þegar þú notar þær í verkum þínum

Það gerir þér kleift að:

• Frjálst að hlaða niður og nota Bootstrap, í heild eða að hluta, í persónulegum, einka-, innri eða viðskiptalegum tilgangi
• Notaðu Bootstrap í pakka eða dreifingu sem þú býrð til
• Breyttu frumkóðanum
• Veita undirleyfi til að breyta og dreifa Bootstrap til þriðja aðila sem ekki er innifalinn í leyfinu

Það bannar þér að:

• Gerðu höfunda og leyfishafa ábyrga fyrir tjóni þar sem Bootstrap er veitt án ábyrgðar
• Gerðu höfunda eða höfundarréttarhafa Bootstrap ábyrga
• Endurdreifðu hvaða stykki af Bootstrap sem er án réttrar eignar
• Notaðu öll merki í eigu Twitter á einhvern hátt sem gæti gefið til kynna eða gefið í skyn að Twitter styðji dreifingu þína
• Notaðu öll merki í eigu Twitter á einhvern hátt sem gæti gefið til kynna eða gefið í skyn að þú hafir búið til viðkomandi Twitter hugbúnað

Það krefst þess ekki að þú:

• Láttu upprunann af Bootstrap sjálfu fylgja með, eða hvers kyns breytingar sem þú gætir hafa gert á því, í hvaða endurdreifingu sem þú getur sett saman sem inniheldur það
• Sendu breytingar sem þú gerir á Bootstrap aftur í Bootstrap verkefnið (þó hvatt sé til slíkrar endurgjöf)

Allt Bootstrap leyfið er staðsett í verkefnageymslunni til að fá frekari upplýsingar.

Þýðingar

Meðlimir samfélagsins hafa þýtt skjöl Bootstrap á ýmis tungumál. Engin er opinberlega studd og þau eru kannski ekki alltaf uppfærð.

• Bootstrap 中文文档 (kínverska)
• Bootstrap 3 中文手冊 (kínverska (hefðbundið))
• Bootstrap på Dansk (dönsk)
• Bootstrap en Français (franska)
• Bootstrap auf Deutsch (þýska)
• Stígvél á ítölsku (ítölsku)
• Bootstrap 한국어 (kóreska)
• Bootstrap em Português do Brasil (brasilísk portúgalska)
• Bootstrap по-русски (rússneska)
• Bootstrap en Español (spænska)
• Türkçe Bootstrap (tyrkneska)
• Bootstrap українською (úkraínska)
• Bootstrap bằng tiếng Việt (víetnamska)

Við aðstoðum ekki við að skipuleggja eða hýsa þýðingar, við hlekkjum bara á þær.

Kláraðir þú nýrri eða betri þýðingu? Opnaðu dráttarbeiðni til að bæta því við listann okkar.