Anza na Bootstrap
Bootstrap ni zana yenye nguvu, iliyojaa vipengele vya mbele. Unda chochote - kutoka kwa mfano hadi uzalishaji - kwa dakika.
Kuanza haraka
Anza kwa kujumuisha CSS iliyo tayari kwa uzalishaji ya Bootstrap na JavaScript kupitia CDN bila hitaji la hatua zozote za uundaji. Ione katika mazoezi na onyesho hili la Bootstrap CodePen .
-
Unda
index.html
faili mpya kwenye mzizi wa mradi wako. Jumuisha<meta name="viewport">
lebo pia kwa tabia ifaayo ya kuitikia katika vifaa vya mkononi.<!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>
-
Jumuisha CSS ya Bootstrap na JS. Weka
<link>
lebo kwenye<head>
CSS yetu, na<script>
tegi ya kifurushi chetu cha JavaScript (pamoja na Popper kwa kuweka menyu kunjuzi, poppers, na vidokezo) kabla ya kufunga</body>
. Jifunze zaidi kuhusu viungo vyetu vya 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>
Unaweza pia kujumuisha Popper na JS yetu kando. Ikiwa huna mpango wa kutumia menyu kunjuzi, popover, au vidokezo vya zana, hifadhi baadhi ya kilobaiti kwa kutojumuisha 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>
-
Salamu, Dunia! Fungua ukurasa katika kivinjari chako cha chaguo ili kuona ukurasa wako wa Bootstrapped. Sasa unaweza kuanza kujenga na Bootstrap kwa kuunda mpangilio wako mwenyewe , kuongeza kadhaa ya vipengele , na kutumia mifano yetu rasmi .
viungo vya CDN
Kama kumbukumbu, hapa kuna viungo vyetu vya msingi vya CDN.
Maelezo | URL |
---|---|
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 |
Unaweza pia kutumia CDN kuleta miundo yetu yoyote ya ziada iliyoorodheshwa katika ukurasa wa Yaliyomo .
Hatua zinazofuata
-
Soma zaidi kuhusu baadhi ya mipangilio muhimu ya mazingira ya kimataifa ambayo Bootstrap hutumia.
-
Soma kuhusu kile kilichojumuishwa katika Bootstrap katika sehemu ya maudhui yetu na orodha ya vipengele vinavyohitaji JavaScript hapa chini.
-
Unahitaji nguvu zaidi kidogo? Fikiria kujenga na Bootstrap kwa kujumuisha faili za chanzo kupitia kidhibiti cha kifurushi .
-
Unatafuta kutumia Bootstrap kama moduli na
<script type="module">
? Tafadhali rejelea kutumia kwetu Bootstrap kama sehemu ya moduli .
Sehemu za JS
Je, ungependa kujua ni vipengele vipi vinavyohitaji JavaScript na Popper yetu? Bofya kiungo cha vipengele vya kuonyesha hapa chini. Ikiwa huna uhakika kabisa kuhusu muundo wa ukurasa wa jumla, endelea kusoma kwa mfano kiolezo cha ukurasa.
Onyesha vipengee vinavyohitaji JavaScript
- Arifa za kuondoa
- Vifungo vya kugeuza hali na utendaji wa kisanduku cha kuteua/redio
- Carousel kwa tabia zote za slaidi, vidhibiti na viashirio
- Kunja kwa ajili ya kugeuza mwonekano wa maudhui
- Miteremko ya kuonyesha na kuweka (inahitaji pia Popper )
- Miundo ya kuonyesha, kuweka, na tabia ya kusogeza
- Upau wa Uelekezaji kwa kupanua programu-jalizi zetu za Kukunja na Offcanvas ili kutekeleza tabia za kuitikia
- Navs na programu-jalizi ya Tab ya kugeuza vidirisha vya maudhui
- Kavasi za kuonyeshwa, kuweka nafasi, na tabia ya kusogeza
- Scrollspy kwa tabia ya kusogeza na masasisho ya urambazaji
- Toasts za kuonyesha na kuachisha kazi
- Vidokezo vya zana na popover za kuonyeshwa na kuweka (pia inahitaji Popper )
Ulimwengu muhimu
Bootstrap huajiri idadi ndogo ya mitindo na mipangilio muhimu ya kimataifa, ambayo yote inakaribia kikamilifu kuhalalisha mitindo tofauti ya kivinjari. Hebu tuzame ndani.
HTML5 aina ya hati
Bootstrap inahitaji matumizi ya aina ya hati ya HTML5. Bila hivyo, utaona mitindo ya kufurahisha na isiyokamilika.
<!doctype html>
<html lang="en">
...
</html>
Meta tagi sikivu
Bootstrap inaundwa simu ya mkononi kwanza , mkakati ambao tunaboresha msimbo wa vifaa vya mkononi kwanza na kisha kuongeza vipengele inavyohitajika kwa kutumia hoja za maudhui ya CSS. Ili kuhakikisha uwasilishaji ufaao na ukuzaji wa mguso kwa vifaa vyote, ongeza lebo ya meta inayojibu kwenye <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Unaweza kuona mfano wa hii katika hatua katika kuanza haraka .
Ukubwa wa sanduku
Kwa ukubwa wa moja kwa moja katika CSS, tunabadilisha box-sizing
thamani ya kimataifa kutoka content-box
hadi border-box
. Hii inahakikisha padding
haiathiri upana wa mwisho uliokokotwa wa kipengele, lakini inaweza kusababisha matatizo na programu za wahusika wengine kama vile Ramani za Google na Injini Maalum ya Utafutaji ya Google.
Katika tukio nadra unahitaji kuifuta, tumia kitu kama hiki:
.selector-for-some-widget {
box-sizing: content-box;
}
Kwa kijisehemu kilicho hapo juu, vipengee vilivyoorodheshwa—ikiwa ni pamoja na maudhui yaliyozalishwa kupitia ::before
na — ::after
vyote vitarithi vilivyobainishwa box-sizing
kwa hilo .selector-for-some-widget
.
Pata maelezo zaidi kuhusu modeli ya kisanduku na ukubwa katika Mbinu za CSS .
Washa upya
Kwa uwasilishaji ulioboreshwa wa vivinjari tofauti, tunatumia Anzisha Upya kusahihisha kutofautiana kwenye vivinjari na vifaa huku tukitoa uwekaji upya wenye maoni zaidi kwa vipengele vya kawaida vya HTML.
Jumuiya
Pata taarifa kuhusu uundaji wa Bootstrap na ufikie jamii ukitumia nyenzo hizi muhimu.
- Soma na ujiandikishe kwa Blogu Rasmi ya Bootstrap .
- Uliza na uchunguze Majadiliano yetu ya GitHub .
- Sogoa na Wachezaji Bootstrapper wenzako katika IRC. Kwenye
irc.libera.chat
seva, kwenye#bootstrap
kituo. - Usaidizi wa utekelezaji unaweza kupatikana katika Stack Overflow (tagged
bootstrap-5
). - Wasanidi programu wanapaswa kutumia nenomsingi
bootstrap
kwenye vifurushi vinavyorekebisha au kuongeza utendakazi wa Bootstrap wakati wa kusambaza kupitia npm au njia sawa za uwasilishaji kwa ugunduzi wa juu zaidi.
Unaweza pia kufuata @getbootstrap kwenye Twitter kwa uvumi na video za muziki za kupendeza.