Twe

Bootstrap (mprempren v3.3.7) wɔ akwan kakraa bi a ɛyɛ mmerɛw a wobɛfa so afi ase ntɛm, emu biara yɛ anigye ma ahokokwaw gyinabea ne dwumadie tebea soronko. Kenkan kɔ akyiri na woahu nea ɛfata w’ahiade pɔtee no.

Bootstrap a wɔde yɛ CDN

Nnipa a wɔwɔ jsDelivr no de ayamye ma CDN mmoa ma Bootstrap CSS ne JavaScript. Fa saa Bootstrap CDN links yi di dwuma kɛkɛ.

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

Fa Bower hyɛ mu

Wubetumi nso de Bower ahyɛ Bootstrap Less, CSS, JavaScript, ne nkyerɛwde ahorow no so na woahwɛ so :

$ bower install bootstrap

Fa npm hyɛ mu

Wubetumi nso de npm ahyɛ Bootstrap no mu :

$ npm install bootstrap@3

require('bootstrap')bɛfa Bootstrap jQuery plugins no nyinaa akɔ jQuery adeɛ no so. Module bootstrapno ankasa ntumi nkɔ amannɔne. Wubetumi de nsa ahyɛ Bootstrap jQuery plugins no ankorankoro denam /js/*.jsfael ahorow a wode bɛhyɛ package no top-level directory ase no so.

Bootstrap's no package.jsonkura metadata foforo bi wɔ nsafe a edidi so yi ase:

• less- kwan a ɛkɔ Bootstrap no Less source fael titiriw no so
• style- kwan a ɛkɔ Bootstrap CSS a wɔanyɛ no ketewaa a wɔadi kan aboaboa ano denam nhyehyɛe a wɔde ahyɛ hɔ no so (wɔnyɛ nsakrae biara) .

Fa Composer hyɛ mu

Wubetumi nso de Composer ahyɛ Bootstrap Less, CSS, JavaScript, ne fonts no so na woahwɛ so :

$ composer require twbs/bootstrap

Autoprefixer a wɔhwehwɛ ma Less/Sass

Bootstrap de Autoprefixer di dwuma de di CSS adetɔnfo anim nsɛm ho dwuma . Sɛ woreboaboa Bootstrap ano afiri ne Less/Sass fibea na womfa yɛn Gruntfile no nni dwuma a, ɛho behia sɛ w’ankasa wode Autoprefixer bɛka wo dan nhyehyɛe no ho. Sɛ wode Bootstrap a wɔadi kan aboaboa ano redi dwuma anaasɛ wode yɛn Gruntfile no redi dwuma a, enhia sɛ wohaw wo ho wɔ eyi ho efisɛ wɔde Autoprefixer ahyɛ yɛn Gruntfile no mu dedaw.

Nea ɛka ho

Bootstrap no yɛ nea wobetumi atwe wɔ akwan abien so, a ɛwɔ mu no wubehu nkyerɛwde ne fael ahorow a edidi so yi, a ntease wom a ɛboaboa nneɛma a wɔtaa de di dwuma no ano na ɛde nsakrae ahorow a wɔaboaboa ano ne nea wɔayɛ no ketewaa nyinaa ama.

Bootstrap a Wɔadi Kan Aboaboa Ano

Sɛ wotwe wie a, yi folda a wɔahyɛ no den no na wubehu sɛnea Bootstrap (a wɔaboaboa ano no) no te. Wobɛhunu biribi a ɛte sɛɛ:

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

Eyi ne Bootstrap no kwan titiriw sen biara: fael ahorow a wɔadi kan aboaboa ano a wɔde di dwuma ntɛmntɛm wɔ ɛkame ayɛ sɛ wɛb adwuma biara mu. Yɛde CSS ne JS a wɔaboaboa ano ( bootstrap.*), ne CSS ne JS ( ) a wɔaboaboa ano na wɔayɛ no ketewaa nso ma bootstrap.min.*. CSS source maps ( bootstrap.*.map) wɔ hɔ a wobetumi de adi dwuma wɔ browser ahorow bi developer nnwinnade mu. Fonts a efi Glyphicons no ka ho, sɛnea Bootstrap asɛmti a wopɛ no nso te.

Bootstrap fibea koodu

Bootstrap source code download no ka CSS, JavaScript, ne font agyapade a wɔadi kan aboaboa ano no ho, ne source Less, JavaScript, ne nkrataa. Nea ɛkɔ akyiri no, nea edidi so yi ne nea ɛkeka ho ka ho:

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

less/, js/, ne no yɛ yɛn CSS fonts/, JS, ne ahyɛnsode nkyerɛwde ahorow no fibea koodu (sɛnea ɛte biara). dist/Biribiara a wɔakyerɛw wɔ ɔfã a wɔadi kan aboaboa ano a wɔatwe wɔ atifi hɔ no ka folda no ho . docs/Folda no wɔ source code a yɛde yɛ yɛn nkrataa no, ne Bootstrap examples/dwumadie ho. Ɛno akyi no, fael foforo biara a ɛka ho no ma mmoa ma packages, tumi krataa ho nsɛm, ne nkɔso.

CSS ne JavaScript a wɔreboaboa ano

Bootstrap de Grunt di dwuma ma ne dan nhyehyɛe, a akwan a ɛyɛ mmerɛw a wɔfa so ne framework no yɛ adwuma. Ɛyɛ sɛnea yɛboaboa yɛn code ano, yɛyɛ sɔhwɛ ahorow, ne nea ɛkeka ho.

Grunt a wɔde bɛhyɛ mu

Sɛ wopɛ sɛ wo instɔl Grunt a, ɛsɛ sɛ wudi kan twe na wo instɔl node.js (a npm ka ho). npm gyina hɔ ma node packaged modules na ɛyɛ ɔkwan a wɔfa so hwɛ nkɔso dependencies so denam node.js so.

1. Install grunt-cliwiase nyinaa ne npm install -g grunt-cli.
2. Kɔ root /bootstrap/directory no so, afei tu mmirika npm install. npm bɛhwɛ package.jsonfael no na ɔde ne ho ahyɛ local dependencies a ɛho hia a wɔakyerɛw wɔ hɔ no.

Sɛ wowie a, wobɛtumi ayɛ Grunt ahyɛdeɛ ahodoɔ a wɔde ama no afiri ahyɛdeɛ kwan no so.

Grunt ahyɛde ahorow a ɛwɔ hɔ

grunt dist(Wɔboaboa CSS ne JavaScript ano kɛkɛ)

Ɛsan /dist/de CSS ne JavaScript fael ahorow a wɔaboaboa ano na wɔayɛ no ketewaa no san yɛ daerekta no. Sɛ́ Bootstrap dwumayɛni no, eyi taa yɛ ahyɛde a wopɛ.

grunt watch(Hwɛ)

Hwɛ Less source fael ahorow no na ɔsan boaboa ano kɔ CSS so bere biara a wode nsakrae bi besie.

grunt test(Mmirikatu sɔhwɛ ahorow) .

Run JSHint na ɛyɛ QUnit sɔhwɛ ahorow no ti a enni mu wɔ PhantomJS mu .

grunt docs(Si & sɔ docs agyapade no hwɛ)

Ɔkyekye na ɔsɔ CSS, JavaScript, ne agyapadeɛ foforɔ a wɔde di dwuma berɛ a wɔreyɛ nkrataa no wɔ mpɔtam hɔ denam bundle exec jekyll serve.

grunt(Si biribiara koraa na tu mmirika sɔhwɛ ahorow)

Ɔboaboa CSS ne JavaScript ano na ɛyɛ ketewaa, ɛkyekyere nkrataa wɛbsaet no, ɔde HTML5 validator no di dwuma tia docs no, ɛsan yɛ Customizer agyapade no, ne nea ɛkeka ho. Ɛhwehwɛ sɛ Jekyll . Mpɛn pii no, sɛ woreyɛ hacking wɔ Bootstrap ankasa so nkutoo a, ɛho hia.

Ɔhaw ahorow a wodi ho dwuma

Sɛ ɛsɛ sɛ wuhyia ɔhaw ahorow wɔ dependencies a wobɛhyehyɛ anaa Grunt ahyɛde ahorow a wode reyɛ adwuma no mu a, di kan popa /node_modules/daerekta a npm ayɛ no. Afei, san tu mmirika bio npm install.

Nsusuwii titiriw

Fi ase de HTML nsusuwso titiriw yi, anaa sesa nhwɛso ahorow yi . Yɛwɔ anidaso sɛ wobɛsesa yɛn nsusuiɛ ne nhwɛsoɔ no, ayɛ nsakraeɛ ama ɛne w’ahiadeɛ ahyia.

Kɔpi HTML a ɛwɔ aseɛ ha no na hyɛ aseɛ de Bootstrap krataa a ɛsua koraa yɛ adwuma.

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

Nhwɛso ahorow

Fa Bootstrap no afã horow pii no si mfitiase nsusuwso a ɛwɔ atifi hɔ no so. Yɛhyɛ wo nkuran sɛ yɛ Bootstrap no ho nhyehyɛe na yɛ nsakrae ma ɛne w’ankorankoro adwuma no ahiade ahorow nhyia.

Nya source code ma nhwɛso biara a ɛwɔ ase ha no denam Bootstrap adekorabea no a wobɛtwe so . Wobetumi ahu nhwɛso ahorow wɔ docs/examples/kyerɛwtohɔ no mu.

Nhyehyɛe no a wɔde bedi dwuma

Starter nsusuwso

Biribiara nni hɔ gye mfitiaseɛ no: wɔaboaboa CSS ne JavaScript ano aka container bi ho.

Bootstrap asɛmti no

Fa Bootstrap asɛmti a wopɛ no hyɛ mu ma osuahu a ɛma wonya nkɔso wɔ aniwa so.

Grids a wɔde yɛ nneɛma

Nhwɛso ahorow pii a ɛfa grid nhyehyɛe ahorow a ɛwɔ tiers anan no nyinaa, nesting, ne nea ɛkeka ho.

Jumbotron a ɛyɛ hu

Fa navbar ne grid columns atitiriw bi si twa jumbotron no ho hyia.

Jumbotron a ɛyɛ teateaa

Yɛ krataafa a wɔahyɛ da ayɛ kɛse denam default container ne jumbotron a wobɛtew so.

Navbars a ɛreyɛ adwuma

Navbar na ɛwɔ hɔ

Super basic template a ɛka navbar no ho ne nneɛma foforo bi.

Static soro navbar

Super mfitiaseɛ template a ɛwɔ static top navbar ka ho ne nsɛm foforɔ bi.

Wɔasiesie navbar no

Super basic template a ɛwɔ fixed top navbar ka ho ne nsɛm foforo bi.

Nneɛma a wɔde yɛ nneɛma a wɔahyɛ da ayɛ

Kata so

Kratafa biako nsusuwso a wɔde kyekye ofie nkratafa a ɛnyɛ den na ɛyɛ fɛ.

Carousel a wɔde yɛ nneɛma

Yɛ navbar ne carousel no sɛnea wopɛ, afei fa nneɛma foforo bi ka ho.

Blog ho nsɛm

Blog nhyehyɛe a ɛnyɛ den a ɛwɔ nkyerɛwde abien a ɛwɔ akwantu a wɔahyɛ da ayɛ, atiri, ne type.

Dashboard ho nsɛm

Mfitiase nhyehyɛe ma admin dashboard a ɛwɔ sidebar ne navbar a wɔahyɛ da ayɛ.

Sign-in krataafa no

Custom kratasin nhyehyɛe ne nhyehyɛe ma sɛnkyerɛnne a ɛnyɛ den wɔ kratasin mu.

Nea ɛfata nav

Yɛ navbar a wɔahyɛ da ayɛ a ɛwɔ link ahorow a ɛfata. Ti a ɛwɔ soro! Ɛnyɛ Safari adamfofa su dodo.

Nsase a ɛyɛ nnam

Fa ase hɔ asɛm bi bata viewport no ase bere a emu nsɛm no yɛ tiaa sen no.

Nnawɔtwe a ɛyɛ nnam a ɛwɔ navbar

Fa ase hɔ asɛm bi bata viewport no ase a navbar a wɔahyɛ da ayɛ wɔ soro.

Nsɔhwɛ ahorow

Bootstrap a ɛnyɛ adwuma

Ɛnyɛ den sɛ wobɛma Bootstrap no mmuae ayɛ adwuma wɔ yɛn docs no mu .

Off-canvas a wɔde di dwuma

Yɛ off-canvas navigation menu a wotumi sesa a wode bedi dwuma ne Bootstrap.

Akadeɛ

Bootlint a ɛwɔ hɔ

Bootlint yɛ Bootstrap HTML linter adwinnade a ɛyɛ aban de. Ɛhwɛ HTML mfomso ahorow pii a ɛtaa ba wɔ wɛbsaet nkratafa a ɛde Bootstrap redi dwuma wɔ "vanilla" kwan a ɛfata so no ankasa. Vanilla Bootstrap no afã horow/widgets no hwehwɛ sɛ wɔn afã horow a ɛwɔ DOM no mu no ne nhyehyɛe ahorow bi hyia. Bootlint hwɛ sɛ Bootstrap afã horow no nhwɛso ahorow wɔ HTML a wɔahyehyɛ no yiye. Susuw ho sɛ wode Bootlint bɛka wo Bootstrap wɛb nkɔso adwinnade ho sɛnea ɛbɛyɛ a mfomso a ɛtaa ba no mu biara remma wo dwumadi no nkɔso brɛ ase.

Mpɔtam

Kɔ so nya Bootstrap nkɔsoɔ ho nsɛm na fa saa nneɛma a ɛboa yi kɔ mpɔtam hɔfoɔ nkyɛn.

• Kenkan na kyerɛw wo din wɔ The Official Bootstrap Blog no so .
• Wo ne mfɛfo Bootstrappers a wode IRC di dwuma wɔ irc.freenode.netserver no mu no nkɔmmɔ, wɔ ##bootstrap channel no mu.
• Sɛ wopɛ mmoa a wode bedi dwuma wɔ Bootstrap mu a, bisa wɔ StackOverflow so denam tag no sotwitter-bootstrap-3 .
• Ɛsɛ sɛ developers de keyword no di dwuma bootstrapwɔ packages a ɛsesa anaa ɛde ka Bootstrap dwumadie ho berɛ a wɔrekyekyɛ denam npm anaa delivery mechanisms a ɛte saa ara so ama maximum discoverability.
• Hwehwɛ nhwɛso ahorow a ɛkanyan adwene a ɛfa nnipa a wɔde Bootstrap resi ho wɔ Bootstrap Expo .

Wubetumi nso adi @getbootstrap akyi wɔ Twitter so ama nsɛmmɔnedi ne nnwom video ahorow a ɛyɛ hu a aba foforo.

Mmuae a wɔde ma no a wɔbɛma ayɛ adwuma

Bootstrap no ankasa sesa wo nkratafa no ma screen akɛse ahorow. Sɛnea wobɛma saa ade yi ayɛ adwuma sɛnea ɛbɛyɛ a wo krataafa no bɛyɛ adwuma te sɛ nhwɛso a ɛnyɛ mmuae yi ni .

Anamɔn a ɛbɛma woagyae kratafa mmuae

1. Yi viewport a <meta>wɔaka ho asɛm wɔ CSS docs no mu no fi mu
2. Override the widthon the .containerma grid tier biara a ɛwɔ ntrɛwmu biako, sɛ nhwɛso no width: 970px !important;Hwɛ sɛ eyi ba Bootstrap CSS default no akyi. Wubetumi apaw akwati !importantne media nsɛmmisa anaasɛ selector-fu bi.
3. Sɛ wode navbars redi dwuma a, yi navbar a ɛrebubu ne nea ɛretrɛw suban nyinaa fi hɔ.
4. Sɛ wopɛ grid nhyehyeɛ a, fa .col-xs-*adesua ahodoɔ ka, anaa si ananmu, deɛ ɛwɔ mfimfini/kɛseɛ no. Mma ɛnhaw wo, extra-small device grid no nsenia ma resolutions nyinaa.

Wobɛda so ara hia Respond.js ama IE8 (esiane sɛ yɛn media nsɛmmisa no da so ara wɔ hɔ na ɛsɛ sɛ wɔyɛ ho adwuma). Wei ma "mobile site" afã horow a ɛwɔ Bootstrap no yɛ adwuma.

Bootstrap template a mmuae a wɔde ma no ayɛ adwuma

Yɛde saa anammɔn yi adi dwuma wɔ nhwɛso bi mu. Kenkan ne source code no na woahu nsakrae pɔtee a wɔde adi dwuma.

Hwɛ nhwɛso a ɛnyɛ mmuae

Browser ne mfiri mmoa

Wɔayɛ Bootstrap sɛ ɛbɛyɛ adwuma yiye wɔ desktop ne mobile browser ahorow a aba foforo no mu, a ɛkyerɛ sɛ browser dedaw no betumi akyerɛ nneɛma ahorow bi nkyerɛase ahorow a wɔayɛ no ɔkwan soronko so, ɛwom sɛ ɛyɛ adwuma koraa de.

Browser ahorow a wɔboa

Titiriw no, yɛboa browser ne platform ahorow a edidi so yi a aba foforo no .

Browsa foforo a ɛde WebKit, Blink, anaa Gecko a aba foforo di dwuma, sɛ ɛyɛ tẽẽ anaasɛ ɛnam platform no wɛb hwɛ API so no, wɔmfa mmoa pefee. Nanso, ɛsɛ sɛ Bootstrap (wɔ nsɛm dodow no ara mu) da adi na ɛyɛ adwuma yiye wɔ saa browser ahorow yi nso mu. Wɔde mmoa ho nsɛm pɔtee pii ama wɔ ase ha.

Mfiri a wɔde di dwuma wɔ telefon so

Sɛ yɛbɛka no ɔkwan biara so a, Bootstrap boa platform kɛse biara default browser ahorow no nkyerɛase a aba foforo. Hyɛ no nsow sɛ wɔmfa proxy brawsa ahorow (te sɛ Opera Mini, Opera Mobile no Turbo mode, UC Browser Mini, Amazon Silk) ntom.

Desktop browser ahorow a wɔde di dwuma

Saa ara nso na wɔboa desktop browser dodow no ara a aba foforo no.

Wɔ Windows so no, yɛboa Internet Explorer 8-11 .

Firefox deɛ, ɛde ka normal stable release a ɛtwa toɔ ho no, yɛsan nso boa Extended Support Release (ESR) version a ɛtwa toɔ a ɛwɔ Firefox no mu.

Wɔ ɔkwan a ɛnyɛ aban kwan so no, ɛsɛ sɛ Bootstrap hwɛ na ɛyɛ n’ade yiye sɛnea ɛsɛ wɔ Chromium ne Chrome ma Linux, Firefox ma Linux, ne Internet Explorer 7, ne Microsoft Edge nso, ɛwom sɛ wɔmfa aban mmoa mma de.

Sɛ wopɛ browser bugs a ɛsɛ sɛ Bootstrap di ho dwuma no bi din a, hwɛ yɛn Wall of browser bugs .

Intanɛt so Nhwehwɛmu 8 ne 9

Internet Explorer 8 ne 9 nso wɔboa, nanso, yɛsrɛ wo hu sɛ CSS3 agyapade bi ne HTML5 nneɛma bi ntumi mmoa saa browser ahorow yi koraa. Bio nso, Internet Explorer 8 hwehwɛ sɛ wode Respond.js di dwuma na ama media asɛmmisa mmoa atumi ayɛ adwuma.

Kɔ So metumi de adi dwuma... na woanya nsɛm a ɛfa browser mmoa a ɛfa CSS3 ne HTML5 nneɛma ho.

Intanɛt Explorer 8 ne Respond.js

Hwɛ yiye wɔ kɔkɔbɔ ahorow a edidi so yi ho bere a wode Respond.js redi dwuma wɔ wo nkɔso ne nnwumayɛbea ahorow ma Internet Explorer 8 no.

Respond.js ne CSS a ɛwɔ cross-domain no mu

Sɛ wode Respond.js bedi dwuma a CSS a wɔagye wɔ (sub)domain soronko so (sɛ nhwɛso no, wɔ CDN so) a, ɛhwehwɛ sɛ woyɛ nhyehyɛe foforo bi. Hwɛ Respond.js docs no ma nsɛm no mu nsɛm.

Mmuae.js nefile://

Esiane browser ahobanbɔ mmara nti, Respond.js ntumi nyɛ adwuma wɔ nkratafa a wɔhwɛ denam file://protocol no so (te sɛ bere a worebue HTML fael a ɛwɔ mpɔtam hɔ). Sɛ wopɛ sɛ wosɔ nneɛma a ɛyɛ adwuma hwɛ wɔ IE8 mu a, hwɛ wo nkratafa no wɔ HTTP(S) so. Hwɛ Respond.js docs no ma nsɛm no mu nsɛm.

Mmuae.js ne@import

Respond.js nnyɛ adwuma wɔ CSS a wɔde kyerɛkyerɛ mu denam @import. Titiriw no, wonim sɛ Drupal nhyehyɛe ahorow bi de @import. Hwɛ Respond.js docs no ma nsɛm no mu nsɛm.

Internet Explorer 8 ne adaka-kɛse a wɔde di dwuma

IE8 ntumi mmoa koraa box-sizing: border-box;bere a wɔde ka min-width, max-width, min-height, anaa max-height. Ɛno nti, ɛfiri v3.0.1 no, yɛmfa nni dwuma bio max-widthwɔ .containers.

Intanɛt Explorer 8 ne @font-face no yɛ adwuma

IE8 wɔ nsɛm bi a ɛfa @font-facebere a wɔde ka ho ne :before. Bootstrap de saa nkabom no di dwuma ne ne Glyphicons. Sɛ wɔde krataafa bi ahyɛ cache mu, na wɔde ahyɛ mu a mouse nka ho wɔ mfɛnsere no so (kyerɛ sɛ, bɔ refresh button no anaa fa biribi gu iframe mu) a, ɛnde krataafa no nya rendered ansa na font no ahyɛ mu. Sɛ wode wo nsa hyɛ kratafa (nipadua) no so a, ɛbɛkyerɛ ahyɛnsode ahorow no bi na sɛ wode wo nsa hyɛ ahyɛnsode ahorow a aka no so a, ɛbɛkyerɛ wɔn nso. Hwɛ nsɛmma nhoma #13863 ma nsɛm no mu nsɛm.

IE Nneɛma a ɛne ne ho hyia

Bootstrap no nnyɛ adwuma wɔ Internet Explorer a ɛne no hyia dedaw no mu. Sɛnea ɛbɛyɛ a wubehu sɛ wode rendering mode a aba foforo no redi dwuma ama IE no, susuw ho sɛ <meta>wode tag a ɛfata no bɛka wo nkratafa no ho:

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

Si krataa mode no so dua denam debugging nnwinnade a wubebue no so: mia F12na hwɛ "Document Mode" no.

Saa tag yi ka Bootstrap nkrataa ne nhwɛso ahorow nyinaa ho de hwɛ hu sɛ wɔbɛkyerɛ nkyerɛase a eye sen biara wɔ Internet Explorer no fã biara a wɔboa no mu.

Hwɛ StackOverflow asɛmmisa yi ma nsɛm pii.

Intanɛt Explorer 10 a ɛwɔ Windows 8 ne Windows Phone 8 mu

Internet Explorer 10 nkyerɛ nsonsonoe a ɛda mfiri no tɛtrɛtɛ ne viewport ntrɛwmu ntam , na ɛnam saa kwan yi so mfa media nsɛmmisa a ɛwɔ Bootstrap CSS no mu no nni dwuma yiye. Mpɛn pii no, anka wode CSS no fã bi a ɛyɛ ntɛm bɛka ho kɛkɛ de asiesie eyi:

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

Nanso, eyi nyɛ adwuma mma mfiri a ɛde Windows Phone 8 nkyerɛase a akyɛ sen Update 3 (a wɔfrɛ no GDR3) , efisɛ ɛma mfiri a ɛtete saa no kyerɛ desktop hwɛbea dodow no ara sen sɛ ɛbɛkyerɛ "fon" hwɛbea teateaa. Sɛ wopɛ sɛ wodi eyi ho dwuma a, ɛho behia sɛ wode CSS ne JavaScript a edidi so yi ka ho na ama woatumi adi mfomso no ho dwuma .

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

Sɛ wopɛ nsɛm pii ne akwankyerɛ a wode bedi dwuma a, kenkan Windows Phone 8 ne Device-Width .

Sɛ́ heads up no, yɛde eyi ka Bootstrap nkrataa ne nhwɛso ahorow nyinaa ho sɛ ɔyɛkyerɛ.

Safari ɔha biara mu nkyem rounding

Rendering engine a ɛwɔ Safari nkyerɛase ahorow a edi v7.1 anim ma OS X ne Safari ma iOS v8.0 no nyaa ɔhaw bi wɔ decimal mmeae dodow a wɔde di dwuma wɔ yɛn .col-*-1grid adesua ahorow no mu no ho. Enti sɛ wowɔ grid columns ankorankoro 12 a, wobɛhyɛ no nsow sɛ ɛbaa tiawa sɛ wɔde toto columns a ɛtoatoa so afoforo ho a. Sɛ Safari/iOS a wobɛma ayɛ foforo no da nkyɛn a, wowɔ akwan bi a wobɛfa so ayɛ adwuma:

• Fa ka .pull-rightwo grid column a etwa to no ho na woanya hard-right alignment no
• Tweak wo ɔha biara mu nkyem manually na woanya pɛpɛɛpɛ rounding ma Safari (ɛyɛ den sen ɔkwan a edi kan no) .

Modals, navbars, ne virtual keyboard ahorow a wɔde di dwuma

Overflow ne scroll a ɛrekɔ so

Mmoa ma overflow: hiddenwɔ <body>element no so no yɛ kakraa bi koraa wɔ iOS ne Android mu. Nea ɛbɛyɛ na woatumi ayɛ saa no, sɛ wokɔ modal bi atifi anaa ase wɔ saa mfiri ahorow no browser ahorow no mu biara mu a, <body>emu nsɛm no befi ase atutu. Hwɛ Chrome bɔne #175502 (wɔasiesie wɔ Chrome v40 mu) ne WebKit bɔne #153852 .

iOS nsɛm a wɔde kyerɛw nsɛm ne scrolling

Ɛde besi iOS 9.3 no, bere a modal bi abue no, sɛ nhoma mmobɔwee sɛnkyerɛnne bi a wɔde wɔn nsa ka mfiase no wɔ nkyerɛwee <input>anaa a hye mu a <textarea>, <body>wɔbɛkyerɛw nsɛm a ɛwɔ modal no ase no sen sɛ wɔbɛkyerɛw modal no ankasa. Hwɛ WebKit bɔne #153856 .

Virtual keyboard ahorow a wɔde di dwuma

Afei nso, hyɛ no nsow sɛ sɛ wode navbar a wɔahyɛ da ayɛ redi dwuma anaasɛ wode inputs redi dwuma wɔ modal mu a, iOS wɔ rendering bug a ɛnsakra fixed elements no gyinabea bere a wɔahyɛ virtual keyboard no ase no. Nneɛma kakraa bi a wobɛfa so ayɛ eyi ne sɛ wobɛdan wo elements no akɔ position: absoluteanaasɛ wobɛfrɛ timer wɔ focus so de abɔ mmɔden sɛ wode nsa besiesie gyinabea no. Eyi nyɛ Bootstrap na edi ho dwuma, enti ɛyɛ wo na wubesi ano aduru a eye ma wo application no ho gyinae.

Navbar Nneɛma a Wɔde Totɔ Nneɛma

Wɔmfa .dropdown-backdropelement no nni dwuma wɔ iOS so wɔ nav no mu esiane z-indexing a ɛyɛ den nti. Enti, sɛ wobɛto dropdowns mu wɔ navbars mu a, ɛsɛ sɛ wobɔ dropdown element no tẽẽ (anaasɛ element foforo biara a ɛbɛtow click event wɔ iOS ).

Browser a ɛreyɛ kɛse

Kratafa a wɔde yɛ kɛse no de rendering artifacts kyerɛ wɔ nneɛma bi mu a wontumi nkwati, wɔ Bootstrap ne wɛb no fã a aka no nyinaa mu. Ɛgyina asɛm no so no, ebia yebetumi asiesie (di kan hwehwɛ na afei sɛ ɛho hia a, bue asɛm bi). Nanso, yɛtaa bu yɛn ani gu eyinom so sɛnea wɔtaa nni ano aduru tẽẽ biara gye hacky workarounds.

Sticky :hover/ :focuswɔ mobile so

Ɛwom mpo sɛ hovering ankasa ntumi nyɛ yiye wɔ touchscreen dodow no ara so de, nanso mobile browser dodow no ara suasua hovering mmoa na ɛma :hover"sticky". Ɔkwan foforo so no, :hoverstyles fi ase de di dwuma bere a woabɔ element bi awie no na egyae di dwuma bere a nea ɔde di dwuma no abɔ element foforo bi akyi nkutoo. Eyi betumi ama Bootstrap :hovertebea horow no ayɛ "akɔhyɛ" wɔ browser ahorow a ɛtete saa so wɔ ɔkwan a wɔmpɛ so. Mobile browser ahorow bi nso yɛ nea :focusɛyɛ nnam saa ara. Mprempren biribiara nni hɔ a ɛyɛ mmerɛw a wɔde bedi nsɛm yi ho dwuma gye sɛ wobeyi ntade a ɛtete saa afi hɔ koraa.

Nsɛm a Wɔtintim

Wɔ nnɛyi browser ahorow bi mu mpo no, nhoma tintim betumi ayɛ nea ɛyɛ nwonwa.

Titiriw, sɛnea ɛte wɔ Chrome v32 na ɛmfa ho margin nhyehyɛe no, Chrome de viewport trɛw a ɛyɛ teateaa kɛse sen honam fam krataa kɛse no di dwuma bere a ɛresiesie media nsɛmmisa bere a ɔretintim wɛbsaet krataafa bi no. Eyi betumi ama Bootstrap no grid ketewaa a ɛboro so no ayɛ adwuma mpofirim bere a wɔretintim no. Hwɛ nsɛmma nhoma #12078 ne Chrome bɔne #273306 ma nsɛm bi. Nneɛma a wɔahyɛ ho nyansa sɛ wɔmfa nyɛ adwuma:

• Fa grid ketewaa a ɛboro so no tom na hwɛ hu sɛ wo krataafa no bɛyɛ sɛ nea wogye tom wɔ ase.
• Yɛ @screen-*Less variables no botae ahorow no sɛnea ɛbɛyɛ a wobebu wo printa krataa no sɛ ɛsõ sen extra-small.
• Fa amanneɛbɔ media nsɛmmisa ka ho na sesa grid kɛse breakpoints ma print media nkutoo.

Afei nso, sɛnea ɛte wɔ Safari v8.0 no, fixed-width .containers betumi ama Safari de font kɛse ketewaa bi a ɛyɛ soronko adi dwuma bere a ɔretintim no. Hwɛ #14868 ne WebKit bug #138192 ma nsɛm pii. Ade biako a ebetumi ayɛ eyi ho adwuma ne sɛ wode CSS a edidi so yi bɛka ho:

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

Android stock browser a ɛwɔ hɔ no

Fi adaka no mu no, Android 4.1 (na ɛda adi sɛ nea wɔayi no adi foforo bi mpo) de Browser app no ​​ba sɛ wɛbsaet browser a wɔpaw no dedaw (a ɛne Chrome bɔ abira). Awerɛhosɛm ne sɛ, Browser app no ​​wɔ mfomso pii ne nea ɛne CSS nhyia wɔ ɔkwan a ɛkɔ akyiri so.

Paw menu ahorow

Wɔ <select>elements so no, Android stock browser no renkyerɛ afã controls no sɛ ɛwɔ hɔ border-radiusne/anaasɛ borderwɔde adi dwuma a. (Hwɛ StackOverflow asɛmmisa yi ma nsɛm no mu nsɛm.) Fa koodu no fã bi a ɛwɔ ase ha no yi CSS a ɛhyɛ abufuw no na kyerɛ ase <select>sɛ ade a wɔanhyɛ da wɔ Android stock browser no so. Ɔdefo no agent sniffing kwati sɛ ɛbɛtwetwe Chrome, Safari, ne Mozilla browser ahorow no.

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

Wopɛ sɛ wuhu nhwɛso bi? Hwɛ JS Bin demo yi.

Wɔn a wɔma ɛyɛ nokware

Sɛnea ɛbɛyɛ a wobenya osuahu a eye sen biara ama browser dedaw ne nea ɛyɛ bɔne no, Bootstrap de CSS browser hacks di dwuma wɔ mmeae pii de de wɔn ani si CSS soronko so wɔ browser ahorow bi so sɛnea ɛbɛyɛ a ɛbɛyɛ adwuma atwa mfomso ahorow a ɛwɔ browser ahorow no ankasa mu ho dwuma. Ntease wom sɛ saa hacks yi ma CSS validators nwiinwii sɛ ɛnyɛ adwuma. Wɔ mmeae awarefo bi no, yɛsan nso de bleeding-edge CSS features a wonnya nyɛɛ standardized koraa di dwuma, nanso wɔde eyinom di dwuma ma nkɔso a ɛkɔ so ara kwa.

Saa validation kɔkɔbɔ ahorow yi ho nhia wɔ nneyɛe mu efisɛ yɛn CSS no fã a ɛnyɛ hacky no yɛ validate koraa na hacky afã horow no nsiw ɔfã a ɛnyɛ hacky no dwumadi yiye no kwan, ɛno nti na yɛhyɛ da bu yɛn ani gu kɔkɔbɔ pɔtee yi so.

Yɛn HTML docs no nso wɔ HTML validation kɔkɔbɔ ahorow bi a ɛho nhia na ɛho nhia esiane sɛ yɛde adwuma bi a yɛde besiesie Firefox bɔne bi aka ho nti .

Nnipa a wɔto so abiɛsa mmoa

Bere a yɛmmoa obi foforo plugins anaa add-ons biara wɔ aban kwan so no, yɛde afotu bi a mfaso wɔ so ma a ɛbɛboa ma woakwati nsɛm a ebetumi aba wɔ wo nnwuma mu.

Adaka a wɔde yɛ kɛse

Ebinom a ɛto so abiɛsa softwea, a Google Maps ne Google Custom Search Engine ka ho, ne Bootstrap bɔ abira esiane * { box-sizing: border-box; }, mmara a ɛma ɛyɛ saa paddingno nka element bi ntrɛwmu a etwa to a wɔabɔ ho akontaa no. Sua pii fa box model ne sizing ho wɔ CSS Tricks .

Ɛgyina nsɛm a ɛfa ho no so no, wubetumi abɔ so sɛnea ɛho hia (Ɔkwan 1) anaasɛ wobɛsan asiesie adaka no kɛse ama mpɔtam mũ no nyinaa (Ɔkwan 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();
}

Nneɛma a wotumi nya

Bootstrap di wɛb gyinapɛn ahorow a wɔtaa de di dwuma akyi na—a mmɔdenbɔ kakraa bi na ɛka ho—wobetumi de ayɛ wɛbsaet ahorow a wɔn a wɔde AT di dwuma no betumi akɔ so di dwuma no betumi akɔ so .

Twa kwan a wɔfa so kɔ hɔ no so

Sɛ wo navigation no kura links pii na ɛba ansa na nsɛm titiriw a ɛwɔ DOM no mu no aba a, fa Skip to main contentlink bi ka ho ansa na navigation no aba (sɛ wopɛ nkyerɛkyerɛmu a ɛnyɛ den a, hwɛ A11Y Project asɛm yi a ɛfa skip navigation links ho ). Sɛ wode .sr-onlyadesua no di dwuma a, ɛbɛma wɔde aniwa asie skip link no, na .sr-only-focusableadesua no bɛhwɛ sɛ link no bɛyɛ nea wotumi hu bere a wɔde wɔn adwene asi so pɛn (ma keyboard a wɔde di dwuma a wohu ade).

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

Nsɛmti a wɔde ahyɛ mu

Sɛ woreyɛ nesting headings ( <h1>- <h6>) a, ɛsɛ sɛ wo document header titiriw no yɛ <h1>. Ɛsɛ sɛ nsɛmti a edi hɔ no de di dwuma wɔ ɔkwan a ntease wom so <h2>- <h6>sɛnea ɛbɛyɛ a screen akenkanfo betumi ayɛ nsɛm a wɔahyehyɛ ama wo nkratafa no.

Sua pii wɔ HTML CodeSniffer ne Penn State's AccessAbility .

Kɔla ahorow a ɛne ne ho bɔ abira

Mprempren, kɔla ahorow a wɔaka abom a wɔahyɛ da ayɛ a ɛwɔ Bootstrap mu no bi (te sɛ bɔtn adesua ahorow a wɔayɛ no sɛnea wɔyɛ no, kɔla ahorow a ɛtwe adwene si koodu so no bi a wɔde di dwuma ma mfitiase koodu blocks , nsɛm a .bg-primary ɛfa akyi boafo adesuakuw no, ne link kɔla a wɔahyɛ da ayɛ bere a wɔde di dwuma wɔ akyi fitaa so) wɔ nsonsonoe a ɛba fam (a ɛba fam sen dodow a wɔkamfo kyerɛ sɛ ɛyɛ 4.5:1 ). Eyi betumi de ɔhaw aba wɔn a wɔde di dwuma a wɔn ani nhu ade yiye anaasɛ wɔn ani afura wɔ kɔla ho no so. Ebia ɛho behia sɛ wɔyɛ nsakrae wɔ kɔla ahorow a wɔahyɛ da ayɛ yi mu na ama nsonsonoe ne akenkan no ayɛ kɛse.

Nneɛma foforo a wɔde boa

• "HTML Codesniffer" nhoma agyiraehyɛde a wɔde kyerɛ nsɛm a ɛfa akwan a wɔfa so kɔ hɔ ho
• Chrome no Accessibility Developer Nnwinnade no ntrɛwmu
• Kɔla a Ɛbɔ Nsonsonoe Ho Nhwehwɛmu
• A11Y Dwumadie no
• MDN a wobetumi anya ho nkrataa

Tumi krataa ho nsɛmmisa

Bootstrap no wɔayi no adi wɔ MIT tumi krataa ase na ɛyɛ copyright 2016 Twitter. Sɛ wɔnoa no ma ɛyɛ nketenkete a, wobetumi de tebea horow a edidi so yi akyerɛkyerɛ mu.

Ɛhwehwɛ sɛ woyɛ:

• Fa tumi krataa ne copyright ho amanneɛbɔ no sie Bootstrap CSS ne JavaScript fael ahorow no mu bere a wode redi dwuma wɔ wo nnwuma mu no

Ɛma wo kwan sɛ:

• Twe Bootstrap no kwa na fa di dwuma, ne nyinaa anaa ne fã bi, ma ankorankoro, kokoam, adwumakuw no mu, anaa aguadi atirimpɔw ahorow
• Fa Bootstrap di dwuma wɔ packages anaa distributions a woayɛ mu
• Sesa source code no mu nsɛm
• Ma tumi krataa ketewa bi sɛ wobɛsesa na woakyekyɛ Bootstrap ama nnipa foforo a wɔmfa wɔn nka tumi krataa no ho

Ɛbara wo sɛ:

• Fa akyerɛwfo ne tumi krataa wuranom no ho asodi to wɔn so wɔ nneɛma a asɛe ho efisɛ wɔde Bootstrap ama a wonni hokwan biara
• Fa asodi to wɔn a wɔyɛɛ Bootstrap no anaa wɔn a wɔwɔ copyright no so
• San kyekyɛ Bootstrap no afã biara a wɔmfa attribution a ɛfata nka ho
• Fa agyiraehyɛde biara a Twitter wɔ di dwuma wɔ ɔkwan biara so a ebetumi aka anaasɛ ɛbɛkyerɛ sɛ Twitter foa wo nkyekyɛmu no so
• Fa agyiraehyɛde biara a Twitter wɔ di dwuma wɔ ɔkwan biara so a ebetumi aka anaasɛ ɛbɛkyerɛ sɛ woayɛ Twitter softwea a wɔreka ho asɛm no

Ɛnhwehwɛ sɛ woyɛ:

• Fa Bootstrap ankasa fibea, anaa nsakrae biara a ebia woayɛ wɔ mu no ka ho wɔ sankyekyɛ biara a wubetumi aboaboa ano a ɛka ho no ho
• Fa nsakrae a woyɛ wɔ Bootstrap mu no san kɔ Bootstrap adwuma no mu (ɛwom sɛ wɔhyɛ nsɛm a ɛte saa ho nkuran de) .

Bootstrap tumi krataa no nyinaa wɔ adwuma no akorae no mu ma nsɛm pii.

Nkyerɛase ahorow

Mpɔtam hɔfoɔ akyerɛ Bootstrap nkrataa ase akɔ kasa ahodoɔ mu. Obiara nni hɔ a aban ntumi mmoa na ebia ɛnyɛ bere nyinaa na ɛyɛ nea ɛwɔ hɔ nnɛ.

• Bootstrap 中文文档 (China kasa) .
• Bootstrap 3 中文手冊 (Chinafo (Amammerɛ))
• Bootstrap på Dansk (Danish kasa) a wɔde hyɛ ase.
• Bootstrap en Français (Franse kasa) .
• Bootstrap auf Deutsch (German kasa mu) .
• Bootstrap wɔ Italiano (Italia kasa) kasa mu .
• Bootstrap 한국어 (Korean kasa) .
• Bootstrap em Português do Brasil (Brazilfo Portugal kasa) .
• Bootstrap по-русски (Russia kasa) .
• Bootstrap en Español (Spanish kasa) .
• Türkçe Bootstrap (Turkey kasa mu) .
• Bootstrap українською (Ukraini kasa) .
• Bootstrap bằng tiếng Việt (Vietnam kasa) .

Yɛnmmoa nhyehyɛ anaa yɛmfa nkyerɛase ahorow nhyɛ mu, yɛde link kɔ wɔn so kɛkɛ.

Woawie nkyerɛase foforo anaa nea eye sen saa? Bue twe adesrɛ bi na fa ka yɛn list no ho.