Sungula hi Bootstrap

Bootstrap i xitirhisiwa xa matimba, lexi nga ni swihlawulekisi swa le mahlweni. Aka xin’wana ni xin’wana—ku sukela eka xikombiso ku ya eka vuhumelerisi—hi timinete ti nga ri tingani.

Eka tluka leri

Ku sungula hi ku hatlisa

Sungula hi ku katsa CSS ya Bootstrap leyi lunghekeleke vuhumelerisi na JavaScript hi ku tirhisa CDN handle ka xilaveko xa magoza wahi na wahi yo aka. Swi vona hi ku tirhisa hi demo leyi ya Bootstrap CodePen .

Endla fayili leyintshwa index.htmleka rimitsu ra wena ra phurojeke. Katsa <meta name="viewport">thegi xikan’we na mahanyelo lama faneleke yo hlamula eka switirhisiwa swa tiselfoni.

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

Katsa na CSS na JS ya Bootstrap. Veka <link>thegi eka ya <head>ya CSS ya hina, na <script>thegi ya bundle ya hina ya JavaScript (ku katsa na Popper ya ku veka swilo leswi nga ehansi, ti-popper, na switsundzuxo) ku nga si pfala </body>. Dyondza swo tala hi swihlanganisi swa hina swa 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>

U nga ha tlhela u katsa Popper na JS ya hina hi ku hambana. Loko u nga kunguhati ku tirhisa ti-dropdown, ti-popover, kumbe switsundzuxo swa switirhisiwa, hlayisa tikhilobayiti tin’wana hi ku nga katsi 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>

Xewani, misava! Pfula tluka eka browser ya wena leyi u yi hlawuleke ku vona tluka ra wena ra Bootstrapped. Sweswi u nga sungula ku aka hi Bootstrap hi ku tiendlela layout ya wena , u engetela swiphemu swo tala , na ku tirhisa swikombiso swa hina swa ximfumo .

Swihlanganisi swa CDN

Tanihi xikombo, hi leswi swihlanganisi swa hina swa nkoka swa CDN.

Nhlamuselo	URL ya kona
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`

U nga ha tlhela u tirhisa CDN ku teka xin'wana na xin'wana xa swiaki swa hina swo engetela leswi xaxametiweke eka tluka ra Swilo leswi nga endzeni .

Magoza lama landzelaka

Hlaya nyana hi swiletelo swin’wana swa nkoka swa mbango wa misava hinkwayo leswi Bootstrap yi swi tirhisaka.
Hlaya hi leswi katsekaka eka Bootstrap eka xiyenge xa hina xa swilo leswi nga endzeni na nxaxamelo wa swiphemu leswi lavaka JavaScript laha hansi.
Xana u lava matimba lama engetelekekenyana? Anakanya hi ku aka hi Bootstrap hi ku katsa tifayela ta xihlovo hi ku tirhisa mufambisi wa tiphasela .
U lava ku tirhisa Bootstrap tanihi modula leyi nga na <script type="module">? Hi kombela u languta eka hina ku tirhisa Bootstrap tanihi xiyenge xa modula .

Swiphemu swa JS

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 ti-plugin ta hina ta Collapse na Offcanvas ku tirhisa mahanyelo yo hlamula
Navs na Tab plugin ya ku cinca-cinca tipheni ta nhundzu
Ti-offcanvase to kombisa, ku veka, na mahanyelo ya ku rhendzeleka
Scrollspy ya mahanyelo ya ku rhendzeleka na ku pfuxetiwa ka ku famba-famba
Ti toast to kombisa na ku hlongola
Switirhisiwa na ti-popover to kombisa na ku veka (na swona swi lava Popper ) .

Swilo swa nkoka swa misava hinkwayo

Bootstrap yi tirhisa voko ra switayele swa nkoka swa misava hinkwayo na swiletelo, hinkwaswo leswi swi nga kwalomu ka ku kongomisiwa ntsena eka ku toloveleka ka switayele swa swihlamusela-marito swo 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 na switayili leswi nga helelangiki.

<!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 xi ri karhi xi tirha eka ku sungula hi ku hatlisa .

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 na vuxokoxoko bya nhluvukiso wa Bootstrap na ku fikelela vaaki hi switirhisiwa leswi pfunaka.

Hlaya u tlhela u tsarisa eka The Official Bootstrap Blog .
Vutisa no kambisisa Mimbulavurisano ya hina ya GitHub .
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.