parsisiųsti

„Bootstrap“ (šiuo metu v3.4.1) turi keletą paprastų būdų greitai pradėti, kiekvienas iš jų yra patrauklus skirtingam įgūdžių lygiui ir naudojimo atvejams. Perskaitykite, kad sužinotumėte, kas atitinka jūsų konkrečius poreikius.

jsDelivr

„ jsDelivr “ darbuotojai maloniai teikia CDN palaikymą „Bootstrap“ CSS ir „JavaScript“. Tiesiog naudokite šias „jsDelivr“ nuorodas.

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

Įdiekite su Bower

Taip pat galite įdiegti ir valdyti „Bootstrap's Less“, CSS, „JavaScript“ ir šriftus naudodami „ Bower “ :

bower install bootstrap

Įdiekite naudodami npm

Taip pat galite įdiegti „Bootstrap“ naudodami npm :

npm install bootstrap@3

require('bootstrap')įkels visus „Bootstrap“ „jQuery“ papildinius į „jQuery“ objektą. Pats bootstrapmodulis nieko neeksportuoja. Galite rankiniu būdu įkelti Bootstrap jQuery papildinius atskirai, įkeldami /js/*.jsfailus paketo aukščiausio lygio kataloge.

„Bootstrap“ package.jsonyra keletas papildomų metaduomenų pagal šiuos raktus:

• less- kelias į pagrindinį „Bootstrap“ mažiau šaltinio failą
• style- kelias į „Bootstrap“ nesumažintą CSS, kuris buvo iš anksto sukompiliuotas naudojant numatytuosius nustatymus (be tinkinimo)

Įdiekite naudodami „Composer“.

Taip pat galite įdiegti ir valdyti „Bootstrap's Less“, CSS, „JavaScript“ ir šriftus naudodami „ Composer “ :

composer require twbs/bootstrap

Reikalingas automatinis priešdėlis Less/Sass

„ Bootstrap“ naudoja „Autoprefixer “, kad galėtų apdoroti CSS tiekėjo priešdėlius . Jei kompiliuojate Bootstrap iš jo Less/Sass šaltinio ir nenaudojate mūsų Gruntfile, turėsite patys integruoti Autoprefixer į savo kūrimo procesą. Jei naudojate iš anksto sukompiliuotą „Bootstrap“ arba „Gruntfile“, jums nereikia dėl to jaudintis, nes „Autoprefixer“ jau yra integruotas į mūsų „Gruntfile“.

Kas įtraukta

„Bootstrap“ galima atsisiųsti dviem formomis, kuriose rasite šiuos katalogus ir failus, kurie logiškai sugrupuoja bendruosius išteklius ir pateikia tiek kompiliuotus, tiek sumažintus variantus.

Iš anksto sukompiliuotas Bootstrap

Atsisiuntę išpakuokite suglaudintą aplanką, kad pamatytumėte (sukompiliuoto) Bootstrap struktūrą. Pamatysite kažką panašaus:

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

Tai pati paprasčiausia „Bootstrap“ forma: iš anksto sukompiliuoti failai, skirti greitai panaudoti beveik bet kuriame žiniatinklio projekte. Mes teikiame sukompiliuotus CSS ir JS ( bootstrap.*), taip pat sukompiliuotus ir sumažintus CSS ir JS ( bootstrap.min.*). CSS šaltinio žemėlapius ( bootstrap.*.map) galima naudoti su tam tikrų naršyklių kūrėjo įrankiais. Įtraukti šriftai iš Glyphicons, kaip ir pasirenkama Bootstrap tema.

Bootstrap šaltinio kodas

„Bootstrap“ šaltinio kodo atsisiuntimas apima iš anksto sukompiliuotus CSS, „JavaScript“ ir šriftų išteklius, taip pat šaltinį „Less“, „JavaScript“ ir dokumentaciją. Tiksliau, tai apima šiuos ir daugiau:

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

, less/ir yra mūsų CSS js/, fonts/JS ir piktogramų šriftų (atitinkamai) šaltinio kodas. dist/Aplanke yra viskas, kas nurodyta aukščiau esančiame iš anksto sudarytame atsisiuntimo skyriuje . docs/Aplanke yra mūsų dokumentacijos ir „Bootstrap“ naudojimo šaltinio kodas examples/. Be to, bet kuris kitas įtrauktas failas palaiko paketus, informaciją apie licenciją ir plėtrą.

CSS ir JavaScript kompiliavimas

„ Bootstrap“ savo kūrimo sistemai naudoja „ Grunt “ su patogiais darbo su sistema metodais. Taip mes sudarome savo kodą, vykdome testus ir dar daugiau.

„Grunt“ diegimas

Norėdami įdiegti Grunt, pirmiausia turite atsisiųsti ir įdiegti node.js (įskaitant npm). npm reiškia mazgų supakuotus modulius ir yra būdas valdyti kūrimo priklausomybes naudojant node.js.

1. Įdiekite grunt-clivisame pasaulyje naudodami npm install -g grunt-cli.
2. Eikite į šakninį /bootstrap/katalogą, tada paleiskite npm install. npm peržiūrės package.jsonfailą ir automatiškai įdiegs jame išvardytas būtinas vietines priklausomybes.

Baigę galėsite paleisti įvairias Grunt komandas, pateiktas komandinėje eilutėje.

Galimos Grunt komandos

grunt dist(Tiesiog sukompiliuokite CSS ir JavaScript)

Atkuria /dist/katalogą su sukompiliuotais ir sumažintais CSS ir JavaScript failais. Kaip Bootstrap vartotojas, tai paprastai yra norima komanda.

grunt watch(Žiūrėti)

Stebi mažiau šaltinio failus ir automatiškai perkompiliuoja juos į CSS, kai tik įrašote pakeitimą.

grunt test(Vykdyti testus)

Karma dėka paleidžia JSHint ir QUnit testus realiose naršyklėse .

grunt docs(Sukurkite ir išbandykite dokumentų išteklius)

Sukuria ir išbando CSS, JavaScript ir kitus išteklius, kurie naudojami vykdant dokumentaciją vietoje per bundle exec jekyll serve.

grunt(Sukurkite absoliučiai viską ir atlikite testus)

Kompiliuoja ir sumažina CSS ir JavaScript, sukuria dokumentacijos svetainę, paleidžia HTML5 tikrintuvą pagal dokumentus, iš naujo sukuria tinkinimo priemonės išteklius ir dar daugiau. Reikia Jekyll . Paprastai tai būtina tik tada, kai įsilaužote į patį „Bootstrap“.

Problemų sprendimas

Jei kyla problemų diegiant priklausomybes arba vykdant Grunt komandas, pirmiausia ištrinkite /node_modules/npm sugeneruotą katalogą. Tada paleiskite iš naujo npm install.

Pagrindinis šablonas

Pradėkite nuo šio pagrindinio HTML šablono arba pakeiskite šiuos pavyzdžius . Tikimės, kad pritaikysite mūsų šablonus ir pavyzdžius, pritaikydami juos pagal savo poreikius.

Nukopijuokite toliau pateiktą HTML, kad pradėtumėte dirbti su minimaliu 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>

Pavyzdžiai

Sukurkite aukščiau pateiktą pagrindinį šabloną naudodami daugybę „Bootstrap“ komponentų. Raginame pritaikyti ir pritaikyti „Bootstrap“, kad atitiktų jūsų individualaus projekto poreikius.

Gaukite kiekvieno toliau pateikto pavyzdžio šaltinio kodą atsisiųsdami „Bootstrap“ saugyklą . Pavyzdžius galite rasti docs/examples/kataloge.

Naudojant karkasą

Starterio šablonas

Nieko, išskyrus pagrindus: sukompiliuotas CSS ir JavaScript kartu su konteineriu.

Bootstrap tema

Įkelkite pasirenkamą „Bootstrap“ temą, kad vizualiai patobulintumėte patirtį.

Tinkleliai

Keli tinklelio išdėstymo pavyzdžiai su visomis keturiomis pakopomis, įdėjimu ir kt.

Džumbotronas

Kurkite aplink jumbotroną naudodami naršymo juostą ir keletą pagrindinių tinklelio stulpelių.

Siauras jumbotronas

Sukurkite labiau pritaikytą puslapį susiaurindami numatytąjį sudėtinį rodinį ir jumbotroną.

Navigbarai veikia

Navigacijos juosta

Labai paprastas šablonas, kuriame yra naršymo juosta ir papildomas turinys.

Statinė viršutinė naršymo juosta

Labai paprastas šablonas su statine viršutine naršymo juosta ir papildomu turiniu.

Pataisyta naršymo juosta

Labai paprastas šablonas su fiksuota viršutine naršymo juosta ir papildomu turiniu.

Individualūs komponentai

Viršelis

Vieno puslapio šablonas paprastiems ir gražiems pagrindiniams puslapiams kurti.

Karuselė

Tinkinkite naršymo juostą ir karuselę, tada pridėkite naujų komponentų.

Dienoraštis

Paprastas dviejų stulpelių tinklaraščio išdėstymas su pasirinktiniu naršymu, antrašte ir tipu.

Prietaisų skydelis

Pagrindinė administratoriaus prietaisų skydelio struktūra su fiksuota šonine ir naršymo juosta.

Prisijungimo puslapis

Individualizuotos formos išdėstymas ir dizainas, skirtas paprastos iškabos formai.

Patvirtinta nav

Sukurkite tinkintą naršymo juostą su pagrįstomis nuorodomis. Galvas aukštyn! Ne per daug draugiškas „Safari“.

Lipni poraštė

Pritvirtinkite poraštę peržiūros srities apačioje, kai turinys yra trumpesnis už jį.

Lipni poraštė su naršymo juosta

Pritvirtinkite poraštę peržiūros srities apačioje su fiksuota naršymo juosta viršuje.

Eksperimentai

Nereaguojantis Bootstrap

Lengvai išjunkite „Bootstrap“ reagavimą pagal mūsų dokumentus .

Ne drobė

Sukurkite perjungiamą ne drobės naršymo meniu, skirtą naudoti su „Bootstrap“.

Įrankiai

Bootlint

„Bootlint “ yra oficialus „Bootstrap HTML linter “ įrankis. Jis automatiškai patikrina, ar tinklalapiuose, kuriuose „Bootstrap“ naudojamas gana „vaniliniu“ būdu, nėra kelių įprastų HTML klaidų. „Vanilla Bootstrap“ komponentai / valdikliai reikalauja, kad jų DOM dalys atitiktų tam tikras struktūras. „Bootlint“ patikrina, ar „Bootstrap“ komponentų egzemplioriai turi tinkamos struktūros HTML. Apsvarstykite galimybę įtraukti „Bootlint“ į „Bootstrap“ žiniatinklio kūrimo įrankių grandinę, kad nė viena iš dažniausiai pasitaikančių klaidų nesulėtėtų jūsų projekto kūrimo.

bendruomenė

Gaukite naujausią informaciją apie „Bootstrap“ kūrimą ir susisiekite su bendruomene naudodami šiuos naudingus išteklius.

• Skaitykite ir užsiprenumeruokite oficialų „Bootstrap“ tinklaraštį .
• Kalbėkitės su kitais Bootstrappers naudodami IRC irc.freenode.netserveryje ##bootstrap kanale .
• Jei reikia pagalbos naudojant Bootstrap, kreipkitės į StackOverflow naudodami žymątwitter-bootstrap-3 .
• Kūrėjai turėtų naudoti raktinį žodį bootstrappaketuose, kurie modifikuoja arba papildo „Bootstrap“ funkcijas, kai platina per npm ar panašius pristatymo mechanizmus, kad būtų galima maksimaliai aptikti.
• Raskite įkvepiančių pavyzdžių, kaip žmonės stato naudodami „Bootstrap“ parodoje „ Bootstrap Expo“ .

Taip pat galite sekti @getbootstrap „Twitter “, kad gautumėte naujausių paskalų ir nuostabių muzikinių vaizdo įrašų.

Reagavimo išjungimas

„Bootstrap“ automatiškai pritaiko jūsų puslapius įvairių dydžių ekranams. Štai kaip išjungti šią funkciją, kad jūsų puslapis veiktų kaip šis nereaguojantis pavyzdys .

Puslapio reagavimo išjungimo veiksmai

1. Praleiskite peržiūros sritį <meta>, nurodytą CSS dokumentuose
2. Nepaisykite widthant .containerkiekvienos tinklelio pakopos vieno pločio, pvz., width: 970px !important;Įsitikinkite, kad tai yra po numatytojo Bootstrap CSS. Pasirinktinai galite išvengti !importantmedijos užklausų arba kai kurių selektorių-fu.
3. Jei naudojate naršymo juostas, pašalinkite visus naršymo juostos sutraukimo ir išplėtimo veiksmus.
4. Tinklelio išdėstymams naudokite .col-xs-*klases be vidutinių / didelių arba vietoj jų. Nesijaudinkite, ypač mažas įrenginio tinklelis prisitaiko prie visų skiriamųjų gebų.

Jums vis tiek reikės Respond.js, skirto IE8 (nes mūsų medijos užklausos vis dar yra ir jas reikia apdoroti). Tai išjungia „Bootstrap“ mobiliosios svetainės aspektus.

Bootstrap šablonas su išjungtu reagavimu

Šiuos veiksmus pritaikėme pavyzdžiui. Perskaitykite šaltinio kodą, kad pamatytumėte konkrečius įgyvendintus pakeitimus.

Peržiūrėkite nereaguojantį pavyzdį

Naršyklės ir įrenginių palaikymas

Bootstrap sukurtas taip, kad geriausiai veiktų naujausiose stalinių kompiuterių ir mobiliųjų įrenginių naršyklėse, o tai reiškia, kad senesnėse naršyklėse gali būti rodomi kitokio stiliaus, nors ir visiškai funkcionalūs tam tikrų komponentų atvaizdai.

Palaikomos naršyklės

Konkrečiai, mes palaikome naujausias toliau nurodytų naršyklių ir platformų versijas.

Alternatyvios naršyklės, kuriose naudojama naujausia „WebKit“, „Blink“ arba „Gecko“ versija, tiesiogiai arba per platformos žiniatinklio peržiūros API, nėra aiškiai palaikomos. Tačiau Bootstrap turėtų (daugeliu atvejų) tinkamai rodyti ir veikti šiose naršyklėse. Toliau pateikiama konkretesnė palaikymo informacija.

Mobilieji įrenginiai

Paprastai kalbant, „Bootstrap“ palaiko naujausias kiekvienos pagrindinės platformos numatytųjų naršyklių versijas. Atminkite, kad tarpinio serverio naršyklės (pvz., „Opera Mini“, „Opera Mobile“ Turbo režimas, „UC Browser Mini“, „Amazon Silk“) nepalaikomos.

Stalinių kompiuterių naršyklės

Panašiai palaikomos ir naujausios daugumos darbalaukio naršyklių versijos.

Sistemoje „Windows“ palaikome „Internet Explorer 8–11“ .

Be naujausio įprasto stabilaus leidimo, „Firefox“ palaikome ir naujausią išplėstinio palaikymo leidimo (ESR) „Firefox“ versiją.

Neoficialiai „Bootstrap“ turėtų atrodyti ir veikti pakankamai gerai „Chromium“ ir „Chrome“, skirta „Linux“, „Firefox“, skirta „Linux“ ir „Internet Explorer 7“, taip pat „Microsoft Edge“, nors jie oficialiai nepalaikomi.

Kai kurių naršyklės klaidų, su kuriomis turi kovoti Bootstrap, sąrašą rasite mūsų naršyklės klaidų sienoje .

Internet Explorer 8 ir 9

Taip pat palaikomos „Internet Explorer 8“ ir „Internet Explorer 9“, tačiau atminkite, kad šios naršyklės ne visiškai palaiko kai kurias CSS3 ypatybes ir HTML5 elementus. Be to, norint įgalinti medijos užklausų palaikymą , „ Internet Explorer 8“ reikalauja naudoti Respond.js .

Norėdami gauti daugiau informacijos apie naršyklės CSS3 ir HTML5 funkcijų palaikymą, apsilankykite Ar galiu naudoti....

Internet Explorer 8 ir Respond.js

Naudodami Respond.js savo kūrimo ir gamybos aplinkoje, skirtoje „Internet Explorer 8“, saugokitės šių įspėjimų.

Respond.js ir kelių domenų CSS

Naudojant Respond.js su CSS, priglobtu kitame (padomene) (pavyzdžiui, CDN), reikia papildomos sąrankos. Daugiau informacijos rasite Respond.js dokumentuose .

Atsakyti.js irfile://

Dėl naršyklės saugumo taisyklių Respond.js neveikia puslapiuose, peržiūrimuose naudojant file://protokolą (pvz., atidarant vietinį HTML failą). Norėdami išbandyti interaktyvias IE8 funkcijas, peržiūrėkite puslapius per HTTP(S). Daugiau informacijos rasite Respond.js dokumentuose .

Atsakyti.js ir@import

Respond.js neveikia su CSS, kuris nurodytas per @import. Visų pirma žinoma, kad kai kurios Drupal konfigūracijos naudoja @import. Daugiau informacijos rasite Respond.js dokumentuose .

Internet Explorer 8 ir dėžutės dydžio nustatymas

IE8 ne visiškai palaiko box-sizing: border-box;, kai jis derinamas su min-width, max-width, min-height, arba max-height. max-widthDėl šios priežasties nuo 3.0.1 versijos nebenaudojame .containers.

Internet Explorer 8 ir @font-face

IE8 turi tam tikrų problemų, @font-facekai jis derinamas su :before. „Bootstrap“ naudoja šį derinį su savo „Glyphicons“. Jei puslapis yra talpykloje ir įkeliamas neužvedus pelės ant lango (ty paspaudžiamas atnaujinimo mygtukas arba įkeliamas ką nors į iframe), puslapis atvaizduojamas prieš įkeliant šriftą. Užvedus pelės žymeklį virš puslapio (turinio), bus rodomos kai kurios piktogramos, o užvedus pelės žymeklį virš likusių piktogramų, jos taip pat bus rodomos. Norėdami gauti daugiau informacijos, žr. numerį 13863 .

IE suderinamumo režimai

„Bootstrap“ nepalaikomas senuose „Internet Explorer“ suderinamumo režimuose. Norėdami įsitikinti, kad naudojate naujausią IE atvaizdavimo režimą, apsvarstykite galimybę <meta>į savo puslapius įtraukti atitinkamą žymą:

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

Patvirtinkite dokumento režimą atidarydami derinimo įrankius: paspauskite F12ir pažymėkite „Dokumento režimas“.

Ši žyma įtraukta į visą „Bootstrap“ dokumentaciją ir pavyzdžius, siekiant užtikrinti geriausią įmanomą atvaizdavimą kiekvienoje palaikomoje „Internet Explorer“ versijoje.

Norėdami gauti daugiau informacijos, žr . šį „StackOverflow“ klausimą .

„Internet Explorer 10“ sistemoje „Windows 8“ ir „Windows Phone 8“.

Internet Explorer 10 neskiria įrenginio pločio nuo peržiūros srities pločio , todėl netinkamai taiko medijos užklausas Bootstrap CSS. Paprastai tiesiog pridėkite greitą CSS fragmentą, kad tai išspręstumėte:

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

Tačiau tai neveikia įrenginiuose, kuriuose veikia senesnės nei 3 naujinimas (dar žinomas kaip GDR3) „Windows Phone 8“ versijos , nes tokiuose įrenginiuose dažniausiai rodomas darbalaukio vaizdas, o ne siauras „telefono“ vaizdas. Kad tai išspręstumėte, turėsite įtraukti toliau nurodytus CSS ir JavaScript, kad išvengtumėte klaidos .

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

Daugiau informacijos ir naudojimo gairių rasite „ Windows Phone 8“ ir „Device-Width“ .

Norime atkreipti dėmesį į tai, kaip demonstravimą, įtraukiame į visus „Bootstrap“ dokumentus ir pavyzdžius.

Safari procentinis apvalinimas

.col-*-1Ankstesnių nei 7.1 versijų „Safari“, skirtų OS X, ir „Safari“, skirtų iOS v8.0, atvaizdavimo variklis turėjo problemų dėl mūsų tinklelio klasėse naudojamų skaičių po kablelio . Taigi, jei turėtumėte 12 atskirų tinklelio stulpelių, pastebėtumėte, kad jie buvo trumpi, palyginti su kitomis stulpelių eilutėmis. Be „Safari“ / „iOS“ atnaujinimo, turite keletą būdų, kaip išspręsti šią problemą:

• Pridėkite .pull-rightprie paskutinio tinklelio stulpelio, kad gautumėte griežtą dešiniąją išlygiavimą
• Patikslinkite savo procentus rankiniu būdu, kad gautumėte tobulą „Safari“ apvalinimą (sunkiau nei pirmoji parinktis)

Modalai, naršymo juostos ir virtualios klaviatūros

Perpildymas ir slinkimas

Elemento palaikymas overflow: hidden„ <body>iOS“ ir „Android“ yra gana ribotas. Tuo tikslu, kai slinksite pro modalo viršų arba apačią bet kurioje iš šių įrenginių naršyklių, <body>turinys pradės slinkti. Žr . „ Chrome“ klaidą Nr. 175502 (ištaisyta „Chrome v40“) ir „ WebKit“ klaidą Nr. 153852 .

iOS teksto laukai ir slinkimas

<input>Nuo 9.3 versijos iOS, kai modalas yra atidarytas, jei pradinis slinkties gesto palietimas yra teksto arba ribose, po modalu <textarea>esantis <body>turinys bus slinktas, o ne pats modalas. Žr . WebKit klaidą Nr. 153856 .

Virtualios klaviatūros

Be to, atminkite, kad jei naudojate fiksuotą naršymo juostą arba naudojate modalo įvestis, „iOS“ turi atvaizdavimo klaidą, kuri neatnaujina fiksuotų elementų padėties, kai suaktyvinama virtualioji klaviatūra. Keletas būdų, kaip tai padaryti, apima elementų pakeitimą position: absolutearba fokusavimo laikmačio iškvietimą, kad būtų galima rankiniu būdu ištaisyti padėtį. To netvarko „Bootstrap“, todėl jūs turite nuspręsti, kuris sprendimas yra geriausias jūsų programai.

Naršymo juostos išskleidžiamieji meniu

Elementas .dropdown-backdrop„iOS“ nenaudojamas navigacijoje dėl z indeksavimo sudėtingumo. Taigi, norėdami uždaryti naršymo juostų išskleidžiamuosius meniu, turite tiesiogiai spustelėti išskleidžiamąjį elementą (arba bet kurį kitą elementą, kuris suaktyvins paspaudimo įvykį sistemoje „iOS“ ).

Naršyklės mastelio keitimas

Keičiant puslapio mastelį, kai kuriuose komponentuose, tiek Bootstrap, tiek likusioje žiniatinklio dalyje, neišvengiamai atsiranda atvaizdavimo artefaktų. Atsižvelgdami į problemą, galime ją išspręsti (pirmiausia ieškokite ir, jei reikia, atidarykite problemą). Tačiau mes linkę į tai nepaisyti, nes jie dažnai neturi tiesioginio sprendimo, išskyrus įsisenėjusius sprendimus.

Lipni :hover/ :focusmobiliajame telefone

Nors tikrasis užvedimas ant žymeklio neįmanomas daugelyje jutiklinių ekranų, dauguma mobiliųjų naršyklių imituoja užvedimo palaikymą ir daro :hover„lipnią“. Kitaip tariant, :hoverstiliai pradedami taikyti palietus elementą ir nustoja būti taikomi tik vartotojui palietus kitą elementą. Dėl to „Bootstrap“ :hoverbūsenos gali nepageidaujamai „užstrigti“ tokiose naršyklėse. Kai kurios mobiliosios naršyklės taip pat yra :focuspanašiai lipnios. Šiuo metu nėra paprasto šių problemų sprendimo, išskyrus visišką tokių stilių pašalinimą.

Spausdinimas

Net kai kuriose šiuolaikinėse naršyklėse spausdinimas gali būti keistas.

Visų pirma, nuo 32 versijos „Chrome“ ir neatsižvelgiant į paraščių nustatymus, „Chrome“ naudoja žymiai siauresnį nei fizinio popieriaus dydį peržiūros srities plotį, kai sprendžia medijos užklausas spausdinant tinklalapį. Dėl to spausdinant gali netikėtai suaktyvėti itin mažas „Bootstrap“ tinklelis. Norėdami gauti daugiau informacijos, žr. problemą Nr. 12078 ir „ Chrome“ klaidą Nr. 273306 . Siūlomi problemos sprendimo būdai:

• Apkabinkite itin mažą tinklelį ir įsitikinkite, kad po juo jūsų puslapis atrodo priimtinas.
• Tinkinkite @screen-*kintamųjų Mažiau reikšmes, kad spausdintuvo popierius būtų laikomas didesniu nei itin mažu.
• Pridėkite pasirinktines laikmenos užklausas, kad pakeistumėte tik spausdinimo laikmenos tinklelio dydžio lūžio taškus.

Be to, nuo 8.0 versijos Safari dėl fiksuoto pločio .containers spausdinant Safari gali būti naudojamas neįprastai mažas šriftas. Norėdami gauti daugiau informacijos, žr . #14868 ir WebKit klaidą #138192 . Vienas iš galimų šios problemos sprendimo būdų yra pridėti šį CSS:

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

Android akcijų naršyklė

Iš pradžių „Android 4.1“ (ir, matyt, net kai kurie naujesni leidimai) pristatoma su Naršyklės programa kaip numatytoji pasirinkta žiniatinklio naršyklė (priešingai nei „Chrome“). Deja, naršyklės programoje yra daug klaidų ir apskritai CSS neatitikimų.

Pasirinkite meniu

Elementuose <select>„Android“ atsargų naršyklė nerodys šoninių valdiklių, jei yra border-radiusir (arba) borderpritaikyti. (Išsamesnės informacijos ieškokite šiame „StackOverflow“ klausime .) Naudokite toliau pateiktą kodo fragmentą, kad pašalintumėte pažeidžiantį CSS ir <select>„Android“ atsargų naršyklėje pateiktumėte kaip nestiliautą elementą. Naudotojo agento uostymas leidžia išvengti „Chrome“, „Safari“ ir „Mozilla“ naršyklių trikdžių.

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

Norite pamatyti pavyzdį? Peržiūrėkite šią JS Bin demonstraciją.

Validatoriai

Siekdama suteikti geriausią įmanomą patirtį senoms ir klaidingoms naršyklėms, „Bootstrap“ keliose vietose naudoja CSS naršyklės įsilaužimus , kad tam tikroms naršyklės versijoms būtų pritaikytas specialus CSS, kad būtų išvengta pačių naršyklių klaidų. Dėl šių įsilaužimų CSS tikrintojai skundžiasi, kad jie neteisingi. Kai kuriose vietose taip pat naudojame pažangiausias CSS funkcijas, kurios dar nėra visiškai standartizuotos, tačiau jos naudojamos tik laipsniškam patobulinimui.

Šie patvirtinimo įspėjimai praktiškai neturi reikšmės, nes neįsilaužianti mūsų CSS dalis visiškai patvirtinama, o įsilaužusios dalys netrukdo tinkamai veikti neįsilaužančiai daliai, todėl mes sąmoningai ignoruojame šiuos konkrečius įspėjimus.

Mūsų HTML dokumentuose taip pat yra keletas nereikšmingų ir nereikšmingų HTML patvirtinimo įspėjimų, nes įtraukėme tam tikros „Firefox“ klaidos sprendimą .

Trečiųjų šalių palaikymas

Nors oficialiai nepalaikome jokių trečiųjų šalių papildinių ar priedų, siūlome keletą naudingų patarimų, kurie padės išvengti galimų problemų jūsų projektuose.

Dėžutės dydžio nustatymas

Kai kuri trečiosios šalies programinė įranga, įskaitant „Google“ žemėlapius ir „Google“ tinkintos paieškos programą, prieštarauja „Bootstrap“ dėl * { box-sizing: border-box; }taisyklės, dėl kurios ji paddingneturi įtakos galutiniam apskaičiuotam elemento pločiui. Sužinokite daugiau apie dėžutės modelį ir dydį apsilankę CSS Tricks .

Atsižvelgiant į kontekstą, prireikus galite nepaisyti (1 parinktis) arba iš naujo nustatyti visų regionų dėžės dydį (2 parinktis).

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

Prieinamumas

„Bootstrap“ atitinka įprastus žiniatinklio standartus ir – su minimaliomis papildomomis pastangomis – gali būti naudojamas kuriant svetaines, pasiekiamas naudojantiems AT .

Praleisti navigaciją

Jei jūsų navigacijoje yra daug nuorodų ir ji pateikiama prieš pagrindinį DOM turinį, Skip to main contentprieš naršymą pridėkite nuorodą (paprastą paaiškinimą rasite šiame A11Y projekto straipsnyje apie naršymo nuorodų praleidimą ). Naudojant .sr-onlyklasę, praleidimo nuoroda bus vizualiai paslėpta, o .sr-only-focusableklasė užtikrins, kad nuoroda taptų matoma, kai ji bus sufokusuota (regintiems klaviatūros naudotojams).

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

Įdėtos antraštės

Kai dedate antraštes ( <h1>- <h6>), pagrindinė dokumento antraštė turi būti <h1>. Vėlesnėse antraštėse turėtų būti naudojamos logiškos savybės, <h2>kad <h6>ekrano skaitytuvai galėtų sudaryti jūsų puslapių turinį.

Sužinokite daugiau HTML CodeSniffer ir Penn State AccessAbility .

Spalvų kontrastas

Šiuo metu kai kurie numatytieji „Bootstrap“ spalvų deriniai (pvz., įvairių stilių mygtukų klasės, kai kurios kodo paryškinimo spalvos, naudojamos pagrindiniams kodų blokams , .bg-primary kontekstinio fono pagalbinė klasė ir numatytoji nuorodos spalva, kai naudojama baltame fone) turi mažą kontrasto santykį (žemiau rekomenduojamo 4,5:1 santykio ). Dėl to gali kilti problemų silpnaregiams arba daltonistams. Šias numatytąsias spalvas gali tekti keisti, kad būtų padidintas jų kontrastas ir įskaitomumas.

Papildomi resursai

• „HTML Codesniffer“ žymelė pritaikymo neįgaliesiems problemoms nustatyti
• „Chrome“ pritaikymo neįgaliesiems kūrėjo įrankių plėtinys
• Spalvų kontrasto analizatorius
• Projektas A11Y
• MDN prieinamumo dokumentai

Licencijos DUK

„Bootstrap“ išleidžiama pagal MIT licenciją ir priklauso 2019 m. „Twitter“ autorių teisėms. Išvirtą iki mažesnių gabalėlių, jį galima apibūdinti tokiomis sąlygomis.

Tam reikia:

• Išsaugokite licenciją ir autorių teisių įspėjimą, įtrauktą į „Bootstrap“ CSS ir „JavaScript“ failus, kai juos naudojate savo darbuose

Tai leidžia jums:

• Nemokamai atsisiųskite ir naudokite „Bootstrap“ visiškai arba iš dalies asmeniniais, asmeniniais, įmonės vidiniais ar komerciniais tikslais
• Naudokite „Bootstrap“ kuriamuose paketuose arba paskirstymuose
• Pakeiskite šaltinio kodą
• Suteikite sublicenciją modifikuoti ir platinti „Bootstrap“ trečiosioms šalims, kurios neįtrauktos į licenciją

Tai draudžia jums:

• Autoriai ir licencijų savininkai yra atsakingi už žalą, nes „Bootstrap“ suteikiama be garantijos
• Laikyti atsakingus „Bootstrap“ kūrėjus arba autorių teisių turėtojus
• Perskirstykite bet kurią „Bootstrap“ dalį be tinkamo priskyrimo
• Naudokite bet kokius „Twitter“ priklausančius ženklus, kurie gali teigti ar reikšti, kad „Twitter“ palaiko jūsų platinimą
• Naudokite bet kokius „Twitter“ priklausančius ženklus, kurie gali teigti ar reikšti, kad sukūrėte atitinkamą „Twitter“ programinę įrangą

Tam nereikia:

• Įtraukite paties „Bootstrap“ šaltinį arba bet kokius pakeitimus, kuriuos galbūt padarėte, į bet kokį perskirstymą, kurį galite surinkti, į kurį jis įtrauktas
• Pateikite Bootstrap pakeitimus atgal į Bootstrap projektą (nors tokie atsiliepimai yra skatinami)

Norėdami gauti daugiau informacijos , visa „Bootstrap“ licencija yra projekto saugykloje .

Vertimai

Bendruomenės nariai išvertė Bootstrap dokumentaciją į įvairias kalbas. Nė vienas nėra oficialiai palaikomas ir ne visada gali būti atnaujintas.

• Bootstrap 中文文档 (kinų k.)
• Bootstrap på Dansk (danų k.)
• Bootstrap en Français (prancūzų k.)
• Bootstrap auf Deutsch (vokiečių kalba)
• „Bootstrap“ italų kalba (italų kalba)
• Bootstrap 한국어 (korėjiečių kalba)
• Bootstrap em Português do Brasil (Brazilijos portugalų k.)
• Bootstrap по-русски (rusų k.)
• Bootstrap en Español (ispanų k.)
• „Turkçe Bootstrap“ (turkų k.)
• Bootstrap українською (ukrainiečių k.)
• Bootstrap bằng tiếng Việt (vietnamiečių k.)

Mes nepadedame tvarkyti ar priglobti vertimų, tik pateikiame nuorodas į juos.

Baigėte naują ar geresnį vertimą? Atidarykite ištraukimo užklausą, kad įtrauktumėte ją į sąrašą.