Khuphela

I-Bootstrap (okwangoku i-v3.3.7) ineendlela ezimbalwa ezilula zokuqalisa ngokukhawuleza, nganye ibhenela kwinqanaba lesakhono esahlukileyo kunye nemeko yokusetyenziswa. Funda ukuze ubone oko kuhambelana neemfuno zakho.

I-Bootstrap CDN

Abantu abangaphaya e- jsDelivr babonelela ngenkxaso ye-CDN ye-Bootstrap's CSS kunye neJavaScript. Sebenzisa nje la makhonkco e- Bootstrap CDN .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Faka ngeBower

Unokufaka kwaye ulawule iBootstrap's Ngaphantsi, iCSS, iJavaScript, kunye neefonti usebenzisa iBower :

$ bower install bootstrap

Faka nge-npm

Unako kwakhona ukufaka iBootstrap usebenzisa npm :

$ npm install bootstrap@3

require('bootstrap')izakulayisha zonke iiplagi zeBootstrap zejQuery kwinto yejQuery. Imodyuli bootstrapngokwayo ayithumeleli nantoni na. Uyakwazi ukulayisha ngesandla iiplagi ze-Bootstrap zejQuery nganye ngokulayisha /js/*.jsiifayile phantsi kolawulo lomgangatho ophezulu wephakheji.

I-Bootstrap's package.jsoniqulethe i-metadata eyongezelelweyo phantsi kwezi zitshixo zilandelayo:

• less- indlela eya kwiBootstrap eyona fayile yomthombo omncinci
• style-indlela eya kwi-Bootstrap's non-minified CSS eye yaqulunqwa kusetyenziswa useto olungagqibekanga (akukho ngokwezifiso)

Faka noMqambi

Ungafaka kwaye ulawule iBootstrap's Ngaphantsi, iCSS, iJavaScript, kunye neefonti usebenzisa uMqambi :

$ composer require twbs/bootstrap

I-autoprefixer efunekayo ku-Less/Sass

I- Bootstrap isebenzisa i -Autoprefixer ukujongana nezimaphambili zomthengisi we-CSS . Ukuba uqulunqa iBootstrap kumthombo wayo oNgaphantsi/Sass kwaye awusebenzisi iGruntfile yethu, kuya kufuneka udibanise iAutoprefixer kwinkqubo yakho yokwakha ngokwakho. Ukuba usebenzisa i-Bootstrap ehlanganiswe kwangaphambili okanye usebenzisa iGruntfile yethu, awudingi kuba naxhala malunga noku kuba i-Autoprefixer sele idityanisiwe kwiGruntfile yethu.

Yintoni ebandakanyiweyo

I-Bootstrap inokukhutshelwa ngeendlela ezimbini, apho uya kufumana abalawuli balandelayo kunye neefayile, ngokufanelekileyo ukuqokelela izixhobo eziqhelekileyo kunye nokubonelela kokubili okudityanisiweyo kunye nokwahluka okwenziwa kancinci.

I-Bootstrap egqitywe kwangaphambili

Nje ukuba ukhutshelwe, vula isiqulathi seefayili esicinezelweyo ukuze ubone ulwakhiwo lwe (oluhlanganisiweyo) lweBootstrap. Uya kubona into efana nale:

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

Le yeyona ndlela isisiseko yeBootstrap: iifayile eziqulunqwe kwangaphambili zosetyenziso olukhawulezayo lokuthoba phantse kuyo nayiphi na iprojekthi yewebhu. Sinikezela nge-CSS kunye ne-JS ( bootstrap.*) ehlanganisiweyo, kunye ne-CSS ehlanganisiweyo kunye ne-JS ( bootstrap.min.*). Iimephu zemvelaphi yeCSS ( bootstrap.*.map) ziyafumaneka ukuze zisetyenziswe nezikhangeli ezithile izixhobo zomphuhlisi. Iifonti ezisuka kwiGlyphicons zibandakanyiwe, njengoko kunjalo nomxholo weBootstrap oyikhethayo.

Ikhowudi yomthombo weBootstrap

Ukhuphelo lwekhowudi yomthombo weBootstrap luquka i-CSS esele iqulunqwe, iJavaScript, kunye nempahla yefonti, kunye nomthombo oNgaphantsi, iJavaScript, kunye namaxwebhu. Ngokukodwa ngakumbi, kubandakanya oku kulandelayo kunye nokunye:

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

I less/, js/, kwaye fonts/ziyikhowudi yemvelaphi yethu CSS, JS, kunye neefonti ze icon (ngokulandelelana). Isiqulathi dist/seefayili sibandakanya yonke into edwelisiweyo kwicandelo lokhuphelo oluqokelelweyo ngasentla. Ifolda docs/ibandakanya ikhowudi yemvelaphi yamaxwebhu ethu, kunye examples/nokusetyenziswa kweBootstrap. Ngaphaya koko, nayiphi na enye ifayile efakiweyo ibonelela ngenkxaso yeepakethe, ulwazi lwelayisenisi, kunye nophuhliso.

Ukuqulunqa iCSS kunye neJavaScript

I- Bootstrap isebenzisa i- Grunt yenkqubo yayo yokwakha, kunye neendlela ezifanelekileyo zokusebenza kunye nesakhelo. Yindlela esiqokelela ngayo ikhowudi yethu, siqhuba iimvavanyo, nokunye.

Ifakela iGrunt

Ukufakela i-Grunt, kufuneka uqale ukhuphele kwaye ufake i-node.js (ebandakanya i-npm). I-npm imele iimodyuli ezipakishiweyo zenode kwaye yindlela yokulawula ukuxhomekeka kophuhliso ngokusebenzisa i-node.js.

1. Faka grunt-clikwihlabathi jikelele nge npm install -g grunt-cli.
2. Lawula kulawulo lweengcambu /bootstrap/, emva koko ubaleke npm install. npm iya kujonga package.jsonifayile kwaye ifake ngokuzenzekelayo ukuxhomekeka okuyimfuneko kwendawo edweliswe apho.

Xa ugqityiwe, uya kukwazi ukuqhuba imiyalelo eyahlukeneyo yeGrunt enikwe kumgca womyalelo.

Imiyalelo yeGrunt ekhoyo

grunt dist(Hlanganisa iCSS kunye neJavaScript)

Yenza kwakhona /dist/uvimba weefayili kunye neefayile zeCSS ezihlanganisiweyo kunye neJavaScript. Njengomsebenzisi we-Bootstrap, lo ngokuqhelekileyo ngumyalelo owufunayo.

grunt watch(Bukela)

Ukubukela iifayile zomthombo oMncinci kwaye uziqokelele ngokuzenzekelayo kwi-CSS nanini na ugcina utshintsho.

grunt test(Yenza iimvavanyo)

Iqhuba i-JSHint kwaye iqhuba iimvavanyo ze-QUnit ngaphandle kwentloko kwi - PhantomJS .

grunt docs(Yakha kwaye uvavanye ii-asethi zamaxwebhu)

Yakha kwaye ivavanye i-CSS, iJavaScript, kunye nezinye ii-asethi ezisetyenziswa xa kuqhutywa uxwebhu ekuhlaleni nge bundle exec jekyll serve.

grunt(Yakha yonke into kwaye uqhube iimvavanyo)

Iqulunqa kwaye inciphise i-CSS kunye neJavaScript, yakha iwebhusayithi yamaxwebhu, iqhuba i-HTML5 yokuqinisekisa ngokuchasene nee-docs, ihlaziya kwakhona i-asethi ye-Customizer, kunye nokunye. Ifuna i- Jekyll . Ngokwesiqhelo kufuneka kuphela ukuba ugqekeza kwiBootstrap ngokwayo.

Ukulungisa ingxaki

Ukuba udibana neengxaki ngokufaka ukuxhomekeka okanye ukusebenzisa imiyalelo ye-Grunt, qala ucime /node_modules/uvimba weefayili owenziwe ngu-npm. Emva koko, phinda wenze npm install.

template Basic

Qala ngale template ye-HTML esisiseko, okanye ulungise le mizekelo . Siyathemba ukuba uya kuziqhelanisa neetemplates zethu kunye nemizekelo, uzilungise ukuze zihambelane neemfuno zakho.

Khuphela iHTML engezantsi ukuze uqalise ukusebenza ngoxwebhu oluncinci lweBootstrap.

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

Imizekelo

Yakha kwithempleyithi esisiseko engasentla ngezinto ezininzi zeBootstrap. Siyakukhuthaza ukuba wenze ngokwezifiso kwaye ulungelelanise i-Bootstrap ukuze ihambelane neemfuno zeprojekthi yakho.

Fumana ikhowudi yemvelaphi kuwo wonke umzekelo ongezantsi ngokukhuphela indawo yokugcina iBootstrap . Imizekelo inokufumaneka kuluhlu docs/examples/.

Ukusebenzisa isakhelo

Itemplate yokuqalisa

Akukho nto ngaphandle kwezinto ezisisiseko: i-CSS ehlanganisiweyo kunye neJavaScript kunye nesitya.

Umxholo weBootstrap

Layisha umxholo okhethwayo weBootstrap ukuze ufumane amava abonakalayo aphuculweyo.

Iigridi

Imizekelo emininzi yoyilo lwegridi enamanqanaba amane, ukuzala, kunye nokunye.

Jumbotron

Yakha ngeenxa zonke kwi-jumbotron nge-navbar kunye nezinye iikholamu zegridi ezisisiseko.

Ijumbotron emxinwa

Yakha iphepha elilungiselelwe ngakumbi ngokunciphisa isikhongozeli esingagqibekanga kunye nejumbotron.

Iibar zeNavbar ziyasebenza

Navbar

Ithemplate esisiseko esisisiseko esibandakanya i-navbar kunye nomxholo owongezelelweyo.

I-navbar ephezulu engatshintshiyo

Ithemplate esisiseko esisiseko ene-navbar ephezulu engatshintshiyo kunye nomxholo owongezelelweyo.

I-navbar ezinzileyo

Ithemplate esisiseko esisiseko ene-navbar ephezulu esisigxina kunye nomxholo owongezelelweyo.

Amacandelo Custom

Ikhava

Ithemplethi yephepha elinye lokwakha amaphepha asekhaya alula kwaye amahle.

I-Carousel

Yenza ngokwezifiso i-navbar kunye ne-carousel, emva koko wongeze izinto ezintsha.

Ibhlog

Uyilo lwebhlog olulula lwekholamu ezimbini ngokujonga ngokwesiko, iheader, kunye nohlobo.

Dashboard

Ulwakhiwo olusisiseko lwedeshibhodi yolawulo enebar esecaleni esisigxina kunye nenavbar.

Iphepha lokungena

Uyilo lwefomu yesiko kunye noyilo lophawu olulula kwifomu.

Ukuthetheleleka nav

Yenza i-navbar yesiko kunye namakhonkco afanelekileyo. Iintloko phezulu! Hayi kakhulu Safari friendly.

Okubhalwe ngasezantsi ezantsi

Ncamathisela okubhalwe phantsi ezantsi kwendawo yokujonga xa umxholo umfutshane kunawo.

Okubhalwe ngasezantsi ezantsi ngenavbar

Qhoboshela okubhalwe phantsi ezantsi kwendawo yokujonga nge navbar esisigxina phezulu.

Iimvavanyo

I-Bootstrap engaphenduliyo

Khubaza ngokulula ukuphendula kweBootstrap ngokweengxelo zethu .

I-off-canvas

Yakha imenyu yokukhangela ye-off-canvas eshukumisekayo ukuze isetyenziswe ngeBootstrap.

Izixhobo

Bootlint

I- Bootlint sisixhobo esisemthethweni se-Bootstrap HTML linter . Ijonga ngokuzenzekelayo iimpazamo ezininzi eziqhelekileyo ze-HTML kumaphepha ewebhu asebenzisa i-Bootstrap ngendlela efanelekileyo "ye-vanilla". Amacandelo/iwijethi zeVanilla Bootstrap zifuna ukuba iindawo zazo zeDOM zihambelane nezakhiwo ezithile. I-Bootlint ijonga ukuba imizekelo yamacandelo e-Bootstrap ine-HTML eyakhiwe ngokuchanekileyo. Cinga ukongeza iBootlint kwisixhobo sakho sophuhliso lwewebhu yeBootstrap ukuze kungabikho nanye yeempazamo eziqhelekileyo ezicothisa uphuhliso lweprojekthi yakho.

Uluntu

Hlala usexesheni kuphuhliso lweBootstrap kwaye ufikelele kuluntu ngezi zixhobo ziluncedo.

• Funda kwaye ubhalise kwiBlog ye-Bootstrap esemthethweni .
• Ncokola noogxa beBootstrappers usebenzisa i-IRC irc.freenode.netkumncedisi, kwi ##bootstrap channel .
• Ngoncedo usebenzisa i-Bootstrap, cela kwi- StackOverflow usebenzisa ithegitwitter-bootstrap-3 .
• Abaphuhlisi kufuneka basebenzise igama elingundoqo bootstrapkwiipakethe ezitshintsha okanye zongeza kumsebenzi we-Bootstrap xa usasazwa nge- npm okanye iindlela zonikezelo ezifanayo zokufumana okuphezulu.
• Fumana imizekelo ekhuthazayo yabantu abakha ngeBootstrap kwiBootstrap Expo .

Unokulandela @getbootstrap kwi-Twitter ngentlebendwane yamva nje kunye neevidiyo zomculo ezothusayo.

Ukuvala ukuphendula

I-Bootstrap ilungelelanisa ngokuzenzekelayo amaphepha akho kwiisayizi ezahlukeneyo zesikrini. Nantsi indlela yokuvala eli nqaku ukuze iphepha lakho lisebenze njengalo mzekelo ungaphenduliyo .

Amanyathelo okuvala ukuphendula kwekhasi

1. Shiya indawo yokujonga <meta>ekhankanywe kumaxwebhu eCSS
2. Khipha ngaphezulu kwenqanaba widthlegridi .containerngalinye ngobubanzi obubodwa, umzekelo width: 970px !important;Qinisekisa ukuba oku kuza emva kweCSS yeBootstrap engagqibekanga. Unokukhetha ukunqanda !importantngemibuzo yemidiya okanye umkhethi-fu.
3. Ukuba usebenzisa ii-navbar, susa yonke i-navbar edilikayo kunye nokwandisa ukuziphatha.
4. Kuyilo lwegridi, sebenzisa .col-xs-*iiklasi ukongeza, okanye endaweni, eziphakathi/ezinkulu. Sukuba nexhala, isikali segridi yesixhobo esincinci kuzo zonke izisombululo.

Uzakufuna i-Respond.js ye-IE8 (ekubeni imibuzo yethu yemidiya isekho kwaye ifuna ukuqwalaselwa). Oku kuvala "isiza esiphathwayo" imiba yeBootstrap.

Itemplate ye-Bootstrap enempendulo ivaliwe

Sisebenzise la manyathelo kumzekelo. Funda ikhowudi yemvelaphi yayo ukuze ubone utshintsho oluthile oluphunyeziweyo.

Jonga umzekelo ongaphenduliyo

Ibhrawuza kunye nenkxaso yesixhobo

I-Bootstrap yakhelwe ukusebenza ngcono kwidesktop yamva nje kunye neziphequluli eziphathwayo, okuthetha ukuba abakhangeli bakudala banokubonisa indlela eyahlukileyo, nangona isebenza ngokupheleleyo, unikezelo lwamacandelo athile.

Iibhrawuza ezixhaswayo

Ngokukodwa, sixhasa iinguqulelo zamva nje zezibhrawuza kunye namaqonga alandelayo.

Iibrowser ezizezinye ezisebenzisa inguqulelo yamva nje yeWebKit, iBlink, okanye iGecko, nokuba ngokuthe ngqo okanye ngeplatform ye-API yokujonga iwebhu, ayixhaswanga ngokucacileyo. Nangona kunjalo, iBootstrap kufuneka (kwiimeko ezininzi) ibonise kwaye isebenze ngokuchanekileyo kwezi bhrawuza ngokunjalo. Ulwazi oluthe ngqo lwenkxaso lunikiwe ngezantsi.

Izixhobo eziphathwayo

Ngokubanzi, iBootstrap ixhasa iinguqulelo zamva nje zesikhangeli esikhulu seqonga ngalinye. Qaphela ukuba iibrowser zeproxy (ezifana ne-Opera Mini, imowudi ye-Opera Mobile ye-Turbo, i-UC Browser Mini, i-Amazon Silk) ayixhaswanga.

Iibhrawuza zeDesktop

Ngokufanayo, iinguqulelo zamva nje zebrowser ezininzi zedesktop ziyaxhaswa.

Kwi-Windows, sixhasa i-Internet Explorer 8-11 .

KwiFirefox, ukongeza kukhupho oluzinzileyo lwamva nje oluqhelekileyo, sikwaxhasa inguqulelo yamva nje yokukhutshwa kweNkxaso eYandisiweyo (ESR) yeFirefox.

Ngokungekho mthethweni, iBootstrap kufuneka ijonge kwaye iziphathe kakuhle ngokwaneleyo kwiChromium kunye neChrome yeLinux, iFirefox yeLinux, kunye ne-Internet Explorer 7, kunye neMicrosoft Edge, nangona ingaxhaswanga ngokusemthethweni.

Kuluhlu lwezinye iibhugi zebhrawuza ekufuneka iBootstrap ijongane nazo, bona iWall yethu yebugs zebrawuza .

I-Internet Explorer 8 kunye ne-9

I-Internet Explorer 8 kunye ne-9 nazo ziyaxhaswa, nangona kunjalo, nceda uqaphele ukuba ezinye iimpawu ze-CSS3 kunye neempawu ze-HTML5 azixhaswanga ngokupheleleyo ngaba bakhangeli. Ukongeza, i- Internet Explorer 8 ifuna ukusetyenziswa kwe- Respond.js ukunika inkxaso yemibuzo yemidiya.

Ndwendwela Ngaba ndingasebenzisa... ngeenkcukacha malunga nenkxaso yesikhangeli seCSS3 kunye neHTML5.

Internet Explorer 8 kunye Respond.js

Lumkela ezi zilumkiso zilandelayo xa usebenzisa i-Respond.js kuphuhliso lwakho kunye nemekobume yemveliso ye-Internet Explorer 8.

Respond.js kunye ne-cross-domain ye-CSS

Ukusebenzisa i-Respond.js nge-CSS isingathwe kwindawo eyahlukileyo (engaphantsi) (umzekelo, kwi-CDN) ifuna ukuseta olongezelelweyo. Jonga i-Respond.js amaxwebhu ngeenkcukacha.

Phendula.js kunyefile://

Ngenxa yemithetho yokhuseleko lomkhangeli zincwadi, iRespond.js ayisebenzi kunye namaphepha ajongwe ngendlela file://elandelwayo (njengaxa uvula ifayile yeHTML yendawo). Ukuvavanya iimpawu eziphendulayo kwi-IE8, jonga amaphepha akho ngaphezulu kwe-HTTP(S). Jonga i-Respond.js amaxwebhu ngeenkcukacha.

Phendula.js kunye@import

I-Respond.js ayisebenzi nge-CSS ekubhekiselwa kuyo nge @import. Ngokukodwa, ulungelelwaniso lweDrupal lwaziwa ngokusetyenziswa @import. Jonga i-Respond.js amaxwebhu ngeenkcukacha.

Internet Explorer 8 kunye nobukhulu bebhokisi

IE8 ayixhasi ngokupheleleyo box-sizing: border-box;xa idityaniswe ne min-width, max-width, min-height, okanye max-height. Ngeso sizathu, ukusukela kwi-v3.0.1, asisasebenzisi max-widthkwi- .containers.

Internet Explorer 8 kunye @font-face

IE8 inemiba ethile @font-facexa idibene ne :before. I-Bootstrap isebenzisa loo ndibaniselwano kunye neeGlyphicons zayo. Ukuba iphepha livalelwe, kwaye lilayishwe ngaphandle kwemouse phezu kwefestile (okt betha iqhosha lokuhlaziya okanye layisha into ethile kwi-iframe) ngoko iphepha linikezelwa phambi kokuba ifonti ilayishwe. Ukushukuma phezu kwephepha (umzimba) kuya kubonisa ezinye zee-icon kunye nokuhamba phezu kwee-icon eziseleyo kuya kubonisa nazo. Jonga umba #13863 ngeenkcukacha.

Iindlela zokuhambelana ne-IE

I-Bootstrap ayixhaswanga kwiimowudi ezindala zokuhambelana ne-Internet Explorer. Ukuqinisekisa ukuba usebenzisa imowudi yonikezelo yamva nje ye-IE, cinga ukuquka <meta>ithegi efanelekileyo kumaphepha akho:

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

Qinisekisa imodi yoxwebhu ngokuvula izixhobo zokulungisa: cinezela F12kwaye ukhangele "Imo yoXwebhu".

Le thegi ibandakanyiwe kuwo onke amaxwebhu eBootstrap kunye nemizekelo yokuqinisekisa unikezelo olungcono olunokwenzeka kuguqulelo ngalunye oluxhaswayo lwe-Internet Explorer.

Jonga lo mbuzo we-StackOverflow ngolwazi olungakumbi.

I-Internet Explorer 10 kwi-Windows 8 kunye ne-Windows Phone 8

I-Internet Explorer 10 ayahluli ububanzi besixhobo kububanzi bendawo yokujonga , kwaye ayisebenzisi ngokufanelekileyo imibuzo yemidiya kwi-Bootstrap's CSS. Ngokwesiqhelo ungongeza i-snippet ekhawulezayo ye-CSS ukulungisa oku:

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

Nangona kunjalo, oku akusebenzi kwizixhobo ezisebenzisa iWindows Phone 8 iinguqulelo ezindala kunoHlaziyo lwe-3 (aka GDR3) , njengoko ibangela ukuba izixhobo ezinjalo zibonise ubukhulu becala imboniselo yedesktop endaweni yokujonga "ifowuni" emxinwa. Ukulungisa oku, kuya kufuneka uquke le CSS ilandelayo kunye neJavaScript ukuze usebenze malunga nebug .

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

Ngolwazi oluthe kratya kunye nezikhokelo zokusetyenziswa, funda iWindows Phone 8 kunye neDevice-Width .

Njengeentloko phezulu, sibandakanya oku kuwo onke amaxwebhu eBootstrap kunye nemizekelo njengomboniso.

ipesenti Safari rounding

I-injini yonikezelo lweenguqulelo zeSafari phambi kwe-v7.1 ye-OS X kunye neSafari ye-iOS v8.0 ibe nengxaki ngenani leendawo zedesimali ezisetyenziswa .col-*-1kwiiklasi zethu zegridi. Ngoko ukuba uneekholamu ezili-12 zegridi nganye, uya kuqaphela ukuba zifike zamfutshane xa zithelekiswa neminye imiqolo yeekholamu. Ngaphandle kokuphucula iSafari/iOS, unokhetho oluthile lokusebenzela:

• Yongeza .pull-rightkwikholamu yakho yokugqibela yegridi ukuze ufumane ulungelelwaniso lwasekunene
• Tweba iipesenti zakho ngesandla ukuze ufumane ujikelezo olugqibeleleyo lweSafari (kunzima kakhulu kunokhetho lokuqala)

Iimodyuli, iinavbar, kunye nezitshixo zenyani

Ukuphuphuma kunye nokuskrola

Inkxaso yento ilinganiselwe kakhulu kwi-iOS kunye ne-Android overflow: hidden. <body>Ukuza kuthi ga ngoku, xa uskrola udlule ngaphezulu okanye ezantsi kwemodali kuso nasiphi na isikhangeli sezixhobo, <body>umxholo uya kuqalisa ukuskrola. Jonga i-Chrome bug #175502 (ilungiswe kwi-Chrome v40) kunye ne- WebKit bug #153852 .

Imihlaba yokubhaliweyo ye-iOS kunye nokuskrola

Ukususela kwi-iOS 9.3, ngelixa i-modal ivuliwe, ukuba i-touch yokuqala ye-scrolling gesture ingaphakathi komda wesicatshulwa <input>okanye i- <textarea>, <body>umxholo ongaphantsi kwe-modal uya kuskrolwa endaweni ye-modal ngokwayo. Jonga i-WebKit bug #153856 .

Ikhibhodi ebonakalayo

Kwakhona, qaphela ukuba usebenzisa i-navbar esisigxina okanye usebenzisa amagalelo ngaphakathi kwe-modal, i-iOS ine-bug yonikezelo engahlaziyiyo indawo yezinto ezisisigxina xa ikhibhodi ebonakalayo iqaliswa. Iindlela ezimbalwa zokusebenzela ezi zibandakanya ukuguqula izinto zakho zibe position: absoluteokanye ukubhenela isibali-xesha ekugxininiseni ukuzama ukulungisa indlela omi ngayo ngesandla. Oku akuphathwa yiBootstrap, ke kukuwe ukuba uthathe isigqibo sokuba sesiphi isisombululo esifanelekileyo kwisicelo sakho.

Navbar eyehlayo

Into .dropdown-backdropayisetyenziswanga kwi-iOS kwi-nav ngenxa yobunzima be-z-indexing. Ke, ukuvala ukwehla kwii-navbar, kufuneka ucofe ngokuthe ngqo into eyehlayo (okanye nayiphi na enye into eya kutshisa isiganeko sokucofa kwi-iOS ).

Ukwandisa ibrowser

Usondezo lwephepha lubonisa ngokungenakuthintelwa unikezelo lwezinto zakudala kwezinye iindawo, zombini kwiBootstrap nakwiwebhu iyonke. Ngokuxhomekeke kumcimbi, singakwazi ukuwulungisa (khangela kuqala kwaye uvule umba ukuba kukho imfuneko). Nangona kunjalo, sikholisa ukungazihoyi ezi njengoko zihlala zingenaso sisombululo sithe ngqo ngaphandle kwee-hacky workarounds.

Incangathi :hover/ :focuskwiselfowuni

Nangona i-hovering yokwenyani ingenzeki kwizikrini ezininzi zokuchukumisa, uninzi lwezikhangeli eziphathwayo zixelisa inkxaso ye-hovering kwaye zenze :hover"incangathi". Ngamanye amagama, :hoverizitayile ziqala ukusebenza emva kokucofa into kwaye uyeke ukusebenzisa emva kokuba umsebenzisi echwethe enye into. Oku kunokubangela ukuba amazwe e-Bootstrap :hover"abambeke" ngendlela engathandekiyo kwizikhangeli ezinjalo. Ezinye iibrowser eziphathwayo nazo zenza :focusincangathi efanayo. Okwangoku akukho ndlela ilula yokwenza le miba ngaphandle kokususa izimbo ezinjalo ngokupheleleyo.

Ukushicilela

Nakwezinye iibrowsers zanamhlanje, ukuprinta kunokuba nzima.

Ngokukodwa, njenge-Chrome v32 kwaye kungakhathaliseki ukuba kuseto lwemida, iChrome isebenzisa ububanzi bendawo yokujonga incinci kakhulu kunobukhulu bephepha lomzimba xa isombulula imibuzo yemidiya ngelixa ushicilela iphepha lewebhu. Oku kunokukhokelela ekubeni igridi yeBootstrap encinci isebenze ngokungalindelekanga xa kushicilelwa. Bona umba #12078 kunye Chrome bug #273306 ezinye iinkcukacha. Iindlela zokulungisa ezicetyiswayo:

• Yamkela igridi encinci kwaye uqinisekise ukuba iphepha lakho libukeka lamkelekile phantsi kwalo.
• Yenza amaxabiso @screen-*okuguquguquka okuNcinci ukuze iphepha lakho lomshicileli lithathwe likhulu kunelo elincinane kakhulu.
• Yongeza imibuzo yemidiya yesiko ukuze utshintshe ubungakanani begridi yezahlulo zemidiya yokushicilela kuphela.

Kwakhona, njengeSafari v8.0, ububanzi obumiselweyo .containers kunokubangela ukuba iSafari isebenzise ubungakanani befonti encinci ngokungaqhelekanga xa kushicilelwa. Bona #14868 kunye ne- WebKit bug #138192 ngeenkcukacha ezithe vetshe. Enye indlela enokuthi isebenze koku kukongeza le CSS ilandelayo:

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

Isikhangeli sesitokhwe se-Android

Ngaphandle kwebhokisi, i-Android 4.1 (kunye nokunye okukhutshiweyo okutsha ngokucacileyo) ngenqanawa kunye ne-Browser app njengesikhangeli sewebhu esikhethiweyo (ngokuchaseneyo neChrome). Ngelishwa, usetyenziso lweSikhangeli luneempazamo ezininzi kunye nokungahambelani neCSS ngokubanzi.

Khetha iimenyu

Kwizinto <select>, isikhangeli sesitokhwe se-Android asiyi kubonisa ulawulo olusecaleni ukuba kukho border-radiuskunye/okanye borderkusetyenziswe. (Jonga lo mbuzo we-StackOverflow ngeenkcukacha.) Sebenzisa i-snippet yekhowudi engezantsi ukususa i-CSS ekhubekisayo kwaye <select>unikeze njengento engabhalwanga kwisikhangeli sesitokhwe se-Android. Umsebenzisi othungayo unqanda ukuphazamisana neChrome, iSafari, kunye nezikhangeli zeMozilla.

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

Ngaba ufuna ukubona umzekelo? Jonga le demo yeJS Bin.

Iziqinisekiso

Ukuze unikeze amava angcono kakhulu kwiziphequluli ezindala kunye ne-buggy, i-Bootstrap isebenzisa i - CSS i-hacks ye-browser kwiindawo ezininzi ukujolisa i-CSS ekhethekileyo kwiinguqulelo ezithile zebrawuza ukuze isebenze malunga neebhugi kwizikhangeli ngokwazo. Ezi hacks ngokuqondakalayo zibangela ukuba abaqinisekisi beCSS bakhalaze ukuba abakho mthethweni. Kwiindawo ezimbalwa, sikwasebenzisa iimpawu ze-CSS ezophayo ezingekamiswa ngokupheleleyo, kodwa ezi zisetyenziselwa uphuculo oluqhubekayo.

Ezi zilumkiso zokuqinisekisa azinamsebenzi xa kusenziwa oko ekubeni icandelo elingenabuqhophololo le-CSS yethu liqinisekisa ngokupheleleyo kwaye izahlulo ezikhohlisayo aziphazamisi ukusebenza kakuhle kwenxalenye engeyiyo i-hacky, kungoko sityeshela ngabom ezi zilumkiso.

Amaxwebhu ethu e-HTML nawo anezilumkiso ezingenamsebenzi nezingabalulekanga zokuqinisekiswa kwe-HTML ngenxa yokufakwa kwethu kwenkqubo ethile ye -Firefox bug .

Inkxaso yomntu wesithathu

Ngelixa singaxhasi ngokusemthethweni naziphi na iiplagi zomntu wesithathu okanye izongezo, sinikeza iingcebiso eziluncedo ukukunceda ukuthintela imiba enokubakho kwiiprojekthi zakho.

Ubungakanani bebhokisi

Enye isoftware yomntu wesithathu, kuquka iGoogle Maps kunye neGoogle Custom Search Engine, ingquzulwano neBootstrap ngenxa * { box-sizing: border-box; }, umthetho owenza ukuba kube njalo paddingawuchaphazeli ububanzi bokugqibela obubaliweyo bento. Funda ngakumbi malunga nemodeli yebhokisi kunye nokulinganisa kwiCSS Tricks .

Ngokuxhomekeke kumxholo, ungabhala ngaphezulu njengoko kufuneka (Ukhetho 1) okanye usete ngokutsha ubungakanani bebhokisi kwingingqi yonke (Ukhetho 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();
}

Ukufikeleleka

I-Bootstrap ilandela imigangatho yewebhu eqhelekileyo kwaye-ngomzamo omncinci owongezelelweyo-inokusetyenziswa ukwenza iisayithi ezifikelelekayo kwabo basebenzisa i -AT .

Tsiba ukukhangela

Ukuba ukuhamba kwakho kuqulethe izixhumanisi ezininzi kwaye kuza phambi komxholo oyintloko kwi-DOM, yongeza Skip to main contentikhonkco phambi kokukhangela (ukufumana inkcazo elula, jonga eli nqaku leProjekthi ye-A11Y kwi-skip navigation links ). Ukusebenzisa .sr-onlyiklasi kuya kufihla ikhonkco lokutsiba ngokubonakalayo, kwaye .sr-only-focusableiklasi iya kuqinisekisa ukuba ikhonkco liyabonakala xa sele ligxilile (kubasebenzisi bekhibhodi ababonayo).

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

Izihloko ezifakwe kwindlwane

Xa ulungiselela izihloko ( <h1>- <h6>), isihloko sakho sokuqala soxwebhu kufuneka sibe yi <h1>. Izihloko ezilandelayo kufuneka zenze usetyenziso olunengqiqo <h2>- <h6>olokuba abafundi besikrini banokwakha itheyibhile yemixholo yamaphepha akho.

Funda ngakumbi kwi- HTML CodeSniffer kunye ne -Penn State's AccessAbility .

Umahluko wombala

Okwangoku, eminye imidibaniso yombala engagqibekanga ekhoyo kwiBootstrap (ezifana neeklasi ezahlukeneyo ezineqhosha elinesitayile, enye yekhowudi ephawula imibala esetyenziswa kwiibhloko zekhowudi ezisisiseko , iklasi yomncedi .bg-primary wemeko yangasemva , kunye nombala wekhonkco ongagqibekanga xa usetyenziswa kwimvelaphi emhlophe) ube nomlinganiselo ophantsi wokuchasana (ngaphantsi komlinganiselo ocetyiswayo we-4.5:1 ). Oku kunokubangela iingxaki kubasebenzisi abanombono ophantsi okanye abangaboniyo ngemibala. Le mibala engagqibekanga ingafuna ukulungiswa ukwandisa umahluko kunye nokufundeka kwayo.

Izibonelelo ezongezelelweyo

• "HTML Codesniffer" bookmarklet yokuchonga imiba yokufikeleleka
• Ukwandiswa kweZixhobo zoPhuhlisi zokuFikelela kwiChrome
• IsiHlalutyi sokuThetha koMbala
• Iprojekthi ye-A11Y
• Amaxwebhu ofikelelo lwe-MDN

Ii-FAQ zelayisensi

I-Bootstrap ikhutshwe phantsi kwelayisenisi ye-MIT kwaye i-copyright ye-2016 Twitter. Ukubiliswa kwiinqununu ezincinci, kunokuchazwa kunye neemeko ezilandelayo.

Ifuna ukuba:

• Gcina ilayisenisi kunye nesaziso selungelo lokushicilela sibandakanyiwe kwi-Bootstrap's CSS kunye neefayile zeJavaScript xa uzisebenzisa kwimisebenzi yakho

Ikuvumela ukuba:

• Khuphela simahla kwaye usebenzise iBootstrap, iyonke okanye inxalenye, yobuqu, yabucala, yangaphakathi yenkampani, okanye iinjongo zorhwebo
• Sebenzisa i-Bootstrap kwiipakethe okanye unikezelo olwenzayo
• Guqula ikhowudi yemvelaphi
• Nika ilayisenisi yokuguqula nokusasaza iBootstrap kubantu besithathu abangaqukwanga kwilayisensi

Iyakwalela ukuba:

• Bamba ababhali kunye nabanini beelayisenisi uxanduva lomonakalo njengoko iBootstrap ibonelelwa ngaphandle kwewaranti
• Bamba uxanduva lwabadali okanye abanini belungelo lokushicilela le-Bootstrap
• Ukusasaza kwakhona naliphi na iqhekeza leBootstrap ngaphandle konikezelo olufanelekileyo
• Sebenzisa nawaphi na amanqaku e-Twitter nangayiphi na indlela enokuthi ichaze okanye ithethe ukuba i-Twitter iyakuvuma ukuhanjiswa kwakho
• Sebenzisa nawaphi na amanqaku e-Twitter nangayiphi na indlela enokuthi ichaze okanye ibonise ukuba udale isoftware ye-Twitter ekuthethwa ngayo

Ayifuni ukuba:

• Bandakanya umthombo weBootstrap ngokwayo, okanye naluphi na utshintsho olwenzileyo kuyo, kulo naluphi na unikezelo onokuthi uludibanise olubandakanya
• Ngenisa utshintsho olwenzayo kwiBootstrap emva kwiprojekthi yeBootstrap (nangona loo ngxelo ikhuthazwa)

Ilayisensi epheleleyo yeBootstrap ibekwe kwindawo yokugcina iprojekthi ngolwazi oluthe kratya.

Iinguqulelo

Amalungu oluntu aguqulele amaxwebhu e-Bootstrap kwiilwimi ezahlukeneyo. Akukho nanye exhaswa ngokusemthethweni kwaye ayinakuhlala ihlaziyiwe.

• I-Bootstrap 中文档 (isiTshayina)
• I-Bootstrap 3 中文手冊 (isiTshayina (Sesiko))
• I-Bootstrap kwiDansk (Danish)
• I-Bootstrap en Français (isiFrentshi)
• I-Bootstrap auf Deutsch (eJamani)
• Bootstrap in Italiano (Italian)
• Bootstrap 한국어 (Korean)
• I-Bootstrap em Português
• I-Bootstrap по-русски (isiRashiya)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• I-Bootstrap bằng tiếng Việt (Vietnamese)

Asincedi ekuququzeleleni okanye ekusingatheni iinguqulelo, sidibanisa nje kuzo.

Ugqibile inguqulelo entsha okanye engcono? Vula isicelo sokutsala ukuyongeza kuluhlu lwethu.