Utangulizi

Anza na Bootstrap, mfumo maarufu zaidi duniani wa kujenga tovuti zinazoitikia, za kwanza kwa simu, kwa kutumia jsDelivr na ukurasa wa kuanza violezo.

Katika ukurasa huu

Kuanza haraka

Je, unatafuta kuongeza Bootstrap haraka kwenye mradi wako? Tumia jsDelivr, CDN ya chanzo huria bila malipo. Je, unatumia kidhibiti cha kifurushi au unahitaji kupakua faili chanzo? Nenda kwenye ukurasa wa vipakuliwa .

CSS

Nakili-ubandike laha ya mtindo <link>kwenye laha zako <head>za kabla ya mitindo mingine yote ili kupakia CSS yetu.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Vipengele vyetu vingi vinahitaji matumizi ya JavaScript kufanya kazi. Hasa, zinahitaji programu-jalizi zetu za JavaScript na Popper . Weka mojawapo ya <script>s zifuatazo karibu na mwisho wa kurasa zako, kabla ya </body>tagi ya kufunga, ili kuziwezesha.

Bunda

Jumuisha kila programu-jalizi ya JavaScript ya Bootstrap na utegemezi na mojawapo ya vifurushi vyetu viwili. Zote mbili bootstrap.bundle.jsna bootstrap.bundle.min.jszinajumuisha Popper kwa vidokezo vyetu vya zana na popover. Kwa habari zaidi kuhusu kile kilichojumuishwa kwenye Bootstrap, tafadhali angalia sehemu yetu ya yaliyomo .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Tenga

Ukiamua kwenda na suluhisho tofauti la hati, Popper lazima atangulie (ikiwa unatumia vidokezo vya zana au popover), kisha programu-jalizi zetu za JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduli

Ikiwa unatumia <script type="module">, tafadhali rejelea kutumia kwetu Bootstrap kama sehemu ya moduli .

Vipengele

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 wa kupanua programu-jalizi yetu ya Kunja ili kutekeleza tabia ya kuitikia
Toasts za kuonyeshwa na kuachiliwa
Vidokezo vya zana na popover za kuonyeshwa na kuweka (pia inahitaji Popper )
Scrollspy kwa tabia ya kusogeza na masasisho ya urambazaji

Kiolezo cha kuanza

Hakikisha kuwa umeweka kurasa zako kwa viwango vya hivi punde vya muundo na usanidi. Hiyo inamaanisha kutumia aina ya hati ya HTML5 na kujumuisha lebo ya meta ya kituo cha kutazama kwa tabia zinazofaa za kuitikia. Weka yote pamoja na kurasa zako zinapaswa kuonekana kama hii:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Kwa hatua zinazofuata, tembelea hati za Mpangilio au mifano yetu rasmi ili kuanza kuweka maudhui na vipengele vya tovuti yako.

Ulimwengu muhimu

Bootstrap hutumia mitindo na mipangilio kadhaa muhimu ya kimataifa ambayo utahitaji kufahamu unapoitumia, ambayo yote inalenga mahususi katika 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 isiyokamilika ya kufurahisha, lakini kuijumuisha haipaswi kusababisha usumbufu wowote.

<!doctype html>
<html lang="en">
  ...
</html>

Meta tagi sikivu

Bootstrap inaundwa kwa simu kwanza , mkakati ambao tunaboresha msimbo wa vifaa vya mkononi kwanza na kisha kuongeza vipengele inapohitajika kwa kutumia hoja za midia 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 kiolezo cha kuanza .

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 habari kuhusu uundaji wa Bootstrap na ufikie jamii ukitumia nyenzo hizi muhimu.

Soma na ujiandikishe kwa Blogu Rasmi ya Bootstrap .
Sogoa na Wachezaji Bootstrapper wenzako katika IRC. Kwenye irc.libera.chatseva, kwenye #bootstrapkituo.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.