Luchdaich sìos

Tha grunn dhòighean furasta aig Bootstrap (v3.4.1 an-dràsta) tòiseachadh gu sgiobalta, gach fear tarraingeach gu ìre sgil eadar-dhealaichte agus cùis cleachdaidh. Leugh troimhe gus faicinn dè a fhreagras air na feumalachdan sònraichte agad.

jsDelivr

Bidh na daoine thall aig jsDelivr gu gràsmhor a’ toirt taic CDN airson CSS agus JavaScript aig Bootstrap. Dìreach cleachd na ceanglaichean jsDelivr seo .

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

Stàlaich le Bower

Faodaidh tu cuideachd Bootstrap's Less, CSS, JavaScript, agus clòidean a stàladh agus a riaghladh a’ cleachdadh Bower :

bower install bootstrap

Stàlaich le npm

Faodaidh tu cuideachd Bootstrap a stàladh a’ cleachdadh npm :

npm install bootstrap@3

require('bootstrap')luchdaichidh e na plugins jQuery aig Bootstrap air an nì jQuery. Chan bootstrapeil am modal fhèin às-mhalairt dad. Faodaidh tu plugins jQuery Bootstrap a luchdachadh le làimh le bhith a’ luchdachadh nam /js/*.jsfaidhlichean fo eòlaire àrd-ìre a’ phacaid.

Tha meata-dàta a bharrachd ann am Bootstrap package.jsonfo na h-iuchraichean a leanas:

• less- slighe gu prìomh fhaidhle stòr Bootstrap Less
• style- slighe gu CSS neo-mhìnichte Bootstrap a chaidh a chuir ri chèile ro-làimh a’ cleachdadh nan roghainnean bunaiteach (gun ghnàthachadh)

Stàlaich le Composer

Faodaidh tu cuideachd Bootstrap's Less, CSS, JavaScript, agus clòidean a stàladh agus a stiùireadh le bhith a’ cleachdadh Sgrìobhaiche -ciùil :

composer require twbs/bootstrap

Tha feum air autoprefixer airson Nas lugha/Sas

Bidh Bootstrap a’ cleachdadh Autoprefixer gus dèiligeadh ri ro-leasachan reiceadair CSS . Ma tha thu a’ cur ri chèile Bootstrap bhon stòr Less/Sass aige agus gun a bhith a’ cleachdadh ar Gruntfile, feumaidh tu Autoprefixer fhilleadh a-steach don phròiseas togail agad fhèin. Ma tha thu a’ cleachdadh Bootstrap ro-ullaichte no a’ cleachdadh ar Gruntfile, cha leig thu leas a bhith draghail mu dheidhinn seo oir tha Autoprefixer air fhilleadh a-steach don Gruntfile againn mu thràth.

Dè tha air a ghabhail a-steach

Faodar Bootstrap a luchdachadh sìos ann an dà chruth, anns am faigh thu na clàran agus na faidhlichean a leanas, a’ cruinneachadh ghoireasan cumanta gu loidsigeach agus a’ toirt seachad an dà chuid atharrachaidhean cruinnichte agus mion-mhìnichte.

Bootstrap ro-ullaichte

Aon uair ‘s gu bheil thu air a luchdachadh sìos, unzip am pasgan teannachaidh gus structar (an cruth) Bootstrap fhaicinn. Chì thu rudeigin mar seo:

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

Is e seo an seòrsa Bootstrap as bunaitiche: faidhlichean ro-ullaichte airson an cleachdadh gu sgiobalta ann an cha mhòr pròiseact lìn sam bith. Bidh sinn a’ toirt seachad CSS agus JS ( bootstrap.*) cruinnichte , a bharrachd air CSS agus JS ( bootstrap.min.*). Tha mapaichean stòr CSS ( bootstrap.*.map) rim faighinn airson an cleachdadh le innealan leasaiche brobhsairean sònraichte. Tha clòthan bho Glyphicons air an toirt a-steach, mar a tha cuspair roghainneil Bootstrap.

Còd airson bootstrap

Tha luchdachadh sìos còd stòr Bootstrap a’ toirt a-steach CSS, JavaScript, agus so-mhaoin cruth-clò ro-làimh, còmhla ri source Less, JavaScript, agus sgrìobhainnean. Gu sònraichte, tha e a’ toirt a-steach na leanas agus barrachd:

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

Is e an less/, js/, agus fonts/an còd tùsail airson na clòidean CSS, JS agus ìomhaigh againn (fa leth). Tha am dist/pasgan a’ toirt a-steach a h-uile dad a tha air a liostadh san roinn luchdaich sìos ro-ullaichte gu h-àrd. Tha am docs/pasgan a’ toirt a-steach an còd stòr airson na sgrìobhainnean againn, agus examples/cleachdadh Bootstrap. A bharrachd air an sin, tha faidhle sam bith eile a tha air a ghabhail a-steach a’ toirt taic do phasganan, fiosrachadh cead, agus leasachadh.

Ag ullachadh CSS agus JavaScript

Bidh Bootstrap a’ cleachdadh Grunt airson an t-siostam togail aige, le dòighean goireasach airson obrachadh leis an fhrèam. Seo mar a bhios sinn a’ cur ri chèile ar còd, a’ ruith dheuchainnean, agus barrachd.

Grunt a stàladh

Gus Grunt a stàladh, feumaidh tu an toiseach luchdachadh sìos agus stàladh node.js (a tha a 'gabhail a-steach npm). Tha npm a’ seasamh airson modalan pacaichte nód agus tha e na dhòigh air eisimeileachd leasachaidh a riaghladh tro node.js.

1. Stàlaich air feadh na grunt-clicruinne le npm install -g grunt-cli.
2. Seòl chun an /bootstrap/eòlaire root, an uairsin ruith npm install. seallaidh npm air an package.jsonfhaidhle agus cuiridh e gu fèin-ghluasadach na h-eisimeileachd ionadail riatanach a tha air an liostadh an sin.

Nuair a bhios tu deiseil, bidh e comasach dhut na diofar òrdughan Grunt a chaidh a thoirt seachad bhon loidhne-àithne a ruith.

Òrdughan Grunt a tha rim faighinn

grunt dist(Dìreach cuir CSS agus JavaScript ri chèile)

Ag ath-nuadhachadh an /dist/eòlaire le faidhlichean CSS agus JavaScript air an cur ri chèile agus air an lughdachadh. Mar neach-cleachdaidh Bootstrap, mar as trice is e seo an àithne a tha thu ag iarraidh.

grunt watch(Coimhead)

A’ coimhead air na faidhlichean stòr nas lugha agus gan ath-chur gu CSS gu fèin-ghluasadach nuair a shàbhaileas tu atharrachadh.

grunt test(Ruith deuchainnean)

A’ ruith JSHint agus a’ ruith na deuchainnean QUnit ann am fìor bhrobhsairean le taing do Karma .

grunt docs(Tog & deuchainn maoin nan docs)

A’ togail agus a’ dèanamh deuchainn air CSS, JavaScript, agus maoin eile a thathas a’ cleachdadh nuair a thathar a’ ruith nan sgrìobhainnean gu h-ionadail tro bundle exec jekyll serve.

grunt(Tog gu tur a h-uile càil agus ruith deuchainnean)

A’ cur ri chèile agus a’ lughdachadh CSS agus JavaScript, a’ togail làrach-lìn nan sgrìobhainnean, a’ ruith an dearbhaidh HTML5 an aghaidh nan docaichean, ag ath-nuadhachadh maoin Customizer, agus barrachd. Jekyll a dhìth . Mar as trice chan eil feum air ach ma tha thu a’ slaodadh air Bootstrap fhèin.

Fuasgladh thrioblaidean

Ma thachras tu air duilgheadasan le bhith a’ stàladh eisimeileachd no a’ ruith òrdughan Grunt, an toiseach cuir às don /node_modules/eòlaire a ghineadh le npm. An uairsin, ath-ruith npm install.

Teamplaid bunaiteach

Tòisich leis an teamplaid HTML bunaiteach seo, no atharraich na h-eisimpleirean seo . Tha sinn an dòchas gun gnàthaich thu na teamplaidean agus na h-eisimpleirean againn, gan atharrachadh a rèir do fheumalachdan.

Dèan lethbhreac den HTML gu h-ìosal gus tòiseachadh ag obair le glè bheag de sgrìobhainn Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Eisimpleirean

Tog air an teamplaid bunaiteach gu h-àrd le mòran phàirtean aig Bootstrap. Tha sinn gad bhrosnachadh gus Bootstrap a ghnàthachadh agus atharrachadh a rèir feumalachdan do phròiseact fa leth.

Faigh an còd tùsail airson gach eisimpleir gu h-ìosal le bhith a ’ luchdachadh sìos an stòr Bootstrap . Gheibhear eisimpleirean anns an docs/examples/eòlaire.

A 'cleachdadh an fhrèam

Teamplaid tòiseachaidh

Chan eil dad ach na rudan bunaiteach: CSS agus JavaScript air an cur ri chèile còmhla ri soitheach.

Cuspair bootstrap

Luchdaich sìos cuspair roghainneil Bootstrap airson eòlas le sealladh nas fheàrr.

Griodaichean

Iomadh eisimpleirean de chruth clèithe leis na ceithir ìrean, neadachadh, agus barrachd.

Jumbotron

Tog timcheall an jumbotron le navbar agus cuid de cholbhan clèithe bunaiteach.

Jumbotron cumhang

Tog duilleag nas gnàthaichte le bhith a’ caolachadh an t-soitheach àbhaisteach agus an jumbotron.

Navbars ann an gnìomh

Navbar

Teamplaid fìor bhunasach a tha a’ toirt a-steach am bàr seòlaidh còmhla ri beagan susbaint a bharrachd.

Bàr seòlaidh mullach statach

Teamplaid fìor bhunasach le bàr seòlaidh mullach statach còmhla ri beagan susbaint a bharrachd.

Navbar stèidhichte

Teamplaid fìor bhunasach le bàr seòlaidh àrd stèidhichte còmhla ri beagan susbaint a bharrachd.

Co-phàirtean gnàthaichte

Còmhdaich

Teamplaid aon-dhuilleag airson duilleagan dachaigh sìmplidh agus brèagha a thogail.

Carousel

Gnàthaich am bàr nav agus an carousel, an uairsin cuir cuid de cho-phàirtean ùra ris.

Blog

Cruth blog sìmplidh dà-cholbh le seòladh àbhaisteach, bann-cinn, agus seòrsa.

Deas-bhòrd

Structar bunaiteach airson deas-bhòrd rianachd le bàr-taobh stèidhichte agus bàr seòlaidh.

Duilleag logadh a-steach

Cruth cruth gnàthaichte agus dealbhadh airson soidhne sìmplidh ann an cruth.

Nav air fhìreanachadh

Cruthaich bàr seòlaidh àbhaisteach le ceanglaichean reusanta. Cinn suas! Chan eil e ro chàirdeil do Safari.

Bun-coise steigeach

Ceangail bonn-coise gu bonn a’ phuirt-seallaidh nuair a tha an susbaint nas giorra na e.

Bun-coise steigeach le navbar

Ceangail bonn-coise gu bonn a’ phuirt-seallaidh le bàr-seòlaidh stèidhichte aig a’ mhullach.

Deuchainnean

Bootstrap neo-fhreagairt

Cuir dheth gu furasta freagairteachd Bootstrap a rèir na docaichean againn .

Off-canabhas

Tog clàr seòlaidh far-canabhas a ghabhas atharrachadh airson a chleachdadh le Bootstrap.

Innealan

Bootlint

Is e Bootlint an inneal lìn oifigeil Bootstrap HTML. Bidh e gu fèin-obrachail a’ sgrùdadh grunn mhearachdan HTML cumanta ann an duilleagan-lìn a tha a’ cleachdadh Bootstrap ann an dòigh gu math “vanilla”. Tha co-phàirtean/widgets Vanilla Bootstrap ag iarraidh gum bi na pàirtean aca den DOM a’ cumail ri structaran sònraichte. Bidh Bootlint a’ dèanamh cinnteach gu bheil eisimpleirean de cho-phàirtean Bootstrap air HTML le structar ceart. Beachdaich air Bootlint a chur ris an inneal leasachaidh lìn Bootstrap agad gus nach bi gin de na mearachdan cumanta a’ cur maill air leasachadh a’ phròiseict agad.

Coimhearsnachd

Cum suas ris an fhiosrachadh as ùire mu leasachadh Bootstrap agus ruig a-mach don choimhearsnachd leis na goireasan feumail sin.

• Leugh agus fo-sgrìobh don Bhlog Bootstrap Oifigeil .
• Bruidhinn ri Bootstrappers eile a’ cleachdadh IRC san t- irc.freenode.netseirbheisiche, anns an t-sianal ##bootstrap .
• Airson cuideachadh le bhith a’ cleachdadh Bootstrap, faighnich air StackOverflow a’ cleachdadh an tagatwitter-bootstrap-3 .
• Bu chòir do luchd-leasachaidh am prìomh fhacal a chleachdadh bootstrapair pacaidean a bhios ag atharrachadh no a’ cur ri gnìomhachd Bootstrap nuair a bhios iad a’ cuairteachadh tro npm no dòighean lìbhrigidh coltach ris airson an lorg as motha.
• Lorg eisimpleirean brosnachail de dhaoine a’ togail le Bootstrap aig an Bootstrap Expo .

Faodaidh tu cuideachd @getbootstrap a leantainn air Twitter airson na gossip as ùire agus bhideothan ciùil sgoinneil.

A 'cur casg air freagairteachd

Bidh Bootstrap ag atharrachadh do dhuilleagan gu fèin-ghluasadach airson diofar mheudan sgrion. Seo mar a chuireas tu am feart seo à comas gus am bi an duilleag agad ag obair mar an eisimpleir neo-fhreagairt seo .

Ceumannan gus freagairteachd duilleag a dhì-cheadachadh

1. Fàg am port-seallaidh <meta>air a bheil iomradh anns na docaichean CSS
2. Thoir thairis air an widthair an .containerairson gach sreath clèithe le aon leud, mar eisimpleir width: 970px !important;Dèan cinnteach gu bheil seo a’ tighinn às deidh an CSS àbhaisteach Bootstrap. Faodaidh tu roghainn a sheachnadh !importantle ceistean meadhanan no cuid de roghnaichear-fu.
3. Ma chleachdas tu navbars, thoir air falbh a h-uile giùlan a tha a’ tuiteam is a’ leudachadh.
4. Airson dealbhadh clèithe, cleachd .col-xs-*clasaichean a bharrachd air, no an àite, feadhainn meadhanach/mòr. Na gabh dragh, bidh a’ ghriod inneal beag a bharrachd a ’dol gu gach rùn.

Bidh feum agad fhathast air Respond.js airson IE8 (leis gu bheil na ceistean meadhanan againn fhathast ann agus feumar an làimhseachadh). Cuiridh seo à comas taobhan “làrach gluasadach” Bootstrap.

Teamplaid Bootstrap le freagairteachd ciorramach

Tha sinn air na ceumannan seo a chuir an sàs mar eisimpleir. Leugh a chòd stòr gus na h-atharrachaidhean sònraichte a chaidh a chuir an gnìomh fhaicinn.

Seall eisimpleir neo-fhreagairt

Taic brabhsair agus inneal

Tha Bootstrap air a thogail gus a bhith ag obair as fheàrr anns na brobhsairean deasg is gluasadach as ùire, a’ ciallachadh gum faodadh brobhsairean nas sine a bhith a’ taisbeanadh dealbhan de phàirtean sònraichte le stoidhle eadar-dhealaichte, ged a tha iad làn-ghnìomhach.

Brabhsairean le taic

Gu sònraichte, tha sinn a’ toirt taic do na dreachan as ùire de na brobhsairean agus àrd-ùrlaran a leanas.

Chan eil brobhsairean eile a chleachdas an dreach as ùire de WebKit, Blink, no Gecko, ge bith an ann gu dìreach no tro API sealladh lìn an àrd-ùrlar, a’ faighinn taic shònraichte. Ach, bu chòir dha Bootstrap (sa mhòr-chuid de chùisean) taisbeanadh agus obrachadh gu ceart anns na brobhsairean sin cuideachd. Tha fiosrachadh taic nas sònraichte air a thoirt seachad gu h-ìosal.

Innealan gluasadach

San fharsaingeachd, tha Bootstrap a’ toirt taic do na dreachan as ùire de bhrobhsairean bunaiteach gach àrd-ùrlar. Thoir an aire nach eil taic ri brobhsairean progsaidh (leithid Opera Mini, modh Turbo Opera Mobile, UC Browser Mini, Amazon Silk).

Browsers desktop

San aon dòigh, tha na dreachan as ùire den mhòr-chuid de bhrobhsairean deasg a’ faighinn taic.

Air Windows, tha sinn a’ toirt taic do Internet Explorer 8-11 .

Airson Firefox, a bharrachd air an sgaoileadh stàbaill àbhaisteach as ùire, tha sinn cuideachd a’ toirt taic don dreach as ùire den Sgaoileadh Taic Leudaichte (ESR) de Firefox.

Gu neo-oifigeil, bu chòir do Bootstrap coimhead agus giùlan math gu leòr ann an Chromium agus Chrome airson Linux, Firefox airson Linux, agus Internet Explorer 7, a bharrachd air Microsoft Edge, ged nach eil iad a’ faighinn taic oifigeil.

Airson liosta de chuid de na mialan brobhsair a dh’ fheumas Bootstrap a dhol an sàs, faic ar Balla de bhiteagan brabhsair .

Internet Explorer 8 agus 9

Tha Internet Explorer 8 agus 9 cuideachd a’ faighinn taic, ge-tà, thoir an aire nach eil cuid de fheartan CSS3 agus eileamaidean HTML5 a’ faighinn làn thaic bho na brobhsairean sin. A bharrachd air an sin, feumaidh Internet Explorer 8 Respond.js a chleachdadh gus taic a thoirt do cheist mheadhanan.

Tadhail Am faod mi cleachdadh... airson mion-fhiosrachadh mu thaic bhrobhsair airson feartan CSS3 agus HTML5.

Internet Explorer 8 agus Respond.js

Bi faiceallach mu na h-uamhasan a leanas nuair a bhios tu a’ cleachdadh Respond.js anns na h-àrainneachdan leasachaidh is cinneasachaidh agad airson Internet Explorer 8.

Respond.js agus CSS thar-àrainn

Le bhith a’ cleachdadh Respond.js le CSS air aoigheachd air raon (fo) eadar-dhealaichte (mar eisimpleir, air CDN) feumar beagan rèiteachaidh a bharrachd. Faic na docaichean Respond.js airson mion-fhiosrachadh.

Freagair.js agusfile://

Air sgàth riaghailtean tèarainteachd brabhsair, chan obraich Respond.js le duilleagan air am faicinn tron file://​​​​phròtacal (mar nuair a dh’ fhosglas tu faidhle HTML ionadail). Gus feartan freagairteach ann an IE8 a dhearbhadh, thoir sùil air na duilleagan agad thairis air HTTP(S). Faic na docaichean Respond.js airson mion-fhiosrachadh.

Freagair.js agus@import

Chan eil Respond.js ag obair le CSS air a bheil iomradh tro @import. Gu sònraichte, tha fios gu bheil cuid de rèiteachaidhean Drupal a’ cleachdadh @import. Faic na docaichean Respond.js airson mion-fhiosrachadh.

Internet Explorer 8 agus meud nam bogsaichean

Chan eil IE8 a’ toirt làn thaic box-sizing: border-box;nuair a thèid a chur còmhla ri min-width, max-width, min-height, no max-height. Air an adhbhar sin, mar v3.0.1, chan eil sinn a’ cleachdadh tuilleadh max-widthair .containers.

Internet Explorer 8 agus @font-face

Tha cuid de dhuilgheadasan aig IE8 @font-facenuair a thèid iad còmhla ri :before. Bidh Bootstrap a’ cleachdadh a’ chothlamadh sin leis na Glyphicons aige. Ma tha duilleag air a thasgadh, agus air a luchdachadh às aonais na luchaige thairis air an uinneig (ie buail am putan ùrachaidh no luchdaich rudeigin ann an iframe) thèid an duilleag a thoirt seachad mus luchdaich an cruth-clò. Le bhith a’ dol thairis air an duilleag (corp) seallaidh e cuid de na h-ìomhaighean agus le bhith a’ gluasad thairis air na h-ìomhaighean a tha air fhàgail seallaidh sin iad sin cuideachd. Faic iris #13863 airson mion-fhiosrachadh.

IE modhan co-chòrdalachd

Chan eil taic ri Bootstrap anns na seann mhodhan co-chòrdalachd Internet Explorer. Gus a bhith cinnteach gu bheil thu a’ cleachdadh am modh tairgse as ùire airson IE, smaoinich air an <meta>taga iomchaidh a thoirt a-steach do na duilleagan agad:

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

Dearbhaich am modh sgrìobhainn le bhith a’ fosgladh na h-innealan deasbaid: brùth F12is thoir sùil air an “Modh Sgrìobhainn”.

Tha an taga seo air a ghabhail a-steach anns a h-uile sgrìobhainn agus eisimpleirean aig Bootstrap gus dèanamh cinnteach gum bi an tairgse as fheàrr anns gach dreach le taic de Internet Explorer.

Faic a’ cheist seo StackOverflow airson tuilleadh fiosrachaidh.

Internet Explorer 10 ann an Windows 8 agus Windows Phone 8

Chan eil Internet Explorer 10 ag eadar-dhealachadh leud inneal bho leud viewport , agus mar sin chan eil e a’ cur an sàs gu ceart na ceistean meadhanan ann an CSS Bootstrap. Mar as trice bhiodh tu dìreach air criomag sgiobalta de CSS a chuir ris gus seo a chàradh:

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

Ach, chan obraich seo airson innealan a tha a’ ruith dreachan Windows Phone 8 nas sine na Update 3 (aka GDR3) , leis gu bheil e ag adhbhrachadh gum bi innealan mar sin a’ sealltainn sealladh deasg sa mhòr-chuid an àite sealladh cumhang “fòn”. Gus dèiligeadh ri seo, feumaidh tu na CSS agus JavaScript a leanas a chur a-steach gus obrachadh timcheall a’ bhiast .

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

Airson tuilleadh fiosrachaidh agus stiùireadh cleachdaidh, leugh Windows Phone 8 agus Device-Width .

Mar cheann shuas, bidh sinn a’ toirt a-steach seo anns a h-uile sgrìobhainn agus eisimpleirean aig Bootstrap mar thaisbeanadh.

Ùrachadh luath air ìre Safari

Bha beagan trioblaid aig an einnsean tairgse de dhreachan de Safari ro v7.1 airson OS X agus Safari airson iOS v8.0 leis an àireamh de dh'àiteachan deicheach a chaidh a chleachdadh anns na .col-*-1clasaichean clèithe againn. Mar sin nam biodh 12 colbhan clèithe fa leth agad, bhiodh tu a’ mothachadh gun tàinig iad suas goirid an taca ri sreathan eile de cholbhan. A bharrachd air ùrachadh Safari / iOS, tha cuid de roghainnean agad airson dòighean-obrach:

• Cuir .pull-rightris a’ cholbh clèithe mu dheireadh agad gus an co-thaobhadh cruaidh-dheis fhaighinn
• Tweak na ceudadan agad le làimh gus an cruinneachadh foirfe fhaighinn airson Safari (nas duilghe na a’ chiad roghainn)

Modalan, navbars, agus meur-chlàran mas-fhìor

Cur thairis agus scrollaidh

Tha taic airson overflow: hiddenan <body>eileamaid gu math cuingealaichte ann an iOS agus Android. Chun na crìche sin, nuair a sgrolaicheas tu seachad air mullach no bonn modal ann an aon de na brobhsairean sin, <body>tòisichidh an susbaint a’ gluasad. Faic bug Chrome #175502 (stèidhichte ann an Chrome v40) agus bug WebKit #153852 .

raointean teacsa iOS agus scrollaidh

Mar iOS 9.3, fhad ‘s a tha modal fosgailte, ma tha suathadh tùsail gluasad-bodhaig taobh a-staigh crìoch teacsa <input>no a <textarea>, thèid an <body>susbaint fon mhodal a sgrùdadh an àite a’ mhodal fhèin. Faic bug WebKit #153856 .

Mas-fhìor meur-chlàr

Cuideachd, thoir an aire ma tha thu a’ cleachdadh bàr seòlaidh stèidhichte no a’ cleachdadh cuir a-steach taobh a-staigh modal, tha buga tairgse aig iOS nach ùraich suidheachadh nan eileamaidean stèidhichte nuair a thèid am meur-chlàr brìgheil a phiobrachadh. Tha beagan dhòighean-obrach airson seo a’ toirt a-steach a bhith ag atharrachadh na h-eileamaidean agad gu position: absoluteno a’ toirt a-steach timer air fòcas gus feuchainn ris an t-suidheachadh a cheartachadh le làimh. Chan eil seo air a làimhseachadh le Bootstrap, agus mar sin tha e an urra riutsa co-dhùnadh dè am fuasgladh as fheàrr airson an tagradh agad.

Navbar dropdowns

Chan eil an .dropdown-backdropeileamaid air a chleachdadh air iOS anns an nav air sgàth cho iom-fhillte 'sa tha clàr-amais z. Mar sin, gus dropdowns a dhùnadh ann an navbars, feumaidh tu briogadh gu dìreach air an eileamaid a tha a’ tuiteam sìos (no eileamaid sam bith eile a loisgeas tachartas cliog ann an iOS ).

Brabhsair a 'leum

Tha gluasad dhuilleagan gu do-sheachanta a’ toirt seachad stuthan tairgse ann an cuid de cho-phàirtean, an dà chuid ann am Bootstrap agus an còrr den lìon. A rèir na cùise, is dòcha gum bi e comasach dhuinn a chàradh (lorg an toiseach agus an uairsin fosgail cùis ma tha feum air). Ach, tha sinn buailteach a bhith a’ seachnadh iad sin oir gu tric chan eil fuasgladh dìreach aca ach a-mhàin dòighean obrach meallta.

Gluasadach :hover/ :focusair fòn-làimhe

Eadhon ged nach eil e comasach gluasad fìor air a ’mhòr-chuid de scrionaichean suathaidh, bidh a’ mhòr-chuid de bhrobhsairean gluasadach ag atharrais air taic gluasad agus a ’dèanamh :hover“ steigeach ”. Ann am faclan eile, bidh :hoverstoidhlichean a ’tòiseachadh a’ cur a-steach às deidh dhaibh a bhith a ’cnagadh air eileamaid agus dìreach a’ stad a chuir a-steach às deidh don neach-cleachdaidh tapadh air eileamaid eile. Faodaidh seo toirt air stàitean Bootstrap :hovera bhith “glic” gu neo-mhiannach air na brobhsairean sin. Bidh cuid de bhrobhsairean gluasadach cuideachd a’ dèanamh :focusan aon rud steigeach. Aig an àm seo chan eil fuasgladh sìmplidh ann airson na cùisean sin ach a bhith a’ toirt air falbh stoidhlichean mar sin gu tur.

Clò-bhualadh

Eadhon ann an cuid de bhrobhsairean an latha an-diugh, faodaidh clò-bhualadh a bhith neo-àbhaisteach.

Gu sònraichte, a thaobh Chrome v32 agus ge bith dè na roghainnean iomaill, bidh Chrome a’ cleachdadh leud sealladh gu math nas cumhainge na meud pàipear corporra nuair a bhios e a’ fuasgladh cheistean meadhanan fhad ‘s a tha e a’ clò-bhualadh duilleag-lìn. Faodaidh seo leantainn gu griod beag a bharrachd Bootstrap a chuir an gnìomh gun dùil nuair a bhios e a’ clò-bhualadh. Faic cùis #12078 agus bug Chrome #273306 airson beagan fiosrachaidh. Ceumannan obrach a thathar a’ moladh:

• Gabh a-steach don ghriod bheag agus dèan cinnteach gu bheil coltas iomchaidh air do dhuilleag fodha.
• Gnàthaich luachan nan @screen-*caochladairean nas lugha gus am bi am pàipear clò-bhualadair agad air a mheas nas motha na cus beag.
• Cuir ceistean meadhanan àbhaisteach ris gus na puingean brisidh meud clèithe atharrachadh airson meadhanan clò a-mhàin.

Cuideachd, mar Safari v8.0, .containerfaodaidh leud-leud s toirt air Safari meud cruth-clò neo-àbhaisteach beag a chleachdadh nuair a thathar a’ clò-bhualadh. Faic #14868 agus bug WebKit #138192 airson tuilleadh fiosrachaidh. Is e aon fhuasgladh a dh’ fhaodadh a bhith ann airson seo an CSS a leanas a chur ris:

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

Brabhsair stoc Android

A-mach às a’ bhogsa, bidh Android 4.1 (agus eadhon fiosan nas ùire a rèir choltais) a’ dol leis an aplacaid Browser mar am brabhsair lìn àbhaisteach as fheàrr leotha (an taca ri Chrome). Gu mì-fhortanach, tha tòrr bhiteagan agus neo-chunbhalachd aig an aplacaid Browser le CSS san fharsaingeachd.

Tagh clàran-bìdh

Air <select>eileamaidean, cha sheall brabhsair stoc Android na smachdan taobh ma tha border-radiusagus / no borderair a chuir an sàs. (Faic a’ cheist StackOverflow seo airson mion-fhiosrachadh.) Cleachd a’ chriomag de chòd gu h-ìosal gus an CSS oilbheumach a thoirt air falbh agus thoir seachad e <select>mar eileamaid gun stoidhle air brobhsair stoc Android. Bidh sniffing an neach-cleachdaidh a’ seachnadh eadar-theachd le brobhsairean Chrome, Safari agus Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

A bheil thu airson eisimpleir fhaicinn? Thoir sùil air an demo JS Bin seo.

Luchd-dearbhaidh

Gus an t-eòlas as fheàrr a thoirt do sheann bhrobhsairean agus buggy, bidh Bootstrap a’ cleachdadh hacks brabhsair CSS ann an grunn àiteachan gus CSS sònraichte a chuimseachadh air dreachan brobhsair sònraichte gus obrachadh timcheall air bugaichean anns na brobhsairean fhèin. Tha e tuigseach gu bheil na hacks sin ag adhbhrachadh do luchd-dearbhaidh CSS gearan gu bheil iad neo-dhligheach. Ann an àite no dhà, bidh sinn cuideachd a’ cleachdadh feartan CSS sèididh nach eil fhathast làn àbhaisteach, ach tha iad sin air an cleachdadh dìreach airson àrdachadh adhartach.

Chan eil na rabhaidhean dearbhaidh sin gu diofar ann an cleachdadh leis gu bheil am pàirt neo-hacky den CSS againn a’ dearbhadh gu h-iomlan agus nach eil na cuibhreannan meallta a’ cur bacadh air obrachadh ceart a’ chuibhreann neo-hacky, agus mar sin carson a tha sinn a’ seachnadh nan rabhaidhean sònraichte sin a dh’aona ghnothach.

Tha rabhaidhean dearbhaidh HTML beag is neo-chinnteach aig na docaichean HTML againn mar an ceudna air sgàth ’s gu bheil sinn a’ toirt a-steach dòigh-obrach airson bug Firefox sònraichte .

Taic treas-phàrtaidh

Ged nach eil sinn gu h-oifigeil a’ toirt taic do plugins no tuilleadan treas-phàrtaidh sam bith, bidh sinn a’ tabhann beagan comhairle fheumail gus duilgheadasan a sheachnadh nad phròiseactan.

Meud bogsa

Tha cuid de bhathar-bog treas-phàrtaidh, a’ gabhail a-steach Google Maps agus Google Custom Search Engine, a’ strì ri Bootstrap air sgàth * { box-sizing: border-box; }, riaghailt a tha ga fhàgail mar sin paddingnach toir buaidh air leud àireamhaichte deireannach eileamaid. Ionnsaich tuilleadh mu mhodail bogsa agus meud aig CSS Tricks .

A rèir a’ cho-theacsa, faodaidh tu a dhol thairis air mar a dh’ fheumar (Roghainn 1) no meud a’ bhogsa ath-shuidheachadh airson roinnean gu lèir (Roghainn 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();
}

Ruigsinneachd

Tha Bootstrap a’ leantainn inbhean lìn cumanta agus – le glè bheag de dh’ oidhirp a bharrachd – faodar a chleachdadh gus làraich a chruthachadh a bhios ruigsinneach dhaibhsan a tha a’ cleachdadh AT .

Thoir leum air seòladh

Ma tha mòran cheanglaichean anns an t-seòladh agad agus ma thig e ron phrìomh shusbaint san DOM, cuir Skip to main contentceangal ris ron t-seòladh (airson mìneachadh sìmplidh, faic an artaigil Pròiseact A11Y seo air sgiobadh ceanglaichean seòlaidh ). Le bhith a’ cleachdadh a’ .sr-onlychlas cuiridh e am falach an ceangal sgip gu lèir, agus nì an .sr-only-focusableclas cinnteach gum bi an ceangal ri fhaicinn aon uair ‘s gu bheil fòcas aige (airson luchd-cleachdaidh meur-chlàr le sealladh).

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

Cinn neadachaidh

Nuair a bhios tu a’ neadachadh cinn ( <h1>- <h6>), bu chòir do phrìomh cheann-cinn na sgrìobhainn a bhith na <h1>. Bu chòir do chinn às deidh sin feum loidsigeach a dhèanamh de <h2>- <h6>gus an urrainn do leughadairean sgrion clàr-innse a chruthachadh airson do dhuilleagan.

Ionnsaich tuilleadh aig HTML CodeSniffer agus Penn State's AccessAbility .

Coltas dath

An-dràsta, tha cuid de na cothlamadh dath bunaiteach a tha rim faighinn ann am Bootstrap (leithid na diofar chlasaichean putan styled , cuid den chòd a’ soilleireachadh dathan a thathas a’ cleachdadh airson blocaichean còd bunaiteach , an clas neach-cuideachaidh .bg-primary cùl-fhiosrachaidh co-theacsa , agus an dath ceangail bunaiteach nuair a thèid a chleachdadh air cùl geal) tha co-mheas eadar-dhealaichte ìosal (fon cho-mheas a thathar a’ moladh de 4.5: 1 ). Faodaidh seo duilgheadasan adhbhrachadh do luchd-cleachdaidh le lèirsinn ìosal no le dath dall. Is dòcha gu feumar na dathan bunaiteach sin atharrachadh gus an eadar-dhealachadh agus an leughadh a mheudachadh.

Goireasan a bharrachd

• Comharra-leabhair “HTML Codesniffer” airson cùisean ruigsinneachd a chomharrachadh
• Leudachadh Innealan Leasachaidh Ruigsinneachd Chrome
• Anailisear coimeas dath
• Pròiseact A11Y
• Sgrìobhainnean ruigsinneachd MDN

Ceistean Cumanta ceadachais

Tha Bootstrap air fhoillseachadh fo chead MIT agus tha e fo dhlighe-sgrìobhaidh 2019 Twitter. Air a ghoil sìos gu pìosan nas lugha, faodar a mhìneachadh leis na cumhaichean a leanas.

Tha e ag iarraidh ort:

• Cùm an cead agus fios dlighe-sgrìobhaidh ann am faidhlichean CSS agus JavaScript Bootstrap nuair a chleachdas tu iad nad obair

Tha e a’ toirt cead dhut:

• Luchdaich sìos agus cleachd Bootstrap gu saor, gu h-iomlan no ann am pàirt, airson adhbharan pearsanta, prìobhaideach, taobh a-staigh companaidh no malairteach
• Cleachd Bootstrap ann am pasganan no sgaoilidhean a chruthaicheas tu
• Atharraich an còd tùsail
• Thoir seachad fo-chead airson Bootstrap atharrachadh agus a sgaoileadh gu treas phàrtaidhean nach eil air an gabhail a-steach sa chead

Tha e a’ toirmeasg dhut:

• Cùm na h-ùghdaran agus sealbhadairean cead cunntachail airson milleadh oir tha Bootstrap air a thoirt seachad gun bharrantas
• Cùm luchd-cruthachaidh no luchd-gleidhidh dlighe-sgrìobhaidh Bootstrap cunntachail
• Ath-riaraich pìos sam bith de Bootstrap gun a bhith air a chomharrachadh gu ceart
• Cleachd comharran sam bith le Twitter ann an dòigh sam bith a dh’ fhaodadh innse no a bhith a’ ciallachadh gu bheil Twitter a’ toirt taic don sgaoileadh agad
• Cleachd comharran sam bith a bhuineas do Twitter ann an dòigh sam bith a dh’ fhaodadh innse no a bhith a’ ciallachadh gun do chruthaich thu am bathar-bog Twitter sin

Chan eil e ag iarraidh ort:

• Cuir a-steach stòr Bootstrap fhèin, no atharrachaidhean sam bith a dh’ fhaodadh tu a bhith air a dhèanamh air, ann an ath-sgaoileadh sam bith a dh’ fhaodadh tu a chruinneachadh a bheir a-steach e.
• Cuir a-steach atharrachaidhean a nì thu air Bootstrap air ais gu pròiseact Bootstrap (ged a thathas a’ brosnachadh fios air ais mar sin)

Tha an làn chead Bootstrap suidhichte ann an stòr a’ phròiseict airson tuilleadh fiosrachaidh.

Eadar-theangachaidhean

Tha buill coimhearsnachd air sgrìobhainnean Bootstrap eadar-theangachadh gu diofar chànanan. Chan eil gin a’ faighinn taic oifigeil agus is dòcha nach bi iad an-còmhnaidh ùraichte.

• Bootstrap 中文文档 (Sìneach)
• Bootstrap na Danmhairg (Danmhairgis)
• Bootstrap ann am Français (Fraingis)
• Bootstrap auf Deutsch (Gearmailtis)
• Bootstrap ann an Eadailtis (Eadailtis)
• Bootstrap 한국어 (Coirèanais)
• Bootstrap ann am Português do Brasil (Portuguese Brazilach)
• Bootstrap по-русски (Ruiseanach)
• Bootstrap anns an Spàinn (Spàinntis)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ucràinis)
• Bootstrap airson Việt (Bhietnam)

Cha bhi sinn a' cuideachadh le bhith ag eagrachadh no a' cumail eadar-theangachaidhean, tha sinn dìreach a' ceangal riutha.

An do chrìochnaich thu eadar-theangachadh ùr no nas fheàrr? Fosgail iarrtas tarraing gus a chur ris an liosta againn.