Qalisa ngeBootstrap

I-Bootstrap sisixhobo esinamandla, esipakishwe ngaphambili. Yakha nantoni na-ukusuka kwiprototype ukuya kwimveliso-ngemizuzu.

Kweli phepha

Ukuqala ngokukhawuleza

Qalisa ngokubandakanya i-Bootstrap elungele imveliso ye-CSS kunye neJavaScript nge-CDN ngaphandle kwesidingo sawo nawaphi na amanyathelo okwakha. Yibone xa usebenza nale Bootstrap CodePen demo .

Yenza ifayile entsha index.htmlkwingcambu yeprojekthi yakho. Bandakanya <meta name="viewport">ithegi kunye nokuziphatha okufanelekileyo kokuphendula kwizixhobo eziphathwayo.

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

Bandakanya i-CSS ye-Bootstrap kunye ne-JS. Beka <link>ithegi kwi- <head>CSS yethu, kunye <script>nethegi yethu yeJavaScript bundle (kubandakanya iPopper yokubeka indawo eyehlayo, iipopu, kunye neengcebiso zesixhobo) phambi kokuvalwa </body>. Funda ngakumbi malunga namakhonkco ethu e-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>

Ungabandakanya iPopper kunye neJS yethu ngokwahlukeneyo. Ukuba awucwangcisi ukusebenzisa i-dropdowns, popovers, okanye itooltips, gcina ezinye iikhilobhayithi ngokungaquki iPopper.

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

Molo Lizwe! Vula iphepha kwisikhangeli sakho ozikhethileyo ukuze ubone iphepha lakho le-Bootstrapped. Ngoku ungaqala ukwakha ngeBootstrap ngokwenza eyakho uyilo , ukongeza amacandelo amaninzi , kunye nokusebenzisa imizekelo yethu esemthethweni .

Amakhonkco e-CDN

Njengereferensi, nazi amakhonkco ethu aphambili e-CDN.

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

Ungasebenzisa kwakhona i-CDN ukulanda naluphi na ulwakhiwo lwethu olongezelelweyo oludweliswe kwiphepha leMixholo .

Amanyathelo alandelayo

Funda ngakumbi malunga nolunye useto olubalulekileyo lwemekobume yehlabathi olusetyenziswa yiBootstrap.
Funda malunga nokubandakanywa kwiBootstrap kwicandelo lethu lemixholo kunye noluhlu lwamacandelo afuna iJavaScript engezantsi.
Ngaba ufuna amandla angakumbi? Cinga ngokwakha ngeBootstrap ngokubandakanya iifayile zomthombo ngokusebenzisa umphathi wepakethe .
Ujonge ukusebenzisa iBootstrap njengemodyuli ene <script type="module">? Nceda ubhekisele ekusebenziseni kwethu i-Bootstrap njengecandelo lemodyuli .

Amacandelo e-JS

Ngaba unomdla wokuba zeziphi izinto ezifuna ngokucacileyo iJavaScript yethu kunye nePopper? Cofa ikhonkco lamacandelo angezantsi. Ukuba awuqinisekanga kwaphela malunga nesakhiwo sephepha ngokubanzi, qhubeka ufunda umzekelo wetemplate yephepha.

Bonisa amalungu afuna iJavaScript

Izaziso zokugxotha
Amaqhosha okuguqula iimeko kunye nokukhangela ibhokisi/umsebenzi werediyo
I-Carousel yazo zonke izilayidi zokuziphatha, ulawulo, kunye nezalathi
Ukugoqa ukuze uguqule ukubonakala komxholo
Ukwehla kokubonisa kunye nokubeka (ikwafuna iPopper )
Iimodyuli zokubonisa, ukubeka, kunye nokuziphatha kokuskrola
I-Navbar yokwandisa iiplagi zethu zokuLahla kunye ne-Offcanvas ukuphumeza ukuziphatha okuphendulayo
I-Navs nge-Tab plugin yokuguqula iipaneli zomxholo
I-offcanvases yokubonisa, ukubeka, kunye nokuziphatha kokuskrola
I-Scrollspy yokuziphatha kokuskrola kunye nohlaziyo lokukhangela
Iithowusti zokubonisa kunye nokugxotha
Iingcebiso zezixhobo kunye neepopovers zokubonisa kunye nokubeka (ikwafuna iPopper )

