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, leyi nyikiweke mahala hi vanhu va le jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Swiphemu swa hina swo tala swi lava ku tirhisiwa ka JavaScript leswaku swi tirha. Hi ku kongoma, ti lava jQuery , Popper.js , na ti-plugin ta hina ta JavaScript. Veka ti <script>s leti landzelaka 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.js, ivi ku landzela ti-plugin ta hina ta JavaScript.

Hi tirhisa jQuery's slim build , kambe vuhundzuluxeri lebyi heleleke na byona bya seketeriwa.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Xana u lava ku tiva leswaku hi swihi swiphemu leswi lavaka jQuery, JS ya hina, na Popper.js 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.

Ya hina bootstrap.bundle.jsna ku bootstrap.bundle.min.jskatsa Popper , kambe ku nga ri jQuery . Ku kuma vuxokoxoko byo tala mayelana na leswi katsekaka eka Bootstrap, hi kombela u vona xiyenge xa hina xa leswi nga endzeni .

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 xiyimo (naswona swi lava Popper.js ) .
Tindlela to kombisa, ku veka ndhawu ni mahanyelo ya ku rhendzeleka
Navbar ku andlala plugin ya hina ya Collapse ku tirhisa mahanyelo yo hlamula
Switirhisiwa na ti-popover to kombisa na ku veka (naswona swi lava Popper.js ) .
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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 lemuka 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.

Landzelela @getbootstrap eka Twitter .
Hlaya u tlhela u tsarisa eka The Official Bootstrap Blog .
Chat na va Bootstrapper kulobye eka IRC. Eka irc.freenode.netsevha, 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 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.