Source

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'aoga le jsDelivr, tu'u fua e tagata ile jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.js , ma a tatou lava JavaScript plugins. Tuu <script>s nei i tafatafa o le pito o au itulau, i luma tonu o le faʻailoga tapuni </body>, ina ia mafai ai. E tatau ona sau muamua le jQuery, ona sosoo ai lea ma le Popper.js, ona sosoo ai lea ma a tatou JavaScript plugins.

Matou te fa'aogaina le faufale a le jQuery , ae o lo'o lagolagoina fo'i le fa'amatalaga atoa.

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

E fia iloa po'o fea vaega e mana'omia manino le jQuery, la tatou JS, ma le Popper.js? 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.

O matou bootstrap.bundle.jsma bootstrap.bundle.min.jsaofia ai Popper , ae le o le jQuery . 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 .

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.js )
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
Tooltips ma popovers mo le faʻaalia ma le faʻatulagaina (e manaʻomia foʻi Popper.js )
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, 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>

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.

Mulimuli @getbootstrap ile Twitter .
Faitau ma lesitala ile The Official Bootstrap Blog .
Talanoa ma uso Bootstrappers ile IRC. I luga o le irc.freenode.netserver, 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.