Tikiake

Kei a Bootstrap (i tenei wa v3.4.1) etahi huarahi ngawari ki te timata wawe, he pai ki a ia ki tetahi taumata pukenga me tetahi keehi. Panuihia kia kite he aha e pai ana ki o hiahia.

jsDelivr

Ko nga taangata kei runga i te jsDelivr kei te tuku tautoko CDN mo te CSS me te JavaScript a Bootstrap. Me whakamahi noa enei hononga jsDelivr .

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

Tāutahia me te Bower

Ka taea hoki e koe te whakauru me te whakahaere i te Bootstrap's Iti, CSS, JavaScript, me nga momotuhi ma te whakamahi i te Bower :

bower install bootstrap

Tāutahia me te npm

Ka taea hoki e koe te whakauru i a Bootstrap ma te whakamahi npm :

npm install bootstrap@3

require('bootstrap')ka utaina nga taputapu jQuery katoa a Bootstrap ki runga i te ahanoa jQuery. Ko te bootstrapkōwae ake e kore e kaweake i tetahi mea. Ka taea e koe te uta i nga taputapu jQuery a Bootstrap takitahi ma te uta i nga /js/*.jskonae kei raro i te raarangi taumata-runga o te kete.

Kei a Bootstrap package.jsonetahi metadata taapiri i raro i nga taviri e whai ake nei:

• less- ara ki te kōnae matua Iti puna matua a Bootstrap
• style- ara ki te CSS kore-whakaitihia a Bootstrap i whakahiatohia ma te whakamahi i nga tautuhinga taunoa (kaore he whakaritenga)

Tāutahia me te Kaitito

Ka taea hoki e koe te whakauru me te whakahaere i te Bootstrap's Iti, CSS, JavaScript, me nga momotuhi ma te whakamahi i te Composer :

composer require twbs/bootstrap

E hiahiatia ana te KaituhiAunoa mo te Iti/Sass

Ka whakamahi a Bootstrap i te Autoprefixer ki te mahi i nga tohu tohu kaihoko CSS . Mena kei te whakahiatohia e koe a Bootstrap mai i tana puna Iti/Sass me te kore e whakamahi i ta matou Gruntfile, me whakauru koe i te Autoprefixer ki to mahi hangahanga. Mena kei te whakamahi koe i te Bootstrap kua whakahiatohia, kei te whakamahi ranei i ta matou Gruntfile, kaore koe e awangawanga mo tenei na te mea kua whakaurua kee te Autoprefixer ki roto i a maatau Gruntfile.

He aha kei roto

Ka taea te tango a Bootstrap i roto i nga ahua e rua, kei roto ka kitea e koe nga raarangi me nga konae e whai ake nei, ka whakarōpū i nga rauemi noa me te whakarato i nga rereketanga kua whakahiatohia me te iti.

Bootstrap kua whakahiato-mua

Kia tikiakehia, wetewetehia te kōpaki kōpeke kia kite i te hanganga o (te whakahiato) Bootstrap. Ka kite koe i tetahi mea penei:

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

Koinei te ahua tino taketake o Bootstrap: ko nga konae kua oti te whakahiato mo te whakamahi tere ki roto tata ki nga kaupapa tukutuku. Ka whakaratohia e matou te CSS me te JS kua whakaemihia ( bootstrap.*), me te CSS me te JS kua whakaemihia me te whakaiti ( bootstrap.min.*). Ko nga mapi puna CSS ( bootstrap.*.map) e waatea ana mo te whakamahi me etahi taputapu kaiwhakawhanake. Ko nga momotuhi mai i nga Glyphicons kua whakauruhia, me te kaupapa Bootstrap kua tohua.

Waehere puna Bootstrap

Kei roto i te tango waehere puna Bootstrap te CSS, JavaScript, me nga rawa momotuhi, me te puna Iti, JavaScript, me nga tuhinga. He mea nui ake, kei roto ko nga mea e whai ake nei me etahi atu:

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

Ko te less/, js/, a fonts/ko te waehere puna mo a maatau CSS, JS, me nga momotuhi ata (he rite). Kei dist/roto i te kōpaki nga mea katoa kua whakarārangihia ki te waahanga tangohanga kua oti te whakahiato i runga ake nei. Kei docs/roto i te kōpaki te waehere puna mo a maatau tuhinga, me examples/te whakamahi a Bootstrap. I tua atu i tera, ko etahi atu konae kua whakauruhia he tautoko mo nga kete, nga korero raihana me te whanaketanga.

Te whakahiato CSS me JavaScript

Ka whakamahi a Bootstrap i a Grunt mo tana punaha hanga, me nga tikanga pai mo te mahi me te angamahi. Koia te whakahiato i a maatau waehere, whakahaere whakamatautau, me etahi atu.

Tāuta ana i te Grunt

Hei whakauru i a Grunt, me tango tuatahi me te whakauru i te node.js (kei roto ko te npm). Ko te npm te tohu mo nga waahanga kua oti te whakakakahu node , he huarahi ki te whakahaere i nga whakawhirinakitanga whanaketanga ma te node.js.

1. Tāutahia grunt-cliputa noa i te ao me te npm install -g grunt-cli.
2. /bootstrap/Whakatere ki te whaiaronga pakiaka , ka rere npm install. Ka titiro a npm ki te package.jsonkonae me te whakauru aunoa i nga whakawhirinakitanga rohe e tika ana kua tohua ki reira.

Ina oti, ka taea e koe te whakahaere i nga momo whakahau Grunt i whakaratohia mai i te raina whakahau.

Kei te waatea nga tono Grunt

grunt dist(Whakahiato noa CSS me JavaScript)

Ka whakahou i te /dist/whaiaronga me nga konae CSS me JavaScript kua whakahiato me te whakaiti. Hei kaiwhakamahi Bootstrap, koinei te whakahau e hiahia ana koe.

grunt watch(Matakitaki)

Ka maataki i nga konae puna iti ka whakahiato aunoa ki te CSS ina tiakina e koe he huringa.

grunt test(Whakahaere whakamatautau)

Ka whakahaere i a JSHint me te whakahaere i nga whakamatautau QUnit i roto i nga kaitirotiro tuuturu na Karma .

grunt docs(Hanga me te whakamatau i nga rawa tuhinga)

Ka hanga me te whakamatautau CSS, JavaScript, me etahi atu rawa e whakamahia ana i te wa e whakahaere ana nga tuhinga i te rohe ma te bundle exec jekyll serve.

grunt(Hangaia nga mea katoa ka whakahaere i nga whakamatautau)

Ka whakahiato me te whakaiti i te CSS me te JavaScript, te hanga i te paetukutuku tuhinga, te whakahaere i te HTML5 whakamana ki nga tuhinga, te whakahou i nga rawa Whakariterite, me etahi atu. E hiahia ana a Jekyll . Ko te tikanga he mea tika mena kei te hacking koe i runga i a Bootstrap ano.

Raparongoā

Mena ka raru koe ki te whakauru i nga whakawhirinaki, ki te whakahaere i nga whakahau Grunt, tuatahi mukua te /node_modules/whaiaronga i hangaia e npm. Na, rere ano npm install.

tauira taketake

Me timata ma tenei tauira HTML taketake, whakarereke ranei enei tauira . Ko te tumanako ka whakarite koe i a maatau tauira me o maatau tauira, ka urutau kia rite ki o hiahia.

Tāruahia te HTML i raro nei kia timata te mahi me te iti o te tuhinga Bootstrap.

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

Tauira

Hangaia ki runga i te tauira taketake o runga me nga waahanga maha o Bootstrap. Ka akiaki koe ki te whakarite me te urutau Bootstrap kia rite ki nga hiahia o to kaupapa takitahi.

Tikina te waehere puna mo ia tauira i raro nei ma te tango i te putunga putunga Bootstrap . Ka kitea nga tauira i roto i te docs/examples/whaiaronga.

Te whakamahi i te anga

tauira timata

Ko nga mea taketake anake: ko te CSS me te JavaScript kua whakahiato me te ipu.

Kaupapa Bootstrap

Utaina te kaupapa Bootstrap hei whiriwhiringa mo te wheako whakakitenga ake.

Mātiti

He maha nga tauira o nga whakatakotoranga matiti me nga taumata e wha, te kohanga, me etahi atu.

Jumbotron

Hanga huri noa i te jumbotron me te pae whakatere me etahi pou matiti taketake.

Jumbotron kuiti

Hangaia he wharangi ritenga ake ma te whakawhāiti i te ipu taunoa me te jumbotron.

Navbars e mahi ana

Navbar

He tauira tino nui kei roto ko te navbar me etahi atu ihirangi.

Paetukutuku runga pateko

He tauira tino taketake me te pae whakaterenga runga me etahi atu ihirangi.

Navbar kua mau

He tauira tino taketake me te pae whakaterenga runga me etahi atu ihirangi.

Nga waahanga ritenga

Uwhi

He tauira wharangi kotahi mo te hanga wharangi kaainga ngawari me te ataahua.

Carousel

Whakaritea te pae whakatere me te carousel, katahi ka taapiri etahi waahanga hou.

Blog

Tahora rangitaki-rua-tatau ngawari me te whakatere ritenga, te pane, me te momo.

Papatohu

Hanganga taketake mo te papatohu kaiwhakahaere me te paetaha me te pae whakatere.

Whārangi takiuru

Tahora puka ritenga me te hoahoa mo te tohu tohu ngawari.

Nav tika

Waihangatia he pae whakaterenga me nga hononga tika. Mahunga ake! Ehara i te hoa Safari rawa.

Hiku piri

Whakapirihia he hiku ki raro o te tauranga tirohanga ina he poto ake te ihirangi.

Hiku piri me te pae whakatere

Whakapirihia he hiku ki raro o te tauranga tirohanga me te pae whakaterenga i runga.

Nga whakamatautau

Bootstrap kore-whakautu

Maamaa te whakakore i te urupare a Bootstrap mo o maatau tuhinga .

Papa-waho

Hangaia he tahua whakatere-waho ka taea te huri hei whakamahi me Bootstrap.

Utauta

Bootlint

Ko Bootlint te taputapu hiko Bootstrap HTML. Ka tirotiro aunoa mo etahi hapa HTML noa i nga wharangi paetukutuku e whakamahi ana i a Bootstrap i runga i te ahua "vanila". Ko nga waahanga/widget a Vanilla Bootstrap e hiahia ana ki o raatau waahanga o te DOM kia rite ki etahi hanganga. Ka tirohia e Bootlint he tika te hanganga HTML o nga waahanga Bootstrap. Whakaarohia te taapiri i a Bootlint ki to mekameka taputapu whanaketanga paetukutuku Bootstrap kia kore ai tetahi o nga hapa noa e whakaroa i te whanaketanga o to kaupapa.

Hapori

Kia mau ki nga korero mo te whanaketanga o Bootstrap me te toro atu ki te hapori me enei rauemi awhina.

• Panuitia me te ohauru ki te Blog Bootstrap Official .
• Kōrerorero me o hoa Bootstrappers e whakamahi ana i te IRC i roto i te irc.freenode.nettūmau, i te hongere ##bootstrap .
• Mo te awhina ki te whakamahi i te Bootstrap, patai ki runga StackOverflow ma te whakamahi i te tohutwitter-bootstrap-3 .
• Me whakamahi nga kaiwhakawhanake i te kupu matua bootstrapi runga i nga kete ka whakarereke, ka taapiri atu ranei ki nga mahi a Bootstrap i te wa e tohatoha ana ma roto i te npm me nga momo tuku rite mo te tino kitea.
• Kimihia nga tauira whakaihiihi o nga tangata e hanga ana me Bootstrap i te Bootstrap Expo .

Ka taea hoki e koe te whai @getbootstrap i runga i Twitter mo nga korero hou me nga riipene puoro whakamataku.

Te whakakore i te urupare

Ka urutau aunoa a Bootstrap i o wharangi mo nga momo rahi mata. Anei me pehea te whakakore i tenei waahanga kia mahi ai to wharangi penei i tenei tauira kore whakautu .

Nga taahiraa ki te whakakore i te urupare o te whaarangi

1. Waiho te tauranga tirohanga <meta>kua whakahuahia i roto i nga tuhinga CSS
2. Whakakorehia te widthi runga i te .containermo ia taumata tukutuku me te whanui kotahi, hei tauira width: 970px !important;Me mohio ka tae mai tenei i muri i te Bootstrap CSS taunoa. Ka taea e koe te karo i te !importantme nga patai pāpāho, etahi kaiwhiri-fu ranei.
3. Mēnā kei te whakamahi i ngā pae whakaterenga, tangohia katoa te pae whakaterenga e tiango ana, e whakawhānui ana i te whanonga.
4. Mo nga whakatakotoranga matiti, whakamahia .col-xs-*nga karaehe hei taapiri, hei whakakapi ranei i nga mea reo/nui. Kaua e māharahara, ka tauine te matiti taputapu iti-iti ki nga whakataunga katoa.

Ka hiahia tonu koe ki a Respond.js mo IE8 (i te mea kei reira tonu a maatau patai pāpāho me te tukatuka). Ka mono tenei i nga ahuatanga "pae pūkoro" o Bootstrap.

Ko te tauira Bootstrap kua monokia te urupare

Kua hoatu e matou enei kaupae ki tetahi tauira. Pānuihia tana waehere puna kia kite i nga huringa motuhake kua whakatinanahia.

Tirohia te tauira kore whakautu

Pūtirotiro me te tautoko taputapu

I hangaia a Bootstrap kia pai ake te mahi i roto i te papamahi hou me nga kaitirotiro pūkoro, ko te tikanga ka whakaatuhia e nga kaitirotiro tawhito te ahua rereke, ahakoa e tino mahi ana, nga whakaputanga o etahi waahanga.

Kaitirotiro tautoko

Ina koa, ka tautoko matou i nga putanga hou o nga kaitirotiro me nga papaaho e whai ake nei.

Ko nga kaitirotiro rereke e whakamahi ana i te putanga hou o WebKit, Blink, Gecko ranei, ahakoa tika, ma te API tirohanga paetukutuku ranei, kaore e tino tautokona. Heoi, me whakaatu me te mahi tika a Bootstrap (i te nuinga o nga wa) i roto i enei kaitirotiro. Kei raro nei nga korero tautoko motuhake.

Nga taputapu pūkoro

Ko te tikanga, kei te tautoko a Bootstrap i nga putanga hou o nga kaitirotiro taunoa o ia turanga matua. Kia mahara ko nga kaitirotiro takawaenga (penei i te Opera Mini, te aratau Turbo o Opera Mobile, UC Browser Mini, Amazon Silk) kaore i te tautokohia.

Pūtirotiro papamahi

Waihoki, kei te tautokohia nga putanga hou o te nuinga o nga kaitirotiro papamahi.

I Windows, ka tautoko matou i te Internet Explorer 8-11 .

Mo Firefox, i tua atu i te tukunga pumau hou, ka tautokohia e matou te putanga hou o te Whakaputa Tautoko Whakaroa (ESR) o Firefox.

Ma te kore mana, me titiro pai a Bootstrap ki Chromium me Chrome mo Linux, Firefox mo Linux, me Internet Explorer 7, me Microsoft Edge, ahakoa kaore i te tautoko mana.

Mo te rarangi o etahi o nga pepeke tirotiro ma Bootstrap e raru, tirohia ta maatau pakitara o nga pepeke tirotiro .

Internet Explorer 8 me 9

Kei te tautokohia ano a Internet Explorer 8 me 9, heoi, kia mohio koe ko etahi o nga taonga CSS3 me nga huānga HTML5 kaore i te tino tautokohia e enei kaitirotiro. I tua atu, me whakamahi a Internet Explorer 8 i te Respond.js kia taea ai te tautoko uiui pāpāho.

Tirohia Ka taea e au te whakamahi... mo nga korero mo te tautoko tirotiro mo nga ahuatanga CSS3 me HTML5.

Internet Explorer 8 me Respond.js

Kia tupato ki nga whakatupato e whai ake nei ina whakamahi koe i a Respond.js i roto i o taiao whanaketanga me te whakaputanga mo Internet Explorer 8.

Respond.js me CSS rohe-whiti

Ma te whakamahi i te Respond.js me te CSS e whakahaerehia ana i runga i tetahi rohe rereke (hei tauira, i runga i te CDN) me whakarite etahi taapiri. Tirohia nga tuhinga Respond.js mo nga taipitopito.

Whakautu.js mefile://

Na nga ture haumarutanga tirotiro, kare a Respond.js e mahi me nga wharangi ka tirohia ma te file://kawa (penei i te wa e whakatuwhera ana i te konae HTML rohe). Hei whakamatautau i nga ahuatanga urupare i roto i te IE8, tirohia o wharangi ma runga HTTP(S). Tirohia nga tuhinga Respond.js mo nga taipitopito.

Whakautu.js me@import

Karekau a Respond.js e mahi me te CSS i tohutoro ma @import. Ina koa, ko etahi whirihoranga Drupal e mohiotia ana ki te whakamahi @import. Tirohia nga tuhinga Respond.js mo nga taipitopito.

Internet Explorer 8 me te rahi pouaka

Karekau a IE8 e tino tautoko box-sizing: border-box;ina hono ana ki te min-width, max-width, , min-height, ranei max-height. Mo tera take, mai i te v3.0.1, kua kore matou e whakamahi max-widthi runga i .containerte s.

Internet Explorer 8 me @font-face

Kei a IE8 etahi take me @font-facete whakauru ki te :before. Ka whakamahia e Bootstrap taua huinga me ana Glyphicons. Mena kei te keteroki tetahi wharangi, ka utaina me te kore te kiore i runga i te matapihi (arā, paatohia te patene whakamau, utaina ranei tetahi mea ki roto i te iframe) katahi ka tukuna te wharangi i mua i te utaina o te momotuhi. Ma te whakaparo i runga i te wharangi (tinana) ka whakaatu etahi o nga ata me te whakaparo ki runga i nga ata e toe ana ka whakaatu ano hoki. Tirohia te take #13863 mo nga taipitopito.

IE aratau Hototahi

Kaore i te tautokona a Bootstrap i nga aratau hototahi Internet Explorer tawhito. Kia mohio kei te whakamahi koe i te aratau whakaputa hou mo IE, whakaarohia te whakauru i te <meta>tohu tika ki o wharangi:

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

Whakaūhia te aratau tuhinga ma te whakatuwhera i nga taputapu patuiro: pehia F12me te tirotiro i te "Aratau Tuhinga".

Kua whakauruhia tenei tohu ki roto i nga tuhinga katoa a Bootstrap me nga tauira hei whakarite kia pai te whakaputanga i roto i ia putanga tautoko o Internet Explorer.

Tirohia tenei patai StackOverflow mo etahi atu korero.

Internet Explorer 10 i Windows 8 me Windows Phone 8

Karekau a Internet Explorer 10 e wehewehe i te whanui o te taputapu mai i te whanui tauranga tirohanga , na reira karekau e tika te whakamahi i nga patai pāpāho kei Bootstrap's CSS. Ko te tikanga ka taapirihia e koe he waahanga tere o CSS hei whakatika i tenei:

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

Heoi, karekau tenei e mahi mo nga taputapu e whakahaere ana i nga Waea Windows 8 putanga tawhito ake i te Whakahoutanga 3 (aka GDR3) , na te mea ka whakaatuhia e enei taputapu te nuinga o te tirohanga papamahi hei utu mo te tirohanga "waea" whaiti. Hei whakatika i tenei, me whakauru e koe te CSS me te JavaScript e whai ake nei hei whakatika i te bug .

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

Mo etahi atu korero me nga aratohu whakamahinga, panuihia te Waea Windows 8 me te Whanui-Pūrere .

Hei upoko, ka whakauruhia tenei ki roto i nga tuhinga katoa a Bootstrap me nga tauira hei whakaaturanga.

Safari ōrau whakaawhiwhi

Ko te miihini whakaputa o nga putanga o Safari i mua i te v7.1 mo te OS X me te Safari mo te iOS v8.0 i raru ki te maha o nga waahi ira i whakamahia i roto i o .col-*-1maatau akomanga. Mēnā he 12 ngā tīwae mātiti takitahi, ka kite koe he poto ake te whakarite ki etahi atu rarangi o nga pou. I tua atu i te whakahou ake i te Safari/iOS, kei a koe etahi whiringa mo nga mahi whakatika:

• Tāpirihia .pull-rightki tō tīwae mātiti whakamutunga hei tiki i te tīaroaro mārō-matau
• Takawiri ā-ringatia ō ōrau kia whiwhi i te whakaawhiwhi tino pai mo Safari (he uaua ake i te whiringa tuatahi)

Modals, navbars, me nga papapātuhi mariko

Te waipuke me te panuku

Ko te tautoko mo overflow: hiddente <body>huānga he iti noa i roto i te iOS me te Android. Ki tera, ka panuku koe i te taha ki runga, ki raro ranei o te aratau i roto i tetahi o nga kaitirotiro o aua taputapu, <body>ka timata nga korero ki te panuku. Tirohia te pepeha Chrome #175502 (kua mau ki Chrome v40) me te pepeha WebKit #153852 .

iOS mara kuputuhi me te panuku

Mai i te iOS 9.3, i te wa e tuwhera ana tetahi aratau, mena ko te pa tuatahi o te tohu panuku kei roto i te rohe o te tuhinga <input>, o te <textarea>, ko nga <body>mea kei raro i te aratau ka panuku hei utu mo te aratau ake. Tirohia te bug WebKit #153856 .

Papapātuhi mariko

Me mahara ano mena kei te whakamahi koe i te pae whakaterenga, kei te whakamahi ranei koe i nga whakaurunga i roto i te aratau, kei a iOS tetahi pepeha taake e kore e whakahōu i te tūnga o nga huānga kua whakaritea i te wa e whakaohohia ana te papapātuhi mariko. Ko etahi o nga mahi mo tenei ko te whakarereke i o huānga ki position: absolutete tono i te matawā i runga i te arotahi ki te ngana ki te whakatika i te tuunga a-ringa. Kaore tenei i te whakahaeretia e Bootstrap, no reira kei a koe te whakatau ko wai te otinga pai mo to tono.

Navbar Whakataka

Karekau te .dropdown-backdrophuānga i te whakamahia ki runga iOS i te nav na te uaua o te tohu-z. No reira, ki te kati i nga takaiho i roto i nga pae whakaterenga, me paato tika koe i te huānga takaiho ( tetahi atu huānga ranei ka puhipuhi i te takahanga paato i iOS ).

Topa Pūtirotiro

Ko te topa o te wharangi ka whakaatu i nga mahi toi i etahi waahanga, kei Bootstrap me era atu o te paetukutuku. I runga i te take, ka taea pea e taatau te whakatika (rapu tuatahi ka whakatuwherahia he take mena e tika ana). Heoi, ka warewarehia e matou enei na te mea he maha nga wa kaore he otinga tika i tua atu i nga mahi hacky.

Piripiri :hover/ :focuskei runga waea pūkoro

Ahakoa karekau e taea te whakakorikori i runga i te nuinga o nga mata pa, ko te nuinga o nga kaitirotiro pūkoro ka whai i te tautoko e rere ana ka :hover"piri". I etahi atu kupu, :hoverka timata nga momo ki te tono i muri i te paato i tetahi huānga ka mutu noa te tono i muri i te paato a te kaiwhakamahi i etahi atu huānga. Ka taea e tenei ko nga :hoverahuatanga o Bootstrap te "piri" ki runga i aua kaitirotiro. Ko etahi o nga kaitirotiro pūkoro he :focusrite ano te piri. I tenei wa karekau he huarahi ngawari mo enei take i tua atu i te tango i enei momo momo.

Te tā

Ahakoa i roto i etahi kaitirotiro hou, he rereke te tuhi.

Ina koa, mo te Chrome v32 me te aha o nga tautuhinga tawhē, ka whakamahia e Chrome te whanui tauranga tiro tino whaiti atu i te rahi o te pepa tinana i te wa e whakatau ana i nga patai pāpāho i te wa e ta ana i te wharangi paetukutuku. Ma tenei ka puta ohorere te matiti atu-iti a Bootstrap i te wa e ta ana. Tirohia te take #12078 me te bug Chrome #273306 mo etahi taipitopito. Ko nga mahi whakatika:

• Awhihia te matiti iti-iti ake, kia pai te ahua o to wharangi kei raro iho.
• Whakaritea nga uara o nga @screen-*Taurangi Iti kia kiia ai to pepa taapene he nui ake i te iti-iti.
• Tāpirihia ngā pātai pāpāho ritenga hei huri i ngā wāhi wehenga rahi mātiti mō te pāpāho tā anake.

Ano hoki, mo te Safari v8.0, .containerka taea e te s te whanui-whanui te whakamahi a Safari i te rahi momotuhi iti i te wa e ta ana. Tirohia #14868 me WebKit bug #138192 mo etahi atu korero. Ko tetahi otinga ka taea mo tenei ko te taapiri i te CSS e whai ake nei:

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

Pūtirotiro kararehe Android

I waho o te pouaka, ko te Android 4.1 (me etahi o nga putanga hou ake nei) ka tukuna me te taupānga Tirotiro hei kaitirotiro paetukutuku taunoa (he rereke ki a Chrome). Kia aroha mai, he maha nga pepeke me nga rerekee ki te CSS i te nuinga o te waa.

Tīpakohia ngā tahua

I runga <select>i nga huānga, kaore te kaitirotiro kararehe Android e whakaatu i nga mana taha mena he tono border-radiusme te / ranei border. (Tirohia tenei patai StackOverflow mo nga taipitopito.) Whakamahia te mahanga o te waehere i raro nei hei tango i te CSS kino me te whakaputa i te <select>hei huānga kore-ahua i runga i te tirotiro kararehe Android. Ko te hongi a te kaihoko kaiwhakamahi ka karo i te pokanoa ki nga kaitirotiro Chrome, Safari, 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>

Kei te hiahia koe ki te kite i tetahi tauira? Tirohia tenei whakaaturanga JS Bin.

Kaiwhakamana

Hei whakarato i te wheako tino pai ki nga kaitirotiro tawhito me nga kaitirotiro, ka whakamahi a Bootstrap i nga hacks tirotiro tirotiro CSS i nga waahi maha ki te aro ki te CSS motuhake ki etahi putanga tirotiro kia pai ai te mahi i nga pepeke i roto i nga kaitirotiro ake. Ko enei hacks ka tino amuamu nga kaiwhakamana CSS he muhu. I etahi waahi takirua, ka whakamahia ano e matou nga ahuatanga CSS whakaheke toto kaore ano kia tino whakatauritehia, engari ka whakamahia noa enei hei whakapai ake.

Ko enei whakatupato whakamana karekau he aha i roto i nga mahi na te mea ko te wahanga kore-hacky o to tatou CSS ka tino whakamana, karekau hoki nga wahanga hacky e pokanoa ki te mahi tika o te wahanga kore-hacky, no reira he aha tatou i ata aro atu ki enei whakatupato.

Kei a maatau tuhinga HTML etahi whakatupatotanga whakamana HTML iti me te kore whai hua na te whakaurunga o te mahi whakatika mo tetahi bug Firefox .

Tautoko tuatoru

Ahakoa kaore matou i te tautoko mana i nga taputapu tuatoru, taapiri-ake ranei, ka tukuna e matou etahi tohutohu whai hua hei awhina i te karo i nga raru pea kei roto i o kaupapa.

Pouaka-rahi

Ko etahi o nga rorohiko tuatoru, tae atu ki nga Mahere Google me te Google Ritenga Rapu Rapu, ka taupatupatu ki a Bootstrap na te * { box-sizing: border-box; }, he ture e paddingkore ai e pa ki te whanui whakaotinga o tetahi huānga. Ako atu mo te tauira pouaka me te rahi i CSS Tricks .

I runga i te horopaki, ka taea e koe te whakakore i nga mea e hiahiatia ana (Kōwhiringa 1) ka tautuhi ano ranei i te pouaka-rahi mo nga rohe katoa (Kōwhiringa 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();
}

Te urunga

E whai ana a Bootstrap i nga paerewa tukutuku noa, a—me te iti o te whakapau kaha—ka taea te whakamahi hei hanga pae e waatea ana ki te hunga e whakamahi ana i te AT .

Tīpoka te whakatere

Mena he maha nga hononga kei roto i to whakaterenga ka tae mai ki mua i nga kaupapa matua i roto i te DOM, taapirihia he Skip to main contenthononga i mua i te whakatere (mo te whakamarama ngawari, tirohia tenei tuhinga A11Y Kaupapa mo nga hononga whakatere whakatere ). Ma te whakamahi i te .sr-onlykaraehe ka huna i te hononga peke, a .sr-only-focusableka whakarite te karaehe ka kitea te hono i te wa e arotahi ana (mo nga kaiwhakamahi papapātuhi kua kitea).

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

Nga pane kua kohanga

I te wa e kohanga ana nga pane ( <h1>- <h6>), ko to pane tuhinga tuatahi he <h1>. Ko nga upoko o muri mai me whakamahi arorau <h2>- <h6>kia taea ai e nga kaipanui mata te hanga tepu korero mo o wharangi.

Ako atu i HTML CodeSniffer me Penn State's AccessAbility .

He rereke te tae

I tenei wa, ko etahi o nga huinga tae taunoa e waatea ana i Bootstrap (pēnei i nga momo karaehe patene kua tohua, etahi o nga tae tohu tohu e whakamahia ana mo nga poraka waehere taketake , te karaehe kaiawhina .bg-primary papamuri horopaki , me te tae hono taunoa ina whakamahia ki te papamuri ma) he iti te ōwehenga rerekē (kei raro iho i te ōwehenga tūtohu o 4.5:1 ). Ka raru pea nga kaiwhakamahi he iti te tirohanga, he matapo tae ranei. Ko enei tae taunoa pea me whakarereke kia nui ake te rereke me te maarama.

He rauemi taapiri

• "HTML Codesniffer" tohupuka mo te tautuhi i nga take urunga
• Toronga Utauta Kaiwhakawhanake Whakaaetanga a Chrome
• Kaitātari Pūrata Tae
• Te Kaupapa A11Y
• Nga tuhinga whakaurunga MDN

Raihana FAQs

Ka tukuna a Bootstrap i raro i te raihana MIT me te mana pupuri 2019 Twitter. Kohuatia ki nga wahi iti, ka taea te whakaahua me nga tikanga e whai ake nei.

Me hiahia koe ki te:

• Kia mau ki te panui raihana me te panui mana pupuri kei roto i nga konae CSS me JavaScript a Bootstrap ina whakamahia ana e koe i roto i au mahi

Ka whakaaetia koe ki te:

• Tikina noa me te whakamahi i a Bootstrap, i te katoa, i tetahi waahanga ranei, mo te tangata, mo te tangata, mo te kamupene o roto, mo nga kaupapa arumoni
• Whakamahia a Bootstrap i roto i nga kohinga, tohatoha ranei ka hangaia e koe
• Whakakētia te waehere pūtake
• Tukuna he raihana iti hei whakarereke me te tohatoha i a Bootstrap ki te hunga tuatoru kaore i uru ki te raihana

Ka aukati koe ki te:

• Kia mau ki nga kaituhi me nga kaipupuri raihana mo nga pakaru i te mea ka tukuna a Bootstrap me te kore whakamana
• Kia mau ki nga kaihanga, ki nga kaipupuri mana pupuri ranei o Bootstrap
• Tohaina ano tetahi waahanga o Bootstrap me te kore he tohu tika
• Whakamahia nga tohu a Twitter i nga huarahi e kii ana, e kii ana ranei kei te tautoko a Twitter i to tohatoha
• Whakamahia nga tohu a Twitter i nga huarahi katoa e kii ana, e kii ana ranei nau i hanga te rorohiko Twitter e patai ana

Kaore e hiahiatia kia:

• Whakauruhia te puna o Bootstrap ake, o etahi whakarereketanga ranei i mahia e koe ki a ia, i roto i nga tohatoha ka taea e koe te kohikohi me te whakauru atu.
• Tukuna nga huringa ka mahia e koe ki Bootstrap ki te kaupapa Bootstrap (ahakoa ka akiakihia nga urupare)

Ko te raihana katoa o Bootstrap kei roto i te putunga kaupapa mo etahi atu korero.

Whakamaoritanga

Kua whakamaoritia e nga mema o te hapori nga tuhinga a Bootstrap ki nga reo rereke. Karekau tetahi e tautoko mana ana, a, kare pea i nga wa katoa i nga wa katoa.

• Bootstrap 中文文档 (Hainamana)
• Bootstrap mo Dansk (Tenemaka)
• Bootstrap en Français (Wīwī)
• Bootstrap auf Deutsch (Tiamana)
• Bootstrap i Italiano (Itari)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Potiti Brazilia)
• Bootstrap по-русски (Rūhia)
• Bootstrap en Español (Paniora)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Iukereiniana)
• Bootstrap bằng tiếng Việt (Vietnamese)

Kaore matou e awhina ki te whakarite, ki te manaaki i nga whakamaoritanga, ka hono noa matou ki a raatau.

Kua oti he whakamaoritanga hou, pai ake ranei? Whakatuwherahia he tono kume hei taapiri atu ki ta maatau rarangi ingoa.