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.

Ar an leathanach seo

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Éilíonn go leor dár gcomhpháirteanna úsáid JavaScript chun feidhmiú. Go sonrach, éilíonn siad ár breiseán JavaScript féin agus Popper . 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ú.

Beart

Cuir gach breiseán JavaScript Bootstrap agus spleáchas 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. 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/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

modúil

Má úsáideann tú <script type="module">, féach le do thoil ar ár n- úsáid Bootstrap mar chuid modúil .

Comhpháirteanna

Aisteach go leor cad iad na comhpháirteanna a éilíonn ár JavaScript agus ár bPoipéar 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.

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
Offcanvases chun iompar a thaispeáint, a shuíomh agus a scrollbharra
Tósta le taispeáint agus le díbhe
Leideanna uirlisí agus popovers chun iad a thaispeáint agus a shuíomh (éilíonn Popper 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Le haghaidh na chéad chéimeanna eile, tabhair cuairt ar na doiciméid Leagan Amach nó ar ár samplaí oifigiúla chun 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">

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í ar nós 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-5).
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 ag dá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.