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.

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

JS

Swiphemu swa hina swo tala swi lava ku tirhisiwa ka JavaScript leswaku swi tirha. Hi ku kongoma, va lava jQuery , Popper , na ti-plugin ta hina ta JavaScript. Hi tirhisa jQuery's slim build , kambe vuhundzuluxeri lebyi heleleke na byona bya seketeriwa.

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. jQuery yi fanele ku sungula ku ta, ivi ku landzela Popper, ivi ku landzela ti-plugin ta hina ta JavaScript.

Nyandza

Katsa plugin yin’wana na yin’wana ya Bootstrap JavaScript na yin’wana ya ti bundle ta hina timbirhi. Havumbirhi bootstrap.bundle.jsna ku bootstrap.bundle.min.jskatsa Popper eka switsundzuxo swa hina swa switirhisiwa na ti-popover, kambe ku nga ri jQuery . Katsa jQuery ku sungula, kutani u katsa Bootstrap JavaScript bundle. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Swiphemu swa kona

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

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
Scrollspy ya mahanyelo ya ku rhendzeleka na ku pfuxetiwa ka ku famba-famba
Switirhisiwa na ti-popover to kombisa na ku veka (na swona swi lava Popper ) .

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Sweswo hi swona ntsena leswi u swi lavaka eka swilaveko swa pheji hi ku angarhela. Endzela ti- doc ta Layout kumbe swikombiso swa hina swa ximfumo ku sungula ku veka 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, shrink-to-fit=no">

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 elemente, kambe swi nga vanga swiphiqo eka software yin’wana ya munhu wa vunharhu ku 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 na vuxokoxoko bya nhluvukiso wa Bootstrap na ku 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-4).
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 na tona to rhumela ku kuma ku tshuburiwa lokukulu.

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

Ti-CSP na ti-SVG leti nghenisiweke

Swiphemu swo hlayanyana swa Bootstrap swi katsa ti-SVG leti nghenisiweke eka CSS ya hina ku xitayili swiphemu hi ku landzelelana na hi ku olova eka swihlamusela-marito na switirhisiwa. For organizations with more strict CSP configurations , hi tsarile swikombiso hinkwaswo swa ti-SVG ta hina leti nghenisiweke (hinkwaswo leswi swi tirhisiwaka hi ku tirhisa background-image) leswaku u ta kota ku kambisisa hi vukheta swihlawulekisi swa wena.

Pfala button (yi tirhisiwa eka switsundzuxo na ti modals) .
Mabokisi yo kambela ya ntolovelo ni swikomba-nkarhi swa xiya-ni-moya
Swiwitsi swa xivumbeko
Swifaniso swa ku tiyisisa swivumbeko
Timenyu to hlawula hi ku landza swilaveko swa wena
Swilawuri swa carousel
Navbar yi cinca-cinca swikomba-nkarhi

Hi ku ya hi mbulavurisano wa vaaki , swihlawulekisi swin’wana swo lulamisa leswi eka khodi ya wena n’wini swi katsa ku siva ti-URL hi nhundzu leyi khomiweke laha tikweni, ku susa swifaniso ni ku tirhisa swifaniso swa le ndzeni ka layini (a swi koteki eka swiphemu hinkwaswo), ni ku cinca CSP ya wena. Xitsundzuxo xa hina i ku kambisisa hi vukheta tipholisi ta wena ta vuhlayiseki na ku teka xiboho xa ndlela leyinene yo ya emahlweni, loko swi laveka.