Source

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, curtha ar fáil saor in aisce ag na daoine ag jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Éilíonn go leor dár gcomhpháirteanna úsáid JavaScript chun feidhmiú. Go sonrach, teastaíonn jQuery , Popper.js , agus ár bhforlíontáin JavaScript féin uathu. Cuir na <script>s seo 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.js, agus ansin ár breiseán JavaScript.

Bainimid úsáid as tógáil caol jQuery , ach tacaítear leis an leagan iomlán freisin.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Ár bootstrap.bundle.jsagus bootstrap.bundle.min.jsfolaíonn Popper , ach ní jQuery . Chun tuilleadh eolais a fháil faoi cad atá san áireamh i Bootstrap, féach le do thoil ar ár gcuid ábhar .

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ú
  • Laghduithe le haghaidh taispeáint agus suite (éilíonn Popper.js 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
  • Leideanna uirlisí agus popovers chun iad a thaispeáint agus a shuíomh (éilíonn Popper.js freisin )
  • Scrollspy le haghaidh iompar scrollbharra agus nuashonruithe loingseoireachta

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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Lean @getbootstrap ar Twitter .
  • Léigh agus liostáil do The Official Bootstrap Blog .
  • Comhrá a dhéanamh le Bootstrappers eile san IRC. Ar an irc.freenode.netbhfreastalaí, 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.