Hoʻoiho

Loaʻa iā Bootstrap (v3.3.7 i kēia manawa) kekahi mau ala maʻalahi e hoʻomaka koke ai, ʻoluʻolu kēlā me kēia i kahi pae akamai a me ka hihia hoʻohana. E heluhelu a ʻike i nā mea e kūpono i kāu mau pono.

Bootstrap CDN

Hāʻawi lokomaikaʻi nā poʻe ma jsDelivr i ke kākoʻo CDN no Bootstrap's CSS a me JavaScript. E hoʻohana wale i kēia mau loulou Bootstrap CDN .

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

E hoʻouka me Bower

Hiki iā ʻoe ke hoʻouka a hoʻokele i ka Bootstrap's Less, CSS, JavaScript, a me nā font me ka hoʻohana ʻana iā Bower :

$ bower install bootstrap

E hoʻouka me ka npm

Hiki iā ʻoe ke hoʻokomo iā Bootstrap me ka hoʻohana ʻana i ka npm :

$ npm install bootstrap@3

require('bootstrap')e hoʻouka i nā plugins jQuery a pau o Bootstrap i ka mea jQuery. bootstrapʻAʻole hoʻokuke aku ka module i kekahi mea . Hiki iā ʻoe ke hoʻouka lima i nā plugins jQuery o Bootstrap i kēlā me kēia ma ka hoʻouka ʻana i nā /js/*.jsfaila ma lalo o ka papa kuhikuhi kiʻekiʻe o ka pūʻolo.

Aia i loko o Bootstrap package.jsonkekahi mau metadata hou ma lalo o nā kī aʻe:

• less- ala i ka waihona kumu liʻiliʻi nui o Bootstrap
• style- ke ala i ka CSS non-minified o Bootstrap i hoʻonohonoho mua ʻia me ka hoʻohana ʻana i nā hoʻonohonoho paʻamau (ʻaʻohe hana maʻamau)

E hoʻouka me ka haku mele

Hiki iā ʻoe ke hoʻouka a hoʻokele i ka Bootstrap's Less, CSS, JavaScript, a me nā font me ka hoʻohana ʻana i ka Composer :

$ composer require twbs/bootstrap

Pono ʻo Autoprefixer no Less/Sass

Hoʻohana ʻo Bootstrap iā Autoprefixer e hana me nā prefix mea kūʻai CSS . Inā ʻoe e hōʻuluʻulu nei iā Bootstrap mai kāna kumu Less/Sass a ʻaʻole hoʻohana i kā mākou Gruntfile, pono ʻoe e hoʻohui iā Autoprefixer i kāu kaʻina hana. Inā ʻoe e hoʻohana ana i ka Bootstrap i hoʻopili ʻia a i ʻole ka hoʻohana ʻana i kā mākou Gruntfile, ʻaʻole pono ʻoe e hopohopo e pili ana i kēia no ka mea ua hoʻohui ʻia ʻo Autoprefixer i kā mākou Gruntfile.

He aha ka mea i komo

Hiki ke hoʻoiho ʻia ʻo Bootstrap ma nā ʻano ʻelua, i loko e ʻike ai ʻoe i nā papa kuhikuhi a me nā faila, e hui pū ana i nā kumuwaiwai maʻamau a hāʻawi i nā ʻano like ʻole i hōʻuluʻulu ʻia a liʻiliʻi.

Bootstrap i hoʻopili mua ʻia

Ke hoʻoiho ʻia, wehe i ka waihona i hoʻopili ʻia e ʻike i ke ʻano o (ka hui ʻia) Bootstrap. E ʻike ʻoe i kekahi mea e like me kēia:

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

ʻO kēia ke ʻano maʻamau o Bootstrap: nā faila precompiled no ka hoʻohana wikiwiki ʻana i ka hoʻohana ʻana ma kahi o nā papahana pūnaewele. Hāʻawi mākou i CSS i hui pū ʻia a me JS ( bootstrap.*), a me CSS i hōʻuluʻulu ʻia a hoʻemi ʻia a me JS ( bootstrap.min.*). Loaʻa nā palapala ʻāina kumu CSS ( bootstrap.*.map) no ka hoʻohana ʻana me kekahi mau mea hoʻomohala pūnaewele. Hoʻokomo ʻia nā font mai Glyphicons, e like me ke kumuhana Bootstrap koho.

Code kumu Bootstrap

ʻO ka hoʻoiho kumu kumu Bootstrap ka CSS i hoʻopaʻa mua ʻia, JavaScript, a me nā waiwai momona, me ke kumu Less, JavaScript, a me nā palapala. ʻOi aku ka kikoʻī, e pili ana i kēia a me nā mea hou aku:

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

ʻO ka less/, js/, a fonts/ʻo ia ke kumu kumu no kā mākou CSS, JS, a me nā kiʻi kikokikona (ʻo ia hoʻi). Aia ka dist/waihona i nā mea a pau i helu ʻia ma ka ʻāpana hoʻoiho precompiled ma luna. Aia ka docs/waihona i ke kumu kumu no kā mākou palapala, a me examples/ka hoʻohana ʻana iā Bootstrap. Ma waho aʻe o kēlā, hāʻawi nā faila ʻē aʻe i ke kākoʻo no nā pūʻolo, ʻike laikini, a me ka hoʻomohala ʻana.

Hoʻopili i ka CSS a me ka JavaScript

Hoʻohana ʻo Bootstrap iā Grunt no kāna ʻōnaehana kūkulu, me nā ala kūpono no ka hana ʻana me ka framework. ʻO ia ke ʻano o kā mākou hōʻuluʻulu ʻana i kā mākou code, holo i nā hoʻokolohua, a me nā mea hou aku.

Ke hoʻokomo nei iā Grunt

No ka hoʻouka ʻana iā Grunt, pono ʻoe e hoʻoiho mua a hoʻokomo i ka node.js (ʻo ia ka npm). ʻO npm ke kū nei i nā modula i hoʻopili ʻia node a he ala ia e hoʻokele ai i nā hilinaʻi hoʻomohala ma o node.js.

1. E hoʻouka grunt-clii ka honua me npm install -g grunt-cli.
2. E hoʻokele i ka /bootstrap/papa kuhikuhi kumu, a laila holo npm install. E nānā ʻo npm i ka package.jsonfaila a hoʻokomo maʻalahi i nā hilinaʻi kūloko e pono ai i helu ʻia ma laila.

Ke hoʻopau ʻia, hiki iā ʻoe ke holo i nā ʻano kauoha Grunt i hāʻawi ʻia mai ka laina kauoha.

Loaʻa nā kauoha Grunt

grunt dist(E hōʻuluʻulu wale iā CSS a me JavaScript)

Hoʻopuka hou i ka /dist/papa kuhikuhi me nā faila CSS a me JavaScript i hōʻuluʻulu ʻia. Ma ke ʻano he mea hoʻohana Bootstrap, ʻo ia ke kauoha maʻamau āu e makemake ai.

grunt watch(E nānā)

Nānā i nā faila kumu liʻiliʻi a hoʻohui hou iā lākou i CSS ke mālama ʻoe i kahi hoʻololi.

grunt test(Holo i nā hoʻokolohua)

Holo ʻo JSHint a holo i nā hoʻokolohua QUnit me ke poʻo ʻole ma PhantomJS .

grunt docs(Kūkulu a hoʻāʻo i nā waiwai docs)

Kūkulu a hoʻāʻo iā CSS, JavaScript, a me nā waiwai ʻē aʻe i hoʻohana ʻia i ka wā e holo ai ka palapala ma ka ʻāina ma o bundle exec jekyll serve.

grunt(Kūkulu i nā mea āpau a holo i nā hoʻokolohua)

Hoʻopili a hōʻemi i ka CSS a me JavaScript, kūkulu i ka pūnaewele palapala, holo i ka HTML5 validator e kūʻē i nā docs, hana hou i nā waiwai Customizer, a ʻoi aku. Pono ʻo Jekyll . He mea maʻamau wale nō inā e hacking ʻoe ma Bootstrap ponoʻī.

Hoʻoponopono pilikia

Inā pilikia ʻoe i ka hoʻokomo ʻana i nā hilinaʻi a i ʻole ka holo ʻana i nā kauoha Grunt, e holoi mua i ka /node_modules/papa kuhikuhi i hana ʻia e npm. A laila, hana hou npm install.

kumu hoʻohālike

E hoʻomaka me kēia ʻano HTML kumu, a i ʻole e hoʻololi i kēia mau hiʻohiʻona . Manaʻo mākou e hoʻopilikino ʻoe i kā mākou mau laʻana a me nā laʻana, e hoʻololi iā lākou e kūpono i kāu mau pono.

E kope i ka HTML ma lalo e hoʻomaka e hana me kahi palapala Bootstrap liʻiliʻi.

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

Nā laʻana

Kūkulu ʻia ma luna o ke kumu hoʻohālike ma luna me nā ʻāpana he nui o Bootstrap. Paipai mākou iā ʻoe e hana a hoʻololi iā Bootstrap e kūpono i nā pono o kāu pāhana.

E kiʻi i ke kumu kumu no kēlā me kēia laʻana ma lalo nei ma ka hoʻoiho ʻana i ka waihona Bootstrap . Hiki ke loaʻa nā laʻana ma ka docs/examples/papa kuhikuhi.

Ke hoʻohana nei i ke kāʻei

Hoʻopalapala hoʻomaka

ʻAʻohe mea ʻē aʻe akā ʻo nā kumu: hoʻohui pū ʻia CSS a me JavaScript me kahi pahu.

ʻO ke kumuhana Bootstrap

E hoʻouka i ke kumuhana Bootstrap koho no kahi ʻike i hoʻonui ʻia.

Māhele

Nui nā hiʻohiʻona o ka hoʻolālā grid me nā pae ʻehā, nesting, a me nā mea hou aku.

ʻO Jumbotron

E kūkulu a puni ka jumbotron me kahi navbar a me kekahi mau kolamu maʻamau.

jumbotron haiki

E kūkulu i kahi ʻaoʻao maʻamau ma ka hōʻemi ʻana i ka pahu paʻamau a me ka jumbotron.

Navbars i ka hana

Navbar

ʻO ka laʻana kumu maʻamau e loaʻa ana ka navbar me kekahi mau mea hou.

Navbar ma luna

ʻO ka laʻana maʻamau me kahi navbar kiʻekiʻe static me kekahi mau mea hou.

Navbar paʻa

Maikaʻi maʻamau me kahi navbar luna paʻa me kekahi mau mea hou.

Nā ʻāpana maʻamau

Uhi

He ʻaoʻao ʻaoʻao hoʻokahi no ke kūkulu ʻana i nā ʻaoʻao home maʻalahi a nani.

Carousel

Hoʻopilikino i ka navbar a me ka carousel, a laila hoʻohui i kekahi mau mea hou.

Blog

ʻO ka hoʻolālā blog ʻelua kolamu maʻalahi me ka hoʻokele maʻamau, ke poʻo, a me ke ʻano.

Papa kuhikuhi

Hoʻolālā kumu no kahi papa kuhikuhi admin me ka ʻaoʻao ʻaoʻao paʻa a me ka navbar.

ʻAoʻao komo

Hoʻolālā a me ka hoʻolālā maʻamau no kahi hōʻailona maʻalahi.

Nav kūpono ʻia

E hana i kahi navbar maʻamau me nā loulou kūpono. Nā poʻo i luna! ʻAʻole maikaʻi loa Safari.

Paʻa wāwae

E hoʻopaʻa i kahi wāwae i lalo o ka puka nānā ke ʻoi aku ka pōkole o ka ʻike ma mua o ia.

ʻO ka wāwae wāwae me ka navbar

E hoʻopili i kahi footer i lalo o ka ʻike me kahi navbar paʻa ma luna.

Nā hoʻokolohua

ʻO Bootstrap pane ʻole

Hoʻopau maʻalahi i ka pane ʻana o Bootstrap i kā mākou mau palapala .

Kāpena waho

E kūkulu i kahi papa kuhikuhi hoʻokele waho-canvas no ka hoʻohana ʻana me Bootstrap.

Mea hana

ʻO Bootlint

ʻO Bootlint ka mea hana linter HTML Bootstrap. E nānā maʻalahi ia no nā hewa HTML maʻamau i nā ʻaoʻao pūnaewele e hoʻohana ana iā Bootstrap ma kahi ala "vanila". Pono nā ʻāpana/widgets o Vanilla Bootstrap i kā lākou mau ʻāpana o ka DOM e kūlike me kekahi mau hale. Nānā ʻo Bootlint i ka HTML i hoʻonohonoho pono ʻia nā ʻāpana Bootstrap. E noʻonoʻo e hoʻohui i ka Bootlint i kāu kaulahao hoʻomohala pūnaewele Bootstrap i ʻole kekahi o nā hewa maʻamau e hoʻolohi i ka hoʻomohala ʻana o kāu papahana.

Kaiāulu

E hoʻomau i ka hoʻomohala ʻana o Bootstrap a hiki i ke kaiāulu me kēia mau kumuwaiwai kōkua.

• Heluhelu a kau inoa ʻo The Official Bootstrap Blog .
• E kamaʻilio me nā hoa Bootstrappers e hoʻohana ana i ka IRC ma ke irc.freenode.netkikowaena, ma ke kahawai ##bootstrap .
• No ke kōkua ʻana i ka hoʻohana ʻana iā Bootstrap, e noi iā StackOverflow me ka hoʻohana ʻana i ka tagtwitter-bootstrap-3 .
• Pono nā mea hoʻomohala e hoʻohana i ka huaʻōlelo bootstrapma nā pūʻolo e hoʻololi a hoʻohui paha i ka hana o Bootstrap i ka wā e kahele ʻana ma o npm a i ʻole nā ​​​​mea hoʻopuka like ʻole no ka ʻike kiʻekiʻe.
• E ʻimi i nā hiʻohiʻona hoʻoikaika o ka poʻe e kūkulu ana me Bootstrap ma Bootstrap Expo .

Hiki iā ʻoe ke hahai iā @getbootstrap ma Twitter no nā wikiō mele maikaʻi loa.

Hoʻopau i ka pane ʻana

Hoʻololi maʻalahi ʻo Bootstrap i kāu mau ʻaoʻao no nā ʻano nui o ka pale. Eia pehea e hoʻopau ai i kēia hiʻohiʻona i hana kāu ʻaoʻao e like me kēia laʻana pane ʻole .

Nā ʻanuʻu e hoʻopau i ka pane ʻaoʻao

1. E haʻalele i ka viewport <meta>i ʻōlelo ʻia ma nā palapala CSS
2. Hoʻopau i ka widthma ka .containerno kēlā me kēia pae mānoanoa me ka laulā hoʻokahi, no ka laʻana width: 970px !important;E hōʻoia e hele mai kēia ma hope o ka Bootstrap CSS paʻamau. Hiki iā ʻoe ke pale aku i ka !importantme nā nīnau media a i ʻole kekahi mea koho-fu.
3. Inā hoʻohana ʻoe i nā navbars, e hoʻoneʻe i nā ʻano navbar e hāʻule a hoʻonui.
4. No ka hoʻolālā papa, hoʻohana i .col-xs-*nā papa i hoʻohui ʻia, a i ʻole ma kahi o, nā papa waena/nui. Mai hopohopo, e hoʻopili ana ka mākia liʻiliʻi liʻiliʻi i nā hoʻonā āpau.

Pono ʻoe iā Respond.js no IE8 (no ka mea, aia nō kā mākou mau nīnau media a pono e hoʻoponopono ʻia). Hoʻopau kēia i nā ʻano "pūnaewele pūnaewele" o Bootstrap.

ʻO ka laʻana Bootstrap me ka pane ʻole ʻia

Ua hoʻohana mākou i kēia mau ʻanuʻu i kahi laʻana. E heluhelu i kāna code kumu e ʻike ai i nā loli kikoʻī i hoʻokō ʻia.

Nānā i ka laʻana pane ʻole

Kākoʻo polokalamu kele pūnaewele

Hoʻokumu ʻia ʻo Bootstrap e hana maikaʻi loa i ka pākaukau hou a me nā polokalamu kele pūnaewele, ʻo ia hoʻi, e hōʻike ʻia nā polokalamu kahiko kahiko i ke ʻano ʻokoʻa, ʻoiai ʻo ka hana piha, nā unuhi o kekahi mau mea.

Nā polokalamu kele pūnaewele i kākoʻo ʻia

Kūkākūkā, kākoʻo mākou i nā mana hou loa o nā polokalamu kele pūnaewele a me nā paepae.

ʻAʻole kākoʻo ʻia nā polokalamu kele pūnaewele ʻē aʻe e hoʻohana ana i ka mana hou loa o WebKit, Blink, a i ʻole Gecko, inā pololei a ma o ka API ʻike pūnaewele o ka platform. Eia naʻe, pono ʻo Bootstrap (i ka hapanui o nā hihia) e hōʻike a hana pololei i kēia mau polokalamu kele pūnaewele. Hāʻawi ʻia nā ʻike kākoʻo kikoʻī hou aʻe ma lalo nei.

Nā polokalamu kelepona

Ma ka ʻōlelo maʻamau, kākoʻo ʻo Bootstrap i nā mana hou loa o kēlā me kēia pūnaewele paʻamau. E ʻike ʻaʻole kākoʻo ʻia nā polokalamu kele pūnaewele (e like me Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk).

Nā polokalamu kele papapihi

Pēlā nō, kākoʻo ʻia nā mana hou loa o ka hapa nui o nā polokalamu kele pūnaewele.

Ma Windows, kākoʻo mākou iā Internet Explorer 8-11 .

No Firefox, ma waho aʻe o ka hoʻokuʻu kūpaʻa maʻamau hou loa, kākoʻo pū mākou i ka mana Extended Support Release (ESR) hou loa o Firefox.

ʻAʻole pono, pono e nānā a hana maikaʻi ʻo Bootstrap i Chromium a me Chrome no Linux, Firefox no Linux, a me Internet Explorer 7, a me Microsoft Edge, ʻoiai ʻaʻole lākou i kākoʻo ʻia.

No ka papa inoa o kekahi o nā lako polokalamu kele pūnaewele a Bootstrap e hakakā ai, e ʻike i kā mākou Wall of browser bugs .

Internet Explorer 8 a me 9

Kākoʻo ʻia ʻo Internet Explorer 8 a me 9, akā naʻe, e ʻoluʻolu e makaʻala ʻaʻole kākoʻo piha ʻia kekahi mau waiwai CSS3 a me nā mea HTML5 e kēia mau polokalamu kele pūnaewele. Eia hou, pono ʻo Internet Explorer 8 i ka hoʻohana ʻana iā Respond.js e hiki ai ke kākoʻo i ka nīnau nīnau media.

E kipa Hiki iaʻu ke hoʻohana... no nā kikoʻī e pili ana i ke kākoʻo polokalamu kele pūnaewele o CSS3 a me HTML5 mau hiʻohiʻona.

Internet Explorer 8 a me Respond.js

E makaʻala i kēia mau ʻōlelo hōʻike i ka wā e hoʻohana ai iā Respond.js i kāu hoʻomohala ʻana a me ka hoʻomohala ʻana no Internet Explorer 8.

Respond.js a me ka cross-domain CSS

Me ka hoʻohana ʻana iā Respond.js me CSS i mālama ʻia ma kahi ʻāpana (sub) ʻē aʻe (no ka laʻana, ma kahi CDN) pono i kahi hoʻonohonoho hou. E ʻike i nā palapala Respond.js no nā kikoʻī.

Respond.js andfile://

Ma muli o nā lula palekana polokalamu kele pūnaewele, ʻaʻole hana ʻo Respond.js me nā ʻaoʻao i nānā ʻia ma o ka file://protocol (e like me ka wehe ʻana i kahi faila HTML kūloko). No ka hoʻāʻo ʻana i nā hiʻohiʻona pane ma IE8, e nānā i kāu mau ʻaoʻao ma HTTP(S). E ʻike i nā palapala Respond.js no nā kikoʻī.

Respond.js and@import

ʻAʻole hana ʻo Respond.js me CSS i kuhikuhi ʻia ma o @import. Ma kahi kūikawā, ʻike ʻia kekahi mau hoʻonohonoho Drupal e hoʻohana @import. E ʻike i nā palapala Respond.js no nā kikoʻī.

Internet Explorer 8 a me ka nui o ka pahu

ʻAʻole kākoʻo piha ʻo IE8 i box-sizing: border-box;ka hui ʻana me min-width, max-width, min-height, a i ʻole max-height. No ia kumu, e like me v3.0.1, ʻaʻole mākou e hoʻohana hou max-widthma .containers.

Internet Explorer 8 a me @font-face

Loaʻa iā IE8 kekahi mau pilikia me @font-faceka hui pū ʻana me :before. Hoʻohana ʻo Bootstrap i kēlā hui me kāna Glyphicons. Inā hūnā ʻia kahi ʻaoʻao, a hoʻouka ʻia me ka ʻole o ka ʻiole ma luna o ka puka aniani (ʻo ia hoʻi, e kaomi i ke pihi hoʻomaha a i ʻole e hoʻouka i kekahi mea i loko o kahi iframe) a laila e hāʻawi ʻia ka ʻaoʻao ma mua o ka hoʻouka ʻana o ka font. Ke kau nei ma luna o ka ʻaoʻao (kino) e hōʻike i kekahi o nā kiʻi a me ka lele ʻana ma luna o nā kiʻi i koe e hōʻike ʻia ia mau mea. E nānā i ka pukana #13863 no nā kikoʻī.

Nā ʻano hoʻohālikelike IE

ʻAʻole kākoʻo ʻia ʻo Bootstrap i nā ʻano hoʻohālikelike kahiko o Internet Explorer. No ka ʻoiaʻiʻo e hoʻohana ana ʻoe i ke ʻano hoʻohālike hou loa no IE, e noʻonoʻo e hoʻokomo i ka <meta>hōʻailona kūpono i kāu mau ʻaoʻao:

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

E hōʻoia i ke ʻano palapala ma ka wehe ʻana i nā mea hana debugging: kaomi F12a nānā i ka "Document Mode".

Hoʻokomo ʻia kēia hōʻailona i loko o nā palapala a Bootstrap a me nā laʻana e hōʻoia i ka hoʻopuka maikaʻi loa i kēlā me kēia mana kākoʻo o Internet Explorer.

E ʻike i kēia nīnau StackOverflow no ka ʻike hou aku.

Internet Explorer 10 ma Windows 8 a me Windows Phone 8

ʻAʻole hoʻokaʻawale ʻo Internet Explorer 10 i ka laulā o ka hāmeʻa mai ka laulā viewport , a no laila ʻaʻole pili pono i nā nīnau media ma Bootstrap's CSS. ʻO ka maʻamau, hoʻohui wale ʻoe i kahi snippet wikiwiki o CSS e hoʻoponopono i kēia:

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

Eia naʻe, ʻaʻole pono kēia no nā polokalamu e hoʻohana ana i nā mana Windows Phone 8 ʻoi aku ma mua o Update 3 (aka GDR3) , no ka mea e hōʻike ana ia mau mea i ka nānā ʻana i ka papa kuhikuhi ma mua o ka ʻike "kelepona" haiki. No ka hoʻoponopono ʻana i kēia, pono ʻoe e hoʻokomo i kēia CSS a me JavaScript e hana a puni ka bug .

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

No ka ʻike hou aku a me nā alakaʻi hoʻohana, e heluhelu iā Windows Phone 8 a me Device-Width .

Ma ke ʻano he poʻo, hoʻokomo mākou i kēia i nā palapala a me nā hiʻohiʻona a Bootstrap ma ke ʻano he hōʻike.

Safari pākēneka pōʻai

Ua pilikia ka mīkini hoʻololi o nā mana o Safari ma mua o v7.1 no OS X a me Safari no iOS v8.0 i ka heluna o nā wahi decimal i hoʻohana ʻia i loko o kā mākou .col-*-1papa kuhikuhi. No laila, inā loaʻa iā ʻoe he 12 kolamu kolamu pākahi, e ʻike ʻoe ua pōkole lākou i ka hoʻohālikelike ʻia me nā lālani o nā kolamu. Ma waho aʻe o ka hoʻonui ʻana iā Safari/iOS, loaʻa iā ʻoe kekahi mau koho no ka workarounds:

• E hoʻohui .pull-righti kāu kolamu mānoanoa hope e kiʻi i ka hoʻopololei paʻakikī
• Tweak i kāu mau pākēneka me ka lima e kiʻi i ka pōʻai kūpono no Safari (ʻoi aku ka paʻakikī ma mua o ke koho mua)

Modals, navbars, a me nā kī kī

Ka nui a me ka owili

Ua kaupalena ʻia ke kākoʻo no overflow: hiddenka <body>mea ma IOS a me Android. I kēlā hopena, ke hele ʻoe ma mua o ka luna a i ʻole ka lalo o kahi modal ma kekahi o nā polokalamu kele pūnaewele, <body>e hoʻomaka ana ka ʻike e ʻōwili. E ʻike iā Chrome bug #175502 (paʻa ma Chrome v40) a me WebKit bug #153852 .

Nā kahua kikokikona a me ka ʻōwili ʻana o iOS

E like me ka iOS 9.3, ʻoiai e wehe ʻia ana kahi modal, inā ʻo ka pa mua ʻana o kahi ʻōkuhi ʻōwili i loko o ka palena o kahi kikokikona <input>a i ʻole kahi <textarea>, <body>e ʻōwili ʻia ka ʻike ma lalo o ka modal ma kahi o ka modal ponoʻī. E ʻike i ka hewa WebKit #153856 .

ʻO nā kī kīwaha

Eia kekahi, e hoʻomanaʻo inā ʻoe e hoʻohana ana i kahi navbar paʻa a i ʻole hoʻohana ʻana i nā mea hoʻokomo i loko o kahi modal, ua loaʻa iā iOS kahi bug rendering ʻaʻole e hoʻohou i ke kūlana o nā mea paʻa i ka wā e hoʻāla ʻia ai ka papa keyboard virtual. ʻO kekahi mau hana hoʻoponopono no kēia, ʻo ia ka hoʻololi ʻana i kāu mau mea a i position: absoluteʻole ke kāhea ʻana i kahi manawa ma ka nānā ʻana e hoʻāʻo e hoʻoponopono i ke kūlana me ka lima. ʻAʻole mālama ʻia kēia e Bootstrap, no laila aia iā ʻoe ke hoʻoholo i ka hopena i kūpono no kāu noi.

Navbar Dropdowns

ʻAʻole .dropdown-backdrophoʻohana ʻia ka mea ma iOS ma ka nav no ka paʻakikī o ka z-indexing. No laila, e pani i nā hāʻule i nā navbars, pono ʻoe e kaomi pololei i ka mea hāʻule i lalo (a i ʻole kekahi mea ʻē aʻe e puhi i kahi hanana kaomi ma iOS ).

Hoʻonui ʻia ka polokalamu kele pūnaewele

ʻO ka hoʻonui ʻana i ka ʻaoʻao e hōʻike ana i ka hoʻolilo ʻana i nā mea kiʻi i kekahi mau mea, ma Bootstrap a me ke koena o ka pūnaewele. Ma muli o ka pilikia, hiki iā mākou ke hoʻoponopono (e huli mua a wehe i kahi pilikia inā pono). Eia nō naʻe, maʻa mākou e haʻalele i kēia mau mea no ka mea ʻaʻohe o lākou hopena pololei ma mua o nā workarounds hacky.

Pili :hover/ :focusma ke kelepona hele

ʻOiai ʻaʻole hiki i ka hover maoli ʻana ma ka hapa nui o nā pale paʻi, ʻo ka hapa nui o nā polokalamu kele pūnaewele e hoʻohālike i ke kākoʻo hover a hana :hover"pili". I nā huaʻōlelo ʻē aʻe, :hoverhoʻomaka ka hoʻohana ʻana i nā ʻano ma hope o ke kaomi ʻana i kahi mea a hoʻōki wale i ka noi ʻana ma hope o ka paʻi ʻana o ka mea hoʻohana i kekahi mea ʻē aʻe. Hiki i kēia ke hoʻolilo i nā mokuʻāina ʻo Bootstrap :hoveri "paʻa ʻole" i kēlā mau polokalamu kele. Hoʻopili like kekahi mau polokalamu kele pūnaewele :focus. I kēia manawa ʻaʻohe hana maʻalahi no kēia mau pilikia ʻē aʻe ma mua o ka wehe ʻana i nā ʻano like ʻole.

Paʻi ʻana

ʻOiai ma kekahi mau polokalamu kele hou, hiki ke paʻi ʻia.

ʻO ka mea nui, e like me Chrome v32 a me ka nānā ʻole i nā hoʻonohonoho margin, hoʻohana ʻo Chrome i kahi ākea viewport ʻoi aku ka haiki ma mua o ka nui o ka pepa kino i ka wā e hoʻoholo ai i nā nīnau media i ka wā e paʻi ana i kahi ʻaoʻao pūnaewele. Hiki i kēia ke ho'āla ʻia ka mākia liʻiliʻi o Bootstrap i ka wā e paʻi ana. E nānā i ka pilikia #12078 a me Chrome bug #273306 no kekahi mau kikoʻī. ʻO nā hana hoʻoponopono i manaʻo ʻia:

• Hoʻopili i ka mākia liʻiliʻi liʻiliʻi a hōʻoia i ka ʻae ʻia o kāu ʻaoʻao ma lalo o ia.
• Hoʻopilikino i nā waiwai o nā @screen-*ʻano liʻiliʻi liʻiliʻi i manaʻo ʻia kāu pepa paʻi ʻoi aku ka nui ma mua o ka liʻiliʻi.
• Hoʻohui i nā nīnau media maʻamau no ka hoʻololi ʻana i nā wahi haʻihaʻi nui no nā mea paʻi paʻi wale nō.

Eia kekahi, e like me ka Safari v8.0, hiki i nā .containers ākea paʻa ke hoʻohana iā Safari i ka nui liʻiliʻi liʻiliʻi ke paʻi. E nānā i ka #14868 a me WebKit bug #138192 no nā kikoʻī hou aku. ʻO kahi hoʻoponopono hiki ke hoʻohui i kēia CSS:

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

Pūnaewele waihona Android

Ma waho o ka pahu, hoʻouna ʻia ka Android 4.1 (a me kekahi mau mea hou aʻe) me ka polokalamu Browser ma ke ʻano he polokalamu kele pūnaewele paʻamau (e kū'ē iā Chrome). ʻO ka mea pōʻino, ʻo ka polokalamu kele pūnaewele he nui nā pōpoki a me nā ʻano like ʻole me CSS ma ka laulā.

E koho i nā menus

Ma <select>nā mea, ʻaʻole e hōʻike ka polokalamu kelepona Android i nā mana ʻaoʻao inā loaʻa kahi border-radiusa/a borderi hoʻohana ʻia. (E nānā i kēia nīnau StackOverflow no nā kikoʻī.) E hoʻohana i ka snippet o ke code ma lalo nei no ka wehe ʻana i ka CSS hewa a hoʻolilo iā ia <select>ma ke ʻano he ʻano ʻole ma ka polokalamu kele pūnaewele Android. ʻAʻole ka mea hoʻohana e honi ana i ke keakea ʻana i nā polokalamu kele pūnaewele Chrome, Safari, a me 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>

Makemake ʻoe e ʻike i kahi laʻana? E nānā i kēia JS Bin demo.

Nā mea hōʻoia

No ka hāʻawi ʻana i ka ʻike maikaʻi loa i nā polokalamu kele kahiko a me ka buggy, hoʻohana ʻo Bootstrap i nā hack browser CSS ma nā wahi he nui e hoʻopaʻa i ka CSS kūikawā i kekahi mau polokalamu kele pūnaewele i mea e hana ai i nā pōpoki i loko o nā polokalamu kele pūnaewele ponoʻī. Hoʻomaopopo kēia mau hacks i ka hoʻopiʻi ʻana o nā mea hōʻoia CSS no ka hewa ʻole. Ma nā wahi ʻelua, hoʻohana pū mākou i nā hiʻohiʻona CSS bleeding-edge ʻaʻole i hoʻohālikelike piha ʻia, akā hoʻohana wale ʻia kēia mau mea no ka holomua holomua.

ʻAʻole pili kēia mau ʻōlelo hōʻoia i ka hoʻomaʻamaʻa ʻana no ka mea ua hōʻoia piha ka ʻāpana non-hacky o kā mākou CSS a ʻaʻole keʻakeʻa nā ʻāpana hacky i ka hana kūpono o ka ʻāpana non-hacky, no laila ke noʻonoʻo nei mākou i kēia mau ʻōlelo aʻo.

Loaʻa i kā mākou mau palapala HTML kekahi mau ʻōlelo hōʻoia HTML koʻikoʻi ma muli o kā mākou hoʻokomo ʻana i kahi hoʻoponopono no kekahi bug Firefox .

Kākoʻo ʻaoʻao ʻekolu

ʻOiai ʻaʻole mākou e kākoʻo i nā plugins ʻaoʻao ʻekolu a i ʻole nā ​​​​mea hoʻohui, hāʻawi mākou i kekahi mau ʻōlelo aʻoaʻo e kōkua i ka pale ʻana i nā pilikia i kāu mau papahana.

Ka nui pahu

ʻO kekahi polokalamu ʻaoʻao ʻekolu, e like me Google Maps a me Google Custom Search Engine, paio me Bootstrap ma muli o * { box-sizing: border-box; }, he lula e paddinghoʻopili ʻole ai i ka laulā helu hope o kahi mea. E aʻo hou aʻe e pili ana i ka pahu pahu a me ka nui ʻana ma CSS Tricks .

Ma muli o ka pōʻaiapili, hiki iā ʻoe ke hoʻololi e like me ka mea e pono ai (koho 1) a i ʻole e hoʻihoʻi i ka nui o ka pahu no nā wahi āpau (koho 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();
}

Hiki ke komo

Hoʻohana ʻo Bootstrap i nā kūlana punaewele maʻamau a—me ka hoʻoikaika liʻiliʻi ʻē aʻe—hiki ke hoʻohana ʻia e hana i nā pūnaewele i hiki ke loaʻa i ka poʻe e hoʻohana ana iā AT .

Holo ka hoʻokele

Inā loaʻa i kāu hoʻokele nā ​​loulou he nui a hiki i mua o ka ʻike nui i ka DOM, e hoʻohui i kahi Skip to main contentloulou ma mua o ka hoʻokele (no ka wehewehe maʻalahi, e ʻike i kēia ʻatikala A11Y Project ma ka skip navigation links ). Ma ka hoʻohana ʻana i ka .sr-onlypapa e hūnā ʻike maka i ka loulou skip, a .sr-only-focusablee hōʻoia ka papa e ʻike ʻia ka loulou i ka manawa i nānā ʻia (no nā mea hoʻohana keyboard ʻike ʻia).

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

Nā poʻo poʻomanaʻo

Ke hoʻomoe i nā poʻomanaʻo ( <h1>- <h6>), pono kāu poʻomanaʻo palapala mua he <h1>. Pono nā poʻomanaʻo ma hope e hoʻohana pono <h2>- <h6>i hiki i ka poʻe heluhelu kiʻi ke kūkulu i papa ʻike no kāu mau ʻaoʻao.

E aʻo hou ma HTML CodeSniffer a me Penn State's AccessAbility .

ʻokoʻa kala

I kēia manawa, loaʻa kekahi o nā hui kala paʻamau i Bootstrap (e like me nā papa pihi ʻano like ʻole, kekahi o nā kala e hōʻike ana i ke code i hoʻohana ʻia no nā poloka code kumu , ka papa kōkua .bg-primary hope ʻōlelo, a me ka waihoʻoluʻu loulou paʻamau ke hoʻohana ʻia ma ke kāʻei keʻokeʻo) loaʻa i kahi lakio hoʻohālikelike haʻahaʻa (ma lalo o ka ratio i ʻōlelo ʻia ʻo 4.5:1 ). Hiki i kēia ke hoʻopilikia i nā mea hoʻohana me ka ʻike haʻahaʻa a i ʻole nā ​​​​makapō kala. Pono e hoʻololi ʻia kēia mau kala paʻamau e hoʻonui i ko lākou ʻokoʻa a me ka legible.

Nā kumuwaiwai hou aku

• "HTML Codesniffer" bookmarklet no ka ʻike ʻana i nā pilikia hiki ke loaʻa
• ʻO ka hoʻonui ʻia ʻana o nā mea hana hoʻomohala hiki iā Chrome
• Mea Hoʻohālikelike Kala
• ʻO ka papahana A11Y
• MDN palapala hiki ke komo

Nā nīnau nīnau laikini

Hoʻokuʻu ʻia ʻo Bootstrap ma lalo o ka laikini MIT a he kope kope ʻo 2016 Twitter. Hoʻomoʻa ʻia a hiki i nā ʻāpana liʻiliʻi, hiki ke wehewehe ʻia me kēia mau kūlana.

Pono ʻoe e:

• E mālama i ka laikini a me ka leka hoʻomaopopo kope i loko o Bootstrap's CSS a me nā faila JavaScript ke hoʻohana ʻoe iā lākou i kāu mau hana

Hiki iā ʻoe ke:

• Hoʻoiho manuahi a hoʻohana iā Bootstrap, holoʻokoʻa a ʻāpana paha, no ka pilikino, pilikino, ʻoihana i loko, a i ʻole ke kumu kūʻai
• E hoʻohana i ka Bootstrap i nā pūʻolo a i ʻole nā ​​ʻāpana āu i hana ai
• Hoʻololi i ke code kumu
• Hāʻawi i kahi sublicense e hoʻololi a hāʻawi iā Bootstrap i nā ʻaoʻao ʻekolu i komo ʻole i ka laikini

Papa ia oe e:

• E hoʻopaʻa i nā mea kākau a me nā mea nona ka laikini no nā poho no ka mea ua hāʻawi ʻia ʻo Bootstrap me ka ʻole o ka palapala hōʻoia
• E hoʻopaʻa i nā mea hana a i ʻole nā ​​mea kuleana kope o Bootstrap
• E puʻunaue hou i kekahi ʻāpana o Bootstrap me ka ʻole o ka hoʻoili pono ʻana
• E hoʻohana i nā hōʻailona a Twitter ma nā ʻano like ʻole e hōʻike a hōʻike paha e kākoʻo ʻo Twitter i kāu hoʻolaha
• E hoʻohana i nā hōʻailona a Twitter ma kekahi ʻano e hōʻike a hōʻike paha ʻoe i hana i ka polokalamu Twitter i nīnau ʻia

ʻAʻole pono ʻoe e:

• E hoʻokomo i ke kumu o Bootstrap ponoʻī, a i ʻole nā ​​​​hoʻololi āu i hana ai iā ia, i nā hāʻawi hou ʻana āu e ʻākoakoa ai me ia.
• E hoʻouna i nā hoʻololi āu e hana ai iā Bootstrap i ka papahana Bootstrap (ʻoiai ua paipai ʻia kēlā mau manaʻo)

Aia ka laikini Bootstrap piha i ka waihona papahana no ka ʻike hou aku.

Nā unuhi

Ua unuhi nā lālā kaiaulu i nā palapala a Bootstrap i nā ʻōlelo like ʻole. ʻAʻohe mea i kākoʻo ʻia a ʻaʻole paha lākou i ʻike mau ʻia.

• Bootstrap 中文文档 (Pake)
• Bootstrap 3 中文手冊 (Pake (Kuʻuna))
• Bootstrap ma Dansk (Denemaka)
• Bootstrap en Français (Palani)
• Bootstrap auf Deutsch (Kelemānia)
• Bootstrap ma Italiano (Italia)
• Bootstrap 한국어 (Korean)
• ʻO Bootstrap em Português do Brasil (Pukiki Palakila)
• Bootstrap по-русски (Lūkini)
• Bootstrap ma ka ʻōlelo Paniolo (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese)

ʻAʻole mākou kōkua i ka hoʻonohonoho ʻana a i ʻole ka hoʻokipa ʻana i nā unuhi, pili wale mākou iā lākou.

Ua pau i ka unuhi hou a maikaʻi paha? E wehe i kahi noi huki e hoʻohui iā ia i kā mākou papa inoa.