Iiglobals ezibalulekileyo

I-Bootstrap isebenzisa isitayile esibalulekileyo sehlabathi kunye noseto, zonke eziphantse zibe zilungiselelwe ngokukodwa ukuqheleka kwezitayile zebrawuza. Masingene ngaphakathi.

HTML5 doctype

I-Bootstrap ifuna ukusetyenziswa kwe-HTML5 doctype. Ngaphandle kwayo, uya kubona isitayile esimnandi nesingaphelelanga.

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

Isabele meta tag

I-Bootstrap iphuhliswa ngeselfowuni kuqala , isicwangciso apho silungiselela ikhowudi yezixhobo eziphathwayo kuqala kwaye emva koko sinyuse amacandelo njengoko kuyimfuneko kusetyenziswa imibuzo yemidiya yeCSS. Ukuqinisekisa unikezelo olululo kunye nokuchukumisa ukusondeza kuzo zonke izixhobo, yongeza i-meta tag ephendulayo kwindawo yakho <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Unokubona umzekelo wale nto kwisenzo kwisiqalo esikhawulezayo .

Ubungakanani bebhokisi

Ukufumana ukulinganisa okuthe ngqo kwi-CSS, sitshintsha box-sizingixabiso lehlabathi ukusuka content-boxkwi border-box. Oku kuqinisekisa paddingukuba akuchaphazeli ububanzi obubaliweyo bokugqibela bento, kodwa kunokubangela iingxaki ngesoftware yomntu wesithathu efana neeMephu zikaGoogle kunye neNjini yokuKhangela kaGoogle.

Ngezihlandlo ezinqabileyo kufuneka uyihoxise, sebenzisa into efana nale ilandelayo:

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

Ngolu lwazi lungasentla, izinto ezibekwe kwindlwane-kuquka umxholo owenziweyo nge ::before-- ::afterzonke ziya kudla ilifa box-sizingokukhankanyiweyo .selector-for-some-widget.

Funda ngakumbi malunga nemodeli yebhokisi kunye nokulinganisa kwiCSS Tricks .

Qalisa kwakhona

Kunikezelo oluphuculweyo lwesikhangeli esinqamlezayo, sisebenzisa ukuQalisa kwakhona ukulungisa ukungangqinelani kwizikhangeli zonke kunye nezixhobo ngelixa sibonelela ngokusetha kwakhona okunoluvo olungakumbi kwizinto eziqhelekileyo zeHTML.

Uluntu

Hlala usexesheni kuphuhliso lweBootstrap kwaye ufikelele kuluntu ngezi zixhobo ziluncedo.

Funda kwaye ubhalise kwiBlog ye-Bootstrap esemthethweni .
Buza kwaye ujonge iingxoxo zethu zeGitHub .
Thetha nabanye ooBootstrappers kwi-IRC. Kumncedisi irc.libera.chat, #bootstrapkwitshaneli.
Uncedo lokuphumeza lunokufunyanwa kwi-Stack Overflow (iphawulwe bootstrap-5).
Abaphuhlisi kufuneka basebenzise igama elingundoqo bootstrapkwiipakethe eziguqula okanye zongeza kumsebenzi we-Bootstrap xa usasazwa nge- npm okanye iindlela zonikezelo ezifanayo zokufumana okuphezulu.

Unokulandela @getbootstrap kwi-Twitter ngentlebendwane yamva nje kunye neevidiyo zomculo ezothusayo.