La'u mai

Bootstrap (lea v3.4.1 i le taimi nei) e iai ni nai auala faigofie e vave amata ai, e taʻitasi i se tulaga eseʻese tomai ma faʻaoga tulaga. Faitau e va'ai po'o le a le mea e fetaui ma ou mana'oga fa'apitoa.

jsDelivr

O tagata i luga o le jsDelivr o loʻo tuʻuina atu ma le agalelei le CDN lagolago mo Bootstrap's CSS ma JavaScript. Fa'aaoga nei sootaga jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Faʻapipiʻi ma Bower

E mafai foi ona e faʻapipiʻi ma pulea Bootstrap's Less, CSS, JavaScript, ma fonuka e faʻaaoga ai le Bower :

bower install bootstrap

Faʻapipiʻi ile npm

E mafai foi ona e faʻapipiʻi Bootstrap faʻaaoga npm :

npm install bootstrap@3

require('bootstrap')o le a la'u uma ia Bootstrap's jQuery plugins i luga o le mea jQuery. O le bootstrapmodule lava ia e le auina atu i fafo se mea. E mafai ona e utaina ma le lima ia Bootstrap's jQuery plugins ta'ito'atasi e ala i le utaina o /js/*.jsfaila i lalo o le lisi pito i luga o le afifi.

Bootstrap o package.jsonloʻo i ai nisi metadata faaopoopo i lalo o ki nei:

• less- ala ile Bootstrap's main Less source file
• style- auala i le CSS e le faʻaititia a Bootstrap lea na faʻapipiʻiina muamua e faʻaaoga ai le faʻaogaina o tulaga (leai se faʻapitoa)

Fa'apipi'i fa'atasi ma le Fatupese

E mafai foi ona e faʻapipiʻi ma pulea Bootstrap's Less, CSS, JavaScript, ma fonuka e faʻaaoga ai le Composer :

composer require twbs/bootstrap

Autoprefixer mana'omia mo Less/Sass

E fa'aaoga e Bootstrap le Autoprefixer e fa'atautaia ai fa'atauga fa'atau CSS . Afai o loʻo e tuʻufaʻatasia le Bootstrap mai lona Less/Sass puna ae e te le faʻaaogaina le matou Gruntfile, e tatau ona e tuʻufaʻatasia le Autoprefixer i lau faʻagasologa o le fausiaina oe lava. Afai o loʻo e faʻaaogaina le Bootstrap muamua poʻo le faʻaaogaina o la matou Gruntfile, e te le manaʻomia le popole i lenei mea aua o le Autoprefixer ua uma ona tuʻufaʻatasia i la matou Gruntfile.

O mea e aofia ai

Bootstrap e mafai ona sii mai i ni faiga se lua, i totonu e te maua ai lisi ma faila o loʻo i lalo, faʻavasega lelei punaoa masani ma tuʻuina atu faʻatasi ma faʻaititia suiga.

Bootstrap muai tuufaatasia

A maeʻa ona sii mai, tatala le faila faʻapipiʻi e vaʻai i le fausaga o (le tuufaatasia) Bootstrap. O le ae vaai i se mea e pei o lenei:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Ole faiga sili lea ole Bootstrap: faila fa'apipi'i muamua mo le fa'aogaina vave i totonu o le toetoe lava o so'o se poloketi i luga ole laiga. Matou te tuʻuina atu CSS tuʻufaʻatasia ma JS ( bootstrap.*), faʻapea foʻi ma CSS tuʻufaʻatasia ma faʻaititia ma JS ( bootstrap.min.*). CSS puna fa'afanua ( bootstrap.*.map) o lo'o avanoa mo le fa'aoga i nisi mea faigaluega a le au su'esu'e. Fonts mai Glyphicons o loʻo aofia ai, faʻapea foʻi ma le autu Bootstrap filifiliga.

Bootstrap source code

O le download code source Bootstrap e aofia ai le CSS, JavaScript, ma le font assets, faatasi ai ma le puna Less, JavaScript, ma faʻamaumauga. Aemaise lava, e aofia ai mea nei ma sili atu:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

