Réamhrá

Cuir tús le Bootstrap, an creat is mó tóir ar domhan chun suíomhanna sofhreagracha den chéad uair a thógáil, le jsDelivr agus leathanach tosaigh teimpléid.

Tús tapa

Ag iarraidh Bootstrap a chur le do thionscadal go tapa? Úsáid jsDelivr, CDN foinse oscailte saor in aisce. Bain úsáid as bainisteoir pacáiste nó gá a íoslódáil na comhaid foinse? Téigh go dtí an leathanach íoslódálacha .

CSS

Cóipeáil an stílbhileog <link>isteach i do stílbhileog <head>roimh gach stílbhileog eile chun ár CSS a luchtú.

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

JS

Éilíonn go leor dár gcomhpháirteanna úsáid JavaScript chun feidhmiú. Go sonrach, éilíonn siad jQuery , Popper , agus ár breiseán JavaScript féin. Bainimid úsáid as tógáil caol jQuery , ach tacaítear leis an leagan iomlán freisin.

Cuir ceann amháin díobh seo <script>a leanas in aice le deireadh do leathanaigh, díreach roimh an </body>chlib deiridh, chun iad a chumasú. Caithfidh jQuery teacht ar dtús, ansin Popper, agus ansin ár breiseán JavaScript.

Beart

Cuir gach breiseán JavaScript Bootstrap san áireamh le ceann dár dhá bheart. An dá bootstrap.bundle.jsagus bootstrap.bundle.min.jsáirítear Popper dár leideanna uirlisí agus popovers, ach ní jQuery . Cuir jQuery san áireamh ar dtús, ansin beart Bootstrap JavaScript. Chun tuilleadh eolais a fháil faoi cad atá san áireamh i Bootstrap, féach le do thoil ar ár gcuid ábhar .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Scartha

Má shocraíonn tú dul leis an réiteach scripteanna ar leith, caithfidh Popper teacht ar dtús (má tá leideanna uirlisí nó popovers in úsáid agat), agus ansin ár breiseán JavaScript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Comhpháirteanna

Aisteach go leor cé na comhpháirteanna a dteastaíonn jQuery, ár JavaScript, agus Popper go sonrach? Cliceáil ar an nasc comhpháirteanna seó thíos. Mura bhfuil tú cinnte faoi struchtúr an leathanaigh, lean ort ag léamh le haghaidh teimpléad leathanach mar shampla.

Taispeáin comhpháirteanna a dteastaíonn JavaScript uathu

Foláirimh maidir le dífhostú
Cnaipí le haghaidh staid scoránaithe agus feidhmiúlacht ticbhosca/raidió
Timpealláin do gach iompar sleamhnáin, rialuithe, agus táscairí
Laghdaigh chun infheictheacht an ábhair a scoránú
Anuas anuas le haghaidh taispeáint agus suite (éilíonn Popper freisin )
Modhanna chun iompar a thaispeáint, a shuíomh agus a scrollbharra
Navbar chun ár mbreiseán Collapse a leathnú chun iompar sofhreagrach a chur i bhfeidhm
Scrollspy le haghaidh iompar scrollbharra agus nuashonruithe loingseoireachta
Leideanna uirlisí agus popovers chun iad a thaispeáint agus a shuíomh (éilíonn Popper freisin )

Teimpléad tosaithe

Bí cinnte go mbeidh do leathanaigh socraithe leis na caighdeáin dearaidh agus forbartha is déanaí. Ciallaíonn sé sin úsáid a bhaint as doctype HTML5 agus lena n-áirítear meitea-chlib radhairc le haghaidh iompraíochtaí sofhreagracha cuí. Cuir é go léir le chéile agus ba chóir go mbeadh cuma mar seo ar do leathanaigh:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Sin go léir atá uait le haghaidh riachtanais fhoriomlána na leathanach. Tabhair cuairt ar na doiciméid Leagan Amach nó ar ár samplaí oifigiúla le tosú ag leagan amach ábhar agus comhpháirteanna do shuíomh.

Domhandaí tábhachtacha

