Anza na Bootstrap

Bootstrap ni zana yenye nguvu, iliyojaa vipengele vya mbele. Unda chochote - kutoka kwa mfano hadi uzalishaji - kwa dakika.

Katika ukurasa huu

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.htmlfaili 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-sizingthamani ya kimataifa kutoka content-boxhadi border-box. Hii inahakikisha paddinghaiathiri 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 ::beforena — ::aftervyote vitarithi vilivyobainishwa box-sizingkwa 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.chatseva, kwenye #bootstrapkituo.
Usaidizi wa utekelezaji unaweza kupatikana katika Stack Overflow (tagged bootstrap-5).
Wasanidi programu wanapaswa kutumia nenomsingi bootstrapkwenye 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.