Lejupielādēt

Programmā Bootstrap (pašlaik v3.4.1) ir daži vienkārši veidi, kā ātri sākt darbu, un katrs no tiem ir pievilcīgs citam prasmju līmenim un lietošanas gadījumam. Izlasiet, lai redzētu, kas atbilst jūsu īpašajām vajadzībām.

jsDelivr

jsDelivr darbinieki laipni nodrošina CDN atbalstu Bootstrap CSS un JavaScript. Vienkārši izmantojiet šīs jsDelivr saites.

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

Uzstādiet ar Bower

Varat arī instalēt un pārvaldīt Bootstrap Less, CSS, JavaScript un fontus, izmantojot Bower :

bower install bootstrap

Instalējiet ar npm

Varat arī instalēt Bootstrap, izmantojot npm :

npm install bootstrap@3

require('bootstrap')ielādēs visus Bootstrap jQuery spraudņus jQuery objektā. Pats bootstrapmodulis neko neeksportē. Varat manuāli ielādēt Bootstrap jQuery spraudņus atsevišķi, ielādējot /js/*.jsfailus pakotnes augstākā līmeņa direktorijā.

Bootstrap's package.jsonsatur dažus papildu metadatus zem šādiem taustiņiem:

• less- ceļš uz Bootstrap galveno Less avota failu
• style- ceļš uz Bootstrap neminificēto CSS, kas ir iepriekš kompilēts, izmantojot noklusējuma iestatījumus (bez pielāgošanas)

Instalējiet, izmantojot komponistu

Varat arī instalēt un pārvaldīt Bootstrap Less, CSS, JavaScript un fontus, izmantojot Composer :

composer require twbs/bootstrap

Nepieciešams automātiskais prefikss priekš Less/Sass

Bootstrap izmanto Autoprefixer , lai apstrādātu CSS piegādātāja prefiksus . Ja kompilējat Bootstrap no tā Less/Sass avota un neizmantojat mūsu Gruntfile, jums pašam būs jāintegrē Autoprefixer savā veidošanas procesā. Ja izmantojat iepriekš kompilētu Bootstrap vai mūsu Gruntfile, jums par to nav jāuztraucas, jo Autoprefixer jau ir integrēts mūsu Gruntfile.

Kas ir iekļauts

Bootstrap ir lejupielādējams divos veidos, kuros jūs atradīsiet šādus direktorijus un failus, loģiski grupējot kopējos resursus un nodrošinot gan kompilētus, gan samazinātus variantus.

Iepriekš kompilēta Bootstrap

Pēc lejupielādes izpakojiet saspiesto mapi, lai redzētu (kompilētās) Bootstrap struktūru. Jūs redzēsit kaut ko līdzīgu:

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

Šī ir visvienkāršākā Bootstrap forma: iepriekš kompilēti faili ātrai lietošanai gandrīz jebkurā tīmekļa projektā. Mēs piedāvājam kompilētu CSS un JS ( bootstrap.*), kā arī apkopotu un samazinātu CSS un JS ( bootstrap.min.*). CSS avota kartes ( bootstrap.*.map) ir pieejamas lietošanai ar noteiktu pārlūkprogrammu izstrādātāju rīkiem. Ir iekļauti fonti no Glyphicons, kā arī izvēles Bootstrap tēma.

Bootstrap pirmkods

Bootstrap pirmkoda lejupielāde ietver iepriekš kompilētus CSS, JavaScript un fontu līdzekļus, kā arī avota Less, JavaScript un dokumentāciju. Konkrētāk, tas ietver šādu un vairāk:

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

, less/un ir mūsu CSS js/, fonts/JS un ikonu fontu (attiecīgi) pirmkods. Mapē dist/ir viss, kas norādīts iepriekš sagatavotajā lejupielādes sadaļā. Mapē ir iekļauts mūsu dokumentācijas un Bootstrap lietojuma docs/pirmkods . examples/Turklāt jebkurš cits iekļautais fails nodrošina atbalstu pakotnēm, licences informācijai un izstrādei.

CSS un JavaScript kompilēšana

Bootstrap savai veidošanas sistēmai izmanto Grunt ar ērtām metodēm darbam ar ietvaru. Tādā veidā mēs apkopojam savu kodu, veicam testus un daudz ko citu.

Grunt instalēšana

Lai instalētu Grunt, vispirms ir jālejupielādē un jāinstalē node.js (kas ietver npm). npm apzīmē mezglu pakotnes moduļus un ir veids, kā pārvaldīt izstrādes atkarības, izmantojot node.js.

1. Instalējiet grunt-cliglobāli, izmantojot npm install -g grunt-cli.
2. Pārejiet uz saknes /bootstrap/direktoriju un pēc tam palaidiet npm install. npm apskatīs package.jsonfailu un automātiski instalēs tur norādītās vajadzīgās vietējās atkarības.

Kad tas būs pabeigts, varēsit palaist dažādas Grunt komandas, kas tiek nodrošinātas no komandrindas.

Pieejamās Grunt komandas

grunt dist(Vienkārši kompilējiet CSS un JavaScript)

Atjauno /dist/direktoriju ar apkopotiem un samazinātiem CSS un JavaScript failiem. Kā Bootstrap lietotājs parasti šī ir vajadzīgā komanda.

grunt watch(Skatīties)

Skatās mazāk avota failus un automātiski pārkompilē tos CSS ikreiz, kad saglabājat izmaiņas.

grunt test(Palaist testus)

Palaiž JSHint un izpilda QUnit testus reālās pārlūkprogrammās, pateicoties Karma .

grunt docs(Veidojiet un pārbaudiet dokumentu līdzekļus)

Veido un pārbauda CSS, JavaScript un citus līdzekļus, kas tiek izmantoti, palaižot dokumentāciju lokāli, izmantojot bundle exec jekyll serve.

grunt(Izveidojiet pilnīgi visu un veiciet testus)

Apkopo un samazina CSS un JavaScript, veido dokumentācijas vietni, palaiž HTML5 pārbaudītāju pret dokumentiem, ģenerē pielāgošanas rīkus un veic citas darbības. Nepieciešams Jekyll . Parasti tas ir nepieciešams tikai tad, ja uzlaužat pašu Bootstrap.

Problēmu novēršana

Ja rodas problēmas ar atkarību instalēšanu vai Grunt komandu izpildi, vispirms izdzēsiet /node_modules/npm ģenerēto direktoriju. Pēc tam palaidiet vēlreiz npm install.

Pamata veidne

Sāciet ar šo pamata HTML veidni vai mainiet šos piemērus . Mēs ceram, ka jūs pielāgosit mūsu veidnes un piemērus, pielāgojot tos savām vajadzībām.

Kopējiet tālāk esošo HTML, lai sāktu darbu ar minimālu Bootstrap dokumentu.

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

Piemēri

Veidojiet iepriekš minēto pamata veidni, izmantojot Bootstrap daudzos komponentus. Mēs iesakām jums pielāgot un pielāgot Bootstrap, lai tas atbilstu jūsu individuālā projekta vajadzībām.

Iegūstiet katra tālāk norādītā piemēra pirmkodu, lejupielādējot Bootstrap repozitoriju . Piemērus var atrast docs/examples/direktorijā.

Izmantojot ietvaru

Startera veidne

Nekas, izņemot pamatus: apkopots CSS un JavaScript kopā ar konteineru.

Bootstrap tēma

Ielādējiet papildu Bootstrap motīvu, lai iegūtu vizuāli uzlabotu pieredzi.

Režģi

Vairāki režģa izkārtojumu piemēri ar visiem četriem līmeņiem, ligzdošanu un daudz ko citu.

Džumbotrons

Veidojiet ap jumbotronu, izmantojot navigācijas joslu un dažas pamata režģa kolonnas.

Šaurs jumbotrons

Izveidojiet pielāgotāku lapu, sašaurinot noklusējuma konteineru un jumbotronu.

Navigbars darbībā

Navigbar

Super pamata veidne, kas ietver navigācijas joslu un papildu saturu.

Statiska augšējā navigācijas josla

Super pamata veidne ar statisku augšējo navigācijas joslu un papildu saturu.

Fiksēta navigācijas josla

Super pamata veidne ar fiksētu augšējo navigācijas joslu un papildu saturu.

Pielāgoti komponenti

Piesegt

Vienas lapas veidne vienkāršu un skaistu mājas lapu veidošanai.

Karuselis

Pielāgojiet navigācijas joslu un karuseli, pēc tam pievienojiet dažus jaunus komponentus.

Emuārs

Vienkāršs divu kolonnu emuāra izkārtojums ar pielāgotu navigāciju, galveni un veidu.

Mērinstrumentu panelis

Administratora informācijas paneļa pamatstruktūra ar fiksētu sānjoslu un navigācijas joslu.

Pierakstīšanās lapa

Pielāgots veidlapas izkārtojums un dizains vienkāršai izkārtnes veidlapai.

Pamatota nav

Izveidojiet pielāgotu navigācijas joslu ar pamatotām saitēm. Uzmanību! Ne pārāk draudzīgs Safari.

Lipīga kājene

Pievienojiet kājeni skata loga apakšā, ja saturs ir īsāks par to.

Lipīga kājene ar navigācijas joslu

Skata loga apakšdaļā pievienojiet kājeni ar fiksētu navigācijas joslu augšpusē.

Eksperimenti

Nereaģējoša Bootstrap

Ērti atspējojiet Bootstrap reaģētspēju saskaņā ar mūsu dokumentiem .

Ārpus audekla

Izveidojiet pārslēdzamu navigācijas izvēlni ārpus kanvas, lai to izmantotu kopā ar Bootstrap.

Rīki

Bootlint

Bootlint ir oficiālais Bootstrap HTML linter rīks. Tas automātiski pārbauda vairākas izplatītas HTML kļūdas tīmekļa lapās, kurās Bootstrap tiek izmantota diezgan "vaniļas" veidā. Vanilla Bootstrap komponentiem/logrīkiem ir nepieciešams, lai to DOM daļas atbilstu noteiktām struktūrām. Bootlint pārbauda, ​​vai Bootstrap komponentu gadījumiem ir pareizi strukturēts HTML. Apsveriet iespēju Bootlint pievienot savai Bootstrap tīmekļa izstrādes rīku ķēdei, lai neviena no izplatītajām kļūdām nepalēninātu jūsu projekta attīstību.

kopiena

Saņemiet jaunāko informāciju par Bootstrap attīstību un sazinieties ar kopienu, izmantojot šos noderīgos resursus.

• Izlasiet un abonējiet oficiālo sāknēšanas emuāru .
• Tērzējiet ar citiem Bootstrapper lietotājiem, izmantojot IRC irc.freenode.netserverī ##bootstrap kanālā .
• Lai saņemtu palīdzību par Bootstrap lietošanu, jautājiet vietnē StackOverflow, izmantojot tagutwitter-bootstrap-3 .
• Izstrādātājiem ir jāizmanto atslēgvārds bootstrappakotnēs, kas pārveido vai papildina Bootstrap funkcionalitāti, izplatot, izmantojot npm vai līdzīgus piegādes mehānismus, lai nodrošinātu maksimālu atklāšanu.
• Atrodiet iedvesmojošus piemērus, kā cilvēki veido, izmantojot Bootstrap izstādē Bootstrap Expo .

Varat arī sekot @getbootstrap vietnē Twitter , lai skatītu jaunākās tenkas un satriecošos mūzikas videoklipus.

Reaģēšanas atspējošana

Bootstrap automātiski pielāgo jūsu lapas dažādiem ekrāna izmēriem. Lūk, kā atspējot šo funkciju, lai jūsu lapa darbotos kā šis nereaģējošais piemērs .

Darbības, lai atspējotu lapas reaģētspēju

1. Izlaidiet CSS dokumentos<meta> minēto skata logu
2. Ignorēt vērtību widthkatram .containerrežģa līmenim ar vienu platumu, piemēram, width: 970px !important;Pārliecinieties, vai tas nāk pēc noklusējuma Bootstrap CSS. Varat pēc izvēles izvairīties no !importantmultivides vaicājumiem vai atlasītāja-fu.
3. Ja izmantojat navigācijas joslas, noņemiet visas navigācijas joslas sabrukšanas un izvēršanas darbības.
4. Režģa izkārtojumiem izmantojiet .col-xs-*klases papildus vidējiem/lieliem izkārtojumiem vai to vietā. Neuztraucieties, īpaši mazais ierīces režģis pielāgojas visām izšķirtspējām.

Jums joprojām būs nepieciešams Respond.js operētājsistēmai IE8 (jo mūsu multivides vaicājumi joprojām pastāv un ir jāapstrādā). Tādējādi tiek atspējoti Bootstrap “mobilās vietnes” aspekti.

Bootstrap veidne ar atspējotu atsaucību

Mēs esam piemērojuši šīs darbības piemērā. Izlasiet tā avota kodu, lai redzētu konkrētās ieviestās izmaiņas.

Skatīt nereaģējošu piemēru

Pārlūkprogrammu un ierīču atbalsts

Bootstrap ir izveidots tā, lai vislabāk darbotos jaunākajās galddatoru un mobilo ierīču pārlūkprogrammās, kas nozīmē, ka vecākajās pārlūkprogrammās var tikt parādīti atšķirīgi veidoti, lai gan pilnībā funkcionējoši noteiktu komponentu renderējumi.

Atbalstītās pārlūkprogrammas

Konkrēti, mēs atbalstām tālāk norādīto pārlūkprogrammu un platformu jaunākās versijas .

Alternatīvas pārlūkprogrammas, kurās tiek izmantota jaunākā WebKit, Blink vai Gecko versija, tieši vai ar platformas tīmekļa skata API starpniecību, netiek tieši atbalstītas. Tomēr Bootstrap vajadzētu (vairumā gadījumu) pareizi parādīt un darboties arī šajās pārlūkprogrammās. Tālāk ir sniegta precīzāka atbalsta informācija.

Mobilās ierīces

Vispārīgi runājot, Bootstrap atbalsta katras galvenās platformas noklusējuma pārlūkprogrammu jaunākās versijas. Ņemiet vērā, ka starpniekservera pārlūkprogrammas (piemēram, Opera Mini, Opera Mobile's Turbo režīms, UC Browser Mini, Amazon Silk) netiek atbalstītas.

Galddatoru pārlūkprogrammas

Tāpat tiek atbalstītas lielākās daļas galddatoru pārlūkprogrammu jaunākās versijas.

Operētājsistēmā Windows mēs atbalstām Internet Explorer 8–11 .

Firefox papildus jaunākajam parastajam stabilajam laidienam mēs atbalstām arī jaunāko Firefox paplašinātā atbalsta laidiena (ESR) versiju.

Neoficiāli Bootstrap vajadzētu izskatīties un darboties pietiekami labi pārlūkprogrammās Chromium un Chrome for Linux, Firefox for Linux un Internet Explorer 7, kā arī Microsoft Edge, lai gan tās netiek oficiāli atbalstītas.

Lai iegūtu sarakstu ar dažām pārlūkprogrammas kļūdām, ar kurām Bootstrap ir jācīnās, skatiet mūsu pārlūkprogrammas kļūdu sienu .

Internet Explorer 8 un 9

Tiek atbalstītas arī pārlūkprogrammas Internet Explorer 8 un 9, tomēr, lūdzu, ņemiet vērā, ka šīs pārlūkprogrammas pilnībā neatbalsta dažus CSS3 rekvizītus un HTML5 elementus. Turklāt pārlūkprogrammai Internet Explorer 8 ir nepieciešams izmantot Respond.js , lai iespējotu multivides vaicājumu atbalstu.

Apmeklējiet vietni Vai es varu izmantot... , lai iegūtu sīkāku informāciju par pārlūkprogrammas atbalstu CSS3 un HTML5 funkcijām.

Internet Explorer 8 un Respond.js

Lietojot Respond.js savā izstrādes un ražošanas vidē pārlūkprogrammai Internet Explorer 8, ievērojiet tālāk norādītos brīdinājumus.

Respond.js un starpdomēnu CSS

Lai izmantotu Respond.js ar CSS, kas mitināts citā (apakš)domēnā (piemēram, CDN), ir nepieciešama papildu iestatīšana. Detalizētu informāciju skatiet dokumentā Respond.js .

Atbildēt.js unfile://

Pārlūka drošības noteikumu dēļ Respond.js nedarbojas lapās, kas tiek skatītas, izmantojot file://protokolu (piemēram, atverot lokālo HTML failu). Lai pārbaudītu IE8 adaptīvās funkcijas, skatiet savas lapas, izmantojot HTTP(S). Detalizētu informāciju skatiet dokumentā Respond.js .

Atbildēt.js un@import

Respond.js nedarbojas ar CSS, uz kuru ir atsauce, izmantojot @import. Jo īpaši ir zināms, ka dažas Drupal konfigurācijas izmanto @import. Detalizētu informāciju skatiet dokumentā Respond.js .

Internet Explorer 8 un kastes izmēra noteikšana

IE8 pilnībā neatbalsta box-sizing: border-box;, ja to apvieno ar min-width, max-width, min-height, vai max-height. Šī iemesla dēļ no v3.0.1 mēs vairs neizmantojam max-widths .container.

Internet Explorer 8 un @font-face

IE8 ir dažas problēmas, @font-faceja tās tiek kombinētas ar :before. Bootstrap izmanto šo kombināciju ar saviem Glyphicons. Ja lapa ir saglabāta kešatmiņā un tiek ielādēta, nevirzot peli virs loga (ti, nospiediet atsvaidzināšanas pogu vai ielādējiet kaut ko iframe), lapa tiek renderēta pirms fonta ielādes. Virzot kursoru virs lapas (pamatteksta), tiks parādītas dažas ikonas, un, virzot kursoru virs pārējām ikonām, tiks parādītas arī tās. Plašāku informāciju skatiet izdevumā #13863 .

IE saderības režīmi

Bootstrap netiek atbalstīts vecajos Internet Explorer saderības režīmos. Lai pārliecinātos, ka izmantojat jaunāko IE renderēšanas režīmu, apsveriet iespēju <meta>savās lapās iekļaut atbilstošu tagu:

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

Apstipriniet dokumenta režīmu, atverot atkļūdošanas rīkus: nospiediet F12un atzīmējiet "Dokumenta režīms".

Šis tags ir iekļauts visā Bootstrap dokumentācijā un piemēros, lai nodrošinātu vislabāko iespējamo atveidojumu katrā atbalstītajā Internet Explorer versijā.

Lai iegūtu papildinformāciju, skatiet šo StackOverflow jautājumu .

Internet Explorer 10 operētājsistēmā Windows 8 un Windows Phone 8

Programma Internet Explorer 10 neatšķir ierīces platumu no skata loga platuma un tādējādi nepareizi piemēro multivides vaicājumus Bootstrap CSS. Lai to labotu, parasti jāpievieno ātrs CSS fragments:

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

Tomēr tas nedarbojas ierīcēs, kurās darbojas operētājsistēmas Windows Phone 8 versijas, kas vecākas par 3. atjauninājumu (aka GDR3) , jo šādās ierīcēs tiek rādīts galvenokārt darbvirsmas skats, nevis šaurs tālruņa skats. Lai to novērstu, jums ir jāiekļauj tālāk norādītais CSS un JavaScript, lai novērstu kļūdu .

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

Lai iegūtu papildinformāciju un lietošanas vadlīnijas, izlasiet Windows Phone 8 un Device-Width .

Uzmanību mēs to iekļaujam visā Bootstrap dokumentācijā un piemēros kā demonstrāciju.

Safari procentu noapaļošana

Safari versiju renderēšanas programmai pirms v7.1 operētājsistēmai OS X un Safari operētājsistēmai iOS v8.0 bija zināmas problēmas ar mūsu .col-*-1režģa klasēs izmantoto zīmju skaitu aiz komata. Tātad, ja jums būtu 12 atsevišķas režģa kolonnas, jūs pamanītu, ka tās ir īsas salīdzinājumā ar citām kolonnu rindām. Papildus Safari/iOS jaunināšanai jums ir dažas iespējas, kā rīkoties:

• Pievienojiet .pull-rightsavai pēdējai režģa kolonnai, lai iegūtu precīzo līdzinājumu
• Pielāgojiet procentus manuāli, lai iegūtu perfektu noapaļošanu programmai Safari (sarežģītāk nekā pirmā opcija)

Modāļi, navigācijas joslas un virtuālās tastatūras

Pārplūde un ritināšana

Elementa atbalsts overflow: hiddenir <body>diezgan ierobežots operētājsistēmās iOS un Android. Šajā nolūkā, ritinot gar modāla augšdaļu vai apakšdaļu kādā no šo ierīču pārlūkprogrammām, <body>saturs sāks ritināt. Skatiet Chrome kļūdu #175502 (izlabota pārlūkprogrammā Chrome v40) un WebKit kļūdu #153852 .

iOS teksta lauki un ritināšana

Sākot ar operētājsistēmu iOS 9.3, kamēr modāls ir atvērts, ja ritināšanas žesta sākotnējais pieskāriens atrodas teksta <input>vai simbola robežās <textarea>, <body>tiks ritināts saturs zem modāla, nevis pats modāls. Skatiet WebKit kļūdu #153856 .

Virtuālās tastatūras

Ņemiet vērā arī to, ka, ja izmantojat fiksētu navigācijas joslu vai ievades datus modālā, operētājsistēmā iOS ir renderēšanas kļūda, kas neatjaunina fiksēto elementu pozīciju, kad tiek aktivizēta virtuālā tastatūra. Daži risinājumi šim nolūkam ietver elementu pārveidošanu position: absolutevai fokusa taimera izsaukšanu, lai mēģinātu manuāli labot pozicionēšanu. Bootstrap to nenodrošina, tāpēc jums ir jāizlemj, kurš risinājums ir vislabākais jūsu lietojumprogrammai.

Navigācijas joslas nolaižamās izvēlnes

Šis .dropdown-backdropelements netiek izmantots operētājsistēmā iOS navigācijā z-indeksēšanas sarežģītības dēļ. Tādējādi, lai aizvērtu nolaižamās izvēlnes navigācijas joslās, jums tieši jānoklikšķina uz nolaižamās izvēlnes elementa (vai jebkura cita elementa, kas aktivizēs klikšķa notikumu operētājsistēmā iOS ).

Pārlūka tālummaiņa

Lapas tālummaiņa dažos komponentos neizbēgami rada renderēšanas artefaktus gan Bootstrap, gan pārējā tīmeklī. Atkarībā no problēmas, iespējams, varēsim to novērst (vispirms meklējiet un pēc tam atveriet problēmu, ja nepieciešams). Tomēr mums ir tendence tos ignorēt, jo tiem bieži vien nav tieša risinājuma, kā tikai sarežģīti risinājumi.

Lipīga :hover/ :focusmobilajā ierīcē

Lai gan liela daļa skārienekrānu nav iespējama, lielākā daļa mobilo pārlūkprogrammu atdarina virzīšanas atbalstu un padara to :hover"lipīgu". Citiem vārdiem sakot, :hoverstilu lietošana tiek sākta pēc pieskaršanās elementam un tiek pārtraukta tikai pēc tam, kad lietotājs pieskaras kādam citam elementam. Tas var izraisīt Bootstrap :hoverstāvokļu nevēlamu "iestrēgšanu" šādās pārlūkprogrammās. Dažas mobilās pārlūkprogrammas arī padara :focuslīdzīgu lipīgu. Pašlaik šīm problēmām nav cita vienkārša risinājuma, izņemot šādu stilu pilnīgu noņemšanu.

Drukāšana

Pat dažās modernās pārlūkprogrammās drukāšana var būt dīvaina.

Konkrēti, sākot ar Chrome v32 un neatkarīgi no piemaļu iestatījumiem, pārlūkprogrammā Chrome tiek izmantots skatvietas platums, kas ir ievērojami šaurāks nekā fiziskais papīra izmērs, risinot multivides vaicājumus tīmekļa lapas drukāšanas laikā. Tā rezultātā drukāšanas laikā var negaidīti aktivizēties Bootstrap īpaši mazais režģis. Plašāku informāciju skatiet izdevumā Nr. 12078 un Chrome kļūdu Nr. 273306 . Ieteicamie risinājumi:

• Aptveriet īpaši mazo režģi un pārliecinieties, vai jūsu lapa zem tā izskatās pieņemama.
• Pielāgojiet @screen-*mainīgo Mazāk vērtības, lai printera papīrs tiktu uzskatīts par lielāku par īpaši mazu.
• Pievienojiet pielāgotus apdrukājamo materiālu vaicājumus, lai mainītu režģa izmēra pārtraukuma punktus tikai drukas materiāliem.

Turklāt, sākot ar Safari v8.0, fiksēta platuma .containers dēļ drukāšanas laikā Safari var izmantot neparasti mazu fonta izmēru. Plašāku informāciju skatiet #14868 un WebKit kļūdu #138192 . Viens no iespējamiem risinājumiem ir šāda CSS pievienošana:

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

Android akciju pārlūks

Sākotnēji operētājsistēma Android 4.1 (un pat daži jaunāki laidieni, acīmredzot) tiek piegādāta ar pārlūkprogrammas lietotni kā noklusējuma tīmekļa pārlūkprogrammu (pretstatā Chrome). Diemžēl pārlūkprogrammas lietotnē ir daudz kļūdu un pretrunu ar CSS kopumā.

Izvēlieties izvēlnes

Elementos <select>Android akciju pārlūkprogramma nerādīs sānu vadīklas, ja ir border-radiusun/vai borderlietotas. (Lai iegūtu sīkāku informāciju, skatiet šo StackOverflow jautājumu .) Izmantojiet tālāk norādīto koda fragmentu, lai noņemtu aizskarošo CSS un atveidotu <select>kā bez stila elementu Android akciju pārlūkprogrammā. Lietotāja aģenta šņaukšana novērš traucējumus pārlūkprogrammās Chrome, Safari un Mozilla.

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

Vai vēlaties redzēt piemēru? Apskatiet šo JS Bin demonstrāciju.

Validatori

Lai nodrošinātu vislabāko iespējamo pieredzi vecām un kļūdainām pārlūkprogrammām, Bootstrap vairākās vietās izmanto CSS pārlūkprogrammu uzlaušanu , lai mērķētu uz īpašām CSS noteiktām pārlūkprogrammu versijām, lai novērstu kļūdas pašās pārlūkprogrammās. Šie uzlauzumi saprotami liek CSS pārbaudītājiem sūdzēties, ka tie ir nederīgi. Dažās vietās mēs izmantojam arī jaunākās CSS funkcijas, kas vēl nav pilnībā standartizētas, taču tās tiek izmantotas tikai pakāpeniskai uzlabošanai.

Šiem validācijas brīdinājumiem praksē nav nozīmes, jo mūsu CSS neuzlauztā daļa tiek pilnībā pārbaudīta, un uzlauztās daļas netraucē nehacked daļas pareizu darbību, tāpēc mēs apzināti ignorējam šos konkrētos brīdinājumus.

Mūsu HTML dokumentos ir arī daži triviāli un nenozīmīgi HTML validācijas brīdinājumi, jo esam iekļāvuši risinājumu noteiktai Firefox kļūdai .

Trešās puses atbalsts

Lai gan mēs oficiāli neatbalstām trešo pušu spraudņus vai papildinājumus, mēs piedāvājam dažus noderīgus padomus, kas palīdzēs izvairīties no iespējamām problēmām jūsu projektos.

Kastes izmēra noteikšana

Dažas trešās puses programmatūras, tostarp Google Maps un Google pielāgotā meklētājprogramma, konfliktē ar Bootstrap * { box-sizing: border-box; }, jo kārtula, kas to padara par tādu padding, neietekmē elementa galīgo aprēķināto platumu. Uzziniet vairāk par kastes modeli un izmēru noteikšanu vietnē CSS triki .

Atkarībā no konteksta varat pēc vajadzības ignorēt (1. iespēja) vai atiestatīt lodziņa izmērus veseliem reģioniem (2. iespēja).

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

Pieejamība

Bootstrap atbilst vispārpieņemtiem tīmekļa standartiem, un ar minimālu papildu piepūli to var izmantot, lai izveidotu vietnes, kas ir pieejamas tiem, kas izmanto AT .

Izlaist navigāciju

Ja jūsu navigācijā ir daudz saišu un tā atrodas pirms galvenā satura DOM, pievienojiet Skip to main contentsaiti pirms navigācijas (vienkāršu skaidrojumu skatiet šajā A11Y projekta rakstā par navigācijas saišu izlaišanu ). Klases izmantošana .sr-onlyvizuāli paslēps izlaišanas saiti, un .sr-only-focusableklase nodrošinās, ka saite kļūst redzama pēc fokusēšanas (redzīgiem tastatūras lietotājiem).

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

Ligzdotie virsraksti

Ligzdojot virsrakstus ( <h1>- <h6>), jūsu primārajam dokumenta galvenei ir jābūt <h1>. Turpmākajos virsrakstos loģiski jāizmanto <h2>-<h6> ekrāna lasītāji varētu izveidot jūsu lapu satura rādītāju.

Uzziniet vairāk vietnēs HTML CodeSniffer un Penn State's AccessAbility .

Krāsu kontrasts

Pašlaik dažas no noklusējuma krāsu kombinācijām, kas pieejamas programmā Bootstrap (piemēram, dažādas stila pogu klases, dažas koda izcelšanas krāsas, kas tiek izmantotas pamata kodu blokiem , .bg-primary kontekstuālā fona palīga klase un noklusējuma saites krāsa, ja tiek izmantota uz balta fona) ir zema kontrasta attiecība (zem ieteicamās attiecības 4,5:1 ). Tas var radīt problēmas lietotājiem ar vāju redzi vai daltoniķiem. Šīs noklusējuma krāsas var būt jāmaina, lai palielinātu to kontrastu un salasāmību.

Papildu resursi

• "HTML Codesniffer" grāmatzīme pieejamības problēmu identificēšanai
• Chrome pieejamības izstrādātāja rīku paplašinājums
• Krāsu kontrasta analizators
• Projekts A11Y
• MDN pieejamības dokumentācija

Licences FAQ

Bootstrap tiek izlaists saskaņā ar MIT licenci, un tā autortiesības ir 2019 Twitter. Vārītu līdz mazākiem gabaliņiem, to var aprakstīt ar šādiem nosacījumiem.

Tas prasa, lai jūs:

• Saglabājiet Bootstrap CSS un JavaScript failos iekļauto licenci un autortiesību paziņojumu, kad tos izmantojat savos darbos

Tas ļauj jums:

• Pilnībā vai daļēji brīvi lejupielādējiet un izmantojiet Bootstrap personīgiem, privātiem, uzņēmuma iekšējiem vai komerciāliem mērķiem
• Izmantojiet Bootstrap pakotnēs vai izplatījumos, ko izveidojat
• Modificējiet avota kodu
• Piešķiriet apakšlicenci, lai modificētu un izplatītu Bootstrap trešajām pusēm, kas nav iekļautas licencē

Tas aizliedz jums:

• Uzņemiet autorus un licences īpašniekus pie atbildības par zaudējumiem, jo ​​Bootstrap tiek nodrošināts bez garantijas
• Saukt pie atbildības Bootstrap veidotājus vai autortiesību īpašniekus
• Pārplatiet jebkuru Bootstrap daļu bez atbilstoša attiecinājuma
• Izmantojiet visas Twitter piederošās zīmes jebkādā veidā, kas varētu norādīt vai likt domāt, ka Twitter atbalsta jūsu izplatīšanu
• Izmantojiet Twitter piederošās zīmes jebkādā veidā, kas varētu norādīt vai likt domāt, ka esat izveidojis attiecīgo Twitter programmatūru

Tas neprasa, lai jūs:

• Iekļaujiet pašu Bootstrap avotu vai jebkādas modifikācijas, kuras tajā esat veicis, jebkurā pārdalē, ko varat apkopot, kas ietver to
• Iesniedziet Bootstrap veiktās izmaiņas atpakaļ Bootstrap projektā (lai gan šādas atsauksmes ir ieteicamas)

Pilna Bootstrap licence ir pieejama projekta repozitorijā , lai iegūtu plašāku informāciju.

Tulkojumi

Kopienas dalībnieki ir tulkojuši Bootstrap dokumentāciju dažādās valodās. Neviens no tiem netiek oficiāli atbalstīts, un tie ne vienmēr var būt atjaunināti.

• Bootstrap 中文文档 (ķīniešu)
• Bootstrap på Dansk (dāņu)
• Bootstrap en Français (franču)
• Bootstrap auf Deutsch (vācu)
• Bootstrap itāļu valodā (itāļu)
• Bootstrap 한국어 (korejiešu)
• Bootstrap em Português do Brasil (Brazīlijas portugāļu)
• Bootstrap по-русски (krievu val.)
• Bootstrap en Español (spāņu valodā)
• Türkçe Bootstrap (turku valodā)
• Bootstrap українською (ukraiņu valodā)
• Bootstrap bằng tiếng Việt (vjetnamiešu)

Mēs nepalīdzam organizēt vai mitināt tulkojumus, mēs tikai saiti uz tiem.

Vai esat pabeidzis jaunu vai labāku tulkojumu? Atveriet izvilkšanas pieprasījumu, lai to pievienotu mūsu sarakstam.