I-download

Ti Bootstrap (agdama a v3.3.7) ket addaan kadagiti sumagmamano a nalaka a wagas tapno napardas a mangrugi, tunggal maysa ket makaawis iti naiduma a lebel ti paglaingan ken kaso ti panagusar. Basaem a naimbag tapno makitam no ania ti maibagay kadagiti partikular a kasapulam.

Bootstrap nga CDN

Dagiti folks iti jsDelivr ket siaasi a mangipaay ti suporta ti CDN para iti CSS ken JavaScript ti Bootstrap. Usaren laeng dagitoy a Bootstrap CDN links.

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

I-install ti Bower

Mabalinmo pay nga i-install ken imanehar ti Less, CSS, JavaScript, ken dagiti letra ti Bootstrap babaen ti panagusar ti Bower :

$ bower install bootstrap

I-install ti npm

Mabalinmo pay nga i-install ti Bootstrap babaen ti npm :

$ npm install bootstrap@3

require('bootstrap')ikarga amin dagiti plugin ti jQuery ti Bootstrap iti banag ti jQuery. Ti bootstrapmismo a modulo ket saan nga ag-export iti aniaman. Mabalinmo a manual nga ikarga dagiti plugin ti jQuery ti Bootstrap a saggaysa babaen ti panangikarga kadagiti /js/*.jspapeles iti baba ti kangatuan nga antas a direktorio ti pakete.

Ti Bootstrap's package.jsonket aglaon ti sumagmamano a kanayonan a metadata iti baba dagiti sumaganad a tulbek:

• less- dalan ti kangrunaan a Basbassit a taudan a papeles ti Bootstrap
• style- dalan ti saan a napabassit a CSS ti Bootstrap a nasakbay a naurnong babaen ti panagusar kadagiti kasisigud a panagitunos (awan ti panagpasayaat) .

I-install ti Composer

Mabalinmo pay nga i-install ken imanehar ti Less, CSS, JavaScript, ken dagiti letra ti Bootstrap babaen ti Composer :

$ composer require twbs/bootstrap

Masapul ti autoprefixer para iti Less/Sass

Ti Bootstrap ket agus-usar ti Autoprefixer tapno mangtaming kadagiti pangrugian ti aglaklako ti CSS . No agtiponka iti Bootstrap manipud iti taudanna a Less/Sass ken saanmo nga agus-usar iti Gruntfile-mi, kasapulam nga isilpo ti Autoprefixer iti proseso ti panagbangonmo a mismo. No agus-usar ka ti nasakbay a naurnos a Bootstrap wenno agus-usar ka ti Gruntfile mi, saan mo nga kasapulan nga madanagan iti daytoy gapu ta ti Autoprefixer ket naikapet metten iti Gruntfile mi.

Ania ti nairaman

Ti Bootstrap ket mai-download iti dua a porma, iti uneg daytoy ket makasarakka kadagiti sumaganad a direktorio ken dagiti papeles, a lohikal a manggrupo kadagiti gagangay a rekurso ken mangipaay kadagiti agpada a naurnong ken napabassit a panagduduma.

Nasaksakbay a Naurnong a Bootstrap

Apaman a nai-download, i-unzip ti na-compress a folder tapno makita ti estruktura ti (ti naurnong) a Bootstrap. Makitamto ti kastoy:

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

Daytoy ti kangrunaan a porma ti Bootstrap: dagiti nasakbay a naurnong a papeles para iti napardas a panagusar ti drop-in iti dandani ania man a proyekto ti web. Mangipaaykami kadagiti naurnong a CSS ken JS ( bootstrap.*), kasta met dagiti naurnong ken napabassit a CSS ken JS ( bootstrap.min.*). Dagiti mapa ti taudan ti CSS ( bootstrap.*.map) ket magun-od para iti panagusar kadagiti sumagmamano a ramit ti developer dagiti browser. Dagiti letra manipud iti Glyphicons ket nairaman, a kas ti opsional a tema ti Bootstrap.

Bootstrap ti taudan a kodigo

Ti panagi-download ti taudan a kodigo ti Bootstrap ket mangiraman kadagiti nasakbay a naurnong a CSS, JavaScript, ken dagiti sanikua ti letra, agraman ti taudan a Less, JavaScript, ken dokumentasion. Ad-adda nga espesipiko, iramanna dagiti sumaganad ken dadduma pay:

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

Ti less/, js/, ken fonts/ket isu ti taudan a kodigo para kadagiti CSS, JS, ken icon a letratayo (agsasaruno). Iraman ti dist/folder ti amin a nailista iti precompiled download section iti ngato. Ti docs/folder ket mangiraman ti taudan a kodigo para iti dokumentasiontayo, ken examples/ti panagusar ti Bootstrap. Iti labes dayta, ania man a sabali a nairaman a papeles ket mangipaay ti suporta para kadagiti pakete, impormasion ti lisensia, ken panagrang-ay.

Panagtipon ti CSS ken JavaScript

Ti Bootstrap ket agus-usar ti Grunt para iti sistema ti panagbangonna, nga addaan kadagiti kombeniente a pamay-an para iti panagtrabaho iti balangkas. Dayta ti panangtipontayo iti kodigotayo, panangpataraytayo kadagiti panagsubok, ken dadduma pay.

Panag-install ti Grunt

Tapno mai-install ti Grunt, masapul nga umuna nga i-download ken i-install ti node.js (a pakairamanan ti npm). Ti npm ket agtakder para kadagiti nodo a naipakete a modulo ken maysa a wagas a mangituray kadagiti panagpanpanunot ti panagrang-ay babaen ti node.js.

1. I- install ti grunt-clisangalubongan babaen ti npm install -g grunt-cli.
2. Agturong iti ramut a /bootstrap/direktorio, kalpasanna tarayen npm installti . Kitaen ti npm ti package.jsonpapeles ken automatiko nga i-install dagiti kasapulan a lokal a panagpanpanunot a nailista sadiay.

No malpas, mabalinmo nga ipatarayen dagiti nadumaduma a bilin ti Grunt a naited manipud iti linia ti bilin.

Dagiti magun-od a bilin ti Grunt

grunt dist(Itipon laeng ti CSS ken JavaScript)

Mangpataud manen ti /dist/direktorio babaen dagiti naurnong ken napabassit a CSS ken JavaScript a papeles. Kas maysa nga agar-aramat ti Bootstrap, daytoy ti gagangay a bilin a kayatmo.

grunt watch(Agbuya)

Buybuyaenna dagiti Basbassit a taudan a papeles ken automatiko a mangtipon manen kadagitoy iti CSS kaanoman nga idulinna ti panagbalbaliw.

grunt test(Agtaray kadagiti pagsubok) .

Ipatarayna ti JSHint ken patarayenna dagiti panagsubok ti QUnit nga awan ti ulona iti PhantomJS .

grunt docs(Ibangon & suboken dagiti docs assets)

Mangbangon ken mangsubok ti CSS, JavaScript, ken dagiti dadduma pay a sanikua a maus-usar no agpataray ti dokumentasion iti lokal babaen ti bundle exec jekyll serve.

grunt(Ibangon ti naan-anay nga amin ken tarayen dagiti panagsubok)

Mangtipon ken mangkissay ti CSS ken JavaScript, mangbangon ti website ti dokumentasion, mangpataray ti HTML5 a mangbalido a maibusor kadagiti dok, mangpabaro kadagiti sanikua ti Customizer, ken dadduma pay. Kasapulan ni Jekyll . Gagangay a kasapulan laeng no ag-hack-ka iti Bootstrap a mismo.

Panagsolbar ti Problema

No rumbeng a makasabetka kadagiti parikut iti panagikabil kadagiti panagpanpanunot wenno panagtaray kadagiti bilin ti Grunt, umuna nga iburasen ti /node_modules/direktorio a pinartuat babaen ti npm. Kalpasanna, ipabuya manen npm installti .

Basic nga plantilia

Mangrugi iti daytoy a batayan a plantilia ti HTML, wenno baliwan dagitoy a pagarigan . Namnamaenmi a maibagaymo dagiti plantilia ken pagariganmi, nga ibagaymo dagitoy tapno maibagay kadagiti kasapulam.

Kopiaen ti HTML iti baba tapno mangrugi nga agtrabaho iti kabassitan a dokumento ti 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 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>

Dagiti pagarigan

Mangbangon iti batayan a plantilia iti ngato babaen dagiti adu a paset ti Bootstrap. Paregtaenmikayo a mangpasayaat ken mangibagay iti Bootstrap tapno maibagay kadagiti kasapulan ti indibidual a proyektom.

Alaen ti taudan a kodigo para iti tunggal maysa a pagarigan iti baba babaen ti panangi-download ti pagidulinan ti Bootstrap . Masarakan dagiti pagarigan iti docs/examples/direktorio.

Panangusar iti balangkas

Plantilia ti pangrugian

Awan sabali no di dagiti kangrunaan: naurnong a CSS ken JavaScript agraman ti container.

Tema nga bootstrap

Ikarga ti opsional a tema ti Bootstrap para iti padas a napasayaat ti panagkita.

Dagiti Grid

Adu a pagarigan dagiti layout ti grid nga addaan amin nga uppat a tier, panagumok, ken dadduma pay.

Jumbotron nga

Mangbangon iti aglawlaw ti jumbotron nga addaan iti navbar ken sumagmamano a kangrunaan a grid columns.

Akikid nga jumbotron

Mangbangon ti ad-adu a kostumbre a panid babaen ti panangikissay ti default a pagkargaan ken jumbotron.

Navbars nga agtigtignay

Navbar nga

Super basic a plantilia a mangiraman ti navbar agraman ti sumagmamano a kanayonan a linaon.

Estatiko nga ngato nga navbar

Super basic a plantilia nga addaan iti estatiko a top navbar agraman ti sumagmamano a kanayonan a linaon.

Natarimaan ti navbar

Super basic a plantilia nga addaan iti naikeddeng a ngato a navbar agraman ti sumagmamano a kanayonan a linaon.

Dagiti kostumbre a paset

Kalluban

Maysa a panid a plantilia para iti panagbangon kadagiti simple ken napintas a panid ti pagtaengan.

Karrusel nga

Ipasayaat ti navbar ken carousel, sa mangnayon iti sumagmamano a baro a paset.

Blog nga

Simple a dua-kolum a layout ti blog nga addaan iti kostumbre a nabigasion, header, ken tipo.

Dashboard nga

Batayan nga estruktura para iti admin dashboard nga addaan iti naikeddeng a sidebar ken navbar.

Panid ti panag-sign-in

Kostumbre a layout ken disenio ti porma para iti simple a karatula iti porma.

Nainkalintegan a nav

Mangaramid ti kostumbre a navbar nga addaan kadagiti nainkalintegan a silpo. Ulo nga agpangato! Saan unay a Safari friendly.

Napigket ti footer

Ikabil ti footer iti baba ti viewport no ababa ti linaonna ngem iti dayta.

Napigket ti footer nga addaan navbar

Ikabil ti footer iti baba ti viewport nga addaan iti naikeddeng a navbar iti ngato.

Dagiti Eksperimento

Saan a makasungbat ti Bootstrap

Nalaka a balbaliwan ti panagsungbat ti Bootstrap kada docs tayo .

Off-canvas nga

Mangaramid ti mai-toggle nga off-canvas a menu ti nabigasion para iti panagusar iti Bootstrap.

Dagiti alikamen

Bootlint nga

Ti Bootlint ket isu ti opisial a ramit ti Bootstrap HTML linter . Daytoy ket automatiko a mangsukimat kadagiti sumagmamano a gagangay a biddut ti HTML kadagiti panid ti web nga agus-usar ti Bootstrap iti medyo "vanilla" a wagas. Dagiti paset/widget ti Vanilla Bootstrap ket agkasapulan kadagiti pasetda ti DOM tapno maitunos kadagiti sumagmamano nga estruktura. Ti Bootlint ket mangsukimat no dagiti pagarigan dagiti paset ti Bootstrap ket addaan kadagiti umiso a naistruktura nga HTML. Ibilangmo ti pananginayon ti Bootlint iti Bootstrap web development toolchain-mo tapno awan kadagiti gagangay a biddut ti mangpabannayat iti panagrang-ay ti proyektom.

Komunidad

Agtalinaedka a nabarbaro iti pannakapataud ti Bootstrap ken makadanon iti komunidad babaen kadagitoy a makatulong a rekurso.

• Basaen ken agsuskribir iti Ti Opisial a Bootstrap Blog .
• Maki-chat kadagiti padam a Bootstrapper nga agus-usar ti IRC iti irc.freenode.netserver, iti ##bootstrap channel .
• Para iti tulong babaen ti panagusar ti Bootstrap, agsaludsod iti StackOverflow babaen ti panagusar ti tagtwitter-bootstrap-3 .
• Dagiti agparparang-ay ket rumbeng nga agusar ti nasken a balikas bootstrapkadagiti pakete a mangbalbaliw wenno mangnayon ti panagusar ti Bootstrap no agiwaras babaen ti npm wenno dagiti kapada a mekanismo ti panagited para iti kangatuan a pannakaduktal.
• Sapulen dagiti makaparegta a pagarigan dagiti tattao a mangbangbangon babaen ti Bootstrap iti Bootstrap Expo .

Mabalinmo pay a suroten ti @getbootstrap iti Twitter para kadagiti kaudian a tsismis ken nakaam-amak a music video.

Panangbaldado iti panagsungbat

Automatiko nga ibagay ti Bootstrap dagiti panidmo para iti nadumaduma a kadakkel ti iskrin. Adtoy no kasano a balbaliwan daytoy a tampok tapno ti panidmo ket agtrabaho a kas daytoy a saan a makasungbat a pagarigan .

Addang tapno mapasardeng ti panagsungbat ti panid

1. Liklikan ti viewport <meta>a nadakamat kadagiti dokumento ti CSS
2. I-override ti widthon the .containerpara iti tunggal maysa a grid tier nga addaan iti maymaysa a kalawa, kas pagarigan width: 970px !important;Siguraduen a daytoy ket umay kalpasan ti default a Bootstrap CSS. Mabalinmo a pagpilian a liklikan ti !importantaddaan kadagiti saludsod ti media wenno sumagmamano a selector-fu.
3. No agus-usar kadagiti navbar, ikkaten amin a navbar a marpuog ken mangpalawa a kababalin.
4. Para kadagiti layout ti grid, agusar .col-xs-*kadagiti klase a mainayon, wenno kasukat dagiti kalalainganna/dadakkel. Dika madanagan, ti extra-small device grid ket ag-scale iti amin a resolusion.

Kasapulanmo pay laeng ti Respond.js para iti IE8 (gapu ta dagiti saludsodmi iti media ket adda pay laeng ken kasapulan a maproseso). Daytoy ket mangbaldado kadagiti aspeto ti "mobile a site" ti Bootstrap.

Plantilia ti bootstrap nga addaan iti panagsungbat a nabalbaliwan

Inyaplikarmi dagitoy nga addang iti maysa a pagarigan. Basaen ti source code-na tapno makita dagiti espesipiko a panagbalbaliw a naipatungpal.

Kitaen ti saan a makasungbat a pagarigan

Suporta ti browser ken alikamen

Ti Bootstrap ket naibangon tapno kasayaatan nga agtrabaho kadagiti kaudian a desktop ken mobile a browser, a ti kayatna a sawen ket dagiti daan a browser ket mabalin a mangiparang kadagiti naiduma nga estilo, nupay naan-anay nga agtigtignay, a panagiparang kadagiti sumagmamano a paset.

Dagiti nasuportaran a browser

Espesipiko, suportaranmi dagiti kaudian a bersion dagiti sumaganad a browser ken plataporma.

Dagiti alternatibo a browser nga agus-usar ti kaudian a bersion ti WebKit, Blink, wenno Gecko, direkta man wenno babaen ti web view API ti plataporma, ket saan a nalawag a nasuportaran. Nupay kasta, ti Bootstrap ket rumbeng (iti kaaduan a kaso) nga umiso ti ipakita ken panagandar kadagitoy a browser pay. Ad-adu nga espesipiko nga impormasion ti suporta ti naited iti baba.

Dagiti mobile nga alikamen

Iti sapasap a panagsao, ti Bootstrap ket mangsuporta kadagiti kaudian a bersion ti tunggal maysa a nangruna a plataporma dagiti default a browser. Imutektekanyo a dagiti proxy a browser (kas ti Opera Mini, Turbo a kasasaad ti Opera Mobile, UC Browser Mini, Amazon Silk) ket saan a nasuportaran.

Dagiti browser iti desktop

Kasta met, dagiti kaudian a bersion ti kaaduan a desktop browser ket nasuportaran.

Iti Windows, suportaranmi ti Internet Explorer 8-11 .

Para iti Firefox, malaksid iti kaudian a normal a natalinaay a pannakairuar, suportaranmi pay ti kaudian a bersion ti Extended Support Release (ESR) ti Firefox.

Iti saan nga opisial, ti Bootstrap ket rumbeng nga umdas ti panagkita ken panagtignayna iti Chromium ken Chrome para iti Linux, Firefox para iti Linux, ken Internet Explorer 7, ken kasta met ti Microsoft Edge, urayno dagitoy ket saan nga opisial a nasuportaran.

Para iti listaan ​​ti sumagmamano kadagiti bug ti browser a masapul a makiranget ti Bootstrap, kitaen ti Padermi kadagiti bug ti browser .

Internet Explorer 8 ken 9

Ti Internet Explorer 8 ken 9 ket nasuportaran pay, nupay kasta, pangngaasi nga ammom a dagiti sumagmamano a tagikua ti CSS3 ken dagiti elemento ti HTML5 ket saan a naan-anay a suportado babaen dagitoy a browser. Mainayon pay, ti Internet Explorer 8 ket agkasapulan ti panagusar ti Respond.js tapno mapalubosan ti suporta ti panagsaludsod ti media.

Bisitaen Mabalin kadi nga usaren... para kadagiti detalye ti suporta ti browser kadagiti tampok ti CSS3 ken HTML5.

Internet Explorer 8 ken Respond.js

Agannad kadagiti sumaganad a pakdaar no agus-usar ti Respond.js kadagiti aglawlaw ti panagrang-ay ken panagpataudmo para iti Internet Explorer 8.

Respond.js ken ti cross-domain a CSS

Ti panagusar ti Respond.js nga addaan iti CSS a naisangayan iti sabali a (sub)domain (kas pagarigan, iti CDN) ket agkasapulan ti sumagmamano a kanayonan a panagisaad. Kitaen ti Respond.js docs para kadagiti detalye.

Sumungbat.js kenfile://

Gapu kadagiti pagannurotan ti seguridad ti browser, ti Respond.js ket saan nga agtrabaho kadagiti panid a nabuya babaen ti file://protokol (kas no manglukat ti lokal a HTML a papeles). Tapno masubok dagiti makasungbat a tampok iti IE8, kitaen dagiti panidmo babaen ti HTTP(S). Kitaen ti Respond.js docs para kadagiti detalye.

Sumungbat.js ken@import

Ti Respond.js ket saan nga agtrabaho iti CSS a naireperensia babaen ti @import. Iti partikular, dagiti sumagmamano a panagisaad ti Drupal ket naamammuan nga agus-usar @import. Kitaen ti Respond.js docs para kadagiti detalye.

Internet Explorer 8 ken panagdakkel ti kahon

Ti IE8 ket saan a naan-anay a mangsuporta box-sizing: border-box;no maikuyog iti min-width, max-width, min-height, wenno max-height. Gapu iti dayta a rason, manipud iti v3.0.1, saanmi nga usaren max-widthiti .containers.

Internet Explorer 8 ken @font-face

Ti IE8 ket addaan kadagiti sumagmamano nga isyu iti @font-faceno maikuyog iti :before. Usaren ti Bootstrap dayta a kombinasion kadagiti Glyphicons-na. No ti maysa a panid ket nai-cache, ken naikarga nga awan ti mouse iti rabaw ti tawa (kayatna a sawen, i-tap ti buton ti panagpabaro wenno ikarga ti maysa a banag iti maysa nga iframe) kalpasanna ti panid ket makagun-od a maiparang sakbay a maikarga ti letra. Ti panangi-hover iti rabaw ti panid (bagi) ket mangipakita iti sumagmamano kadagiti icon ken ti panangi-hover kadagiti nabati nga icon ket mangipakita met kadagita. Kitaen ti isyu #13863 para kadagiti detalye.

IE Dagiti wagas ti Panagtunos

Saan a nasuportaran ti bootstrap kadagiti daan a wagas ti panagtunos ti Internet Explorer. Tapno masigurado nga agus-usar ka ti kaudian a wagas ti panagiparang para iti IE, ibilangmo ti panangiraman ti maitutop <meta>nga etiketa kadagiti panidmo:

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

Pasingkedan ti kasasaad ti dokumento babaen ti pananglukat kadagiti ramit ti panag-debug: i-press F12ken kitaen ti "Modo ti Dokumento".

Daytoy nga etiketa ket nairaman kadagiti amin a dokumentasion ken pagarigan ti Bootstrap tapno masigurado ti kasayaatan a panagiparang a mabalin iti tunggal maysa a nasuportaran a bersion ti Internet Explorer.

Kitaen daytoy a saludsod ti StackOverflow para iti ad-adu pay nga impormasion.

Internet Explorer 10 iti Windows 8 ken Windows Phone 8

Ti Internet Explorer 10 ket saan a mangilasin ti kalawa ti alikamen manipud iti kalawa ti viewport , ken iti kasta ket saan a nasayaat nga iyaplikar dagiti panagsaludsod ti media iti CSS ti Bootstrap. Gagangay nga inayonmo laeng ti napardas a snippet ti CSS tapno matarimaan daytoy:

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

Nupay kasta, daytoy ket saan nga agtrabaho para kadagiti alikamen a mangpataray kadagiti bersion ti Windows Phone 8 a natataengan ngem ti Update 3 (aka GDR3) , a kas daytoy ket mangpataud kadagiti kasta nga alikamen a mangipakita ti kaaduan a panagkita ti desktop imbes a ti akikid a panagkita ti "telepono". Tapno maiturong daytoy, kasapulam nga iraman ti sumaganad a CSS ken JavaScript tapno agtrabaho iti aglawlaw ti 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)
}

Para iti ad-adu pay nga impormasion ken pagannurotan iti panagusar, basaen ti Windows Phone 8 ken Device-Width .

Kas maysa a heads up, iramanmi daytoy kadagiti amin a dokumentasion ken pagarigan ti Bootstrap a kas maysa a demostrasion.

Safari porsiento a panagtimbukel

Ti makina ti panagiparang dagiti bersion ti Safari sakbay ti v7.1 para iti OS X ken Safari para iti iOS v8.0 ket addaan iti sumagmamano a parikut iti bilang dagiti desimal a lugar a naus-usar kadagiti klasemi ti .col-*-1grid. Isu a no addaanka iti 12 nga indibidual a grid column, madlawmo nga ababa dagitoy no idilig kadagiti dadduma a hilera ti kolum. Malaksid iti panangi-upgrade iti Safari/iOS, addaanka iti sumagmamano a pagpilian para kadagiti workaround:

• Inayon .pull-rightiti maudi a grid column-mo tapno makagun-od ti hard-right a panagtunos
• I-tweak dagiti porsientom a manual tapno makagun-od iti perpekto a panagtimbukel para iti Safari (narigrigat ngem ti umuna a pagpilian) .

Dagiti modal, navbar, ken dagiti birtual a teklado

Overflow ken panag-scroll

Ti suporta para overflow: hiddeniti on the <body>element ket medyo limitado iti iOS ken Android. Tapno maaramid dayta, no ag-scroll-ka a lumabas iti ngato wenno baba ti maysa a modal iti asinoman kadagita a browser dagita nga alikamen, <body>mangrugin nga ag-scroll ti linaonna. Kitaen ti bug ti Chrome #175502 (natarimaan iti Chrome v40) ken ti bug ti WebKit #153852 .

iOS text fields ken panag-scroll

Manipud iti iOS 9.3, bayat a ti maysa a modal ket silulukat, no ti damo a panagsagid ti maysa a panagtignay ti lukot ket adda iti uneg ti beddeng ti maysa a tekstual <input>wenno a <textarea>, ti <body>linaon iti baba ti modal ket mai-scrollto imbes a ti modal a mismo. Kitaen ti bug ti WebKit #153856 .

Dagiti birtual a teklado

Kasta met, laglagipen a no agus-usar ka ti naikeddeng a navbar wenno agus-usar kadagiti input iti uneg ti modal, ti iOS ket addaan iti rendering bug a saan a mangpabaro ti posision dagiti naikeddeng nga elemento no ti birtual a teklado ket mai-trigger. Sumagmamano a panagliklik para iti daytoy ket mairaman ti panagbalbaliw kadagiti elementom iti position: absolutewenno panangawag ti timer iti pokus tapno padasen nga ilinteg ti panagposision a manual. Daytoy ket saan a tamingen ti Bootstrap, isu nga adda kenka ti mangikeddeng no ania a solusion ti kasayaatan para iti aplikasionmo.

Dagiti Panag-dropdown ti Navbar

Ti .dropdown-backdropelemento ket saan a maus-usar iti iOS iti nav gapu ti kinarikut ti z-indexing. Gapuna, tapno maiserra dagiti dropdown kadagiti navbar, masapul a direkta nga i-klikmo ti dropdown nga elemento (wenno ania man a sabali nga elemento a mangpaputok iti pasamak ti panag-click iti iOS ).

Panag-zoom ti browser

Ti panag-zoom ti panid ket saan a maliklikan a mangipresenta kadagiti artifact ti panagiparang kadagiti sumagmamano a paset, agpadpada iti Bootstrap ken ti nabati a paset ti web. Depende iti isyu, mabalin a matarimaantayo dayta (agsapul nga umuna ket kalpasanna luktantayo ti isyu no kasapulan). Nupay kasta, agannayastayo a di ikankano dagitoy ta masansan nga awan ti direkta a solusionda malaksid kadagiti hacky a panagliklik.

Napigket :hover/ :focusiti mobile

Urayno ti pudno a panag-hover ket saan a mabalin kadagiti kaaduan a touchscreen, kaaduan kadagiti mobile a browser ket mangtulad ti suporta ti panag-hover ken mangaramid ti :hover"napigket". Iti sabali a pannao, :hoverdagiti estilo ket mangrugida nga agaplikar kalpasan ti panangi-tap ti maysa nga elemento ken agsardeng laeng nga agaplikar kalpasan ti panag-tap ti agar-aramat ti sumagmamano a sabali nga elemento. Daytoy ket mabalin a mangpataud kadagiti estado ti Bootstrap :hovernga agbalin a di matarigagayan a "naipit" kadagiti kasta a browser. Dadduma a mobile browser met ti mangaramid iti :focusumasping a napigket. Awan ti agdama a simple a panangliklik kadagitoy nga isyu malaksid ti panangikkat a naan-anay kadagiti kasta nga estilo.

Panagimprenta

Uray iti dadduma a moderno a browser, mabalin a quirky ti panagimprenta.

Nangnangruna, manipud iti Chrome v32 ken aniaman dagiti setting ti margin, ti Chrome ket agus-usar ti kalawa ti viewport a nakarkaro nga akikid ngem ti pisikal a kadakkel ti papel no mangrisut kadagiti saludsod ti media bayat ti panagimprenta ti maysa a panid ti web. Mabalin nga agresulta daytoy iti di ninamnama a pannakapaaktibo ti extra-small grid ti Bootstrap no agimprenta. Kitaen ti isyu #12078 ken Chrome bug #273306 para iti sumagmamano a detalye. Dagiti naisingasing a pangliklik:

• Arakupen ti ekstra-bassit a grid ken siguraduen a ti panidmo ket kasla maawat iti sirokna.
• Ipasayaat dagiti pateg dagiti @screen-*Basbassit a variable tapno ti papel ti printermo ket maibilang a dakdakkel ngem ti ekstra-bassit.
• Inayon dagiti kostumbre a saludsod ti media tapno baliwan dagiti breakpoint ti kadakkel ti grid para laeng iti media ti panagimaldit.

Kasta met, manipud iti Safari v8.0, ti fixed-width .containers ket mabalin a mangpataud ti Safari nga agusar ti naisangsangayan a bassit a kadakkel ti letra no agimprenta. Kitaen ti #14868 ken WebKit bug #138192 para kadagiti ad-adu pay a detalye. Maysa a potensial a panagliklik para iti daytoy ket ti pananginayon ti sumaganad a CSS:

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

Android nga stock nga browser

Iti ruar ti kahon, ti Android 4.1 (ken uray pay ti dadduma a baro a nairuar agparang) ket maipatulod a kadua ti Browser app kas ti default a web browser a pagpilian (kas maisupadi iti Chrome). Daksanggasat ta adu ti bug ken di panagtutunos ti Browser app iti CSS iti pangkaaduan.

Pilien dagiti menu

Kadagiti <select>elemento, ti Android stock browser ket saan a mangiparang kadagiti kontrol ti sikigan no adda border-radiusken/wenno bordernaipakat. (Kitaen daytoy a saludsod ti StackOverflow para kadagiti detalye.) Usaren ti snippet ti kodigo iti baba tapno ikkaten ti makasair a CSS ken iparang ti <select>kas saan nga estilo nga elemento iti Android stock browser. Ti panaganges ti ahente ti agar-aramat ket mangliklik iti pannakasinga kadagiti Chrome, Safari, ken Mozilla a 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>

Kayatmo kadi ti makakita iti pagarigan? Kitaen daytoy a demo ti JS Bin.

Dagiti Validator

Tapno mangipaay ti kasayaatan a mabalin a padas kadagiti daan ken buggy a browser, ti Bootstrap ket agus-usar kadagiti CSS a browser hack kadagiti sumagmamano a lugar tapno mangpuntiria ti espesial a CSS kadagiti sumagmamano a bersion ti browser tapno agtrabaho iti aglawlaw dagiti bug kadagiti browser a mismo. Dagitoy a hack ket maawatan a pakaigapuan ti panagreklamo dagiti CSS validator a saan nga imbalido dagitoy. Iti agassawa a lugar, agus-usarkami pay kadagiti bleeding-edge a tampok ti CSS a saan pay a naan-anay a naistandard, ngem dagitoy ket naus-usar a puro para iti progresibo a panagpasayaat.

Dagitoy a pakdaar ti panangipaneknek ket saan a napateg iti praktis gapu ta ti saan a hacky a paset ti CSS-tayo ket naan-anay a mangbalido ken dagiti hacky a paset ket saan a mangsinga iti umno a panagandar ti saan a hacky a paset, gapuna no apay nga inggagaratayo a di ikankano dagitoy a partikular a pakdaar.

Dagiti dokumentomi ti HTML ket addaan met kadagiti sumagmamano a saan a napateg ken saan a napateg a pakdaar ti panangipaneknek ti HTML gapu ti pannakairamanmi ti maysa a panagliklik para iti maysa a naikeddeng a bug ti Firefox .

Suporta ti maikatlo a partido

Bayat a saanmi nga opisial a suportaran ti ania man a third party plugins wenno add-ons, mangitukonkami iti sumagmamano a makatulong a balakad tapno makatulong a mangliklik kadagiti mabalin nga isyu kadagiti proyektom.

Panagdakkel ti kahon

Sumagmamano a maikatlo a partido a software, a mairaman ti Google Maps ken Google Custom Search Engine, ket agsuppiat iti Bootstrap gapu ti * { box-sizing: border-box; }, ti maysa a pagannurotan a mangaramid daytoy a kasta paddingket saan a mangapektar ti maudi a nakumpirma a kalawa ti maysa nga elemento. Ammuen ti ad-adu pay maipapan iti modelo ti kahon ken panagdakkel iti CSS Tricks .

Depende iti konteksto, mabalinmo nga i-override kas-kasapulan (Panagpili 1) wenno i-reset ti panagdakkel ti kahon para kadagiti sibubukel a rehion (Panagpili 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();
}

Ti pannakagun-od

Ti Bootstrap ket sumurot kadagiti gagangay a pagalagadan ti web ken—iti bassit nga ekstra a panagregget—mabalin a mausar a mangpartuat kadagiti site a mabalin a makastrek kadagidiay agus-usar ti AT .

Laktawan ti panaglayag

No ti nabigasionmo ket aglaon kadagiti adu a silpo ken umay sakbay ti kangrunaan a linaon iti DOM, manginayon ti Skip to main contentsilpo sakbay ti nabigasion (para iti simple a panangipalawag, kitaen daytoy nga artikulo ti Proyekto ti A11Y kadagiti silpo ti nabigasion a laksiden ). Ti panagusar ti .sr-onlyklase ket biswal a mangilemmeng ti silpo ti skip, ken ti .sr-only-focusableklase ket mangsigurado a ti silpo ket agbalin a makita apaman a naipamaysa (para kadagiti makakita nga agar-aramat ti teklado).

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

Dagiti naisanglad a paulo

No ag-umok kadagiti paulo ( <h1>- <h6>), ti kangrunaan nga ulo ti dokumentom ket rumbeng a maysa a <h1>. Dagiti sumaganad a paulo ket rumbeng a mangaramid ti lohikal a panagusar ti <h2>- <h6>a kas dagiti agbasbasa ti iskrin ket makaaramidda ti maysa a lamisaan ti linaon para kadagiti panidmo.

Ammuen ti ad-adu pay iti HTML CodeSniffer ken ti AccessAbility ti Penn State .

Panagduma ti kolor

Iti agdama, dagiti sumagmamano kadagiti kasisigud a kombinasion ti kolor a magun-od iti Bootstrap (kas dagiti nadumaduma nga estilo a klase ti buton , sumagmamano kadagiti kolor a mangitag-ay ti kodigo a naus-usar para kadagiti batayan a bloke ti kodigo , ti klase ti katulongan ti .bg-primary konteksto a likudan , ken ti kasisigud a kolor ti silpo no maus-usar iti puraw a likudan) addaan iti nababa a contrast ratio (iti baba ti mairekomendar a ratio a 4.5:1 ). Mabalin a mangpataud daytoy iti parikut kadagiti agus-usar a nababa ti panagkitada wenno bulsek iti kolor. Mabalin a kasapulan a mabaliwan dagitoy a default a kolor tapno mapaadu ti panagduma ken pannakabasa dagitoy.

Dagiti kanayonan a rekurso

• "HTML Codesniffer" a bookmarklet para iti panangilasin kadagiti isyu ti pannakagun-od
• Ti ekstension ti Chrome ti Accessibility Developer Tools
• Analyser ti Kontrast ti Kolor
• Ti Proyekto ti A11Y
• Dokumentasion ti pannakagun-od ti MDN

Dagiti FAQ ti Lisensia

Ti Bootstrap ket nairuar babaen ti lisensia ti MIT ken karbengan ti kopia ti 2016 Twitter. No naipaburek agingga kadagiti babbabassit a pedaso, mabalin a mailadawan dayta babaen kadagiti sumaganad a kasasaad.

Kalikagumanna nga:

• Idulin ti pakaammo ti lisensia ken karbengan ti kopia a nairaman kadagiti CSS ken JavaScript a papeles ti Bootstrap no usarem dagitoy kadagiti obram

Ipalubosna kenka a:

• Siwayawaya nga i-download ken usaren ti Bootstrap, iti intero wenno paset, para kadagiti personal, pribado, internal ti kompania, wenno komersial a panggep
• Usaren ti Bootstrap kadagiti pakete wenno distribusion a pinartuatmo
• Baliwan ti taudan a kodigo
• Mangted ti sublisensia a mangbalbaliw ken mangiwaras ti Bootstrap kadagiti maikatlo a partido a saan a nairaman iti lisensia

Iparitna kenka ti:

• Sungsungbatan dagiti autor ken dagiti makinkukua iti lisensia kadagiti pannakadadael ta naited ti Bootstrap nga awan ti warranty
• Ibilang a sungsungbatan dagiti nangparnuay wenno agtagikua iti copyright ti Bootstrap
• Iwaras manen ti ania man a pedaso ti Bootstrap nga awan ti umno nga attribution
• Usaren ti aniaman a marka a kukua ti Twitter iti aniaman a wagas a mabalin a mangibaga wenno mangipasimudaag a ti Twitter ket mangi-endorso iti pannakaiwarasmo
• Usaren ti aniaman a marka a kukua ti Twitter iti aniaman a wagas a mabalin a mangibaga wenno mangipasimudaag a pinartuatmo ti software ti Twitter a pagsasaritaan

Saanna a kalikaguman nga:

• Iraman ti taudan ti Bootstrap a mismo, wenno ti ania man a panagbalbaliw a mabalin nga inaramidmo iti daytoy, iti ania man a panagiwaras manen a mabalinmo nga urnosen a mangiraman iti daytoy
• Isumite dagiti panagbalbaliw nga aramidem iti Bootstrap nga agsubli iti proyekto ti Bootstrap (nupay maparegta ti kasta a feedback) .

Ti naan-anay a lisensia ti Bootstrap ket mabirukan iti pagidulinan ti proyekto para iti ad-adu nga impormasion.

Dagiti Patarus

Dagiti kameng ti komunidad ket nangipatarusda ti dokumentasion ti Bootstrap kadagiti nadumaduma a pagsasao. Awan ti opisial a suportado ken mabalin a saanda a kanayon a napabaro.

• Bootstrap 中文文档 (Intsik) .
• Bootstrap 3 中文手冊 (Intsik (Tradisional)) .
• Bootstrap på Dansk (Danisk) .
• Bootstrap en Français (Pranses) .
• Bootstrap nga auf Deutsch (Aleman) .
• Bootstrap en Italiano (Italiano) .
• Bootstrap nga 한국어 (Koreano) .
• Bootstrap em Português do Brasil (Brasil nga Portuges) .
• Bootstrap nga по-русски (Russian) .
• Bootstrap en Español (Espanyol) .
• Türkçe nga Pag-abot (Turko) .
• Bootstrap nga українською (Ukranio) .
• Bootstrap nga agbirbirok iti Việt (Vietnamese) .

Saankami a tumulong a mangorganisar wenno mangsangaili kadagiti patarus, agsilpokami laeng kadagita.

Nalpasmo kadi ti baro wenno nasaysayaat a patarus? Luktan ti pull request tapno mainayon dayta iti listaanmi.