Úsáideann Bootstrap dornán de stíleanna agus de shocruithe tábhachtacha domhanda nach mór duit a bheith ar an eolas fúthu agus iad á n-úsáid, agus iad go léir dírithe go heisiach ar normalú stíleanna trasbhrabhsálaí. Léimimis isteach.

HTML5 doiciméad

Éilíonn Bootstrap úsáid an doctype HTML5. Gan é, feicfidh tú roinnt stílithe funky neamhiomlán, ach níor cheart go n-áireofaí é a bheith ina chúis le haon deacrachtaí móra.

<!doctype html>
<html lang="en">
  ...
</html>

Meta chlib sofhreagrach

Forbraítear Bootstrap soghluaiste ar dtús , straitéis ina ndéanaimid an cód a bharrfheabhsú le haghaidh gléasanna soghluaiste ar dtús agus ansin comhpháirteanna a mhéadú de réir mar is gá ag baint úsáide as fiosrúcháin CSS ó na meáin. Chun rindreáil cheart agus súmáil tadhaill a chinntiú do gach feiste, cuir an meitea-chlib amhairc sofhreagrach le do <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Is féidir leat sampla de seo a fheiceáil i ngníomh sa teimpléad tosaithe .

Bosca-mhéid

Le haghaidh méide níos simplí i CSS, aistrímid an box-sizingluach domhanda content-boxó border-box. Cinntíonn paddingsé seo nach gcuireann sé isteach ar leithead ríofa deiridh eilimint, ach is féidir leis fadhbanna a chruthú le roinnt bogearraí tríú páirtí cosúil le Google Maps agus Google Custom Search Engine.

Ar an ócáid annamh is gá duit é a shárú, bain úsáid as rud éigin mar seo a leanas:

.selector-for-some-widget {
  box-sizing: content-box;
}

Leis an mblúire thuas, gheobhaidh na heilimintí neadaithe - lena n-áirítear ábhar ginte via ::beforeand ::after- go léir oidhreacht an méid sonraithe box-sizingdon .selector-for-some-widget.

Foghlaim tuilleadh faoi mhúnla bosca agus méid ag CSS Seifteanna .

Atosaigh

Ar mhaithe le rindreáil trasbhrabhsálaí feabhsaithe, bainimid úsáid as Atosaigh chun neamhréireachtaí ar fud brabhsálaithe agus gléasanna a cheartú agus ag an am céanna athshocraithe beagán níos tuairimí a sholáthar ar eilimintí coitianta HTML.

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 .
Comhrá a dhéanamh le Bootstrappers eile san IRC. Ar an irc.libera.chatbhfreastalaí, sa #bootstrapchainéal.
Is féidir cabhair cur chun feidhme a fháil ag Stack Overflow (clibeáilte bootstrap-4).
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.

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.

CSPanna agus SVGanna leabaithe

Áiríonn go leor comhpháirteanna Bootstrap SVGanna leabaithe inár CSS chun comhpháirteanna a stíliú go comhsheasmhach agus go héasca ar fud brabhsálaithe agus gléasanna. I gcás eagraíochtaí a bhfuil cumraíochtaí CSP níos déine acu , tá gach cás dár SVGanna leabaithe doiciméadaithe againn (a chuirtear i bhfeidhm go léir trí background-image) ionas gur féidir leat do roghanna a athbhreithniú ar bhealach níos cruinne.

Cnaipe dúnta (úsáidtear é i bhfoláirimh agus i módúil)
Seiceálacha saincheaptha agus cnaipí raidió
Lasca foirmeacha
Deilbhíní bailíochtaithe foirmeacha
Roghchláir roghnaithe saincheaptha
Rialuithe timpealláin
Navbar cnaipí scoránaigh

Bunaithe ar chomhrá pobail , áirítear ar roinnt roghanna chun aghaidh a thabhairt air seo i do bhunachar cód féin sócmhainní a óstáiltear go háitiúil a chur in ionad na URLanna, na híomhánna a bhaint agus íomhánna inlíne a úsáid (ní féidir i ngach comhpháirt), agus do CSP a mhodhnú. Is é an moladh atá againn ná do bheartais slándála féin a athbhreithniú go cúramach agus cinneadh a dhéanamh ar an mbealach is fearr chun cinn, más gá.