Cuir tús le Bootstrap

Is foireann uirlisí cumhachtach tosaigh é Bootstrap lán-ghnéithe. Tóg rud ar bith - ó fhréamhshamhail go táirgeadh - i nóiméid.

Ar an leathanach seo

Tús tapa

Cuir tús leis trí CSS agus JavaScript atá réidh le haghaidh táirgeadh Bootstrap a áireamh trí CDN gan gá le haon chéimeanna tógála. Féach go praiticiúil é leis an taispeántas Bootstrap CodePen seo .

Cruthaigh index.htmlcomhad nua i do fhréamh tionscadail. Cuir an <meta name="viewport">chlib san áireamh freisin le haghaidh iompar sofhreagrach cuí i ngléasanna soghluaiste.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Cuir CSS agus JS Bootstrap san áireamh. Cuir an <link>chlib sa <head>CSS, agus an <script>chlib le haghaidh ár mbeart JavaScript (lena n-áirítear Popper le haghaidh suímh anuas, poppers, agus leideanna uirlisí) roimh dhúnadh </body>. Tuilleadh eolais faoinár naisc CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Is féidir leat Popper agus ár JS a áireamh ar leithligh freisin. Mura bhfuil sé ar intinn agat dropdowns, popovers, nó leideanna uirlisí a úsáid, sábháil roinnt cilibheart gan Popper a áireamh.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Dia duit, domhan! Oscail an leathanach i do rogha bhrabhsálaí chun do leathanach Bootstrapped a fheiceáil. Anois is féidir leat tosú ag tógáil le Bootstrap trí do leagan amach féin a chruthú , an iliomad comhpháirteanna a chur leis , agus ár samplaí oifigiúla a úsáid .

naisc CDN

Mar thagairt, seo ár naisc CDN bunscoile.

Cur síos	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Is féidir leat an CDN a úsáid freisin chun aon cheann dár bhfoirgnimh bhreise atá liostaithe ar an leathanach Ábhar a fháil .

Na chéad chéimeanna eile

Léigh le beagán eile faoi roinnt socruithe tábhachtacha comhshaoil domhanda a úsáideann Bootstrap.
Léigh faoi na rudaí atá san áireamh i Bootstrap inár gcuid ábhar agus liosta na gcomhpháirteanna a dteastaíonn JavaScript uathu thíos.
Teastaíonn beagán níos mó cumhachta? Smaoinigh ar thógáil le Bootstrap trí na comhaid foinseacha a chur san áireamh tríd an mbainisteoir pacáiste .
Ag féachaint le Bootstrap a úsáid mar mhodúl le <script type="module">? Féach ar ár n- úsáid Bootstrap mar rannán modúil.

Comhpháirteanna JS

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 breiseán Collapse agus Offcanvas a leathnú chun iompraíochtaí sofhreagracha a chur i bhfeidhm
Nascleanúint leis an mbreiseán Tab chun pannaí ábhair a scoránú
Offcanvases chun iompar a thaispeáint, a shuíomh agus a scrollbharra
Scrollspy le haghaidh iompar scrollbharra agus nuashonruithe loingseoireachta
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 )

Domhandaí tábhachtacha

Fostaíonn Bootstrap dornán de stíleanna agus de shocruithe tábhachtacha domhanda, agus iad go léir dírithe beagnach go heisiach ar stíleanna trasbhrabhsálaí a normalú . Léimimis isteach.

HTML5 doiciméad

Éilíonn Bootstrap úsáid an doctype HTML5. Gan é, feicfidh tú roinnt styling funky agus neamhiomlán.

<!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 go tapa .

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

Fan suas chun dáta ar 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 .
Iarr ar ár bPlé GitHub agus déan iniúchadh air .
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.