A daminɛ ni Bootstrap ye
Bootstrap ye baarakɛminɛn barikama ye, min falen bɛ fɛnw na minnu bɛ ɲɛfɛ. Aw bɛ fɛn o fɛn jɔ—k’a ta prototype la ka se a dilanni ma—miniti damadɔ kɔnɔ.
Daminɛ teliya la
A daminɛ ni Bootstrap ka CSS ni JavaScript labɛnni-labɛnni ye CDN fɛ k’a sɔrɔ i mago tɛ jɔli fɛɛrɛ si la. a lajɛ waleyali la ni nin Bootstrap CodePen demo in ye .
-
Aw ye dosiye kura dɔ Dabɔ
index.html
aw ka porozɛ ju la. Aw bɛ<meta name="viewport">
taamasiyɛn in fana don a kɔnɔ walasa ka jaabi kɛcogo ɲuman sɔrɔ telefɔni selilɛriw kɔnɔ.<!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>
-
Bootstrap ka CSS ni JS bɛ a kɔnɔ. Aw bɛ
<link>
taamasiyɛn bila<head>
an ka CSS kama, ani<script>
taamasiyɛn bila an ka JavaScript bundle la (Popper fana bɛ o la walasa ka fɛnw bilayɔrɔw, poppers ani baarakɛminɛnw sigi sen kan) sanni a ka dadon</body>
. Aw ye kunnafoni wɛrɛw sɔrɔ an ka CDN ladɛrɛsiw kan .<!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>
Aw bɛ se fana ka Popper ni an ka JS don u dan na. N’i ma labɛn ka baara kɛ ni fɛnw ye minnu bɛ bɔ fɛnw na, minnu bɛ bɔ fɛnw na, walima ni baarakɛminɛnw ye, i ka kilobayt dɔw mara ni i ma Popper don a kɔnɔ.
<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>
-
Bonjour, diɲɛ! Aw ye ɲɛ min sugandi aw ka navigatɛri kɔnɔ, o da wuli walasa ka aw ka Bootstrapped ɲɛ ye. Sisan aw bɛ se ka jɔli daminɛ ni Bootstrap ye n' aw yɛrɛ ka layidu talen dilan , ka yɔrɔ tan ni caman fara a kan , ani ka baara kɛ ni an ka misali ofisiyaliw ye .
CDN ka ladɛrɛsiw
I n’a fɔ kunnafoni, an ka CDN ladɛrɛsi fɔlɔw filɛ nin ye.
Cogojirali | URL ye |
---|---|
CSS ye | https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css |
JS ye | https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js |
aw bɛ se fana ka baara kɛ ni CDN ye walasa ka an ka jɔli wɛrɛw la minnu bɛ Kɔnɔkow ɲɛ kan .
Fɛn nataw
-
Aw ye kunnafoni wɛrɛw kalan dɔɔnin diɲɛ sigida labɛnni nafama dɔw kan Bootstrap bɛ baara kɛ ni minnu ye.
-
Fɛn minnu bɛ Bootstrap kɔnɔ, olu kalan an ka kɔnɔkow yɔrɔ la ani yɔrɔ minnu bɛ JavaScript wajibiya, olu lisɛli jukɔrɔ.
-
Aw mago bɛ fanga wɛrɛ la dɔɔnin wa? aw ye jateminɛ kɛ ka jɔ ni Bootstrap ye ni sɔrɔyɔrɔ filenw donli ye pake ɲɛmɔgɔ fɛ .
-
Aw b'a fɛ ka baara kɛ ni Bootstrap ye i n'a fɔ module ni
<script type="module">
? Aw ye an ka baara kɛli ni Bootstrap ye i n’a fɔ module yɔrɔ lajɛ.
JS yɔrɔw
Aw b’a fɛ k’a dɔn ko yɔrɔ jumɛnw bɛ an ka JavaScript ni Popper de wajibiya k’a jɛya wa? Show components yɔrɔ digi min bɛ duguma. N’i dalen t’a la hali dɔɔnin ɲɛw jɔcogo bɛɛ lajɛlen na, i ka to ka kalan kɛ walasa ka misali ɲɛw jatebɔcogo dɔ sɔrɔ.
Yɔrɔ minnu bɛ JavaScript wajibiya, olu jira
- Kɔlɔsili minnu bɛ kɛ ka ɲɛsin baara bilali ma
- Butɔnw ka toggling states ani checkbox/arajo baarakɛcogo
- Carousel ka ɲɛsin slide kɛcogo bɛɛ ma, controles ani indicateurs
- Collapse walasa ka kɔnɔkow yecogo caman wuli
- Dropdowns walasa ka jira ani ka bila (o fana bɛ Popper de wajibiya ) .
- Modaliw minnu bɛ kɛ ka jirali, u jɔyɔrɔ jira ani ka sɛrɛkili kɛcogo jira
- Navbar ka an ka Collapse ani Offcanvas plugins janya walasa ka jaabi kɛcogoyaw waleya
- Navs ni Tab plugin ye walasa ka kɔnɔkow sɛgɛsɛgɛli kɛ
- Offcanvases minnu bɛ kɛ ka jira, ka u bila yɔrɔ la, ani ka scroll kɛcogo jira
- Scrollspy ye scroll kɛcogo ani navigation kurayali ye
- Tositiw jirali ni bɔli kama
- Baarakɛminɛnw ni popovers jirali ni jɔyɔrɔfalen (o fana bɛ Popper de wajibiya ) .
Duniya bɛɛ lajɛlen nafamaw
Bootstrap bɛ baara Kɛ ni diɲɛ cogoyaw ni sigicogo nafama damadɔ ye, minnu bɛɛ bɛ Taa a dan na ka ɲɛsin cross browser cogoyaw normalisation ma. An ka dive ka don.
HTML5 sɛbɛn suguya
Bootstrap bɛ HTML5 doctype baara de wajibiya. Ni o tɛ, i bɛ funky ni incomplete styling dɔw ye.
<!doctype html>
<html lang="en">
...
</html>
Meta tag min bɛ jaabi di
Bootstrap is developed mobile first , o ye fɛɛrɛ ye min kɔnɔ an bɛ kode ɲɛnabɔ mobili minɛnw kama fɔlɔ ka sɔrɔ ka yɔrɔw bonya i n’a fɔ a mago bɛ cogo min na ni CSS media ɲininkaliw ye. Walasa ka ɲɛfɔli kɛcogo ɲuman ni magali zoom kɛcogo ɲuman sɔrɔ minɛnw bɛɛ la, i ka jaabi jiracogo meta tag fara i ka <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
aw bɛ se ka o misali dɔ ye wale la daminɛ teliya la .
Box-sizing (box-sizing) ye
Walasa ka bonya tilennen caman sɔrɔ CSS kɔnɔ, an bɛ diɲɛ box-sizing
nafa caman wuli ka bɔ content-box
ka taa border-box
. O b’a to padding
a tɛ nɔ bila fɛn dɔ janya jatebɔlen laban na, nka a bɛ se ka gɛlɛyaw lase mɔgɔ wɛrɛw ka porogaramu dɔw ma i n’a fɔ Google Maps ani Google Custom Search Engine.
Ni a man teli ka kɛ aw mago bɛ a la ka tɛmɛ a kan, aw bɛ baara kɛ ni fɛn dɔ ye i n’a fɔ nin fɛn ninnu:
.selector-for-some-widget {
box-sizing: content-box;
}
Ni sanfɛla yɔrɔ in ye, fɛn minnu bɛ sigi sen kan—o la, kunnafoni minnu bɛ sɔrɔ via ::before
ani ::after
— olu bɛɛ bɛna ciyɛn ta kofɔlenw box-sizing
ye o kama .selector-for-some-widget
.
Aw ye kunnafoni wɛrɛw sɔrɔ kɛsu modɛli ni a bonya kan CSS Tricks kan .
Segin ka baara kɛ
Walasa ka cross-browser rendering ɲɛ ka taa a fɛ, an bɛ Reboot kɛ walasa ka bɛnbaliyakow latilen navigatɛriw ni minɛnw kɔnɔ k’a sɔrɔ an bɛ hakilinaw lasegincogo dɔw di HTML yɔrɔ caman na.
Sigida
Aw ka to kunnafoni na Bootstrap yiriwali kan ani ka se sigidamɔgɔw ma ni nin dɛmɛnanw ye.
- Aw ye The Official Bootstrap Blog kalan ani ka aw tɔgɔ sɛbɛn .
- ɲininkali kɛ ani ka an ka GitHub Baro lajɛ .
- Baro kɛ ni Bootstrapper ɲɔgɔnw ye IRC kɔnɔ.
irc.libera.chat
Server kan, kanal#bootstrap
kɔnɔ. - Waleya dɛmɛ bɛ se ka sɔrɔ Stack Overflow (tagged
bootstrap-5
) yɔrɔ la. - Dabɔbagaw ka kan ka baara Kɛ ni daɲɛ koloma
bootstrap
ye pakew kan minnu bɛ Bootstrap baarakɛcogo Lakodɔn walima k’a Fàra a kan n’u bɛ tila-tila npm fɛ walima o ɲɔgɔnna fɛnw lasecogo fɛ walasa ka se ka Sɔrɔ kosɛbɛ.
Aw bɛ se fana ka tugu @getbootstrap kɔ Twitter kan walasa ka kumakan labanw ni dɔnkilida videyo kabakomaw sɔrɔ.