Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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.