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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Vipengele vyetu vingi vinahitaji matumizi ya JavaScript kufanya kazi. Hasa, zinahitaji jQuery , Popper , na programu jalizi zetu za JavaScript. Tunatumia jQuery's slim build , lakini toleo kamili pia linatumika.

Weka mojawapo ya <script>s zifuatazo karibu na mwisho wa kurasa zako, kabla ya </body>tagi ya kufunga, ili kuziwezesha. jQuery lazima ije kwanza, kisha Popper, na kisha programu-jalizi zetu za JavaScript.

Kifungu

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Vipengele

Je, ungependa kujua ni vipengele vipi vinavyohitaji jQuery, JavaScript yetu, na Popper? Bofya kiungo cha vipengele vya kuonyesha hapa chini. Ikiwa huna uhakika kuhusu muundo wa ukurasa, 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
Scrollspy kwa tabia ya kusogeza na masasisho ya urambazaji
Vidokezo vya zana na popover za kuonyeshwa na kuweka (pia inahitaji Popper )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

Soma na ujiandikishe kwa Blogu Rasmi ya Bootstrap .
Sogoa na Wachezaji Bootstrapper wenzako katika IRC. Kwenye irc.libera.chatseva, 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.

CSP na SVG zilizopachikwa

Vipengee kadhaa vya Bootstrap vinajumuisha SVG zilizopachikwa katika CSS yetu ili kuunda vipengele mara kwa mara na kwa urahisi kwenye vivinjari na vifaa. Kwa mashirika yaliyo na usanidi mkali zaidi wa CSP , tumeandika matukio yote ya SVG zetu zilizopachikwa (zote zinatumika kupitia background-image) ili uweze kukagua chaguo zako kwa undani zaidi.

Kitufe cha kufunga (kinachotumika katika arifa na miundo)
Vikasha maalum vya kuteua na vitufe vya redio
Swichi za fomu
Aikoni za uthibitishaji wa fomu
Chagua menyu maalum
Vidhibiti vya jukwa
Vibao vya kugeuza vya Upau wa urambazaji

Kulingana na mazungumzo ya jumuiya , baadhi ya chaguo za kushughulikia hili katika msingi wako wa msimbo ni pamoja na kubadilisha URL na vipengee vinavyopangishwa ndani, kuondoa picha na kutumia picha za ndani (haiwezekani katika vipengele vyote), na kurekebisha CSP yako. Pendekezo letu ni kukagua kwa uangalifu sera zako za usalama na kuamua njia bora zaidi, ikiwa ni lazima.