O le less/, js/, ma fonts/o le fa'ailoga fa'apogai mo la tatou CSS, JS, ma fa'ailoga fa'ailoga (fa'atatau). O le dist/pusa e aofia ai mea uma o loʻo lisiina i le vaega o loʻo faʻapipiʻiina muamua i luga. O le docs/pusa e aofia ai le faʻailoga autu mo a matou faʻamaumauga, ma examples/le faʻaaogaina o Bootstrap. I tua atu o lena, soʻo se isi faila e aofia ai e tuʻuina atu le lagolago mo afifi, faʻamatalaga laisene, ma atinaʻe.

Tuufaatasia CSS ma JavaScript

Fa'aaoga e Bootstrap le Grunt mo lona faiga fau, fa'atasi ai ma auala faigofie mo le galue ai ma le fa'avae. O le auala tatou te tuufaatasia ai a tatou code, faʻataʻitaʻi suʻega, ma isi mea.

Fa'apipi'i Grunt

Ina ia faʻapipiʻi Grunt, e tatau ona e sii muamua ma faʻapipiʻi le node.js (lea e aofia ai le npm). npm o loʻo faʻatusalia mo node faʻapipiʻi modules ma o se auala e pulea ai faʻalagolago i atinaʻe e ala i le node.js.

1. Fa'apipi'i grunt-clii le lalolagi atoa ma npm install -g grunt-cli.
2. Alu i le root /bootstrap/directory, ona tamoe lea npm install. npm o le a tilotilo i le package.jsonfaila ma faʻapipiʻi faʻapipiʻi faʻalagolago i le lotoifale o loʻo lisiina iina.

A maeʻa, o le a mafai ona e faʻatautaia le tele o Grunt poloaiga na tuʻuina mai le laina o le poloaiga.

Avanoa Grunt poloaiga

grunt dist(Na'o le tuufaatasia o le CSS ma le JavaScript)

Toe fa'afouina le /dist/fa'atonuga ma fa'aputuina ma fa'aitiitiga faila CSS ma JavaScript. I le avea ai o se tagata faʻaoga Bootstrap, e masani lava o le poloaiga e te manaʻo ai.

grunt watch(matamata)

Matamata i le Less source files ma otometi ona toe tuufaatasia i le CSS i soo se taimi e te teuina ai se suiga.

grunt test(Ta'e su'ega)

Faʻatautaia le JSHint ma faʻatautaia suʻega QUnit i suʻesuʻega moni faʻafetai ia Karma .

grunt docs(Fausia & fa'ata'ita'i aseta docs)

Fausia ma fa'ata'ita'i le CSS, JavaScript, ma isi aseta o lo'o fa'aogaina pe a fa'agasolo fa'amaumauga i le lotoifale e ala ile bundle exec jekyll serve.

grunt(Fausia atoatoa mea uma ma fai suʻega)

Tu'ufa'atasi ma fa'aititia le CSS ma le JavaScript, fausia le upega tafa'ilagi o fa'amaumauga, fa'atautaia le HTML5 validator e fa'asaga i fa'amaumauga, toe fa'afouina aseta Customizer, ma isi mea. Manaomia Jekyll . E masani lava na'o le mana'omia pe afai o lo'o e su'eina le Bootstrap lava ia.

Fa'afitauli

Afai e te feagai ma faʻafitauli i le faʻapipiʻiina o faʻalagolago poʻo le faʻaogaina o Grunt commands, muamua tape le /node_modules/lisi na faia e npm. Ona toe fai lea npm install.

Fa'ata'ita'iga autu

Amata i lenei faʻataʻitaʻiga HTML faavae, pe suia nei faʻataʻitaʻiga . Matou te fa'amoemoe o le a e fa'avasegaina a matou fa'ata'ita'iga ma fa'ata'ita'iga, fa'afetaui i latou e fetaui ma ou mana'oga.

Kopi le HTML o loʻo i lalo e amata galue ai ma se pepa Bootstrap laʻititi.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Faataitaiga

Fausia i luga o le mamanu autu o loʻo i luga ma le tele o vaega a Bootstrap. Matou te fa'amalosia oe e fa'avasega ma fa'afetaui le Bootstrap ina ia fetaui ma mana'oga o lau lava poloketi.

Maua le code source mo faʻataʻitaʻiga uma o loʻo i lalo e ala i le siiina mai o le faleoloa Bootstrap . E mafai ona maua faʻataʻitaʻiga i le docs/examples/lisi.

Fa'aaogaina o le fa'avae

Fa'ata'ita'iga amata

E leai se mea ae o mea faʻavae: faʻapipiʻi CSS ma JavaScript faʻatasi ma se atigipusa.

Autu Bootstrap

Tu'u le autu Bootstrap e filifili mo se poto fa'alelei va'aia.

Grids

Le tele o faʻataʻitaʻiga o faʻasologa o faʻasologa faʻatasi ma vaega uma e fa, ofaga, ma isi mea.

Jumbotron

Fausia fa'ata'amilo i le jumbotron fa'atasi ai ma se navbar ma nisi o koluma fa'asologa masani.

jumbotron vaapiapi

Fausia se itulau masani e ala i le faʻaitiʻitia o le pusa faʻaletonu ma le jumbotron.

Navbars i le gaioiga

Navbar

Fa'ata'ita'iga sili e aofia ai le navbar fa'atasi ai ma nisi mea fa'aopoopo.

Navbar pito i luga

Fa'ata'ita'iga fa'apitoa fa'atasi ai ma se fa'ailoga pito i luga fa'atasi ma nisi mea fa'aopoopo.

Navbar mau

Fa'ata'ita'iga fa'apitoa fa'atasi ma se navbar pito i luga fa'atasi ma nisi mea fa'aopoopo.

Vaega masani

Ufiufi

Se fa'ata'ita'iga e tasi le itulau mo le fausiaina o itulau faigofie ma matagofie.

Carousel

Fa'avasega le navbar ma le carousel, ona fa'aopoopo lea o nisi vaega fou.

Blog

Fa'ata'ita'iga fa'akomepiuta faigofie e lua-koluma fa'atasi ai ma aga masani, ulutala, ma le ituaiga.

Laupapa laupapa

Fuafuaga fa'avae mo se admin dashboard fa'atasi ma fa'amaufa'ailoga pito i luma ma le navbar.

Itulau saini

Fa'atulagaina fomu fa'apitoa ma le mamanu mo se fa'ailoga faigofie i foliga.

Tauamiotonuina nav

Fausia se navbar masani ma so'oga fa'amaonia. Ulu i luga! E le faauo tele Safari.

vae pipii

Fa'apipi'i se vae i le pito i lalo o le va'aiga pe a pu'upu'u le anotusi.

Fa'amau pipii ma le navbar

Fa'apipi'i se vae i le pito i lalo o le va'aiga va'ai fa'atasi ai ma se fa'amau fa'amau i le pito i luga.

Fa'ata'ita'iga

Bootstrap e le tali mai

Fa'afaigofie ona fa'amalo le tali atu a Bootstrap i la matou fa'amaumauga .

Tapoleni fafo

Fausia se lisi fa'asaga i fafo o le tapoleni mo le fa'aoga i le Bootstrap.

Meafaigaluega

Bootlint

Bootlint o le meafaigaluega faʻapipiʻi HTML Bootstrap aloaia. E otometi lava ona siaki le tele o mea sese HTML masani i itulau web o loʻo faʻaogaina le Bootstrap i se auala "vanila". Vanilla Bootstrap's parts/widgets e mana'omia a latou vaega o le DOM e fa'afetaui i nisi fausaga. E siaki e Bootlint o fa'ata'ita'iga o vaega Bootstrap e sa'o le fa'atulagaina o HTML. Mafaufau e fa'aopoopo le Bootlint i lau Bootstrap web development toolchain ina ia leai se mea sese masani e fa'agesegese ai le atina'eina o lau poloketi.

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 e faʻaaoga le IRC i totonu o le irc.freenode.net'auʻaunaga, i le ##bootstrap channel .
• Mo se fesoasoani i le faʻaaogaina o Bootstrap, fesili ile StackOverflow e faʻaaoga ai le pinetwitter-bootstrap-3 .
• 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.
• Su'e fa'ata'ita'iga fa'aosofia o tagata faufale ma Bootstrap i le Bootstrap Expo .

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

Fa'aletonu le tali atu

E otometi lava ona fetuutuunai e Bootstrap au itulau mo le tele o lau lau. O le auala lenei e faʻamalo ai lenei vaega ina ia galue lau itulau e pei o lenei faʻataʻitaʻiga e le tali mai .

Laasaga e tape ai le tali atu o itulau

1. Aveese le va'aiga o <meta>lo'o ta'ua i le CSS docs
2. Fa'ato'a fa'asolo i widthluga .containermo fa'asologa fa'asologa ta'itasi ma le lautele e tasi, mo se fa'ata'ita'iga width: 970px !important;Ia mautinoa e sau lenei mea pe a uma le Bootstrap CSS fa'aletonu. E mafai ona e filifili e aloese mai ai !importanti fesili a le aufaasālalau poʻo nisi tagata filifilia-fu.
3. Afai e fa'aoga navbars, aveese uma navbar ua pa'u ma fa'alauteleina amioga.
4. Mo fa'asologa o fa'asologa, fa'aoga .col-xs-*vasega fa'aopoopo i, po'o le suitulaga o, vasega feololo/tele. Aua e te popole, o le fa'aopoopo-tama'i masini grid fua i iugafono uma.

E te mana'omia pea le Respond.js mo le IE8 (talu ai o lo'o iai pea a matou fa'asalalauga ma e mana'omia ona fa'agasolo). Ole mea lea e fa'agata ai vaega ole "mobile site" o Bootstrap.

Fa'ata'ita'iga Bootstrap ma fa'aletonu le tali atu

Ua matou fa'aogaina laasaga nei i se fa'ata'ita'iga. Faitau lana source code e va'ai i suiga fa'apitoa ua fa'atinoina.

Va'ai fa'ata'ita'iga e le'i tali mai

Su'esu'e ma masini lagolago

Ua fausia le Bootstrap ina ia sili ona aoga i luga o le komepiuta fou ma su'esu'ega feavea'i, o lona uiga e mafai e tagata su'esu'e matutua ona fa'aalia siili eseese, e ui ina atoatoa, fa'aliliuga o nisi vaega.

Su'esu'ega lagolago

Aemaise lava, matou te lagolagoina lomiga fou o su'esu'ega ma fa'avae nei.

O isi su'esu'ega o lo'o fa'aogaina le WebKit, Blink, po'o Gecko, pe tu'u sa'o po'o ala i luga ole laiga ole upegatafa'ilagi API, e le o lagolagoina manino. Ae ui i lea, Bootstrap e tatau (i le tele o tulaga) faʻaalia ma galue saʻo i nei suʻesuʻega. O fa'amatalaga lagolago fa'apitoa o lo'o tu'uina atu i lalo.

Masini feaveai

I le tulaga masani, e lagolagoina e Bootstrap lomiga fou o su'esu'ega fa'aletonu ta'itasi. Manatua o su'esu'ega sui (pei o le Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) e le lagolagoina.

Su'esu'ega Desktop

E fa'apena fo'i, o lo'o lagolagoina fo'i fa'amatalaga lata mai o le tele o su'esu'ega o le desktop.

I luga o Windows, matou te lagolagoina Internet Explorer 8-11 .

Mo Firefox, fa'aopoopo i le fa'asalalauga fa'amaumau masani, matou te lagolagoina fo'i le fa'amatalaga lata mai o le Extended Support Release (ESR) a Firefox.

E le aloaia, Bootstrap e tatau ona foliga lelei ma amio lelei i Chromium ma Chrome mo Linux, Firefox mo Linux, ma Internet Explorer 7, faʻapea foʻi ma Microsoft Edge, e ui lava e leʻo lagolagoina aloaia.

Mo se lisi o nisi o masini suʻesuʻe e tatau ona tauivi ma Bootstrap, vaʻai i le matou Wall of browser bugs .

Internet Explorer 8 ma 9

E lagolagoina foi le Internet Explorer 8 ma le 9, peita'i, faamolemole ia nofouta o nisi o meatotino CSS3 ma elemene HTML5 e le o lagolagoina atoatoa e nei tagata su'esu'e. E le gata i lea, o le Internet Explorer 8 e mana'omia le fa'aogaina o le Respond.js e fa'aagaaga ai le lagolago a le aufaasālalau.

Asiasi E mafai ona ou fa'aoga... mo fa'amatalaga ile lagolago ole su'esu'e ole CSS3 ma HTML5.

Internet Explorer 8 ma Respond.js

Fa'aeteete i fa'atonuga nei pe a fa'aogaina le Respond.js i lau atina'e ma le gaosiga o siosiomaga mo Internet Explorer 8.

Respond.js ma cross-domain CSS

O le fa'aogaina o le Respond.js ma le CSS o lo'o fa'afeiloa'i i se isi (sub) domain (fa'ata'ita'iga, i luga o le CDN) e mana'omia ai se fa'aopoopo fa'aopoopo. Va'ai le Respond.js docs mo fa'amatalaga.

Tali.js mafile://

Ona o tulafono o le saogalemu o su'esu'ega, e le galue le Respond.js i itulau o lo'o va'aia e ala i le file://protocol (pei o le tatalaina o se faila HTML i le lotoifale). Ina ia faʻataʻitaʻiina foliga tali i le IE8, vaʻai au itulau ile HTTP(S). Va'ai le Respond.js docs mo fa'amatalaga.

Tali.js ma@import

Respond.js e le galue i le CSS lea e fa'asino ile @import. Aemaise lava, o nisi o faʻasalalauga Drupal ua iloa e faʻaaoga @import. Va'ai le Respond.js docs mo fa'amatalaga.

Internet Explorer 8 ma le fa'avasegaina o pusa

E le lagolagoina atoatoa e le IE8 box-sizing: border-box;pe a tu'ufa'atasia ma min-width, max-width, min-height, po'o max-height. Mo lena mafuaaga, e pei o le v3.0.1, matou te le toe faʻaogaina max-widthi luga o .containerle s.

Internet Explorer 8 ma @font-face

IE8 ei ai ni faʻafitauli @font-facepe a tuʻufaʻatasia ma :before. E faʻaaogaina e Bootstrap lena tuʻufaʻatasiga ma ana Glyphicons. Afai e teu se itulau, ma uta e aunoa ma le isumu i luga o le faamalama (e pei o le kiliki i le faʻamau faʻamau poʻo le utaina o se mea i totonu o se iframe) ona faʻaalia lea o le itulau aʻo leʻi utaina le vai papatisoga. O le fa'afefe i luga o le itulau (tino) o le a fa'aalia ai nisi o ata ma fa'afefe i luga o ata o lo'o totoe o le a fa'aalia ai fo'i. Va'ai le lomiga #13863 mo fa'amatalaga.

IE Fegalegaleaiga auala

E le lagolagoina le Bootstrap i faiga tuai o feso'ota'iga Internet Explorer. Ina ia mautinoa o loʻo e faʻaogaina le faiga faʻaliliuga lata mai mo le IE, mafaufau e aofia ai le <meta>pine talafeagai i au itulau:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Faʻamaonia le faiga o pepa e ala i le tatalaina o meafaigaluega faʻapipiʻi: lolomi F12ma siaki le "Document Mode".

O lenei pine o loʻo aofia i totonu o faʻamaumauga uma a Bootstrap ma faʻataʻitaʻiga e faʻamautinoa ai le sili ona lelei faʻaaliga e mafai i taʻitasi lagolago o Internet Explorer.

Va'ai lenei fesili StackOverflow mo nisi fa'amatalaga.

Internet Explorer 10 ile Windows 8 ma le Windows Phone 8

Internet Explorer 10 e le fa'avasegaina le lautele o le masini mai le lautele o le va'aiga , ma o lea e le fa'aogaina lelei ai fesili fa'asalalau i le Bootstrap's CSS. E masani lava e na'o le fa'aopoopoina o se snippet vave o le CSS e fa'aleleia ai lenei mea:

@-ms-viewport       { width: device-width; }

Ae ui i lea, e le aoga lenei mea mo masini o loʻo faʻaogaina Windows Phone 8 versions e sili atu nai lo le Update 3 (aka GDR3) , aua e mafua ai ona faʻaalia e ia masini le tele o le vaaiga i luga o le komepiuta nai lo le vaapiapi "telefoni" vaʻai. Ina ia fa'atalanoaina lenei mea, e mana'omia lou fa'aofiina o le CSS ma le JavaScript lea e fa'atino ai le pusa .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Mo nisi fa'amatalaga ma ta'iala fa'aoga, faitau le Windows Phone 8 ma le Device-Width .

I le avea ai ma ulu i luga, matou te faʻaofiina lenei mea i faʻamaumauga uma a Bootstrap ma faʻataʻitaʻiga o se faʻataʻitaʻiga.

Safari pasene fa'a'amilosaga

O le fa'aliliuga afi o fa'aliliuga o Safari a'o le'i o'o i le v7.1 mo le OS X ma le Safari mo le iOS v8.0 sa i ai fa'afitauli i le numera o nofoaga tesimale o lo'o fa'aogaina i a tatou .col-*-1vasega fa'asologa. Afai la e 12 au koluma fa'asologa ta'itasi, e te maitauina na fa'apuupuu pe a fa'atusatusa i isi laina o koluma. E ese mai i le faʻaleleia o Safari/iOS, e iai ni au filifiliga mo faʻafitauli:

• Fa'aopoopo .pull-righti lau koluma fa'asologa mulimuli e maua ai le fa'aoga sa'o faigata
• Tweak lau pasene ma le lima e maua ai le taamilosaga atoatoa mo Safari (sili atu le faigata nai lo le filifiliga muamua)

Modals, navbars, ma keyboards virtual

Taumasua ma ta'avale

Lagolago mo overflow: hiddenluga ole <body>elemene e faʻatapulaʻaina ile iOS ma le Android. I lena tulaga, pe a e taʻavale i tua i luga poʻo le pito i lalo o se auala i soʻo se tasi o na masini suʻesuʻe, o le <body>a amata ona taʻavale le anotusi. Va'ai Chrome bug #175502 (fa'amau i Chrome v40) ma WebKit bug #153852 .

iOS fanua tusitusiga ma ta'avale

E pei o le iOS 9.3, a'o tatala se auala, pe afai o le paʻi muamua o se tusi taʻavale o loʻo i totonu o le tuaoi o se tusitusiga <input>poʻo se <textarea>, o <body>mea o loʻo i lalo o le modal o le a taʻavale nai lo le auala lava ia. Va'ai WebKit bug #153856 .

Pisi komepiuta

E le gata i lea, ia maitauina afai o loʻo e faʻaogaina se navbar faʻamautu poʻo le faʻaogaina o mea e faʻaoga i totonu o se modal, o loʻo i ai i le iOS se pusa faʻaliliuga e le faʻafouina ai le tulaga o elemene faʻapipiʻi pe a faʻaosoina le keyboard virtual. O nai fofo mo lenei mea e aofia ai le suia o au elemene i position: absolutepoʻo le faʻaogaina o se taimi e taulaʻi e taumafai e faʻasaʻo le faʻatulagaina ma le lima. E le o taulimaina e Bootstrap lenei mea, o lea e pule ai oe pe o le fea fofo e sili ona lelei mo lau talosaga.

Navbar Dropdowns

E .dropdown-backdrople fa'aogaina le elemene ile iOS ile nav ona o le lavelave ole z-indexing. O lea la, ina ia tapunia pa'ū i lalo navbars, e tatau ona e kiliki saʻo le pa'ū elemene elemene (poʻo soʻo se isi elemene e faʻapupulaina ai se kiliki mea na tupu i iOS ).

Su'ega su'esu'e

O le fa'aliga o itulau e mautinoa lava e fa'aalia ai le tu'uina atu o mea taulima i nisi vaega, i totonu o Bootstrap ma isi vaega o le upega tafa'ilagi. Faʻalagolago i le mataupu, atonu e mafai ona matou faʻaleleia (saili muamua ona tatala lea o se mataupu pe a manaʻomia). Ae ui i lea, e masani ona tatou le amanaiaina nei mea ona e masani ona leai ni fofo tuusaʻo e ese mai i le hacky workarounds.

Pi'i :hover/ :focusluga ole telefoni feaveai

E ui lava e le mafai ona faʻafefeteina i luga o le tele o laupepa paʻi, o le tele o suʻesuʻega feaveaʻi e faʻataʻitaʻiina le lagolago faʻafefe ma fai :hover"pipii". I se isi faaupuga, :hovero sitaili e amata ona faʻaoga pe a uma ona taina se elemene ma naʻo le tuʻuina o le faʻaogaina pe a uma le tagata faʻaoga o le isi elemene. O lenei mea e mafai ona mafua ai setete o Bootstrap :hovere le manaʻomia ona "pipii" i luga o ia suʻesuʻega. O nisi su'esu'ega feavea'i e :focusfa'apea fo'i ona pipii. E leai se fofo faigofie i le taimi nei mo nei faʻafitauli e ese mai le aveese atoa o ia ituaiga sitaili.

Lomitusi

E oo lava i nisi suʻesuʻega faʻaonaponei, lolomi e mafai ona faʻafefe.

Aemaise lava, e pei o le Chrome v32 ma e tusa lava po o le a le tulaga o le pito, e faʻaogaina e Chrome le lautele o le vaʻai vaʻai e sili atu le vaapiapi nai lo le tele o le pepa faaletino pe a foʻia faʻamatalaga a le aufaasālalau aʻo lolomi se itulau web. Ole mea lea e mafai ai ona fa'afuase'i ona fa'agaoioia le laina fa'aopoopo a Bootstrap pe a lolomi. Va'ai mataupu #12078 ma Chrome bug #273306 mo nisi fa'amatalaga. Fautuaga fofo:

• Talia le fa'asologa fa'aopoopo-laititi ma ia mautinoa e foliga talia lau itulau i lalo.
• Fa'asinomaga tau o le @screen-*Less fesuiaiga ina ia manatu lau pepa lomitusi e sili atu nai lo le laititi.
• Fa'aopoopo fesili fa'asalalau fa'apitoa e sui ai fa'amatu'u le lapopo'a mo na'o fa'asalalauga lolomi.

E le gata i lea, e pei o le Safari v8.0, fa'amau-lautele .containers e mafai ona fa'aaogaina e Safari se la'ititi la'ititi la'ititi pe a lolomi. Va'ai #14868 ma WebKit bug #138192 mo nisi fa'amatalaga. O se tasi e mafai ona fofo mo lenei mea o le faʻaopoopoina o le CSS lea:

@media print {
  .container {
    width: auto;
  }
}

Su'esu'e oloa Android

I fafo atu o le pusa, Android 4.1 (ma e oʻo lava i nisi faʻasalalauga fou e foliga mai) faʻatasi ma le Browser app e avea o le upega tafaʻilagi le lelei o filifiliga (e ese mai le Chrome). O le mea e leaga ai, o le Browser app e tele naua ma faʻalavelave ma le CSS lautele.

Filifili menus

I luga o <select>elemene, o le a le faʻaalia e le suʻesuʻega o oloa a le Android le faʻatonuga o le itu pe a iai se border-radiusma / pe borderfaʻaaogaina. (Vaai i lenei fesili StackOverflow mo faʻamatalaga.) Faʻaaoga le snippet of code o loʻo i lalo e aveese ai le CSS solitulafono ma faʻaalia <select>e avea o se elemene e le faʻaalia i luga o le suʻega o oloa Android. Ole sogisogi ole tagata fa'aoga e aloese mai le fa'alavelave ile Chrome, Safari, ma Mozilla browsers.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

E te fia va'ai i se fa'ata'ita'iga? Siaki lenei JS Bin demo.

Tagata fa'amaonia

Ina ia mafai ona maua le poto masani sili ona lelei i suʻesuʻega tuai ma taʻavale, e faʻaogaina e Bootstrap hacks suʻesuʻe CSS i le tele o nofoaga e faʻatatau ai le CSS faʻapitoa i nisi o suʻega suʻesuʻe ina ia mafai ai ona faʻaogaina faʻamau i totonu o latou lava suʻesuʻega. O nei hacks ma le malamalama e mafua ai ona faitio tagata faʻamaonia CSS e le aoga. I ni nofoaga se lua, matou te fa'aogaina fo'i vaega CSS e le'i fa'ata'atia atoatoa, ae o lo'o fa'aogaina mo le fa'aleleia atili.

O nei lapataiga faʻamaonia e le afaina i le faʻatinoga talu ai o le vaega e le-hacky o la tatou CSS e faʻamaonia atoatoa ma o vaega hacky e le faʻalavelave i le faʻaogaina lelei o le vaega e le-hacky, o le mea lea tatou te le amanaiaina ai nei lapataiga faapitoa.

O a matou HTML docs foi e iai ni lapataiga faʻamaonia HTML e le taua ma e le taua ona o lo matou faʻaofiina o se fofo mo se pusa Firefox patino .

Lagolago vaega lona tolu

E ui e matou te le lagolagoina aloaia soʻo se isi vaega faʻapipiʻi poʻo faʻaopoopoga, matou te ofoina atu ni fautuaga aoga e fesoasoani e aloese mai faʻafitauli e ono tutupu i au poloketi.

Pusa-fa'atele

O nisi polokalama faakomepiuta lona tolu, e aofia ai Google Maps ma Google Custom Search Engine, feteenai ma Bootstrap ona o le * { box-sizing: border-box; }, o se tulafono paddinge le afaina ai le lautele mulimuli o se elemene. A'oa'o atili e uiga i pusa fa'ata'ita'iga ma le fa'avasegaina ile CSS Tricks .

Fa'alagolago i le fa'amatalaga, e mafai ona e fa'asili pe a mana'omia (Filifiliga 1) po'o le toe setiina o le fa'avasegaina o pusa mo itulagi atoa (Filifiliga 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Avanoa

O le Bootstrap e mulimulitaia tulaga masani i luga o le upega tafaʻilagi ma-ma le itiiti o taumafaiga faʻaopoopo-e mafai ona faʻaoga e fai ai saite e mafai ona maua e i latou o loʻo faʻaaogaina AT .

Fa'ase'e folauga

Afai o lau folauga o loʻo i ai le tele o fesoʻotaʻiga ma e sau i luma o le autu autu i totonu o le DOM, faʻaopoopo se Skip to main contentfesoʻotaʻiga aʻo leʻi faia le faʻasalalauga (mo se faʻamatalaga faigofie, vaʻai i lenei A11Y Project article i luga ole navigation links ). O le fa'aaogaina o le .sr-onlyvasega o le a natia ai le so'otaga fa'ase'e, ma o le .sr-only-focusablea fa'amautinoa e le vasega o le a fa'aalia le so'otaga pe'ā taula'i atu (mo tagata fa'aoga keyboard).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Ulutala faamoega

Pe a fa'aulu fa'aulutala ( <h1>- <h6>), o lau ulutala pepa muamua e tatau ona avea ma <h1>. O ulutala mulimuli ane e tatau ona fa'aoga tatau <h2>- <h6>ina ia mafai ai e le au faitau lautusi ona fausia se lisi o mea mo au itulau.

A'oa'o atili ile HTML CodeSniffer ma Penn State's AccessAbility .

Fa'afeagai lanu

I le taimi nei, o nisi o tu'ufa'atasiga lanu e maua i le Bootstrap (e pei o vasega fa'avasega fa'amau , o nisi o fa'ailoga e fa'ailoa ai lanu e fa'aaoga mo poloka fa'ailoga autu , le vasega fesoasoani i .bg-primary tua , ma le lanu o feso'ota'iga pe a fa'aoga i luga o se papa'e pa'epa'e) e maualalo le fa'atusatusaga fa'atusatusa (i lalo ifo o le fua fa'atatau o le 4.5:1 ). E mafai ona tupu ai fa'afitauli i tagata fa'aoga e vaivai le va'ai po'o e tauaso lanu. O nei lanu fa'aletonu atonu e mana'omia ona toe fa'aleleia ina ia fa'atele ai le fa'atusatusaga ma le fa'amaonia.

Punaoa faaopoopo

• Fa'ailoga tusi "HTML Codesniffer" mo le fa'ailoaina o fa'afitauli avanoa
• Chrome's Accessibility Developer Tools fa'aopoopoga
• Su'esu'e Fa'atusatusa Lanu
• Le Poloketi A11Y
• MDN fa'amatalaga avanoa

Laisene FAQs

Ua tatalaina le Bootstrap i lalo ole laisene MIT ma o le puletaofia 2019 Twitter. Fa'apala i lalo i ni pusi laiti, e mafai ona faamatalaina i tulaga nei.

E manaʻomia oe e:

• Taofi le laisene ma le puletaofia fa'asilasilaga e aofia i totonu o Bootstrap's CSS ma faila JavaScript pe ae fa'aogaina i au galuega

E fa'atagaina oe e:

• Tu'u fua ma fa'aoga le Bootstrap, i lona atoaga po'o se vaega, mo le tagata lava ia, tumaoti, kamupani i totonu, po'o fa'atau pisinisi
• Fa'aaoga le Bootstrap i afifi po'o tufatufaga e te fatuina
• Suia le code puna
• Tuuina atu se sublicense e sui ma tufatufa atu Bootstrap i isi vaega e le o aofia ai i le laisene

E fa'asa oe e:

• Taofi le au tusitala ma tagata e ona laisene e noatia mo mea leaga e pei ona tuʻuina atu Bootstrap e aunoa ma se faʻamaonia
• Taofi le au fatu po'o tagata e umia le puletaofia o Bootstrap e noatia
• Toe tufatufa atu soʻo se vaega o Bootstrap e aunoa ma se faʻamatalaga talafeagai
• Fa'aaoga so'o se fa'ailoga o lo'o umia e Twitter i so'o se auala e ono ta'u mai ai pe fa'aalia ai e fa'amaonia e Twitter lau tufatufaga
• Fa'aoga so'o se fa'ailoga e umia e Twitter i so'o se auala e ono ta'u mai ai pe fa'ailoa mai na e faia le polokalama Twitter o lo'o fesiligia

E le manaʻomia oe e:

• Faʻaaofia le puna o Bootstrap lava ia, poʻo soʻo se suiga atonu na e faia i ai, i soʻo se toe tufatufaga e mafai ona e faʻapipiʻiina e aofia ai.
• Tuuina atu suiga e te faia i Bootstrap toe foʻi i le Bootstrap poloketi (e ui o ia faʻamatalaga e faʻamalosia)

O le laisene Bootstrap atoa o loʻo i totonu o le fale teu oloa mo nisi faʻamatalaga.

Fa'aliliuga

Ua faaliliuina e tagata o le nuu ia faamaumauga a Bootstrap i gagana eseese. E leai se tasi e lagolagoina aloa'ia ma atonu e le o fa'afou i taimi uma.

• Bootstrap 中文文档 (Saina)
• Bootstrap i Dansk (Tenimaka)
• Bootstrap i Français (Farani)
• Bootstrap auf Deutsch (Siamani)
• Bootstrap ile Italiano (Italia)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Pasila Potukale)
• Bootstrap по-русски (Rusia)
• Bootstrap i le Español (Sipaniolo)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukaraina)
• Bootstrap bằng tiếng Việt (Vietnamese)

Matou te le fesoasoani e fa'atulaga pe fa'afeiloa'i fa'aliliuga, matou te feso'ota'i i ai.

Ua uma se faaliliuga fou pe sili atu? Tatala se talosaga toso e faaopoopo i la matou lisi.