in English

Amata i le Bootstrap

O le Bootstrap o se mea faigaluega pito i luma e mamana, fa'apipi'iina foliga. Fausia soʻo se mea-mai le faʻataʻitaʻiga i le gaosiga-i minute.

I luga o lenei itulau

vave amata

Amata e ala i le faʻapipiʻiina o le CSS ma le Javascript saunia a Bootstrap e ala i le CDN e aunoa ma le manaʻomia o ni laasaga fau. Vaʻai i le faʻatinoga ma lenei Bootstrap CodePen demo .

Fausia se index.htmlfaila fou i lau a'a galuega. Fa'aaofia ai <meta name="viewport">fo'i le fa'ailoga mo le tali sa'o o le amio i masini feavea'i.

<!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>

Fa'aaofia le Bootstrap's CSS ma le JS. Tuu le <link>pine i le <head>mo la tatou CSS, ma le <script>pine mo la tatou JavaScript bundle (e aofia ai Popper mo le faʻatulagaina o pa'ū, poppers, ma meafaigaluega) aʻo leʻi tapunia </body>. A'oa'o atili e uiga i a matou feso'ota'iga 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>

E mafai fo'i ona e tu'u fa'atasi le Popper ma le matou JS. Afai e te le o fuafua e fa'aoga fa'alalo, popovers, po'o meafaigaluega, fa'asao ni kilobytes e ala i le le fa'aofiina o 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>

Talofa, lalolagi! Tatala le itulau i lau su'esu'ega o filifiliga e va'ai ai lau itulau Bootstrapped. Ole taimi nei e mafai ona e amata fausia ma Bootstrap e ala i le fatuina o lau oe lava faʻatulagaina , faʻaopoopo le tele o vaega , ma faʻaaogaina a matou faʻataʻitaʻiga aloaia .

CDN so'oga

E fai ma faʻamatalaga, o la matou fesoʻotaʻiga muamua CDN.

Fa'amatalaga	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`

E mafai fo'i ona e fa'aogaina le CDN e aumai ai so'o se isi o matou fa'aopoopo faufale o lo'o lisiina i le itulau Fa'asinomaga .

Laasaga e sosoo ai

Faitau atili e uiga i nisi tulaga taua o le siosiomaga o loʻo faʻaaogaina e Bootstrap.
Faitau e uiga i mea o loʻo aofia i totonu o Bootstrap i la matou vaega o mea e aofia ai ma le lisi o vaega e manaʻomia le JavaScript i lalo.
Manaomia sina mana sili atu? Mafaufau e fausia ma Bootstrap e ala i le aofia ai o faila faila e ala i le pule o pusa .
Su'e e fa'aoga le Bootstrap e fai ma module ma <script type="module">? Fa'amolemole fa'afeso'ota'i le matou fa'aogaina o le Bootstrap e fai ma vaega o le module .

vaega JS

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'aiga 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 matou Collapse ma Offcanvas plugins e faʻatino ai amioga tali
Navs fa'atasi ai ma le fa'apipi'i o le Tab mo le suiina o fa'ailoga o mea
Tapena va'ai mo le fa'aali, fa'atulagaina, ma le amio ta'ai
Scrollspy mo amio ta'ai ma fa'afouga fa'afouga
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 )

Fa'alelalolagi taua

O lo'o fa'aaogaina e Bootstrap le tele o sitaili ma fa'atulagaga taua o le lalolagi, o ia mea uma e toetoe lava fa'atatau i le fa'avasegaina o sitaili su'esu'e kolosi. 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 ma le le atoatoa.

<!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 amataga vave .

Pusa-fa'atele

Mo le sili atu le tuusaʻo sizing i CSS, matou fesuiai le box-sizingtau o le lalolagi mai content-boxle 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 lenei:

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

Faatasi ai ma le snippet o loʻo i luga, elemene faʻapipiʻi-e aofia ai mea na gaosia e ala i ::beforele ma ::after-o le a mautofi 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 .
Fesili ma suʻesuʻe a matou GitHub Talanoaga .
Talanoa ma uso Bootstrappers ile IRC. I luga o le irc.libera.chatserver, i le #bootstrapalalaupapa.
E mafai ona maua le 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 tufatufaina atu e ala i le npm poʻo auala faʻapipiʻi tutusa mo le maualuga o le mauaina.

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