Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

Folasaga

Amata i le Bootstrap, le ta'iala sili ona lauiloa i le lalolagi mo le fausiaina o nofoaga e tali atu, feavea'i-muamua, ma le jsDelivr ma se itulau amata fa'ata'ita'iga.

I luga o lenei itulau

vave amata

Su'e e fa'aopoopo vave le Bootstrap i lau poloketi? Fa'aaoga le jsDelivr, o se CDN e tatala fua. Le fa'aogaina o se pule o pusa po'o mana'omia le la'uina o faila fa'apogai? Ulu i le itulau downloads .

CSS

Kopi-fa'apipi'i le sitaili <link>i totonu o lau pepa <head>a'o le'i uma isi sitaili e uta ai la matou CSS.

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

JS

Ole tele oa tatou vaega e mana'omia le fa'aogaina ole JavaScript e fa'atino ai. Aemaise lava, latou te manaʻomia a tatou lava JavaScript plugins ma Popper . Tuu se tasi o mea nei <script>i tafatafa o le pito o au itulau, i luma tonu o le </body>pine faʻamau, ina ia mafai ai.

fusi

Faʻaaofia uma Bootstrap JavaScript plugin ma faʻalagolago i se tasi o matou fusi e lua. E lua bootstrap.bundle.jsma bootstrap.bundle.min.jsaofia ai Popper mo a matou meafaigaluega ma popovers. Mo nisi faʻamatalaga e uiga i mea o loʻo aofia i totonu o Bootstrap, faʻamolemole vaʻai la matou vaega o mea .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Vaevae

Afai e te filifili e te alu i le fofo eseese o tusitusiga, e tatau ona sau muamua Popper (pe afai o loʻo e faʻaogaina meafaigaluega poʻo popovers), ona sosoo ai lea ma a matou JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

Afai e te faʻaogaina <script type="module">, faʻamolemole vaʻai i la matou faʻaogaina o Bootstrap o se vaega o le module .

Vaega

E fia iloa po'o fea vaega e mana'omia manino le tatou JavaScript ma Popper? Kiliki le fa'aaliga vaega so'oga i lalo. Afai e te le mautinoa e uiga i le fausaga lautele o itulau, faitau pea mo se faʻataʻitaʻiga itulau faʻataʻitaʻiga.

Fa'aali vaega e mana'omia le Javascript
  • Lapata'i mo le fa'ate'aina
  • Fa'amau mo le sui tulaga ma le pusa siaki/leitio galuega
  • Carousel mo amioga fa'ase'e uma, fa'atonuga, ma fa'ailoga
  • Pa'u mo le fesuia'iina o le va'aia o mea
  • Pa'u i lalo mo le fa'aalia ma le fa'atulagaina (e mana'omia fo'i Popper )
  • Fa'ata'ita'iga mo le fa'aali, fa'atulagaina, ma le amio ta'ai
  • Navbar mo le faʻalauteleina o la matou Collapse plugin e faʻatino ai amioga tali
  • Tapena va'ai mo le fa'aali, fa'atulagaina, ma le amio ta'ai
  • Toasts mo le faʻaalia ma le faʻateʻaina
  • Tooltips ma popovers mo le faʻaalia ma le faʻatulagaina (e manaʻomia foʻi Popper )
  • Scrollspy mo amio ta'ai ma fa'afouga fa'afouga

Fa'ata'ita'iga amata

Ia mautinoa e fa'atutu au itulau ma fa'ata'ita'iga fou ma fa'ata'atiaga. O lona uiga o le faʻaaogaina o se HTML5 doctype ma aofia ai se viewport meta tag mo amioga tali lelei. Fa'atasi uma ma e tatau ona fa'apea lau itulau:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Mo isi laasaga, asiasi i le Layout docs poʻo matou faʻataʻitaʻiga aloaʻia e amata faʻataʻatia ai mea o lau 'upega tafaʻilagi ma vaega.

Fa'alelalolagi taua

O lo'o fa'aaogaina e Bootstrap le tele o sitaili fa'alelalolagi ma fa'atonuga e tatau ona e nofouta i ai pe a fa'aaogaina, o ia mea uma e toetoe lava a fa'atatau i le fa'avasegaina o sitaili su'esu'e. Tatou maulu i totonu.

HTML5 doctype

Bootstrap e manaʻomia le faʻaogaina o le HTML5 doctype. A aunoa ma lea mea, o le a e vaʻai i ni sitaili malie e le atoatoa, ae aofia ai e le tatau ona mafua ai se faʻalavelave tele.

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

Tali meta tag

O le Bootstrap o lo'o fa'atupuina muamua le telefoni feavea'i , o se ta'iala lea tatou te fa'amanino muamua ai le code mo masini feavea'i ona fa'atupuina lea o vaega pe a mana'omia e fa'aaoga ai fesili fa'asalalau CSS. Ina ia faʻamautinoa le tuʻuina atu ma le faʻaogaina o le paʻi mo masini uma, faʻapipiʻi le meta tag faʻaaliga tali i lau <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

E mafai ona e vaʻai i se faʻataʻitaʻiga o lenei mea i le gaioiga i le faʻataʻitaʻiga amata .

Pusa-fa'atele

Mo le sili atu le tuusaʻo sizing i CSS, matou fesuiai le box-sizingtau o le lalolagi mai content-boxi le border-box. E fa'amautinoaina paddinge le afaina ai le lautele fa'atulagaina mulimuli o se elemene, ae e mafai ona fa'atupu fa'afitauli i nisi polokalame fa'a-tolu e pei o Google Maps ma Google Custom Search Engine.

I se taimi seasea e te manaʻomia e faʻamalo ai, faʻaaoga se mea e pei o nei:

.selector-for-some-widget {
  box-sizing: content-box;
}

Faatasi ai ma le snippet o loʻo i luga, o mea faʻapipiʻi-e aofia ai mea na gaosia e ala i ::beforema ::after-o le a faʻatosina uma le mea faʻamaonia box-sizingmo lena .selector-for-some-widget.

A'oa'o atili e uiga i pusa fa'ata'ita'iga ma le fa'avasegaina ile CSS Tricks .

Toe fai

Mo le fa'aleleia atili o su'esu'ega o su'esu'ega, matou te fa'aogaina le Toe Fa'afouina e fa'asa'o ai fa'aletonu i luga o su'esu'ega ma masini a'o tu'uina atu le tele o fa'afouga manatu i elemene HTML masani.

Nuu

Tumau i le taimi nei i le atinaʻeina o Bootstrap ma aapa atu i le alalafaga ma nei punaoa fesoasoani.

  • Faitau ma lesitala ile The Official Bootstrap Blog .
  • Talanoa ma uso Bootstrappers ile IRC. I luga o le irc.libera.chatserver, i le #bootstrapalalaupapa.
  • E mafai ona maua fesoasoani fa'atino ile Stack Overflow (tagged bootstrap-5).
  • E tatau i tagata atiaʻe ona faʻaogaina le upu autu bootstrapi luga o afifi e suia pe faʻaopoopo i le faʻatinoga o Bootstrap pe a tufatufa atu i le npm poʻo auala faʻapipiʻi tutusa mo le maualuga o le mauaina.

E mafai foi ona e mulimuli i le @getbootstrap i luga ole Twitter mo tala faitatala lata mai ma ata mata'utia musika.