Manghenelo

Sungula hi Bootstrap, rimba leri dumeke swinene emisaveni hinkwayo ro aka tisayiti leti hlamulaka, to sungula hi movha, hi jsDelivr na tluka ro sungula ra xifaniso.

Eka tluka leri

Ku sungula hi ku hatlisa

U lava ku hatlisa u engetela Bootstrap eka phurojeke ya wena? Tirhisa jsDelivr, CDN ya mahala ya xihlovo lexi pfulekeke. Ku tirhisa mufambisi wa tiphasela kumbe u lava ku kopa tifayela ta xihlovo? Khoma ndlela eka tluka ra swilo leswi dawuniloda .

CSS

Kopa-namarheta xitayili <link>eka ya wena <head>emahlweni ka switayele swin’wana hinkwaswo ku layicha CSS ya hina.

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

JS

Swiphemu swa hina swo tala swi lava ku tirhisiwa ka JavaScript leswaku swi tirha. Hi ku kongoma, va lava ti-plugin ta hina ta JavaScript ni Popper . Veka yin’wana ya ti s leti landzelaka<script> ekusuhi na makumu ya matluka ya wena, emahlweni ka </body>thegi yo pfala, ku ti endla ti tirha.

Nyandza

Katsa xiengetelo xin’wana ni xin’wana xa JavaScript xa Bootstrap ni ku titshega hi yin’wana ya tibundle ta hina timbirhi. Havumbirhi bootstrap.bundle.jsna ku bootstrap.bundle.min.jskatsa Popper eka switirhisiwa swa hina na ti-popovers. Ku kuma vuxokoxoko byo tala mayelana na leswi katsekaka eka Bootstrap, hi kombela u vona xiyenge xa hina xa leswi nga endzeni .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Hambanisa

Loko u teka xiboho xo famba na xitshunxo xa swikripti leswi hambaneke, Popper yi fanele ku ta ku sungula (loko u tirhisa switsundzuxo swa switirhisiwa kumbe ti-popover), ivi endzhaku ka sweswo ti-plugin ta hina ta JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Timojula

Loko u tirhisa <script type="module">, hi kombela u languta eka xiyenge xa hina xa ku tirhisa Bootstrap tanihi modula .

Swiphemu swa kona

Xana u lava ku tiva leswaku hi swihi swiphemu leswi lavaka JavaScript na Popper ya hina hi ku kongoma? Click eka link ya show components leyi nga laha hansi. Loko u nga tiyiseki nikatsongo hi xivumbeko xa tluka hi ku angarhela, tshama u ri karhi u hlaya ku kuma xikombiso xa xifaniso xa pheji.

Kombisa swiphemu leswi lavaka JavaScript

Switsundzuxo swa ku hlongoriwa
Tiboto ta swiyimo swo cinca-cinca na bokisi ro kambela/ntirho wa xiya-ni-moya
Carousel ya mahanyelo hinkwawo ya swilayidi, vulawuri, na swikombiso
Pfuxeta ku cinca-cinca ku vonaka ka swilo leswi nga endzeni
Ti dropdowns to kombisa na ku veka (naswona swi lava Popper ) .
Tindlela to kombisa, ku veka ndhawu ni mahanyelo ya ku rhendzeleka
Navbar ku andlala plugin ya hina ya Collapse ku tirhisa mahanyelo yo hlamula
Ti toast to kombisa na ku hlongola
Switirhisiwa na ti-popover to kombisa na ku veka (na swona swi lava Popper ) .
Scrollspy ya mahanyelo ya ku rhendzeleka na ku pfuxetiwa ka ku famba-famba

Xifaniso xo sungula

Tiyisisa leswaku matluka ya wena ma vekiwile hi swipimelo swa sweswinyana swa dizayini na nhluvukiso. Sweswo swi vula ku tirhisa doctype ya HTML5 na ku katsa meta tag ya viewport ya mahanyelo lama faneleke yo hlamula. Swi hlanganise hinkwaswo kutani matluka ya wena ma fanele ma languteka hi ndlela leyi:

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ku kuma magoza lama landzelaka, endzela ti- doc ta Layout kumbe swikombiso swa hina swa ximfumo ku sungula ku andlala swilo swa sayiti ya wena ni swiphemu swa yona.

