Ku bilow Bootstrap

Bootstrap waa xirmo qalabeed oo xoog badan, ka kooban sifo hore. Ku dhis wax kasta-laga bilaabo prototype ilaa wax-soo-saar-daqiqo gudaheed.

Boggaan

Bilaw degdeg ah

Ku bilow adigoo ku daraya soo saarista Bootstrap ee u diyaarsan CSS iyo JavaScript iyada oo loo sii marayo CDN adoon u baahnayn wax talaabooyin dhismo ah. Si ficil ahaan ugu arag Bootstrap CodePen demo .

Ku samee index.htmlfayl cusub xididka mashruuca Ku dar <meta name="viewport">summada iyo sidoo kale hab- dhaqanka habboon ee ka jawaabista aaladaha moobaylka.

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

Ku dar Bootstrap's CSS iyo JS. Dhig <link>summada <head>CSS-kayaga, iyo <script>summada xidhmadayada JavaScript-ka (ay ku jirto Popper meelaynta hoos-u-dhaca, poppers, iyo qalabyada) ka hor xidhitaanka </body>. Baro wax badan oo ku saabsan iskuxirayaashayada 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>

Waxa kale oo aad ku dari kartaa Popper iyo JS-kayaga si gaar ah. Haddii aadan qorsheyneynin inaad isticmaasho hoos-u-dhac, popovers, ama qalab-tips, badbaadi xoogaa kilobytes ah adigoon ku darin Popper.

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

Hello, adduunyo! Ku fur bogga browserka aad dooratay si aad u aragto boggaga Bootstrapped. Hadda waxaad ku bilaabi kartaa inaad ku dhisto Bootstrap adiga oo abuuraya qaab adiga kuu gaar ah , ku dara daraasiin qaybood , oo isticmaalaya tusaalayaashayada rasmiga ah .

Xiriirinta CDN

Tixraac ahaan, waa kuwan isku xirka CDN-yada aasaasiga ah.

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

Waxa kale oo aad u isticmaali kartaa CDN si aad u soo qaadato mid kasta oo ka mid ah dhismooyinkayaga dheeraadka ah ee ku taxan bogga Tusmada .

Tallaabooyinka xiga

Wax yar ka akhri qaar ka mid ah goobaha muhiimka ah ee deegaanka caalamiga ah ee Bootstrap isticmaalo.
Ka akhri waxa ku jira Bootstrap qaybtayada iyo liiska qaybaha u baahan JavaScript ee hoose.
Ma u baahan tahay xoogaa xoog badan? Tixgeli in lagu dhiso Bootstrap adiga oo ku daraya faylasha isha iyada oo loo marayo maareeyaha xirmada .
Ma waxaad raadineysaa inaad u isticmaasho Bootstrap module ahaan <script type="module">? Fadlan tixraac adigoo isticmaalaya Bootstrap qayb module ah.

Qaybaha JS

Ma jeceshahay qaybaha sida cad ugu baahan JavaScript iyo Popper? Guji isku xirka qaybaha bandhiga hoose. Haddii aadan gabi ahaanba ka hubin qaabka guud ee bogga, sii wad akhrinta tusaalaha bogga template.

Muuji qaybaha u baahan JavaScript

Ogeysiisyada shaqo ka joojinta
Badhamada roga gobolada iyo sanduuqa hubinta/shaqaynta raadiyaha
Carousel ee dhammaan dabeecadaha slide, kontaroolada, iyo tilmaamayaasha
U dumi si aad u leexiso muuqaalka nuxurka
Hoos u dhigista muujinta iyo meelaynta (sidoo kale waxay u baahan tahay Popper )
Hababka muujinta, meelaynta, iyo hab-dhaqanka-rogid
Navbar ee loogu talagalay fidinta Burburka iyo Offcanvas plugins si loo hirgeliyo dabeecadaha ka jawaaba
Navs leh plugin Tab si loogu rogo muraayadaha nuxurka
Garoomada bannaanka ah ee muujinta, meel dhigista, iyo dhaqanka duuduubka
Scrollspy ee habdhaqanka rogrogid iyo cusboonaysiinta navigation
Roodhadhka bandhigga iyo tuurista
Aaladaha iyo kor u qaadida bandhigga iyo meelaynta (sidoo kale waxay u baahan tahay Popper )

Caalamka oo muhiim ah

Bootstrap waxa ay shaqaalaysiisay dhawr nooc oo muhiim ah oo caalami ah iyo habayn, kuwaas oo dhamaantood si gaar ah ugu jihaysan sidii caadiga ahayd ee hababka browserka isdhaafsan. Aan quusno.

HTML5 docture

Bootstrap wuxuu u baahan yahay isticmaalka HTML5 doctype. La'aanteed, waxaad arki doontaa qaar maaweelo ah oo aan dhameystirneyn.

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

Meta tag jawaabta leh

Bootstrap ayaa marka hore la horumariyaa mobilka , waa istaraatijiyad aan ugu wanajino koodka aaladaha moobaylka marka hore ka dibna kor u qaadno qaybaha sida loo baahdo anagoo adeegsanayna su'aalaha warbaahinta CSS. Si aad u hubiso samaynta saxda ah iyo taabashada soo dhawaynta qalabka oo dhan, ku dar calaamada meta ee daawashada jawaabta <head>kaaga

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

Waxaad arki kartaa tusaale tan ku saabsan ficil ahaan bilawga degdega ah .

Cabbirka sanduuqa

Si loo cabbiro toosan badan ee CSS, waxaan ka beddeleynaa box-sizingqiimaha caalamiga ah oo aan content-boxu beddelno border-box. Tani waxay hubinaysaa in paddingaanay saamaynaynin ballaca ugu dambeeya ee curiyaha, laakiin waxay dhibaato ku keeni kartaa qaar ka mid ah barnaamijyada software-ka sida Khariidadaha Google iyo Google Custom Search Engine.

Marar dhif ah oo aad u baahan tahay inaad ka gudubto, isticmaal wax sida kuwan soo socda:

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

Qaybaha kore, canaasiirta buul-ku-jirta- oo ay ku jiraan nuxurka la soo mariyey ::beforeiyo ::after— waxay dhammaan dhaxli doonaan waxa loo box-sizingcayimay .selector-for-some-widget.

Baro wax badan oo ku saabsan moodelka sanduuqa iyo cabbirida CSS Tricks .

Dib u bilow

Si loo horumariyo samaynta biraawsarraha, waxaanu isticmaalnaa Reboot si aanu u saxno ismaandhaafka ka dhex jira daalacashada iyo aaladaha anagoo bixinayna dib-u-dejinno fikrado badan leh oo ku saabsan curiyeyaasha HTML ee caadiga ah.

Bulshada

La soco wixii cusub ee ku saabsan horumarinta Bootstrap oo la xiriir bulshada agabkan waxtarka leh.

Akhri oo rukunso Blog-ga Bootstrap-ka Rasmiga ah .
Weydii oo baadh wada- hadalladayada GitHub .
La hadal Bootstrappers kale ee IRC. On irc.libera.chatserver-ka, #bootstrapkanaalka.
Caawinta hirgelinta waxaa laga heli karaa Stack Overflow (tagged bootstrap-5).
Horumariyayaashu waa inay adeegsadaan ereyga muhiimka ah bootstrapee xirmooyinka wax ka beddelaya ama ku dara shaqada Bootstrap marka loo qaybinayo npm ama hababka gudbinta la midka ah si loo helo ugu badnaan.

Waxaad sidoo kale kala socon kartaa @getbootstrap Twitter- ka xanta ugu dambeysay iyo muuqaalada muusiga ee cajiibka ah.