Download

Bootstrap (ikozvino v3.4.1) ine nzira shomanana dziri nyore dzekukurumidza kutanga, imwe neimwe inofadza kune imwe nhanho yeunyanzvi uye kushandiswa kwekushandisa. Verenga kuti uone kuti chii chinokodzera zvaunoda.

jsDelivr

Ivo vanhu vari pajsDelivr nenyasha vanopa CDN rutsigiro rweBootstrap's CSS uye JavaScript. Ingoshandisa izvi jsDelivr zvinongedzo .

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

Isa neBower

Iwe unogona zvakare kuisa nekugadzirisa Bootstrap's Zvishoma, CSS, JavaScript, uye mafonti uchishandisa Bower :

bower install bootstrap

Isa ne npm

Iwe unogona zvakare kuisa Bootstrap uchishandisa npm :

npm install bootstrap@3

require('bootstrap')ichatakura ese Bootstrap's jQuery plugins pane jQuery chinhu. Iyo bootstrapmodule pachayo haibudisi chero chinhu. Iwe unogona kurodha Bootstrap's jQuery plugins wega nekurodha mafaera /js/*.jspasi pepakeji yepamusoro-level directory.

Bootstrap's package.jsonine imwezve metadata pasi pemakiyi anotevera:

• less- nzira yeBootstrap's main Les source file
• style- nzira yeBootstrap's isina-minified CSS iyo yakagadziridzwa uchishandisa iyo default marongero (hapana maitiro)

Isa neComposer

Iwe unogona zvakare kuisa uye kubata Bootstrap's Zvishoma, CSS, JavaScript, uye mafonti uchishandisa Composer :

composer require twbs/bootstrap

Autoprefixer inodiwa kune Less/Sass

Bootstrap inoshandisa Autoprefixer kubata neCSS mutengesi prefixes . Kana iwe uchigadzira Bootstrap kubva kune Yakaderera / Sass sosi uye usingashandise yedu Gruntfile, iwe unozofanirwa kubatanidza Autoprefixer mune yako yekuvaka maitiro iwe pachako. Kana uri kushandisa precompiled Bootstrap kana kushandisa yedu Gruntfile, haufanirwe kunetsekana neizvi nekuti Autoprefixer yakatobatanidzwa muGruntfile yedu.

Chii chinosanganisirwa

Bootstrap inodhawunirodha mumhando mbiri, mukati mamuchawana anotevera madhairekitori uye mafaera, zvine musoro kuunganidza zviwanikwa zvakajairwa uye nekupa zvese zvakasanganiswa uye minified misiyano.

Precompiled Bootstrap

Kana yangodhawunirodha, sunungura iyo yakamanikidzwa folda kuti uone chimiro che (iyo yakaunganidzwa) Bootstrap. Iwe uchaona chimwe chinhu chakadai:

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

Iyi ndiyo inonyanya kukosha yeBootstrap: akafanorongedzerwa mafaera ekukurumidza kudonhedza-mukati kushandiswa munenge chero webhu purojekiti. Isu tinopa yakaunganidzwa CSS uye JS ( bootstrap.*), pamwe neyakaunganidzwa uye minified CSS uye JS ( bootstrap.min.*). Mamepu eCSS source ( bootstrap.*.map) anowanikwa kuti ashandiswe nemamwe mabhurawuza ekuvandudza maturusi. Mafonti kubva kuGlyphicons anosanganisirwa, sezvakaita sarudzo yeBootstrap theme.

Bootstrap source code

Iyo Bootstrap source kodhi yekurodha inosanganisira iyo yakafanorongwa CSS, JavaScript, uye font midziyo, pamwe nekwakabva Zvishoma, JavaScript, uye zvinyorwa. Kunyanya kunyanya, zvinosanganisira zvinotevera uye nezvimwe:

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

Iyo less/, js/, uye fonts/ndiyo sosi kodhi yeCSS yedu, JS, uye icon mafonti (zvichienderana). Iyo dist/folda inosanganisira zvese zvakanyorwa mu precompiled yekurodha chikamu pamusoro. Iyo docs/folda inosanganisira iyo kodhi kodhi yezvinyorwa zvedu, uye examples/zveBootstrap kushandiswa. Kupfuura izvozvo, chero imwe faira inosanganisirwa inopa rutsigiro rwepakeji, ruzivo rwerezinesi, uye kusimudzira.

Kugadzira CSS uye JavaScript

Bootstrap inoshandisa Grunt kune yayo kuvaka sisitimu, ine nzira dziri nyore dzekushanda nehurongwa. Ndiwo magadzirirwo atinoita kodhi yedu, kumhanya bvunzo, nezvimwe.

Kuisa Grunt

Kuti uise Grunt, unofanira kutanga wadhawunirodha uye kuisa node.js (inosanganisira npm). npm inomirira node packaged modules uye inzira yekugadzirisa kutsamira kwebudiriro kuburikidza node.js.

1. Isa grunt-clipasi rose ne npm install -g grunt-cli.
2. Enda kune midzi /bootstrap/dhairekitori, wobva wamhanya npm install. npm inotarisa package.jsonfaira uye inoisa otomatiki inodiwa yemuno inotsamira yakanyorwa ipapo.

Kana wapedza, iwe unokwanisa kumhanyisa akasiyana Grunt mirairo yakapihwa kubva kumutsara wekuraira.

Inowanika Grunt mirairo

grunt dist(Ingo unganidza CSS uye JavaScript)

Inogadzirisa dhairekitori /dist/neakaunganidzwa uye akacheneswa CSS uye JavaScript mafaera. Semushandisi weBootstrap, uyu kazhinji ndiwo murairo waunoda.

grunt watch(Tarisa)

Inotarisa Mashoma sosi mafaera uye otozvidzosera kuCSS pese paunochengeta shanduko.

grunt test(Mhanya bvunzo)

Inomhanya JSHint uye inomhanyisa QUnit bvunzo mumabhurawuza chaiwo nekuda kweKarma .

grunt docs(Gadzira uye edza midziyo yemagwaro)

Inovaka uye bvunzo CSS, JavaScript, uye zvimwe zvinhu zvinoshandiswa pakumhanyisa zvinyorwa munharaunda kuburikidza ne bundle exec jekyll serve.

grunt(Vaka zvachose zvese uye mhanyisa bvunzo)

Inounganidza uye inoderedza CSS neJavaScript, inovaka zvinyorwa zvewebhusaiti, inomhanyisa iyo HTML5 inosimbisa kupesana nemagwaro, inovandudza zvinhu zveCustomizer, nezvimwe. Inoda Jekyll . Kazhinji zvinongodiwa chete kana iwe uchibira paBootstrap pachayo.

Kugadzirisa matambudziko

Iwe ukasangana nematambudziko nekuisa zvinotsamira kana kumhanyisa Grunt mirairo, tanga wadzima /node_modules/dhairekitori rinogadzirwa nenpm. Zvadaro, dzokorora npm install.

Basic template

Tanga neiyi yakakosha HTML template, kana shandura iyi mienzaniso . Tinovimba kuti muchagadzirisa matemplate edu nemienzaniso, muchiachinja kuti aenderane nezvido zvenyu.

Kopa iyo HTML pazasi kuti utange kushanda nediki Bootstrap gwaro.

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

Mienzaniso

Vaka pane iyo yakakosha template pamusoro neBootstrap yakawanda zvikamu. Tinokukurudzira kuti ugadzirise uye uchinje Bootstrap kuti ienderane nezvido zvepurojekiti yako wega.

Tora iyo kodhi kodhi yemuenzaniso wega wega pazasi nekurodha iyo Bootstrap repository . Mienzaniso inogona kuwanikwa docs/examples/mudhairekitori.

Kushandisa framework

Starter template

Hapana asi izvo zvekutanga: yakaunganidzwa CSS uye JavaScript pamwe nemudziyo.

Bootstrap theme

Rodha iyo inosarudzika Bootstrap theme kuti iwedzere kuoneka chiitiko.

Grids

Mienzaniso yakawanda yemagadzirirwo egidhi ane ese mana tiers, nesting, uye nezvimwe.

Jumbotron

Vaka kutenderedza jumbotron ine navbar uye mamwe magidhi makoramu.

Narrow jumbotron

Vaka imwe peji peji nekudzikisa iyo yakasarudzika mudziyo uye jumbotron.

Navbars mukuita

Navbar

Super basic template inosanganisira iyo navbar pamwe nezvimwe zvekuwedzera zvemukati.

Static yepamusoro navbar

Super basic template ine static yepamusoro navbar pamwe nezvimwe zvekuwedzera zvemukati.

Fixed navbar

Super basic template ine yakagadziriswa yepamusoro navbar pamwe nezvimwe zvekuwedzera zvemukati.

Custom components

Cover

Peji-peji template yekuvaka akareruka uye akanaka mapeji epamba.

Carousel

Gadzirisa iyo navbar uye carousel, wobva wawedzera zvimwe zvinhu zvitsva.

Blog

Yakareruka maviri-column blog marongero ane tsika yekufamba, musoro, uye mhando.

Dashboard

Chimiro cheiyo admin dashboard ine yakagadziriswa sidebar uye navbar.

Peji yekusaina

Chimiro chechimiro chechimiro uye dhizaini yechiratidzo chiri nyore mufomu.

Justified nav

Gadzira yakasarudzika navbar ine zvinonangwa zvinongedzo. Musoro! Kwete zvakare Safari hushamwari.

Sticky footer

Batanidza tsoka pazasi penzvimbo yekuona kana zvirimo zviri zvipfupi pane iyo.

Inonamira pasi petsoka ine navbar

Natanidza footer kuzasi kwenzvimbo yekuona ine navbar yakagadzika kumusoro.

Miedzo

Asina-kupindura Bootstrap

Dzima nyore kuita kweBootstrap pamagwaro edu .

Off-canvas

Gadzira inochinjika off-canvas navigation menyu yekushandisa neBootstrap.

Zvishandiso

Bootlint

Bootlint ndiyo yepamutemo Bootstrap HTML linter chishandiso. Inotarisa otomatiki kune akati wandei akajairwa HTML kukanganisa mumapeji ewebhu ari kushandisa Bootstrap nenzira yakanaka "vanilla". Vanilla Bootstrap's components/widget inoda kuti zvikamu zvadzo zveDOM zvienderane nezvimwe zvimiro. Bootlint anotarisa kuti zviitiko zveBootstrap zvikamu zvine HTML-yakarongeka. Funga kuwedzera Bootlint kune yako Bootstrap yewebhu yekuvandudza toolchain kuitira kuti pasave nekamwe kakanganiso kanowanzo dzikamisa kusimukira kweprojekiti yako.

Community

Gara uchiziva nezvekuvandudzwa kweBootstrap uye svika kune nharaunda neizvi zvinobatsira zviwanikwa.

• Verenga uye unyore kuThe Official Bootstrap Blog .
• Taura nevamwe maBootstrappers vachishandisa IRC irc.freenode.netmuseva, mu ##bootstrap chiteshi .
• Kuti uwane rubatsiro uchishandisa Bootstrap, bvunza paStackOverflow uchishandisa tagtwitter-bootstrap-3 .
• Vagadziri vanofanira kushandisa izwi rakakosha bootstrappamapakeji anoshandura kana kuwedzera kune mashandiro eBootstrap kana achigovera kuburikidza nenpm kana nzira dzekutumira dzakafanana dzekuwanikwa kwakanyanya.
• Tsvaga mienzaniso inokurudzira yevanhu vanovaka neBootstrap paBootstrap Expo .

Iwe unogona zvakare kutevera @getbootstrap pa Twitter kune azvino makuhwa uye anotyisa emimhanzi mavhidhiyo.

Kudzivisa kupindura

Bootstrap inogadzirisa otomatiki mapeji ako akasiyana siyana skrini. Heano maitiro ekudzima chimiro ichi kuti peji rako rishande semuenzaniso uyu usingapindure .

Matanho ekudzima kupindura kwepeji

1. Siya iyo yekutarisa <meta>inotaurwa muCSS docs
2. Pfuura iyo widthpane .containeryega yega grid tier ine hupamhi humwe, semuenzaniso width: 970px !important;Iva nechokwadi chekuti izvi zvinouya mushure meiyo default Bootstrap CSS. Iwe unogona kusarudza kudzivirira iyo !importantnemibvunzo midhiya kana imwe yekusarudza-fu.
3. Kana uchishandisa navbars, bvisa ese navbar inodonha uye kuwedzera maitiro.
4. Pamagadzirirwo egidhi, shandisa .col-xs-*makirasi mukuwedzera, kana panzvimbo, ari epakati/akakura. Usanetseke, iyo yakawedzera-diki mudziyo gidhi zviyero kune zvese zvinogadziriswa.

Iwe uchiri kuda Respond.js yeIE8 (sezvo yedu midhiya mibvunzo ichiripo uye inoda kugadziriswa). Izvi zvinodzima "nharembozha saiti" zvikamu zveBootstrap.

Bootstrap template ine yekupindura yakadzimwa

Isu takashandisa matanho aya kumuenzaniso. Verenga kodhi yaro kuti uone shanduko dzakaitwa.

Ona muenzaniso usingapinduri

Browser uye mudziyo rutsigiro

Bootstrap yakavakirwa kuti ishande zvakanyanya mudesktop yazvino uye nharembozha, zvichireva kuti mabhurawuza echikuru anogona kuratidza akasiyana masitaera, asi achishanda zvizere, kupa kwezvimwe zvikamu.

Mabhurawuza anotsigirwa

Kunyanya, isu tinotsigira shanduro dzichangoburwa dzemabhurawuza uye mapuratifomu anotevera.

Mamwe mabhurawuza anoshandisa yazvino vhezheni yeWebKit, Blink, kana Gecko, ingave yakananga kana kuburikidza neyepuratifomu yewebhu yekuona API, haina kutsigirwa zvakajeka. Nekudaro, Bootstrap inofanirwa (munguva zhinji) kuratidza uye kushanda nemazvo mumabhurawuza aya zvakare. Ruzivo rwakawanda rwerutsigiro rwunopihwa pazasi.

Mobile midziyo

Kazhinji kutaura, Bootstrap inotsigira azvino vhezheni ega ega makuru eplatform mabhurawuza. Ziva kuti mabhurawuza (akadai seOpera Mini, Opera Mobile's Turbo modhi, UC Browser Mini, Amazon Silk) haatsigirwe.

Desktop browsers

Saizvozvo, iwo achangoburwa vhezheni emazhinji desktop browser anotsigirwa.

PaWindows, tinotsigira Internet Explorer 8-11 .

YeFirefox, mukuwedzera kune yazvino yakajairwa kuburitswa, isu tinotsigirawo yazvino Yakawedzerwa Rutsigiro Kuburitswa (ESR) vhezheni yeFirefox.

Zvisina pamutemo, Bootstrap inofanirwa kutarisa uye kuzvibata zvakanaka muChromium uye Chrome yeLinux, Firefox yeLinux, uye Internet Explorer 7, pamwe neMicrosoft Edge, kunyangwe isingatsigirwe zviri pamutemo.

Kuti uwane runyoro rwemamwe mabhurawuza ebhurawuza ayo Bootstrap anofanirwa kugadzirisa nawo, ona yedu Wall yebrowser bugs .

Internet Explorer 8 uye 9

Internet Explorer 8 ne 9 inotsigirwawo, zvisinei, ndapota ziva kuti zvimwe zvivakwa zveCSS3 neHTML5 zvinhu hazvitsigirwe zvizere nemabhurawuza aya. Pamusoro pezvo, Internet Explorer 8 inoda kushandiswa kweRespond.js kugonesa rutsigiro rwemubvunzo wenhau.

Shanyira Ndingashandisa... kune ruzivo rwerutsigiro rwebrowser yeCSS3 uye HTML5 maficha.

Internet Explorer 8 uye Respond.js

Ngwarira macaveats anotevera paunenge uchishandisa Respond.js mune yako budiriro nekugadzira nharaunda yeInternet Explorer 8.

Respond.js uye mhiri-domain CSS

Kushandisa Respond.js neCSS inobatwa pane imwe (sub)domain (somuenzaniso, paCDN) inoda kumwe kuseta. Ona Respond.js docs kuti uwane ruzivo.

Respond.js uyefile://

Nekuda kwemitemo yekuchengetedza yebrowser, Respond.js haishande nemapeji anotariswa kuburikidza file://neprotocol (senge pakuvhura faira remunharaunda reHTML). Kuti uedze maficha anopindura muIE8, tarisa mapeji ako pamusoro peHTTP(S). Ona Respond.js docs kuti uwane ruzivo.

Respond.js uye@import

Respond.js haishande neCSS iyo inoratidzwa kuburikidza ne @import. Kunyanya, mamwe maDrupal masisitimu anozivikanwa kushandisa @import. Ona Respond.js docs kuti uwane ruzivo.

Internet Explorer 8 uye bhokisi-kukura

IE8 haitsigire zvizere box-sizing: border-box;kana yasanganiswa ne min-width, max-width, min-height, kana max-height. Nechikonzero ichocho, kubvira v3.0.1, hatichashandisi pas max-width..container

Internet Explorer 8 uye @font-face

IE8 ine dzimwe nyaya nazvo @font-facekana yasanganiswa ne :before. Bootstrap inoshandisa iyo musanganiswa nemaGlyphicons ayo. Kana peji yakavharirwa, uye yakatakurwa pasina mbeva pamusoro pehwindo (kureva rova ​​​​bhatani re refresh kana kurodha chimwe chinhu muiframe) ipapo peji rinopihwa risati ratakura mafonti. Kutenderera pamusoro peji (muviri) kunoratidza zvimwe zvidhori uye kutenderera pamusoro pezvidhori zvakasara zvicharatidza izvo zvakare. Ona chinyorwa #13863 kuti uwane ruzivo.

IE Compatibility modes

Bootstrap haitsigirwe mumamodhi ekare eInternet Explorer anoenderana. Kuti uve nechokwadi chekuti uri kushandisa yazvino revering mode yeIE, funga kusanganisa <meta>tag yakakodzera mumapeji ako:

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

Simbisa iyo gwaro modhi nekuvhura maturusi ekugadzirisa: dzvanya F12uye tarisa iyo "Document Mode".

Iyi tegi inosanganisirwa mune ese eBootstrap's zvinyorwa uye mienzaniso kuve nechokwadi chakanakisa kupa chinogoneka mune yega yega inotsigirwa vhezheni yeInternet Explorer.

Ona uyu mubvunzo weStackOverflow kuti uwane rumwe ruzivo.

Internet Explorer 10 muWindows 8 uye Windows Phone 8

Internet Explorer 10 haisiyanise hupamhi hwechishandiso kubva pahupamhi hwekutarisa , uye nekudaro haishandise zvakanaka mibvunzo yenhau muBootstrap's CSS. Kazhinji unongowedzera snippet yekukurumidza yeCSS kugadzirisa izvi:

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

Zvisinei, izvi hazvishandi kune zvishandiso zvinoshandisa Windows Phone 8 shanduro dzekare pane Update 3 (aka GDR3) , sezvo zvichiita kuti michina yakadaro iratidze maonero edesktop zvakanyanya pane kutarisa "foni" yakamanikana. Kuti ugadzirise izvi, unozofanirwa kusanganisira inotevera CSS neJavaScript kuti ushande uchitenderedza 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)
}

Kuti uwane rumwe ruzivo uye nhungamiro yekushandisa, verenga Windows Phone 8 uye Device-Width .

Semusoro, isu tinosanganisira izvi mune zvese zvinyorwa zveBootstrap uye mienzaniso sekuratidzira.

Safari muzana inotenderedza

Injini yekupa shanduro yeSafari isati yasvika v7.1 yeOS X uye Safari yeIOS v8.0 yaive nedambudziko nehuwandu hwenzvimbo dzinoshandiswa mumakirasi edu .col-*-1egridi. Saka dai wanga uine gumi nemaviri magidhi columns, waiona kuti auya ari mapfupi kana achienzaniswa nemimwe mitsara yemakoramu. Kunze kwekusimudzira Safari/iOS, une dzimwe sarudzo dzekushanda:

• Wedzera .pull-rightkune yako yekupedzisira grid column kuti uwane iyo yakaoma-kurudyi kurongeka
• Tweak maperesenti ako nemaoko kuti uwane iyo yakakwana kutenderera kweSafari (zvakanyanya kuoma kupfuura yekutanga sarudzo)

Modals, navbar, uye virtual keyboards

Kufashukira uye kupuruzira

Tsigiro yechinhu overflow: hiddenpane <body>inogumira muIOS uye Android. Kuti izvozvo zviitike, kana iwe ukapfuura nepamusoro kana pasi pe modal mune chero yeaya mabhurawuza emidziyo, <body>zvirimo zvinotanga kupururudza. Ona Chrome bug #175502 (yakagadziriswa muChrome v40) uye WebKit bug #153852 .

iOS zvinyorwa zvinyorwa uye kupuruzira

Kubva paIOS 9.3, nepo modal yakavhurika, kana kubata kwekutanga kwechimiro chemupumburu chiri mukati memuganho wezvinyorwa <input>kana a <textarea>, <body>zviri pasi peiyo modal zvichapepetwa pachinzvimbo cheiyo modal pachayo. Ona WebKit bug #153856 .

Virtual keyboards

Zvakare, cherechedza kuti kana iwe uri kushandisa yakagadziriswa navbar kana kushandisa mapupu mukati me modal, iOS ine rendering bug iyo isingagadzirise nzvimbo yezvinhu zvakagadziriswa kana iyo chaiyo kiyibhodhi yatanga. Mamwe mashoma ekugadzirisa izvi anosanganisira kushandura zvinhu zvako kuita position: absolutekana kudaidza timer pakutarisa kuyedza kugadzirisa mamiriro nemawoko. Izvi hazvibatike neBootstrap, saka zviri kwauri kuti usarudze kuti ndeipi mhinduro yakanakira application yako.

Navbar Dropdowns

Chinhu .dropdown-backdropchacho hachishandiswe paIOS mune nav nekuda kwekuoma kwez-indexing. Saka, kuvhara kudonhedza mumabhawa, iwe unofanirwa kudzvanya zvakananga chinhu chinodonha (kana chero chimwe chinhu chinopisa chiitiko chekudzvanya mu iOS ).

Browser zooming

Kufembera kwepeji kunopa zvisingadzivisiki kupa zvigadzirwa mune zvimwe zvikamu, zvese muBootstrap uye newebhu yese. Zvichienderana nenyaya, tinogona kuzvigadzirisa (tsvaga kutanga uye wozovhura nyaya kana zvichidikanwa). Nekudaro, isu tinowanzo kufuratira izvi sezvo ivo kazhinji vasina mhinduro yakananga kunze kwehacky workaround.

Inonamira :hover/ :focuspane mobile

Kunyangwe kutenderera chaiko kusingagoneke pamazhinji touchscreens, mazhinji mabhurawuza enhare anotevedzera hovering rutsigiro uye kuita :hover"kunamira". Mune mamwe mazwi, :hovermasitaera anotanga kushanda mushure mekutapa chinhu uye anongomira kushandisa mushure mekunge mushandisi atora chimwe chinhu. Izvi zvinogona kukonzera kuti :hovernyika dzeBootstrap dzisade "kunamira" pamabhurawuza akadaro. Mamwe mabrowser enhare anoitawo :focuszvakafanana. Ikozvino hapana nyore workaround yenyaya idzi kunze kwekubvisa masitaera akadaro zvachose.

Kudhinda

Kunyangwe mune mamwe mabhurawuza emazuva ano, kudhinda kunogona kuve kwakaoma.

Kunyanya, seyeChrome v32 uye zvisinei nemarongerwo emargin, Chrome inoshandisa hupamhi hwekutarisa hwakatetepa kupfuura saizi yebepa remuviri kana uchigadzirisa midhiya mibvunzo uchidhinda peji rewebhu. Izvi zvinogona kuita kuti gidhi reBootstrap riwedzere-diki riitwe zvisingatarisirwi kana richidhinda. Ona chinyorwa #12078 uye Chrome bug #273306 kuti uwane mamwe mashoko. Mazano ekugadzirisa:

• Gamuchira iyo yakawedzera-diki grid uye ita shuwa kuti peji rako rinotaridzika rinogamuchirwa pasi paro.
• Gadzirisa kukosha @screen-*kweZvishoma zvinosiyana kuitira kuti printa yako ionekwe yakakura pane yakawedzera-diki.
• Wedzera zvakajairwa midhiya mivhunzo kuti uchinje iyo grid size breakpoints yekudhinda midhiya chete.

Zvakare, seyeSafari v8.0, yakatarwa-hupamhi .containers inogona kukonzera Safari kushandisa saizi diki isingawanzo diki pakudhinda. Ona #14868 uye WebKit bug #138192 kuti uwane rumwe ruzivo. Imwe ingangoita workaround yeiyi kuwedzera inotevera CSS:

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

Android stock browser

Kunze kwebhokisi, Android 4.1 (uye kunyangwe zvimwe zvitsva zvinoburitswa sezviri pachena) ngarava ine Browser app seye default web browser yesarudzo (kusiyana neChrome). Nehurombo, iyo Browser app ine akawanda mabhugi uye kusawirirana neCSS zvakazara.

Sarudza menyu

Pane <select>zvinhu, iyo Android stock browser haizoratidze iyo yedivi zvinodzora kana paine border-radiusuye / kana borderyakashandiswa. (Ona uyu mubvunzo weStackOverflow kuti uwane udzame.) Shandisa chidimbu chekodhi pazasi kuti ubvise CSS iri kugumbura uye ratidza <select>sechinhu chisina kunyorwa paAndroid stock browser. Mushandisi anofemba anodzivirira kukanganiswa neChrome, Safari, uye Mozilla browser.

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

Unoda kuona muenzaniso? Tarisa uone iyi JS Bin demo.

Validators

Kuti ipe ruzivo rwepamusoro kune ekare uye mabhurawuza, Bootstrap inoshandisa CSS browser hacks munzvimbo dzinoverengeka kunanga yakakosha CSS kune dzimwe shanduro dzebrowser kuitira kuti ushande zvakatenderedza mabhugi mumabhurawuza pachawo. Aya ma hacks zvinonzwisisika anokonzera CSS validators kunyunyuta kuti haana basa. Munzvimbo dzakati wandei, isu tinoshandisawo kubuda ropa-kumucheto CSS maficha asati anyatso mira, asi aya anoshandiswa chete kufambira mberi.

Idzi yambiro dzekusimbisa hadzina basa mukuita sezvo iyo isiri-hacky chikamu cheCSS yedu ichinyatso simbisa uye zvikamu zvehacky hazvikanganise nekushanda kwakanaka kwechikamu chisiri chehacky, saka nei tichiregeredza nemaune yambiro idzi.

Mapepa edu eHTML anewo yambiro diki uye isingakoshesi yeHTML nekuda kwekubatanidzwa kwedu kwekugadzirisa kune imwe Firefox bug .

Tsigiro yebato rechitatu

Kunyange isu tisingatsigire zviri pamutemo chero yechitatu bato maplugins kana ma-add-ons, isu tinopa mamwe mazano anobatsira kubatsira kudzivirira zvingangoitika mumapurojekiti ako.

Bhokisi-kukura

Imwe yechitatu software, kusanganisira Google Mepu neGoogle Tsika Yekutsvagisa Injini, inopokana neBootstrap nekuda kwe * { box-sizing: border-box; }, mutemo unoitisa kuti zvidaro paddinghaukanganise iyo yekupedzisira computed upamhi hwechinhu. Dzidza zvakawanda nezve bhokisi modhi uye saizi paCSS Tricks .

Zvichienderana nemamiriro ezvinhu, unogona kudarika sezvinodiwa (Sarudzo 1) kana kuseta bhokisi-saizi yematunhu ese (Sarudzo 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();
}

Accessibility

Bootstrap inotevera yakajairwa webhu zviyero uye-nekuda kushoma kwekuwedzera-inogona kushandiswa kugadzira mawebhusaiti anowanikwa kune avo vanoshandisa. AT .

Skip navigation

Kana kufamba kwako kuine zvakawanda zvinongedzo uye kunouya pamberi peiyo huru yemukati muDOM, wedzera Skip to main contentchinongedzo pamberi pekufamba (kuti uwane tsananguro iri nyore, ona ichi A11Y Project chinyorwa pane skip navigation links ). Kushandisa .sr-onlykirasi kunovanza skip link, uye .sr-only-focusablekirasi ichaona kuti chinongedzo chinoonekwa kana chakanangana (kune vanoona vashandisi keyboard).

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

Nested misoro

Kana uchigadzira misoro ( <h1>- <h6>), musoro wegwaro rako rekutanga unofanirwa kunge uri <h1>. Misoro inotevera inofanira kushandisa zvine musoro <h2>-<h6> zvekuti vanoverenga skrini vanogona kugadzira tafura yezviri mukati yemapeji ako.

Dzidza zvakawanda paHTML CodeSniffer uye Penn State's AccessAbility .

Kusiyana kwemavara

Parizvino, mamwe eakasarudzika masanganiswa eruvara anowanikwa muBootstrap (akadai seakasiyana mabhatani makirasi makirasi, mamwe ekodhi anoratidza mavara anoshandiswa kune ekutanga kodhi mabhuraki , .bg-primary mamiriro ekumashure emubatsiri kirasi, uye yakasarudzika yekubatanidza ruvara kana ichishandiswa pane chena kumashure) iva nereshiyo yakaderera yekusiyanisa (pasi peyeshiyo inokurudzirwa ye4.5:1 ). Izvi zvinogona kukonzera matambudziko kune vashandisi vane chiono chakaderera kana avo vasingaone ruvara. Aya mavara akasarudzika angangoda kugadziridzwa kuti awedzere mutsauko uye kutendeseka.

Zvimwe zvekushandisa

• "HTML Codesniffer" bookmarklet yekuona nyaya dzekusvikika
• Chrome's Accessibility Developer Tools kuwedzera
• Color Contrast Analyzer
• Iyo A11Y Project
• MDN zvinyorwa zvekuwanikwa

Rezinesi FAQs

Bootstrap inoburitswa pasi peMIT rezinesi uye ndeye copyright 2019 Twitter. Yakabikwa kusvika kune zviduku zviduku, inogona kutsanangurwa nemamiriro anotevera.

Zvinoda kuti:

• Chengetedza rezinesi uye chiziviso chekodzero zvakasanganisirwa muBootstrap's CSS uye JavaScript mafaera paunoashandisa mumabasa ako

Inokubvumira kuti:

• Dhawunirodha zvakasununguka uye shandisa Bootstrap, yakazara kana muchidimbu, yemunhu, yakavanzika, yemukati yekambani, kana yekutengeserana zvinangwa
• Shandisa Bootstrap mumapakeji kana kugovera zvaunogadzira
• Shandura iyo source code
• Ipa rezinesi rekugadzirisa uye kugovera Bootstrap kune vechitatu mapato asina kubatanidzwa murezinesi

Zvinokurambidza kuti:

• Bata vanyori nevaridzi verezinesi vane mhosva yekukuvadza sezvo Bootstrap ichipihwa pasina waranti
• Bata vanogadzira kana vane kodzero dzeBootstrap vane mhosva
• Goverazve chero chidimbu cheBootstrap pasina chakakodzera kupihwa
• Shandisa chero mamaki ane Twitter neimwe nzira inogona kutaura kana kureva kuti Twitter inotsigira kugovera kwako
• Shandisa chero mamaki ane Twitter neimwe nzira inogona kutaura kana kureva kuti iwe wakagadzira iyo Twitter software iri mubvunzo

Izvo hazvidi kuti iwe uite:

• Sanganisira kunobva Bootstrap pachayo, kana chero shanduko yaungave wakaita kwairi, mune chero kugoverazve kwaungaunganidza kunosanganisira iyo.
• Tumira shanduko dzaunoita kuBootstrap kudzokera kuBootstrap purojekiti (kunyangwe mhinduro yakadai ichikurudzirwa)

Iyo yakazara Bootstrap rezenisi iri munzvimbo inochengeterwa purojekiti kuti uwane rumwe ruzivo.

Translations

Nhengo dzenharaunda dzakashandura zvinyorwa zveBootstrap mumitauro yakasiyana-siyana. Hapana anotsigirwa zviri pamutemo uye anogona kunge asiri enguva dzose.

• Bootstrap 中文档 (Chinese)
• Bootstrap paDansk (Danish)
• Bootstrap en Français (French)
• Bootstrap auf Deutsch (German)
• Bootstrap muchiItalian (chiItalian)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Brazilian Portuguese)
• Bootstrap по-русски (Russian)
• Bootstrap neEspañol (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukraine)
• Bootstrap bằng tiếng Việt (Vietnamese)

Hatibatsire kuronga kana kugamuchira shanduro, tinongobatanidza nadzo.

Wapedza shanduro itsva kana iri nani? Vhura chikumbiro chekudhonza kuti uwedzere kune yedu runyorwa.