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.
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.html
eka 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-sizing
ntikelo wa misava hinkwayo ku suka eka content-box
ku ya eka border-box
. Leswi swi tiyisisa leswaku padding
a 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 ::before
na ::after
—hinkwaswo swi ta dya ndzhaka ya leswi boxiweke box-sizing
swa 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.chat
sevha, eka#bootstrap
xiteji. - Mpfuneto wa ku tirhisiwa wu nga kumeka eka Stack Overflow (tagged
bootstrap-5
). - Vatumbuluxi va fanele ku tirhisa rito ra nkoka
bootstrap
eka 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.