Dɔŋlod

Bootstrap (naw v3.3.7) gɛt sɔm izi we dɛn fɔ bigin kwik kwik wan, ɛni wan pan dɛn de apil to difrɛn skil lɛvɛl ɛn yus kes. Rid fɔ si wetin fit yu patikyula nid dɛn.

Bootstrap na CDN

Di pipul dɛn ova na jsDelivr graciously gi CDN sɔpɔt fɔ Bootstrap in CSS ɛn JavaSkript. Jɔs yuz dɛn Bootstrap CDN link dɛn ya.

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

Instɔl wit Bower

Yu kin instɔl ɛn manej Bootstrap in Less, CSS, JavaSkript, ɛn font dɛn bak we yu de yuz Bower :

$ bower install bootstrap

Instɔl wit npm

Yu kin instɔl Bootstrap bak yuz npm :

$ npm install bootstrap@3

require('bootstrap')go lod ɔl di Bootstrap in jQuery plɔgin dɛn pan di jQuery ɔbjɛkt. Di bootstrapmodul insɛf nɔ de ɛkspɔt ɛnitin. Yu kin lod Bootstrap in jQuery plɔgin dɛn wan bay wan bay we yu lod di /js/*.jsfayl dɛn ɔnda di pakej in tɔp-lɛvel dairektrɔ.

Bootstrap's package.jsongɛt sɔm ɔda mɛtadata ɔnda dɛn ki dɛn ya:

• less- pat to Bootstrap in men Less sɔs fayl
• style- pat to Bootstrap in nɔ-minifayd CSS we dɛn dɔn prɛkompayl yuz di difɔlt sɛtin dɛn (nɔ kɔstɔmayshɔn)

Instɔl wit Kɔmpozitɔ

Yu kin instɔl ɛn manej Bootstrap in Less, CSS, JavaSkript, ɛn font dɛn bak we yu de yuz Composer :

$ composer require twbs/bootstrap

Otoprefiksa nid fɔ Less/Sass

Bootstrap de yuz Autoprefixer fɔ dil wit CSS vendor prɛfiks dɛn . If yu de kɔmpilayt Bootstrap frɔm in Less/Sass sɔs ɛn yu nɔ de yuz wi Gruntfayl, yu go nid fɔ intagret Autoprefixer insay yu bil prɔses yusɛf. If yu de yuz Bootstrap we dɛn dɔn kɔmpilayt bifo tɛm ɔ yu de yuz wi Gruntfayl, yu nɔ nid fɔ wɔri bɔt dis bikɔs Ɔtoprɛfiksa dɔn ɔlrɛdi intagret insay wi Gruntfayl.

Wetin de insay

Bootstrap na tu we dɛn kin dawnlod, insay we yu go si di dairektrɔ ɛn fayl dɛn we de dɔŋ ya, we de grup kɔmɔn risɔs dɛn we gɛt lɔjik wan ɛn we de gi ɔl tu di difrɛns dɛn we dɛn dɔn kɔmpilayt ɛn we dɛn dɔn smɔl.

Bootstrap we dɛn dɔn kɔmpilayt bifo tɛm

We yu dɔn dawnlod am, pul di kɔmprɛs fɔlda fɔ si di strɔkchɔ fɔ (di kɔmpilayt) Bootstrap. Yu go si sɔntin lɛk dis:

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

Dis na di mɔs besik fɔm fɔ Bootstrap: prɛkompayl fayl dɛn fɔ kwik drɔp-in yuz insay klos to ɛni wɛb prɔjek. Wi de gi kɔmpilayt CSS ɛn JS ( bootstrap.*), ɛn bak kɔmpilayt ɛn minifyed CSS ɛn JS ( bootstrap.min.*). CSS sɔs map dɛn ( bootstrap.*.map) de fɔ yuz wit sɔm brɔuza dɛn divɛlɔpa tul dɛn. Fɔnt dɛn frɔm Glyphicons de insay, ɛn di opshɔnal Bootstrap tim de insay.

Bootstrap sɔs kɔd

Di Bootstrap sɔs kɔd dawlod gɛt di CSS, JavaSkript, ɛn font ɛset dɛn we dɛn dɔn kɔmpilayt bifo tɛm, wit sɔs Less, JavaSkript, ɛn dɔkyumentri. Fɔ tɔk mɔ, i gɛt dɛn tin ya ɛn ɔda tin dɛn:

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

Di less/, js/, ɛn fonts/na di sɔs kɔd fɔ wi CSS, JS, ɛn aykɔn fɔnt dɛn (rispektiv wan). Di dist/fɔlda gɛt ɔltin we de na di say we dɛn dɔn pul bifo tɛm fɔ dawnlod ɔp. Di docs/fɔlda gɛt di sɔs kɔd fɔ wi dɔkyumentri, ɛn examples/fɔ Bootstrap yuz. Bifo dat, ɛni ɔda fayl we de insay de gi sɔpɔt fɔ pakej dɛn, laysens infɔmeshɔn, ɛn divɛlɔpmɛnt.

Fɔ kɔmpilayt CSS ɛn JavaSkript

Bootstrap de yuz Grunt fɔ in bil sistɛm, wit kɔvinant we fɔ wok wit di fremwɔk. Na aw wi de kɔmpilayt wi kɔd, rɔn tɛst, ɛn ɔda tin dɛn.

Fɔ instɔl Grunt

Fɔ instɔl Grunt, yu fɔ fɔs dawnlod ɛn instɔl node.js (we gɛt npm). npm tinap fɔ node pak modul ɛn na wan we fɔ manej divɛlɔpmɛnt dipɛnsin dɛn tru node.js.

1. Instɔl grunt-cliɔlsay na di wɔl wit npm install -g grunt-cli.
2. Navigate to di rut /bootstrap/dairektrɔ, dɔn rɔn npm install. npm go luk di package.jsonfayl ɛn ɔtomɛtik instɔl di lokal dipɛnsin dɛn we nid we dɛn rayt de.

We yu dɔn, yu go ebul fɔ rɔn di difrɛn Grunt kɔmand dɛn we dɛn gi yu frɔm di kɔmand layn.

Grunt kɔmand dɛn we de

grunt dist(Jɔs kɔmpilayt CSS ɛn JavaSkript)

Rijeneret di /dist/dairektrɔ wit kɔmpilayt ɛn minifyed CSS ɛn JavaSkript fayl dɛn. As Bootstrap yuza, dis na nɔmal wan di kɔmand we yu want.

grunt watch(Wach)

Wach di Less sɔs fayl dɛn ɛn ɔtomɛtik wan de kɔmpilayt dɛn bak to CSS ɛnitɛm we yu sev chenj.

grunt test(Rɔn tɛst dɛn)

Rɔn JSHint ɛn rɔn di QUnit tɛst dɛn edlɛs insay PhantomJS .

grunt docs(Bild & test di docs aset dɛn)

Bil ɛn tɛst CSS, JavaSkript, ɛn ɔda prɔpati dɛn we dɛn kin yuz we dɛn de rɔn di dɔkyumentri lokal wan via bundle exec jekyll serve.

grunt(Bil absoliutli evritin en run tests)

Kɔmpayl ɛn smɔl CSS ɛn JavaSkript, bil di dɔkyumentri wɛbsayt, rɔn di HTML5 valideta agens di dɔkyumɛnt dɛn, rijeneret di Kastɔmayz ɛset dɛn, ɛn ɔda tin dɛn. I nid fɔ mek Jekyll . Usually onli nid if yu de hack pan Bootstrap sef.

Fɔ sɔlv prɔblɛm dɛn

If yu gɛt prɔblɛm wit instɔleshɔn dipɛnsin ɔ rɔn Grunt kɔmand dɛn, fɔs dilit di /node_modules/dairektrɔ we npm dɔn jenarayz. Dɔn, rirun npm install.

Besik tɛmplat

Start wit dis besik HTML tɛmplat, ɔ chenj dɛn ɛgzampul ya . Wi op se yu go kɔstɔmayt wi tɛmplat ɛn ɛgzampul dɛn, ɛn adap dɛn fɔ fit wetin yu nid.

Kɔpi di HTML we de dɔŋ fɔ bigin wok wit wan smɔl Bootstrap dɔkyumɛnt.

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

Ɛgzampul dɛn

Bil pan di besik tɛmplat we de ɔp wit Bootstrap in bɔku kɔmpɔnɛnt dɛn. Wi de ɛnkɔrej yu fɔ kɔstɔmayt ɛn adap Bootstrap fɔ fit yu wan wan prɔjek in nid dɛn.

Gɛt di sɔs kɔd fɔ ɛvri ɛgzampul we de dɔŋ ya bay we yu dawnlod di Bootstrap ripɔsitɔri . Yu kin fɛn ɛgzampul dɛn na di docs/examples/dairektrɔ.

Yuz di fremwɔk

Di tɛmplat fɔ stat

Nɔtin pas di bɛsis tin dɛn: dɛn dɔn kɔmpilayt CSS ɛn JavaSkript wit wan kɔntena.

Bootstrap na di tim

Lod di opshɔnal Bootstrap tim fɔ wan ɛkspiriɛns we go mek yu si fayn.

Grid dɛn

Bɔku ɛgzampul dɛn fɔ grid layout dɛn wit ɔl di 4 taya dɛn, nest, ɛn mɔ.

Jumbotron we dɛn kɔl Jumbotron

Bil rawnd di jumbotron wit wan navbar ɛn sɔm besik grid kɔlɔm dɛn.

Narrow jumbotron we gɛt smɔl smɔl tin dɛn

Bil wan mɔ kɔstɔm pej bay we yu smɔl di difɔlt kɔntena ɛn jumbotron.

Navbars in akshɔn

Navbar fɔ di wan dɛn we de

Super basic template we inklud di navbar wit sɔm ɔda kɔntinyu.

Statik navbar we de ɔp

Supa besik tɛmplat wit wan statik tɔp navbar wit sɔm ɔda kɔntinyu.

Navbar we dɛn dɔn fiks

Supa besik tɛmplat wit wan fiks tɔp navbar wit sɔm ɔda kɔntinyu.

Kɔstɔm kɔmpɔnɛnt dɛn

Kɔba

Wan wan pej tɛmplat fɔ bil simpul ɛn fayn fayn os pej dɛn.

Karusel we dɛn kin yuz fɔ mek

Kastamayz di navbar ɛn karusel, dɔn ad sɔm nyu kɔmpɔnɛnt dɛn.

Blɔg we dɛn rayt

Simpul tu-kɔlɔm blɔk layout wit kɔstɔm nevigishɔn, hεda, ɛn tayp.

Dashbɔd fɔ di wan dɛn we de

Besik strɔkchɔ fɔ wan admin dɛshbɔd wit fiks saydbar ɛn navbar.

Sayn-in pej

Kastom fɔm layout ɛn dizayn fɔ wan simpul sayn insay fɔm.

Nav we dɛn jɔstifay

Krio wan kɔstɔm navbar wit jɔstifay link dɛn. Hed dɛn de ɔp! Nɔto tu Safari frenli.

Stika futman

Ataya wan futnot na di bɔt ɔf di viupɔt we di tin dɛn we de insay shɔt pas am.

Stik fut wit navbar

Ataya wan futnot na di bɔt ɔf di viupɔt wit wan fiks navbar na di ɔp.

Ɛkspiriɛns dɛn

Bootstrap we nɔ de ansa

I izi fɔ disable di rispɔnsivnɛs fɔ Bootstrap per wi docs .

Ɔf-kanvas

Bil wan ɔf-kanvas nevigishɔn mɛnyu we yu kin chenj fɔ yuz wit Bootstrap.

Tul dɛn

Bootlint fɔ di wan dɛn we de

Bootlint na di ɔfishal Bootstrap HTML linta tul. I de chɛk ɔtomɛtik fɔ sɔm kɔmɔn HTML mistek dɛn na wɛb pej dɛn we de yuz Bootstrap insay wan fayn "vanila" we. Vanilla Bootstrap in kɔmpɔnɛnt/widget dɛn nid dɛn pat dɛn na di DOM fɔ kɔnfɔm to sɔm strɔkchɔ dɛn. Bootlint de chɛk se instans dɛn fɔ Bootstrap kɔmpɔnɛnt dɛn gɛt kɔrɛkt-strɔkchɔ HTML. Tink bɔt fɔ ad Bootlint to yu Bootstrap wɛb divɛlɔpmɛnt tulchen so dat nɔbɔdi pan di kɔmɔn mistek dɛn nɔ go slo yu prɔjek in divɛlɔpmɛnt.

Pipul na di eria

Stay ɔp to det bɔt di divɛlɔpmɛnt fɔ Bootstrap ɛn rich to di kɔmyuniti wit dɛn ɛp risɔs ya.

• Rid ɛn sabskripshɔn to Di Ɔfishal Bootstrap Blɔg .
• Chat wit yu kɔmpin Bootstrappers we de yuz IRC na di irc.freenode.netsava, na di ##bootstrap chanɛl .
• Fɔ ɛp fɔ yuz Bootstrap, aks pan StackOverflow yuz di tagtwitter-bootstrap-3 .
• Divɛlɔpa dɛn fɔ yuz di ki wɔd bootstrappan pakej dɛn we de chenj ɔ ad to di wok we Bootstrap de du we dɛn de sheb tru npm ɔ di sem kayn delivri mɛkanism dɛn fɔ mek dɛn ebul fɔ fɛn maksimal.
• Fɛn inspɛkt ɛgzampul dɛn bɔt pipul dɛn we de bil wit Bootstrap na di Bootstrap Ɛkspo .

Yu kin fala @getbootstrap bak na twita fɔ di laytst gɔsip ɛn fayn fayn myuzik vidio dɛn.

Disable di rispɔnsiv

Bootstrap de adap yu pej dɛn fɔ difrɛn skrin saiz dɛn ɔtomɛtik wan. Na dis na aw fɔ disable dis ficha so dat yu pej go wok lɛk dis ɛgzampul we nɔ de ansa .

Step fɔ disable pej rispɔnsiv

1. Omit di viewport <meta>we dɛn tɔk bɔt na di CSS docs
2. Ovarayd di widthon di .containerfɔ ɛni grid taya wit wan singl wit, fɔ ɛgzampul width: 970px !important;Mek shɔ se dis kam afta di difɔlt Bootstrap CSS. Yu kin opshɔnali avɔyd di !importantwit midia kwɛstyɔn ɔ sɔm sɛlɛktɔ-fu.
3. If yu de yuz navbar, pul ɔl di navbar we de kol ɛn ɛkspɛn bihayvya.
4. Fɔ grid layout, yuz .col-xs-*klas dɛn apat frɔm, ɔ insay di ples fɔ, di midul/big wan dɛn. Nɔ wɔri, di ɛkstra-smɔl divays grid de skel to ɔl di rizɔlt dɛn.

Yu go stil nid Respond.js fɔ IE8 (bikɔs wi midia kwɛstyɔn dɛn stil de ɛn nid fɔ prosɛs dɛn). Dis de disable di "mobayl sayt" aspek dɛm fɔ Bootstrap.

Bootstrap tɛmplat wit rispɔnsivnɛs disabled

Wi dɔn yuz dɛn step ya fɔ wan ɛgzampul. Rid in sɔs kɔd fɔ si di patikyula chenj dɛn we dɛn dɔn impruv.

Luk ɛgzampul we nɔ de ansa

Brawza ɛn divays sɔpɔt

Dɛn bil Bootstrap fɔ wok fayn fayn wan na di laytst dɛsktɔp ɛn mobayl brawza dɛn, we min se ol brawza dɛn kin sho difrɛn stayl dɛn, pan ɔl we dɛn kin wok fayn fayn wan, fɔ sɔm pat dɛn.

Brawza dɛn we dɛn de sɔpɔt

Speshali, wi de sɔpɔt di laytst vɛshɔn dɛn fɔ di brɔuza ɛn pletfɔm dɛn we de dɔŋ ya.

Ɔda brawza dɛn we de yuz di layt vɛshɔn fɔ WɛbKit, Blink, ɔ Gecko, ilɛksɛf na dairekt ɔ tru di pletfɔm in wɛb viu API, dɛn nɔ de sɔpɔt klia wan. Bɔt, Bootstrap fɔ (bɔku tɛm) sho ɛn wok kɔrɛkt wan na dɛn brawza dɛn ya bak. Dɛn dɔn gi mɔ patikyula sɔpɔt infɔmeshɔn dɔŋ ya.

Mobayl divays dɛn

Jɛnɛral wan, Bootstrap de sɔpɔt di laytst vɛshɔn dɛn fɔ ɛni men pletfɔm in difɔlt brawza dɛn. Notis se dɛn nɔ de sɔpɔt prɔksi brawza dɛn (lɛk Opera Mini, Opera Mobile in Turbo mod, UC Browser Mini, Amazon Silk).

Dɛsktɔp brawza dɛn

Semweso, dɛn kin sɔpɔt di laytst vɛshɔn dɛn fɔ bɔku pan di dɛsktɔp brawza dɛn.

Na Windows, wi de sɔpɔt Intanɛt Ɛksplɔrɔ 8-11 .

Fɔ Fayafaks, apat frɔm di laytst nɔmal stebul rilis, wi de sɔpɔt bak di laytst Ɛkstend Sɔpɔt Rilis (ESR) vɛshɔn fɔ Fayafaks.

Nɔ ɔfishal wan, Bootstrap fɔ luk ɛn biev fayn fayn wan na Chromium ɛn Chrome fɔ Linux, Fayafaks fɔ Linux, ɛn Intanɛt Ɛksplɔrɔ 7, ɛn bak Maykrosoft Ɛj, pan ɔl we dɛn nɔ ɔfishal sɔpɔt dɛn.

Fɔ si sɔm pan di brɔwza bɔg dɛn we Bootstrap gɛt fɔ grap wit, si wi Wall of browser bugs .

Intanɛt Ɛksplɔrɔ 8 ɛn 9

Intanɛt Ɛksplɔrɔ 8 ɛn 9 dɛnsɛf de sɔpɔt, bɔt duya mɛmba se sɔm CSS3 prɔpati dɛn ɛn HTML5 ɛlimɛnt dɛn nɔ de sɔpɔt dɛn brɔuza dɛn ya ful wan. Apat frɔm dat, Intanɛt Ɛksplɔrɔ 8 nid fɔ yuz Respond.js fɔ mek yu ebul fɔ sɔpɔt midia kwɛstyɔn.

Visit Can I use... fɔ di ditel dɛn bɔt di brawza sɔpɔt fɔ CSS3 ɛn HTML5 ficha dɛn.

Intanɛt Ɛksplɔrɔ 8 ɛn Respond.js

Tek tɛm wit dɛn kɔvayt ya we yu de yuz Respond.js na yu divɛlɔpmɛnt ɛn prodakshɔn ɛnvayrɔmɛnt fɔ Intanɛt Ɛksplɔrɔ 8.

Respond.js ɛn krɔs-domɛyn CSS

Yuz Respond.js wit CSS we dɛn ɔs pan difrɛn (sɔb)domɛyn (fɔ ɛgzampul, na CDN) nid sɔm ɔda sɛtup. Si di Respond.js docs fɔ di ditel dɛn.

Rispɔnd.js ɛnfile://

Bikɔs ɔf di brawza sikyɔriti lɔ dɛn, Respond.js nɔ de wok wit pej dɛn we dɛn de wach bay di file://protɔkɔl (lɛk we yu de opin lokal HTML fayl). Fɔ tɛst di rispɔnsiv ficha dɛn na IE8, si yu pej dɛn oba HTTP(S). Si di Respond.js docs fɔ di ditel dɛn.

Rispɔnd.js ɛn@import

Respond.js nɔ de wok wit CSS we dɛn rifer to via @import. In patikyula, sɔm Drupal kɔnfigyushɔn dɛn we dɛn no fɔ yuz @import. Si di Respond.js docs fɔ di ditel dɛn.

Intanɛt Ɛksplɔrɔ 8 ɛn bɔks-sayz

IE8 nɔ de sɔpɔt ful wan box-sizing: border-box;we dɛn jɔyn am wit min-width, max-width, min-height, ɔ max-height. Fɔ da rizin de, as of v3.0.1, wi nɔ de yuz max-widthpan .containers igen.

Intanɛt Ɛksplɔrɔ 8 ɛn @font-face

IE8 gɛt sɔm prɔblɛm dɛn wit @font-facewe dɛn jɔyn wit :before. Bootstrap de yuz dat kɔmbaynshɔn wit in Glyphicons. If dɛn kech wan pej, ɛn lod am witout di maws oba di winda (dat na, hit di rifresh bɔtin ɔ lod sɔntin na iframe) den di pej go gɛt rɛnd bifo di font lod. If yu put yu an oba di pej (bɔdi) i go sho sɔm pan di aykɔn dɛn ɛn we yu put yu an oba di ɔda aykɔn dɛn, yu go sho dɛn wan dɛn de bak. Si issue #13863 fɔ di ditel dɛn.

IE Kɔmpatibiliti mɔd dɛn

Bootstrap nɔ de sɔpɔt insay di ol Intanɛt Ɛksplɔrɔ kɔmpatibiliti mɔd dɛn. Fɔ mek shɔ se yu de yuz di laytst rɛndamɛnt mɔd fɔ IE, tink bɔt fɔ put di rayt <meta>tɛg na yu pej dɛn:

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

Kɔnfɛm di dɔkyumɛnt mɔd bay we yu opin di dibɔg tul dɛn: prɛs F12ɛn chɛk di "Dokumɛnt Mɔd".

Dis tag de insay ɔl di Bootstrap in dɔkyumentri ɛn ɛgzampul dɛn fɔ mek shɔ se di bɛst rɛnda we pɔsibul insay ɛni wan pan di wan dɛn we dɛn sɔpɔt fɔ Intanɛt Ɛksplɔrɔ.

Si dis StackOverflow kwɛstyɔn fɔ mɔ infɔmeshɔn.

Intanɛt Ɛksplɔrɔ 10 insay Window 8 ɛn Window Fɔn 8

Intanɛt Ɛksplɔrɔ 10 nɔ de difrɛns di divays wit frɔm di viupɔt wit , ɛn so i nɔ de yuz di midia kwɛstyɔn dɛn fayn fayn wan na Bootstrap in CSS. Nɔmal wan yu go jɔs ad wan kwik smɔl pat pan CSS fɔ fiks dis:

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

Bɔt dis nɔ de wok fɔ divays dɛn we de rɔn Windows Phone 8 vɛshɔn dɛn we ol pas Update 3 (aka GDR3) , bikɔs i de mek dɛn kayn divays dɛn de sho wan mɔst dɛsktɔp we de sho instead fɔ narrow "fon" we de sho. Fɔ adrɛs dis, yu go nid fɔ put di CSS ɛn JavaSkript dɛn we de dɔŋ ya fɔ wok arawnd di bɔg .

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

Fɔ no mɔ ɛn fɔ no aw fɔ yuz am, rid Windows Phone 8 ɛn Device-Width .

As a heads up, wi inklud dis insay ɔl di Bootstrap in dɔkyumentri ɛn ɛgzampul dɛn as demonstreshɔn.

Safari pasɛnt rawndin

Di rendering enjin fɔ di vɛshɔn dɛn fɔ Safari bifo v7.1 fɔ OS X ɛn Safari fɔ iOS v8.0 bin gɛt sɔm prɔblɛm wit di nɔmba fɔ di desimal ples dɛn we dɛn yuz na wi .col-*-1grid klas dɛn. So if yu bin gɛt 12 wan wan grid kɔlɔm dɛn, yu go notis se dɛn kam shɔt we yu kɔmpia dɛn to ɔda row dɛn we gɛt kɔlɔm dɛn. Apat frɔm we yu de ɔpgrɛd Safari/iOS, yu gɛt sɔm opshɔn dɛn fɔ wok-arawnd:

• Ad .pull-rightto yu las grid kɔlɔm fɔ gɛt di had-rayt alaynɛshɔn
• Tweak yu pasɛnt dɛn manually fɔ gɛt di pafɛkt rawndin fɔ Safari (mɔ at pas di fɔs opshɔn)

Modal, navbar, ɛn vayrɔyal kibɔd dɛn

Ovaflɔ ɛn skrol

Sɔpɔt fɔ overflow: hiddenpan di <body>ɛlimɛnt na kwik limited in iOS ɛn Andrɔyd. Fɔ du dat, we yu skrol pas di ɔp ɔ dɔŋ pan wan modal na ɛni wan pan dɛn divays dɛn brɔuza dɛn, di <body>tin dɛn we de insay go bigin fɔ skrol. Si Chrome bɔg #175502 (dɛn dɔn fiks am na Chrome v40) ɛn WɛbKit bɔg #153852 .

iOS tɛks fil dɛn ɛn skrol

As of iOS 9.3, we wan modal opin, if di fɔs tɔch fɔ wan skrol jes de insay di bɔda fɔ wan tɛkstual <input>ɔ wan <textarea>, di <body>kɔntinyu we de ɔnda di modal go skrol instead ɔf di modal sɛf. Si WɛbKit bɔg #153856 .

Virtual kibɔd dɛn

Dɔn bak, notis se if yu de yuz fiks navbar ɔ yu de yuz input dɛn insay wan modal, iOS gɛt rɛnda bɔg we nɔ de ɔpdet di pozishɔn fɔ fiks ɛlimɛnt dɛn we dɛn trig di vayrɔyal kibɔd. Sɔm wok-arawnd fɔ dis inklud fɔ transfɔm yu ɛlimɛnt dɛn to position: absoluteɔ kɔl wan tayma pan fɔs fɔ tray fɔ kɔrɛkt di pozishɔn wit yu an. Dis nɔto Bootstrap de handle am, so na yu fɔ disayd us sɔlvishɔn go fayn fɔ yu aplikeshɔn.

Navbar Drɔpdɔwn dɛn

Di .dropdown-backdropelemɛnt nɔ de yuz pan iOS na di nav bikɔs ɔf di kɔmplisiti fɔ z-indeks. So, fɔ lɔk drɔpdɔwn dɛn na navbar dɛn, yu fɔ klik di drɔpdɔwn ɛlimɛnt dairekt wan (ɔ ɛni ɔda ɛlimɛnt we go faya klik ivin na iOS ).

Di brawza de zoom

Pej zum in nɔ go ebul fɔ avɔyd fɔ prɛzɛnt rɛnda artifakt dɛn na sɔm kɔmpɔnɛnt dɛn, ɔl tu na Bootstrap ɛn di ɔda pat na di wɛb. Dipen pan di prɔblɛm, wi kin ebul fɔ fiks am (luk fɔs ɛn opin wan prɔblɛm if nid de). Bɔt wi kin ignore dɛn wan ya as bɔku tɛm dɛn nɔ kin gɛt dairekt sɔlvishɔn ɔda pas hacky wokarawnd.

Stika :hover/ :focusna mobayl

Ivin if rial hova nɔ pɔsibul pan bɔku tɔchskrin dɛn, bɔku mobayl brawza dɛn de ɛmulayt hov sɔpɔt ɛn mek :hover"stika". In ɔda wɔd dɛn, :hoverstayl dɛn kin bigin fɔ aplay afta dɛn dɔn tap wan ɛlimɛnt ɛn dɛn kin jɔs stɔp fɔ aplay afta di pɔsin we de yuz am tap sɔm ɔda ɛlimɛnt. Dis kin mek Bootstrap in :hoverstet dɛn bi "stuck" we dɛn nɔ want pan dɛn kayn brawza dɛn de. Sɔm mobayl brawza dɛn bak kin mek :focusdi sem kayn stika. Naw, no simpul wok nɔ de fɔ sɔlv dɛn prɔblɛm ya pas fɔ pul dɛn kayn stayl dɛn de ɔltogɛda.

We dɛn de print

Ivin insay sɔm brɔuzhɔ dɛn tide, fɔ print kin mek pɔsin nɔ ebul fɔ du natin.

Na mɔtalman, as fɔ Chrome v32 ɛn ilɛksɛf na di margin sɛtin dɛn, Chrome de yuz wan viupɔt wit we rili smɔl pas di fizik pepa saiz we i de sɔlv midia kwɛstyɔn dɛn we i de print wɛb pej. Dis kin mek Bootstrap in ɛkstra-smɔl grid wok we dɛn nɔ bin de ɛkspɛkt we dɛn de print. Si isyu #12078 ɛn Chrome bɔg #273306 fɔ sɔm ditel dɛn. Di tin dɛn we dɛn dɔn tɔk bɔt fɔ sɔlv di prɔblɛm:

• Embras di ekstra-smɔl grid ɛn mek shɔ se yu pej luk akseptabl ɔnda am.
• Kastamayz di valyu dɛn fɔ di @screen-*Less vɛriɔbul dɛn so dat dɛn go tek yu printa pepa as big pas ɛkstra-smɔl.
• Ad kɔstɔm midia kwɛstyɔn dɛn fɔ chenj di grid saiz brekpɔynt dɛn fɔ print midia nɔmɔ.

Dɔn bak, as fɔ Safari v8.0, fiks-wid .containers kin mek Safari yuz wan smɔl font saiz we nɔ kɔmɔn we i de print. Si #14868 ɛn WɛbKit bɔg #138192 fɔ mɔ ditel. Wan tin we pɔsin kin ebul fɔ du fɔ dis na fɔ ad di CSS we de dɔŋ ya:

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

Andrɔyd stok brawza

Frɔm di bɔks, Andrɔyd 4.1 (ɛn ivin sɔm nyu rilis dɛn i tan lɛk) de ship wit di Brawza ap as di difɔlt wɛb brawza we yu pik (we difrɛn frɔm Chrome). I sɔri fɔ no se di Brawza ap gɛt bɔku bɔg ɛn tin dɛn we nɔ gri wit CSS in jɔnaral.

Pik di mɛnyu dɛn

Na <select>ɛlimɛnt dɛn, di Andrɔyd stok brawza nɔ go sho di sayd kɔntrol dɛn if wan border-radiusɛn/ɔ borderdɛn dɔn yuz am. (Luk dis StackOverflow kwɛstyɔn fɔ di ditel dɛn.) Yuz di smɔl pat pan di kɔd we de dɔŋ fɔ pul di CSS we de mek yu vɛks ɛn rɛnd di<select> as wan ɛlimɛnt we nɔ gɛt stayl na di Andrɔyd stok brawza. Di yuz ɛjɛn we de snɛf de avɔyd fɔ ambɔg Chrome, Safari, ɛn Mozilla brawza dɛn.

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

Yu want fɔ si ɛgzampul? Chek out dis JS Bin demo.

Di wan dɛn we de validet

Fɔ mek dɛn ebul fɔ gi di bɛst ɛkspiriɛns to ol ɛn bɔg brawza dɛn, Bootstrap de yuz CSS brawza hack dɛn na sɔm ples dɛn fɔ tɔch spɛshal CSS to sɔm brawza vɛshɔn dɛn fɔ mek dɛn ebul fɔ wok arawnd bɔg dɛn na di brawza dɛnsɛf. Wi ɔndastandin se dɛn hack ya kin mek CSS validators kɔmplen se dɛn nɔ valid. Insay wan tu ples, wi de yuz bak blɔd-ɛj CSS ficha dɛn we nɔ ful-ɔp yet fɔ standad, bɔt dɛn de yuz dɛn wan ya jɔs fɔ mek dɛn go bifo mɔ ɛn mɔ.

Dɛn validɛshɔn wɔnin ya nɔ impɔtant na prɔsis bikɔs di pat we nɔ gɛt haki na wi CSS de fulɔp fɔ validet ɛn di haki pat dɛn nɔ de ambɔg di rayt we fɔ wok we di pat we nɔ haki de du, na dat mek wi nɔ de tek tɛm du dɛn patikyula wɔnin ya.

Wi HTML dɔk dɛn sɛf gɛt sɔm tin dɛn we nɔ impɔtant ɛn we nɔ impɔtant HTML validɛshɔn wɔnin dɛn bikɔs wi put wan wok-arawnd fɔ wan patikyula Fayafaks bɔg .

Tɔd pati sɔpɔt

Pan ɔl we wi nɔ de ɔfishal wan sɔpɔt ɛni tɔd pati plɔgin ɔ ad-ɔn, wi de gi sɔm fayn advays dɛn fɔ ɛp fɔ avɔyd prɔblɛm dɛn we kin apin na yu prɔjek dɛn.

Bɔks-sayz

Sɔm tɔd pati softwe, lɛk Google Maps ɛn Google Custom Search Engine, de agens Bootstrap bikɔs ɔf * { box-sizing: border-box; }, wan lɔ we de mek i bi so paddingnɔ de afɛkt di fayn kɔmpyut wit fɔ wan ɛlimɛnt. Lan mɔ bɔt bɔks mɔdel ɛn sayzin na CSS Tricks .

Dipen pan di kɔntɛks, yu kin ɔvalayz as-nid (Opshɔn 1) ɔ riset di bɔks-sayz fɔ ɔl di rijyɔn dɛn (Opshɔn 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();
}

Di we aw pɔsin kin ebul fɔ go de

Bootstrap de fala di kɔmɔn wɛb standad dɛn ɛn—wit smɔl ɛkstra ɛfɔt—dɛn kin yuz am fɔ mek sayt dɛn we di wan dɛn we de yuz AT go ebul fɔ yuz .

Skip fɔ go na di say we yu want fɔ go

If yu nevigishɔn gɛt bɔku link dɛn ɛn i kam bifo di men tin dɛn we de na di DOM, ad wan Skip to main contentlink bifo di nevigishɔn (fɔ simpul ɛksplen, si dis A11Y Projɛkt atikul bɔt skip nevigishɔn link dɛn ). If yu yuz di .sr-onlyklas, i go ayd di skip link wit yu yay, ɛn di .sr-only-focusableklas go mek shɔ se di link de sho wans yu dɔn fɔs (fɔ di wan dɛn we de yuz di kibɔd we de si tin).

<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 dɛn we dɛn dɔn nest

We yu de nest ɛd dɛn ( <h1>- <h6>), yu praymari dɔkyumɛnt hεda fɔ bi wan <h1>. Di edlayn dɛn we de kam afta dat fɔ mek lɔjik yus fɔ <h2>- <h6>so dat di wan dɛn we de rid di skrin go ebul fɔ bil wan tebul we gɛt tin dɛn fɔ yu pej dɛn.

Lan mɔ na HTML CodeSniffer ɛn Penn State in AksesAbiliti .

Difrɛn frɔm di kɔlɔ dɛn

Naw, sɔm pan di difɔlt kɔlɔ kɔmbaynshɔn dɛn we de na Bootstrap (lɛk di difrɛn stayl bɔtin klas dɛn, sɔm pan di kɔd dɛn we de aylayt kɔlɔ dɛn we dɛn kin yuz fɔ di bɛsik kɔd blɔk dɛn , di .bg-primary kɔntɛkstual bakgrɔn ɛlda klas, ɛn di difɔlt link kɔlɔ we dɛn yuz pan wayt bakgrɔn) gɛt smɔl kɔntrast rεshɔn (dεn dכn rεkomεnd rεshכ we na 4.5: 1 ). Dis kin mek prɔblɛm to di wan dɛn we de yuz am we nɔ de si fayn ɔ we nɔ gɛt kɔlɔ. Dɛn difɔlt kɔlɔ dɛn ya kin nid fɔ chenj fɔ mek dɛn difrɛn ɛn fɔ mek dɛn ebul fɔ rid dɛn mɔ.

Ɔda tin dɛn we yu go ebul fɔ du

• "HTML Codesniffer" bukmak fɔ no di prɔblɛm dɛn we de wit akses
• Chrome in Aksesibiliti Divɛlɔpa Tul dɛn ɛkstenshɔn
• Kɔlɔ Kɔntrast Analayza
• Di A11Y Projɛkt
• MDN aksesbiliti dɔkyumentri

Laysens FAQ dɛn

Bootstrap de rilis ɔnda di MIT laysens ɛn na kɔpirayt 2016 Twitter. We dɛn bɔyl am to smɔl smɔl pat dɛn, dɛn kin diskrayb am wit di kɔndishɔn dɛn we de dɔŋ ya.

I nid fɔ mek yu:

• Kip di laysens ɛn kɔpirayt notis we de insay Bootstrap in CSS ɛn JavaSkript fayl dɛn we yu de yuz dɛn na yu wok dɛn

I de alaw yu fɔ:

• Fri fɔ dawnlod ɛn yuz Bootstrap, ɔl ɔ pat pan am, fɔ yusɛf, prayvet, kɔmni intanɛnt, ɔ fɔ kɔmɛshɔn
• Yuz Bootstrap insay pakej ɔ distribyushɔn dɛn we yu mek
• Modify di sɔs kɔd
• Gi sɔblaysens fɔ chenj ɛn sheb Bootstrap to ɔda pipul dɛn we nɔ de insay di laysens

I de ban yu fɔ:

• Hol di wan dɛn we rayt di buk ɛn di wan dɛn we gɛt laysens fɔ pe fɔ di damej dɛn as dɛn gi Bootstrap we nɔ gɛt warranty
• Hol di wan dɛn we mek ɔ di wan dɛn we gɛt di kɔpirayt fɔ Bootstrap fɔ pe fɔ
• Ridistribute ɛni pis na Bootstrap we nɔ gɛt di rayt atribyut
• Yuz ɛni mak we Twitter gɛt ɛni we we go sho ɔ sho se Twitter de ɛndɔs yu distribyushɔn
• Yuz ɛni mak we Twitter gɛt ɛni we we go sho ɔ sho se na yu mek di Twitter softwe we dɛn de tɔk bɔt

I nɔ nid fɔ mek yu:

• Put di say we Bootstrap sɛf kɔmɔt, ɔ ɛni chenj we yu dɔn mek to am, insay ɛni ridistribushɔn we yu go gɛda we gɛt am
• Sɔbmit chenj dɛn we yu mek to Bootstrap bak to di Bootstrap projɛkt (pan ɔl we dɛn de ɛnkɔrej dɛn kayn fidbak de)

Di ful Bootstrap laysens de na di prɔjek ripɔsitɔri fɔ mɔ infɔmeshɔn.

Transleshɔn dɛn

Di kɔmyuniti mɛmba dɛn dɔn translet di dɔkyumɛnt dɛn we Bootstrap gɛt insay difrɛn langwej dɛn. Nɔn nɔ de we ɔfishal sɔpɔt ɛn dɛn nɔ kin de ɔltɛm.

• Bootstrap 中文文档 (Chinese) we de na di wɔl.
• Bootstrap 3 中文手冊 (Chaynish (Tradishɔnal))
• Bootstrap på dansk (danish) yu gi oh.
• Bootstrap en Français (Frɛnch) we de na di Baybul.
• Bootstrap auf Deutsch (Jaman) .
• Bootstrap na Italino (Italian)
• Bootstrap 한국어 (Kɔrian) .
• Bootstrap em Pɔtyugis do Brasil (Brazil Pɔtyugis)
• Bootstrap по-русски (Rɔshian) Di wan dɛn we de yuz am.
• Bootstrap en Español (Spanish) .
• Türkçe Bootstrap (Turkish) we de na di wɔl.
• Bootstrap fɔ yuz (Yukren)
• Bootstrap bằng tiếng Việt (Vietnam) Di wan dɛn we de na di wɔl.

Wi nɔ de ɛp fɔ ɔganayz ɔ ɔs di transleshɔn dɛn, wi jɔs de link to dɛn.

Yu dɔn dɔn fɔ translet nyu ɔ bɛtɛ transleshɔn? Opin wan pul riŋwe fɔ ad am to wi list.