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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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 le jQuery , Popper , ma a tatou lava JavaScript plugins. Matou te fa'aogaina le faufale a le jQuery , ae o lo'o lagolagoina fo'i le fa'amatalaga atoa.

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. jQuery e tatau ona sau muamua, ona sosoo ai lea ma Popper, ona sosoo ai lea ma a tatou JavaScript plugins.

fusi

Fa'aaofia uma Bootstrap JavaScript plugin ma se tasi oa matou fusi e lua. E lua bootstrap.bundle.jsma bootstrap.bundle.min.jsaofia ai Popper mo a matou meafaigaluega ma popovers, ae le o le jQuery . Fa'aaofia muamua le jQuery, ona fa'atasi ai lea ma le Bootstrap JavaScript bundle. 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/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>

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/[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>

Vaega

E fia iloa po'o fea vaega e mana'omia manino ai le jQuery, la tatou JavaScript, ma le Popper? Kiliki le fa'aaliga vaega so'oga i lalo. Afai e te le mautinoa e uiga i le fausaga 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 la matou Collapse plugin e faʻatino ai amioga tali
Scrollspy mo amio ta'ai ma fa'afouga fa'afouga
Tooltips ma popovers mo le faʻaalia ma le faʻatulagaina (e manaʻomia foʻi Popper )

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

Pau lava le mea e te manaʻomia mo le tulaga lautele o itulau. Asiasi i le Layout docs poʻo a 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, shrink-to-fit=no">

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-boxle border-box. E fa'amautinoaina paddinge le afaina ai le lautele fa'atusatusa mulimuli o se elemene, ae e mafai ona tupu ai fa'afitauli i nisi polokalama fa'apitoa 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 .
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-4).
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 ile 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.

CSPs ma SVG fa'apipi'i

Ole tele o vaega Bootstrap e aofia ai SVG fa'apipi'i i totonu o la tatou CSS e fa'apena vaega i taimi uma ma faigofie ile su'esu'ega ma masini. Mo fa'alapotopotoga o lo'o i ai fa'atonuga CSP sili atu , ua matou fa'amauina uma tulaga o matou SVG fa'apipi'i (o lo'o fa'aogaina uma e ala i background-image) ina ia mafai ai ona e toe iloilo au filifiliga.

Tapuni ki (fa'aoga i fa'aliga ma fa'ata'ita'iga)
Pusa siaki masani ma faamau leitio
Suiga fomu
Fa'ailoga fa'amaonia fa'ailoga
Fa'asinomaga filifilia menus
Pulea Carousel
Navbar fa'amau fa'amau

Faʻavae i luga o talanoaga a le nuʻu , o nisi o filifiliga mo le faʻatalanoaina o lenei mea i lau lava codebase e aofia ai le suia o URL i aseta faʻapitonuʻu, aveese ata ma faʻaogaina ata i totonu (e le mafai i vaega uma), ma faʻaleleia lau CSP. O la matou fautuaga o le toe iloilo toto'a lea o au lava faiga fa'avae mo le puipuiga ma filifili se ala sili i luma, pe a mana'omia.