Swilo swa nkoka swa misava hinkwayo

Bootstrap yi tirhisa voko ra switayele swa nkoka swa misava hinkwayo na swiletelo leswi u nga ta lava ku swi tiva loko u swi tirhisa, hinkwaswo leswi swi nga kwalomu ka ku kongomisiwa ntsena eka ku toloveleka ka switayele swa xihlamusela-marito xo tsemakanya. A hi ngheneni.

Xivumbeko xa doctype xa HTML5

Bootstrap yi lava ku tirhisiwa ka HTML5 doctype. Handle ka yona, u ta vona swin’wana swa funky leswi nga helelangiki switayele, kambe ku katsa na swona a swi fanelanga swi vanga hiccups leyikulu.

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

Meta tag leyi hlamulaka

Bootstrap is developed mobile first , maqhinga lawa eka wona hi antswisaka khodi ya switirhisiwa swa tiselfoni ku sungula ivi hi ringanisa swiphemu tanihilaha swi lavekaka hakona hi ku tirhisa swivutiso swa midiya ya CSS. Ku tiyisisa ku hundzuluxela lokunene na ku khumba ku kurisa eka switirhisiwa hinkwaswo, engetela meta tag ya viewport leyi hlamulaka eka <head>.

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

U nga vona xikombiso xa leswi hi ku tirha eka xifaniso xo sungula .

Ku ringanisiwa ka mabokisi

Ku kuma ku pima loku kongomeke swinene eka CSS, hi cinca box-sizingntikelo wa misava hinkwayo ku suka eka content-boxku ya eka border-box. Leswi swi tiyisisa leswaku paddinga swi khumbi ku anama ko hetelela loku hlayiweke ka xiaki, kambe swi nga vanga swiphiqo eka sofwere yin’wana ya munhu wa vunharhu yo fana na Google Maps na Google Custom Search Engine.

Eka xiendlakalo lexi nga tolovelekangiki lexi u lavaka ku xi tlula, tirhisa nchumu wo fana ni lowu landzelaka:

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

Hi xiphemu lexi nga laha henhla, swiaki leswi pfanganisiweke—ku katsa ni swilo leswi endliweke hi ku tirhisa ::beforena ::after—hinkwaswo swi ta dya ndzhaka ya leswi boxiweke box-sizingswa sweswo .selector-for-some-widget.

Dyondza swo tala hi modele wa bokisi na ku pima mpimo eka CSS Tricks .

Reboot nakambe

Ku antswisiwa ka ku hundzuluxela ka ku tsemakanya ka swihlamusela-marito, hi tirhisa Reboot ku lulamisa ku nga fambisani eka swihlamusela-marito hinkwaswo na switirhisiwa loko hi ri karhi hi nyika ku vuyiseriwa loku nga na mavonelo yo talanyana eka swiaki swa HTML leswi tolovelekeke.

Muganga

Tshama u ri karhi u tiva hi ta nhluvukiso wa Bootstrap naswona u fikelela vaaki hi switirhisiwa leswi pfunaka.

Hlaya u tlhela u tsarisa eka The Official Bootstrap Blog .
Chat na va Bootstrapper kulobye eka IRC. Eka irc.libera.chatsevha, eka #bootstrapxiteji.
Mpfuneto wa ku tirhisiwa wu nga kumeka eka Stack Overflow (tagged bootstrap-5).
Vatumbuluxi va fanele ku tirhisa rito ra nkoka bootstrapeka tiphasela leti cincaka kumbe ku engetela eka ntirho wa Bootstrap loko va hangalasa hi ku tirhisa npm kumbe tindlela to fana ta ku rhumela ku kuma ku tshuburiwa lokukulu.

U nga tlhela u landzelela @getbootstrap eka Twitter ku kuma mahungu ya sweswinyana na ti music video to hlamarisa.