Íosluchtaigh

Tá roinnt bealaí éasca ag Bootstrap (v3.4.1 faoi láthair) chun tús a chur go tapa leis, gach ceann acu tarraingteach do chás leibhéil agus úsáide éagsúla. Léigh tríd chun féachaint cad a oireann do do riachtanais ar leith.

jsDelivr

Tugann na daoine thall ag jsDelivr tacaíocht CDN do CSS agus JavaScript Bootstrap. Bain úsáid as na naisc 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>

Suiteáil le Bower

Is féidir leat freisin Bootstrap's Less, CSS, JavaScript, agus clónna a shuiteáil agus a bhainistiú ag baint úsáide as Bower :

bower install bootstrap

Suiteáil le npm

Is féidir leat Bootstrap a shuiteáil freisin ag baint úsáide as npm :

npm install bootstrap@3

require('bootstrap')luchtófar gach breiseán jQuery de chuid Bootstrap ar an réad jQuery. Ní bootstraponnmhairíonn an modúl féin rud ar bith. Is féidir leat breiseán jQuery Bootstrap a luchtú de láimh ina n-aonar trí na /js/*.jscomhaid a lódáil faoi eolaire barrleibhéil an phacáiste.

Tá roinnt meiteashonraí breise i Bootstrap package.jsonfaoi na heochracha seo a leanas:

• less- cosán chuig príomhchomhad foinse Bootstrap Less
• style- cosán chuig CSS neamh-mhionnaithe Bootstrap atá réamhthiomsaithe ag baint úsáide as na socruithe réamhshocraithe (gan oiriúnú)

Suiteáil le Cumadóir

Is féidir leat freisin Bootstrap's Less, CSS, JavaScript, agus clónna a shuiteáil agus a bhainistiú ag baint úsáide as Cumadóir :

composer require twbs/bootstrap

Uathréimír ag teastáil le haghaidh Níos lú/Sas

Úsáideann Bootstrap Autoprefixer chun déileáil le réimíreanna díoltóirí CSS . Má tá Bootstrap á thiomsú agat óna fhoinse Less/Sass agus mura bhfuil ár Gruntfile á úsáid agat, beidh ort Autoprefixer a chomhtháthú isteach i do phróiseas tógála tú féin. Má tá tú ag baint úsáide as Bootstrap réamh-thiomsaithe nó ag baint úsáide as ár Gruntfile, ní gá duit a bheith buartha faoi seo toisc go bhfuil Autoprefixer comhtháite inár Gruntfile cheana féin.

Cad atá san áireamh

Is féidir Bootstrap a íoslódáil i dhá fhoirm, ina bhfaighidh tú na heolairí agus na comhaid seo a leanas, ag grúpáil acmhainní coitianta go loighciúil agus ag soláthar éagsúlachtaí tiomsaithe agus mionathraithe.

Bootstrap réamhdhéanta

Nuair a bheidh sé íoslódáilte, dízip an fillteán comhbhrúite chun struchtúr Bootstrap (an tiomsaithe) a fheiceáil. Feicfidh tú rud 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 é seo an fhoirm is bunúsaí de Bootstrap: comhaid réamh-thiomsaithe le haghaidh úsáide buail isteach tapa i mbeagnach aon tionscadal gréasáin. Soláthraímid CSS agus JS ( bootstrap.*) tiomsaithe , chomh maith le CSS agus JS ( bootstrap.min.*) tiomsaithe agus mionghearrtha. Tá léarscáileanna foinse CSS ( bootstrap.*.map) ar fáil le húsáid le huirlisí forbróra brabhsálaithe áirithe. Áirítear clónna ó Glyphicons, mar atá an téama Bootstrap roghnach.

Cód foinse bootstrap

Áirítear le híoslódáil cód foinse Bootstrap na sócmhainní CSS, JavaScript, agus cló réamh- thiomsaithe, chomh maith le Foinse Lúide, JavaScript, agus doiciméadú. Go sonrach, cuimsíonn sé na nithe seo a leanas agus níos mó:

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

Is iad na less/, , js/, agus fonts/an cód foinse dár gclónna CSS, JS, agus deilbhín (faoi seach). Áirítear leis an dist/bhfillteán gach rud atá liostaithe sa rannán íoslódála réamhthiomsaithe thuas. Áiríonn docs/an fillteán an cód foinse dár ndoiciméadú agus examples/úsáid Bootstrap. Thairis sin, soláthraíonn aon chomhad eile atá san áireamh tacaíocht do phacáistí, faisnéis cheadúnais, agus forbairt.

CSS agus JavaScript a thiomsú

Úsáideann Bootstrap Grunt dá chóras tógála, le modhanna áisiúla chun oibriú leis an gcreat. Sin é an chaoi a ndéanaimid ár gcód a thiomsú, tástálacha a reáchtáil, agus go leor eile.

Suiteáil Grunt

Chun Grunt a shuiteáil, ní mór duit nóde.js a íoslódáil agus a shuiteáil (lena n-áirítear npm). Seasann npm do mhodúil pacáistithe nód agus is bealach é chun spleáchais forbartha a bhainistiú trí nód.js.

1. Suiteáil grunt-cliar fud an domhain le npm install -g grunt-cli.
2. Déan nascleanúint chuig an eolaire fréimhe /bootstrap/, ansin rith npm install. Breathnóidh npm ar an package.jsongcomhad agus déanfaidh sé na spleáchais áitiúla riachtanacha atá liostaithe ann a shuiteáil go huathoibríoch.

Nuair a bheidh tú críochnaithe, beidh tú in ann na horduithe éagsúla Grunt a sholáthraítear ón líne ordaithe a rith.

Orduithe Grunt ar fáil

grunt dist(Níl ort ach CSS agus JavaScript a thiomsú)

Athghintear an t- /dist/eolaire le comhaid CSS agus JavaScript atá tiomsaithe agus miondealaithe. Mar úsáideoir Bootstrap, is é seo an t-ordú a theastaíonn uait de ghnáth.

grunt watch(Féach)

Féachann sé ar na comhaid foinse Lúide agus cuireann sé le chéile go CSS iad go huathoibríoch nuair a shábhálann tú athrú.

grunt test(Rith tástálacha)

Ritheann JSHint agus ritheann na tástálacha QUnit i bhfíorbhrabhsálaithe a bhuíochas le Karma .

grunt docs(Tóg & tástáil na sócmhainní docs)

Tógann agus tástálacha CSS, JavaScript, agus sócmhainní eile a úsáidtear agus an doiciméadú á rith go háitiúil trí bundle exec jekyll serve.

grunt(Tóg go hiomlán gach rud agus reáchtáil tástálacha)

Déanann CSS agus JavaScript a thiomsú agus a mhionlaghdú, tógann sé an suíomh Gréasáin doiciméadúcháin, ritheann an bailíochtóir HTML5 i gcoinne na ndoiciméad, athghintear sócmhainní an Chustaiméara, agus tuilleadh. Éilíonn Jekyll . De ghnáth ní gá ach amháin má tá tú ag hackáil ar Bootstrap féin.

Fabhtcheartú

Má bhíonn fadhbanna agat le spleáchais a shuiteáil nó le horduithe Grunt a rith, scrios ar dtús an t- /node_modules/eolaire ginte ag npm. Ansin, athrith npm install.

Teimpléad bunúsach

Tosaigh leis an teimpléad HTML bunúsach seo, nó modhnaigh na samplaí seo . Tá súil againn go ndéanfaidh tú ár dteimpléid agus ár samplaí a shaincheapadh, agus iad á gcur in oiriúint do do chuid riachtanas.

Cóipeáil an HTML thíos chun tosú ag obair le doiciméad Bootstrap íosta.

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

Samplaí

Tóg ar an teimpléad bunúsach thuas le go leor comhpháirteanna Bootstrap. Molaimid duit Bootstrap a shaincheapadh agus a oiriúnú chun freastal ar riachtanais do thionscadail aonair.

Faigh an cód foinse do gach sampla thíos tríd an stór Bootstrap a íoslódáil . Is féidir samplaí a fháil san docs/examples/eolaire.

Ag baint úsáide as an gcreat

Teimpléad tosaithe

Ní dhéanfaidh aon ní ach na bunghnéithe: CSS agus JavaScript tiomsaithe mar aon le coimeádán.

Téama bootstrap

Luchtaigh an téama Bootstrap roghnach le haghaidh eispéireas feabhsaithe amhairc.

Eangacha

Samplaí iomadúla de leagan amach greille leis na ceithre shraith, neadú, agus níos mó.

Jumbotron

Tóg timpeall an jumbotron le navbar agus roinnt colúin ghreille bunúsacha.

Jumbotron caol

Tóg leathanach níos saincheaptha tríd an gcoimeádán réamhshocraithe agus an jumbotron a chaolú.

Navbarras i mbun gnímh

Navbar

Teimpléad sárbhunúsach a chuimsíonn an barra nascleanúna mar aon le roinnt ábhar breise.

Barra nascleanúna statach

Teimpléad sárbhunúsach le barra nascleanúna barr statach mar aon le roinnt ábhar breise.

Navbar seasta

Teimpléad sárbhunúsach le barra nascleanúna barr seasta mar aon le roinnt ábhar breise.

Comhpháirteanna saincheaptha

Clúdach

Teimpléad aon-leathanach chun leathanaigh baile simplí agus álainn a thógáil.

Timpealláin

Saincheap an barra nascleanúna agus timpealláin, ansin cuir roinnt comhpháirteanna nua leis.

Blag

Leagan amach blag simplí dhá cholún le nascleanúint saincheaptha, ceanntásc agus cineál.

Deais

Struchtúr bunúsach le haghaidh painéal riaracháin le barra taoibh seasta agus barra nascleanúna.

Leathanach síniú isteach

Leagan amach agus dearadh na foirme saincheaptha le haghaidh comhartha simplí i bhfoirm.

Nav inchosanta

Cruthaigh barra nascleanúna saincheaptha le naisc inchosanta. Cinnirí suas! Níl sé ró-chairdiúil do Safari.

Buntásc greamaitheach

Ceangail buntásc ag bun an amhairc nuair a bhíonn an t-ábhar níos giorra ná é.

Buntásc greamaitheach le barra nascleanúna

Ceangail buntásc ag bun an amhairc agus barra nascleanúna seasta ag an mbarr.

Turgnaimh

Bootstrap neamhfhreagrach

Díchumasaigh freagrúlacht Bootstrap de réir ár ndoiciméid go héasca .

Lasmuigh den chanbhás

Tóg roghchlár nascleanúna lasmuigh den chanbhás inscortha le húsáid le Bootstrap.

Uirlisí

Bootlint

Is é Bootlint an uirlis oifigiúil línéar HTML Bootstrap. Seiceálann sé go huathoibríoch roinnt botúin HTML coitianta ar leathanaigh ghréasáin a úsáideann Bootstrap ar bhealach cothrom "vanilla". Éilíonn comhpháirteanna/giuirléidí Vanilla Bootstrap go gcloífeadh a gcuid codanna den DOM le struchtúir áirithe. Seiceálann Bootlint go bhfuil HTML struchtúrtha i gceart ag cásanna de chomhpháirteanna Bootstrap. Smaoinigh ar Bootlint a chur le do slabhra uirlisí forbartha gréasáin Bootstrap ionas nach gcuirfidh aon cheann de na botúin choitianta moill ar fhorbairt do thionscadail.

Pobal

Bí ar an eolas faoi fhorbairt Bootstrap agus déan teagmháil leis an bpobal leis na hacmhainní cabhracha seo.

• Léigh agus liostáil do The Official Bootstrap Blog .
• Déan comhrá le Bootstrappers eile ag baint úsáide as IRC sa irc.freenode.netfhreastalaí, sa chainéal ##bootstrap .
• Chun cabhair a fháil le Bootstrap, cuir ceist ar StackOverflow ag baint úsáide as an gclibtwitter-bootstrap-3 .
• Ba cheart d’fhorbróirí an eochairfhocal a úsáid bootstrapar phacáistí a athraíonn nó a chuireann le feidhmiúlacht Bootstrap agus iad á ndáileadh trí npm nó meicníochtaí seachadta comhchosúla le haghaidh infhionnachtana uasta.
• Faigh samplaí spreagúla de dhaoine ag tógáil le Bootstrap ag an Bootstrap Expo .

Is féidir leat @getbootstrap a leanúint ar Twitter freisin chun na gossip is déanaí agus físeáin ceoil iontacha a fháil.

Freagracht a dhíchumasú

Déanann Bootstrap do leathanaigh a oiriúnú go huathoibríoch do mhéideanna éagsúla scáileáin. Seo conas an ghné seo a dhíchumasú ionas go n-oibríonn do leathanach mar an sampla neamhfhreagrach seo .

Céimeanna chun sofhreagracht leathanaigh a dhíchumasú

1. Fág an radharc a <meta>luaitear sna doiciméid CSS ar lár
2. Sáraigh an widthar an .containerdo gach sraith greille le leithead amháin, mar shampla width: 970px !important;Bí cinnte go dtagann sé seo tar éis an CSS réamhshocraithe Bootstrap. Is féidir leat an rogha a sheachaint !importantle ceisteanna ó na meáin nó le roinnt roghnóir-fu.
3. Má tá barraí nascleanúna á n-úsáid agat, bain gach iompar atá ag titim agus ag méadú.
4. Le haghaidh leagan amach eangaí, bain úsáid as .col-xs-*ranganna de bhreis ar, nó in ionad, na cinn mheánacha/mór. Ná bíodh imní ort, tá scálaí greille na ngléasanna seach-bheaga de réir a chéile ag gach rún.

Beidh Respond.js uait fós le haghaidh IE8 (toisc go bhfuil ár bhfiosruithe ó na meáin fós ann agus gur gá iad a phróiseáil). Díchumasaíonn sé seo na gnéithe "suíomh soghluaiste" de Bootstrap.

Teimpléad Bootstrap le freagrúlacht díchumasaithe

Táimid tar éis na céimeanna seo a chur i bhfeidhm ar shampla. Léigh a cód foinse chun na hathruithe sonracha a cuireadh i bhfeidhm a fheiceáil.

Féach ar shampla neamhfhreagrach

Tacaíocht bhrabhsálaí agus gléas

Tá Bootstrap tógtha chun oibriú is fearr sna brabhsálaithe deisce agus móibíleacha is déanaí, rud a chiallaíonn go bhféadfadh go dtaispeánfadh brabhsálaithe níos sine rindreálacha de chomhpháirteanna áirithe ar stíleanna éagsúla, cé go bhfuil siad ag feidhmiú go hiomlán.

Brabhsálaithe tacaithe

Go sonrach, tacaímid leis na leaganacha is déanaí de na brabhsálaithe agus na hardáin seo a leanas.

Ní thacaítear go sainráite le brabhsálaithe eile a úsáideann an leagan is déanaí de WebKit, Blink, nó Gecko, cibé acu go díreach nó trí API amharc gréasáin an ardáin. Mar sin féin, ba cheart do Bootstrap (i bhformhór na gcásanna) taispeáint agus feidhmiú i gceart sna brabhsálaithe seo freisin. Soláthraítear faisnéis tacaíochta níos sainiúla thíos.

Gléasanna soghluaiste

Go ginearálta, tacaíonn Bootstrap leis na leaganacha is déanaí de bhrabhsálaithe réamhshocraithe gach ardáin mhóra. Tabhair faoi deara nach dtugtar tacaíocht do bhrabhsálaithe seachfhreastalaí (cosúil le Opera Mini, modh Turbo Opera Mobile, UC Browser Mini, Amazon Silk).

Brabhsálaithe deisce

Mar an gcéanna, tacaítear leis na leaganacha is déanaí den chuid is mó de na brabhsálaithe deisce.

Ar Windows, tacaímid le Internet Explorer 8-11 .

I gcás Firefox, chomh maith leis an ngnáthscaoileadh cobhsaí is déanaí, tacaímid freisin leis an leagan is déanaí den Eisiúint Tacaíochta Leathnaithe (ESR) de Firefox.

Go neamhoifigiúil, ba chóir go mbeadh Bootstrap ag breathnú agus a iompar go maith go leor i gCróimiam agus Chrome le haghaidh Linux, Firefox le haghaidh Linux, agus Internet Explorer 7, chomh maith le Microsoft Edge, cé nach bhfuil tacaíocht oifigiúil acu.

Le haghaidh liosta de chuid de na fabhtanna brabhsálaí a gcaithfidh Bootstrap dul i ngleic leo, féach ar ár Wall of browser bugs .

Internet Explorer 8 agus 9 saor in aisce,

Tacaítear le Internet Explorer 8 agus 9 freisin, ach tabhair faoi deara nach dtacaíonn na brabhsálaithe seo go hiomlán le roinnt airíonna CSS3 agus eilimintí HTML5. Ina theannta sin, éilíonn Internet Explorer 8 go n-úsáidfear Respond.js chun tacaíocht a thabhairt do cheisteanna meán.

Tabhair cuairt ar An féidir liom úsáid a bhaint as... le haghaidh sonraí maidir le tacaíocht brabhsálaí do ghnéithe CSS3 agus HTML5.

Internet Explorer 8 agus Respond.js

Bí ar an airdeall faoi na caveatanna seo a leanas agus tú ag úsáid Respond.js i do thimpeallachtaí forbartha agus táirgthe do Internet Explorer 8.

Respond.js agus CSS tras-fearainn

Le Respond.js a úsáid le CSS arna óstáil ar (fo)fhearann ​​eile (mar shampla, ar CDN) tá roinnt socruithe breise ag teastáil. Féach ar na doiciméid Respond.js le haghaidh sonraí.

Freagra.js agusfile://

De bharr rialacha slándála an bhrabhsálaí, ní oibríonn Respond.js le leathanaigh a bhreathnaítear orthu tríd an file://bprótacal (amhail nuair a osclaítear comhad HTML áitiúil). Chun gnéithe sofhreagracha in IE8 a thástáil, féach ar do leathanaigh thar HTTP(S). Féach ar na doiciméid Respond.js le haghaidh sonraí.

Freagra.js agus@import

Ní oibríonn Respond.js le CSS a ndéantar tagairt dó trí @import. Go háirithe, is eol go n-úsáideann roinnt cumraíochtaí Drupal @import. Féach ar na doiciméid Respond.js le haghaidh sonraí.

Internet Explorer 8 agus méid na mbosca

Ní thacaíonn IE8 go hiomlán box-sizing: border-box;nuair a chuirtear le min-width, max-width, min-height, nó max-height. Ar an ábhar sin, amhail v3.0.1, ní úsáidimid a thuilleadh max-widthar .containers.

Internet Explorer 8 agus @font-face

Tá roinnt fadhbanna ag IE8 @font-facenuair a chomhcheanglaítear é le :before. Úsáideann Bootstrap an meascán sin lena Glyphicons. Má tá leathanach i dtaisce, agus á luchtú gan an luch thar an bhfuinneog (ie buail an cnaipe athnuachana nó lódáil rud éigin i iframe) ansin déantar an leathanach a rindreáil sula lódálann an cló. Taispeánfar cuid de na deilbhíní agus tú ag hovering thar an leathanach (comhlacht) agus taispeánfar iad siúd chomh maith le hovering thar na deilbhíní eile. Féach eagrán #13863 le haghaidh sonraí.

IE Modhanna comhoiriúnachta

Ní thacaítear le Bootstrap sna sean-mhodhanna comhoiriúnachta Internet Explorer. Le bheith cinnte go bhfuil tú ag baint úsáide as an modh rindreála is déanaí le haghaidh IE, smaoinigh ar an <meta>gclib chuí a chur ar do leathanaigh:

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

Deimhnigh an modh doiciméad trí na huirlisí dífhabhtaithe a oscailt: brúigh F12agus seiceáil an "Mód Doiciméid".

Tá an chlib seo san áireamh i gcáipéisíocht agus i samplaí uile Bootstrap chun an rindreáil is fearr is féidir a chinntiú i ngach leagan tacaithe de Internet Explorer.

Féach an cheist StackOverflow seo le haghaidh tuilleadh faisnéise.

Internet Explorer 10 i Windows 8 agus Windows Phone 8

Ní dhéanann Internet Explorer 10 idirdhealú idir leithead an ghléis agus leithead an amhairc , agus mar sin ní chuireann sé na ceisteanna meán i CSS Bootstrap i bhfeidhm i gceart. De ghnáth níl le déanamh agat ach blúire sciobtha CSS a chur leis chun é seo a shocrú:

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

Mar sin féin, ní oibríonn sé seo le haghaidh feistí atá ag rith leaganacha Windows Phone 8 níos sine ná Nuashonrú 3 (aka GDR3) , toisc go n-eascraíonn sé go dtaispeánann feistí den sórt sin radharc deisce den chuid is mó in ionad radharc cúng "teileafóin". Chun dul i ngleic leis seo, beidh ort an CSS agus JavaScript seo a leanas a chur san áireamh chun oibriú timpeall an fhabht .

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

Le haghaidh tuilleadh faisnéise agus treoirlínte úsáide, léigh Windows Phone 8 agus Device-Width .

Mar cheann ar aghaidh, cuirimid é seo san áireamh i gcáipéisíocht agus samplaí Bootstrap ar fad mar léiriú.

Safari faoin gcéad slánú

Bhí roinnt trioblóide ag inneall rindreála na leaganacha de Safari roimh v7.1 do OS X agus Safari do iOS v8.0 le líon na n-ionad deachúil a úsáideadh inár .col-*-1ranganna greille. Mar sin dá mbeadh 12 cholún greille aonair agat, thabharfá faoi deara gur tháinig siad aníos gearr i gcomparáid le sraitheanna eile de cholúin. Chomh maith le Safari/iOS a uasghrádú, tá roinnt roghanna agat maidir le réitigh oibre:

• Cuir .pull-rightle do cholún greille deiridh chun an t-ailíniú crua-dheis a fháil
• Tweak do chéatadáin de láimh chun an slánú foirfe a fháil do Safari (níos deacra ná an chéad rogha)

Módúil, barraí nascleanúna, agus méarchláir fhíorúla

Cur thar maoil agus scrollaigh

Tá tacaíocht don overflow: hiddeneilimint <body>teoranta go leor i iOS agus Android. Chuige sin, nuair a scrollaíonn tú thar barr nó bun modha i gceachtar de na brabhsálaithe gléasanna sin, <body>tosóidh an t-ábhar ag scrollú. Féach fabht Chrome #175502 (seasta in Chrome v40) agus fabht WebKit #153852 .

réimsí téacs iOS agus scrollaigh

Amhail iOS 9.3, cé go bhfuil modúl oscailte, má tá teagmháil tosaigh gotha ​​scrollaithe laistigh de theorainn téacsúil <input>nó <textarea>, déanfar an t- <body>ábhar faoin modh a scrollú in ionad an mhódúil féin. Féach ar fhabht WebKit #153856 .

Méarchlár fíorúil

Chomh maith leis sin, tabhair faoi deara má tá tú ag baint úsáide as nascleanúna seasta nó ag baint úsáide as ionchuir laistigh de mhodh, tá fabht rindreála ag iOS nach nuashonraíonn suíomh na n-eilimintí seasta nuair a spreagtar an méarchlár fíorúil. I measc roinnt réitigh ina leith seo tá d’eilimintí a athrú position: absolutenó lasc ama ar fhócas a agairt chun iarracht a dhéanamh an suíomh a cheartú de láimh. Ní láimhseálann Bootstrap é seo, mar sin is fútsa atá sé cinneadh a dhéanamh ar an réiteach is fearr do d’iarratas.

Navbar dropdowns

Ní .dropdown-backdropúsáidtear an eilimint ar iOS sa nav mar gheall ar chastacht an innéacsaithe z. Mar sin, chun anuas a dhúnadh sna barraí nascleanúna, ní mór duit an eilimint anuas a chliceáil go díreach (nó ar aon eilimint eile a chuirfeadh imeacht cliceáil ar iOS ).

Brabhsálaí ag súmáil

Tá sé dosheachanta go dtugann súmáil leathanaigh déantáin rindreála i roinnt comhpháirteanna, i Bootstrap agus sa chuid eile den ngréasán. Ag brath ar an tsaincheist, seans go mbeimid in ann í a réiteach (cuardaigh ar dtús agus ansin ceist a oscailt más gá). Mar sin féin, is gnách linn neamhaird a dhéanamh orthu seo mar is minic nach mbíonn aon réiteach díreach acu seachas réitigh sheacanta.

Greamaitheach :hover/ :focusar shoghluaiste

Cé nach féidir hovering fíor a dhéanamh ar fhormhór na scáileáin tadhaill, déanann an chuid is mó de na brabhsálaithe soghluaiste aithris ar thacaíocht hovering agus déanann siad :hover"greamaitheach". I bhfocail eile, :hovertosaíonn stíleanna ag cur i bhfeidhm tar éis dóibh eilimint a thapáil agus ní stopann siad ag cur isteach orthu ach amháin tar éis don úsáideoir gné éigin eile a thapú. D’fhéadfadh sé seo a bheith ina chúis le stáit Bootstrap :hovera bheith “i bhfostú” go neamh-inmhianaithe ar bhrabhsálaithe dá leithéid. Déanann roinnt brabhsálaithe soghluaiste :focusgreamaitheach freisin. Níl aon réiteach simplí ar na saincheisteanna seo faoi láthair seachas stíleanna den sórt sin a bhaint go hiomlán.

Priontáil

Fiú i roinnt brabhsálaithe nua-aimseartha, is féidir le priontáil a bheith neamhghnách.

Go háirithe, amhail Chrome v32 agus beag beann ar shocruithe corrlaigh, úsáideann Chrome leithead amhairc atá i bhfad níos cúinge ná méid an pháipéir fhisiciúil nuair a bhíonn fiosrúcháin ó na meáin á réiteach agus leathanach gréasáin á phriontáil. Mar thoradh air seo is féidir greille seach-bheag Bootstrap a chur i ngníomh gan choinne agus é á phriontáil. Féach eagrán #12078 agus fabht Chrome #273306 le haghaidh roinnt sonraí. Réitigh oibre a mholtar:

• Glac leis an eangach seach-bheag agus cinntigh go bhfuil cuma inghlactha ar do leathanach faoi.
• Saincheap luachanna na n- @screen-*athróg Lúide ionas go measfar do pháipéar printéir a bheith níos mó ná an páipéar priontála eile.
• Cuir ceisteanna meán saincheaptha leis chun na brisphointí méide eangaí a athrú do na meáin chlóite amháin.

Chomh maith leis sin, amhail Safari v8.0, is féidir le leithead seasta .containera chur faoi deara go n-úsáideann Safari clómhéid neamhghnách beag agus é ag priontáil. Féach #14868 agus WebKit fabht #138192 le haghaidh tuilleadh sonraí. Réiteach féideartha amháin chuige seo is ea an CSS seo a leanas a chur leis:

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

Brabhsálaí stoc Android

Amach as an mbosca, seoltar Android 4.1 (agus fiú roinnt eisiúintí níos nuaí de réir dealraimh) leis an aip Brabhsálaí mar an brabhsálaí gréasáin réamhshocraithe de rogha (seachas Chrome). Ar an drochuair, tá go leor fabhtanna agus neamhréireachtaí ag an app Brabhsálaí le CSS i gcoitinne.

Roghnaigh biachláir

Maidir <select>le heilimintí, ní thaispeánfaidh brabhsálaí stoc Android na taobhrialtáin má tá a border-radiusagus/nó bordercurtha i bhfeidhm. (Féach ar an gceist StackOverflow seo le haghaidh sonraí.) Bain úsáid as an mblúire de chód thíos chun an CSS ciontach a bhaint agus é a dhéanamh <select>mar eilimint gan stíl ar stocbhrabhsálaí Android. Seachnaíonn sniffing an ghníomhaire úsáideora cur isteach ar bhrabhsálaithe 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>

Ar mhaith leat sampla a fheiceáil? Amharc ar an taispeántas JS Bin seo.

Bailitheoirí

Chun an taithí is fearr is féidir a sholáthar do sheanbhrabhsálaithe agus do bhrabhsálaithe bugaí, úsáideann Bootstrap hacks brabhsálaí CSS in áiteanna éagsúla chun CSS speisialta a dhíriú ar leaganacha áirithe de bhrabhsálaí chun oibriú timpeall ar fhabhtanna sna brabhsálaithe iad féin. Is intuigthe go mbíonn na hacks seo ina gcúis le bailíochtaithe CSS gearán a dhéanamh go bhfuil siad neamhbhailí. I gcúpla áit, bainimid úsáid freisin as gnéithe tuirlingthe CSS nach bhfuil caighdeánaithe go hiomlán fós, ach ní úsáidtear iad seo ach amháin le haghaidh feabhsaithe forásach.

Ní hionann na rabhaidh bailíochtaithe seo go praiticiúil ós rud é go ndéanann an chuid neamh-hacky dár CSS bailíochtú go hiomlán agus nach gcuireann na codanna hacky isteach ar fheidhmiú ceart na coda neamhhacky, mar sin an fáth a ndéanaimid neamhaird d'aon ghnó ar na rabhaidh áirithe seo.

Tá roinnt rabhaidh bailíochtaithe HTML fánach agus neamhleanúnacha ag ár ndoiciméid HTML mar gheall ar ár gcuimsiú d'fhabht oibre le haghaidh fabht Firefox áirithe .

Tacaíocht tríú páirtí

Cé nach dtugaimid tacaíocht oifigiúil d’aon fhorlíontáin ná d’aon bhreiseáin tríú páirtí, cuirimid roinnt comhairle úsáideach ar fáil chun cabhrú le fadhbanna féideartha i do thionscadail a sheachaint.

Bosca-mhéid

Tagann roinnt bogearraí tríú páirtí, lena n-áirítear Google Maps agus Google Custom Search Engine, i gcoimhlint le Bootstrap mar gheall ar * { box-sizing: border-box; }, riail a fhágann paddingnach mbíonn tionchar aige ar leithead ríofa deiridh eilimint. Foghlaim tuilleadh faoi mhúnla bosca agus méid ag CSS Seifteanna .

Ag brath ar an gcomhthéacs, féadfaidh tú sáraíocht a dhéanamh de réir mar is gá (Rogha 1) nó méid an bhosca a athshocrú do réigiúin iomlána (Rogha 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();
}

Inrochtaineacht

Cloíonn Bootstrap caighdeáin chomhchoiteanna gréasáin agus — le hiarracht bhreise íosta — is féidir é a úsáid chun suíomhanna a chruthú a bhfuil rochtain orthu siúd a úsáideann AT .

Scipeáil ar an nascleanúint

Má tá go leor naisc ag do nascleanúint agus má thagann sé roimh an bpríomhábhar sa DOM, cuir Skip to main contentnasc roimh an nascleanúint (le haghaidh míniú simplí, féach an t-alt seo Tionscadal A11Y ar naisc scipeála loingseoireachta ). Trí úsáid a bhaint as an .sr-onlyrang cuirfear an nasc scipeála i bhfolach go radhairc, agus cinnteoidh an .sr-only-focusablerang go mbeidh an nasc infheicthe nuair a bheidh sé dírithe (d’úsáideoirí méarchláir a bhfuil radharc orthu).

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

Ceannteidil neadaithe

Agus ceannteidil ( <h1>- <h6>) á neadú agat, ba cheart go mbeadh do phríomh-cheanntásc doiciméad mar <h1>. Ba cheart úsáid loighciúil a bhaint as ceannteidil ina dhiaidh sin <h2>- <h6>ionas gur féidir le léitheoirí scáileáin clár ábhar a chruthú do do leathanaigh.

Foghlaim tuilleadh ag HTML CodeSniffer agus Penn State's AccessAbility .

Codarsnacht dathanna

Faoi láthair, tá cuid de na teaglaim dathanna réamhshocraithe atá ar fáil i Bootstrap (amhail na haicmí cnaipe styled éagsúla, cuid de na dathanna béime cód a úsáidtear le haghaidh bloic cód bunúsacha , an rang cúntóir .bg-primary cúlra comhthéacsúla , agus an dath nasc réamhshocraithe nuair a úsáidtear é ar chúlra bán) cóimheas codarsnachta íseal a bheith acu (faoi bhun an chóimheas molta de 4.5:1 ). Is féidir leis seo fadhbanna a chruthú d’úsáideoirí lagamhairc nó d’úsáideoirí atá dall ar dhath. Seans go mbeidh gá leis na dathanna réamhshocraithe seo a mhodhnú chun a gcodarsnacht agus a n-inléiteacht a mhéadú.

Acmhainní breise

• Leabharmharcanna "HTML Codesniffer" chun saincheisteanna inrochtaineachta a shainaithint
• Síneadh Uirlisí Forbróirí Inrochtaineachta Chrome
• Anailíseoir Codarsnachta Dathanna
• An Tionscadal A11Y
• Doiciméadú inrochtaineachta MDN

Ceisteanna Coitianta Ceadúnais

Eisítear Bootstrap faoi cheadúnas MIT agus is cóipcheart 2019 Twitter é. Boiled síos go dtí smután níos lú, is féidir é a chur síos leis na coinníollacha seo a leanas.

Éilíonn sé duit:

• Coinnigh an ceadúnas agus an fógra cóipchirt san áireamh i gcomhaid CSS agus JavaScript Bootstrap nuair a úsáideann tú iad i do chuid saothair

Ligeann sé duit:

• Íoslódáil agus bain úsáid as Bootstrap, go hiomlán nó go páirteach, chun críocha pearsanta, príobháideacha, gnó inmheánacha nó tráchtála
• Úsáid Bootstrap i bpacáistí nó i dáiltí a chruthaíonn tú
• Athraigh an cód foinse
• Deonaigh focheadúnas chun Bootstrap a mhodhnú agus a dháileadh ar thríú páirtithe nach bhfuil san áireamh sa cheadúnas

Cuireann sé cosc ​​ort:

• Coinnigh na húdair agus úinéirí ceadúnais faoi dhliteanas i leith damáistí mar go gcuirtear Bootstrap ar fáil gan bharántas
• Cruthaitheoirí nó sealbhóirí cóipchirt Bootstrap a bheith faoi dhliteanas
• Athdháil aon phíosa Bootstrap gan sannadh cuí
• Bain úsáid as aon mharcanna ar le Twitter iad ar bhealach ar bith a d’fhéadfadh a rá nó a thabhairt le tuiscint go dtacaíonn Twitter le do dháileadh
• Bain úsáid as aon mharcanna ar le Twitter iad ar bhealach ar bith a d’fhéadfadh a rá nó a thabhairt le tuiscint gur chruthaigh tú na bogearraí Twitter atá i gceist

Ní éilíonn sé duit:

• Cuir foinse Bootstrap féin, nó aon mhodhnuithe a d'fhéadfadh a bheith déanta agat air, san áireamh in aon athdháileadh a d'fhéadfá a chur le chéile lena n-áirítear é
• Cuir isteach na hathruithe a dhéanann tú ar Bootstrap ar ais chuig an tionscadal Bootstrap (cé go spreagtar aiseolas dá leithéid)

Tá ceadúnas iomlán Bootstrap suite i stór an tionscadail chun tuilleadh eolais a fháil.

Aistriúcháin

Tá doiciméid Bootstrap aistrithe go teangacha éagsúla ag baill an phobail. Ní thacaítear le haon cheann acu go hoifigiúil agus b’fhéidir nach mbíonn siad cothrom le dáta i gcónaí.

• Bootstrap 中文文档 (Sínis)
• Bootstrap don Dansk (Danmhairgis)
• Bootstrap in Français (Fraincis)
• Bootstrap auf Deutsch (Gearmáinis)
• Bootstrap in Italiano (Iodáilis)
• Bootstrap 한국어 (Cóiréis)
• Bootstrap em Português do Brasil (Portaingéilis na Brasaíle)
• Bootstrap по-русски (Rúisis)
• Bootstrap en Español (Spáinnis)
• Türkçe Bootstrap (Tuircis)
• Bootstrap українською (Úcráinis)
• Bootstrap bếng Việt (Vítneaimis)

Ní chuidímid le haistriúcháin a eagrú ná a óstáil, ní dhéanaimid ach nasc a dhéanamh leo.

Críochnaithe aistriúchán nua nó níos fearr? Oscail iarratas tarraingthe chun é a chur lenár liosta.