Source

Utangulizi

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

Kuanza haraka

Je, unatafuta kuongeza Bootstrap haraka kwenye mradi wako? Tumia jsDelivr, iliyotolewa bila malipo na watu kwenye jsDelivr. 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

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

Tunatumia jQuery's slim build , lakini toleo kamili pia linatumika.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Je, ungependa kujua ni vipengele vipi vinavyohitaji kwa uwazi jQuery, JS yetu na Popper.js? 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.

Yetu bootstrap.bundle.jsna bootstrap.bundle.min.jsni pamoja na Popper , lakini sio jQuery . Kwa habari zaidi kuhusu kile kilichojumuishwa kwenye Bootstrap, tafadhali angalia sehemu yetu ya yaliyomo .

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
Kunjuzi za kuonyeshwa na kuwekwa (inahitaji pia Popper.js )
Miundo ya kuonyesha, kuweka, na tabia ya kusogeza
Upau wa uelekezaji wa kupanua programu-jalizi yetu ya Kunja ili kutekeleza tabia ya kuitikia
Vidokezo vya zana na popover za kuonyeshwa na kuweka (pia inahitaji Popper.js )
Scrollspy kwa tabia ya kusogeza na masasisho ya urambazaji

template Starter

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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Hiyo ndiyo tu unayohitaji kwa mahitaji ya jumla ya ukurasa. Tembelea hati za Muundo 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 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, shrink-to-fit=no">

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.

Fuata @getbootstrap kwenye Twitter .
Soma na ujiandikishe kwa Blogu Rasmi ya Bootstrap .
Sogoa na Wachezaji Bootstrapper wenzako katika IRC. Kwenye irc.freenode.netseva, kwenye ##bootstrapkituo.
Usaidizi wa utekelezaji unaweza kupatikana katika Stack Overflow (tagged bootstrap-4).
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.