Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
Check
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 .


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

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

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

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

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.