I-download

Ang Bootstrap (kasalukuyang v3.3.7) ay may ilang madaling paraan upang mabilis na makapagsimula, bawat isa ay nakakaakit sa ibang antas ng kasanayan at kaso ng paggamit. Basahin upang makita kung ano ang nababagay sa iyong mga partikular na pangangailangan.

Bootstrap CDN

Ang mga tao sa jsDelivr ay magiliw na nagbibigay ng suporta sa CDN para sa CSS at JavaScript ng Bootstrap. Gamitin lamang ang mga link na ito ng Bootstrap CDN .

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

I-install gamit ang Bower

Maaari mo ring i-install at pamahalaan ang Less, CSS, JavaScript, at mga font ng Bootstrap gamit ang Bower :

$ bower install bootstrap

I-install gamit ang npm

Maaari mo ring i-install ang Bootstrap gamit ang npm :

$ npm install bootstrap@3

require('bootstrap')ilo-load ang lahat ng mga plugin ng jQuery ng Bootstrap sa object ng jQuery. Ang bootstrapmodule mismo ay hindi nag-e-export ng anuman. Maaari mong manu-manong i-load ang mga plugin ng jQuery ng Bootstrap nang paisa-isa sa pamamagitan ng paglo-load ng mga /js/*.jsfile sa ilalim ng nangungunang antas ng direktoryo ng package.

Naglalaman ang Bootstrap ng package.jsonilang karagdagang metadata sa ilalim ng mga sumusunod na key:

• less- landas patungo sa pangunahing Mas kaunting source file ng Bootstrap
• style- path sa hindi pinaliit na CSS ng Bootstrap na na-precompiled gamit ang mga default na setting (walang pag-customize)

I-install gamit ang Composer

Maaari mo ring i-install at pamahalaan ang Less, CSS, JavaScript, at mga font ng Bootstrap gamit ang Composer :

$ composer require twbs/bootstrap

Kinakailangan ang Autoprefixer para sa Less/Sass

Gumagamit ang Bootstrap ng Autoprefixer upang harapin ang mga prefix ng vendor ng CSS . Kung kino-compile mo ang Bootstrap mula sa Less/Sass source nito at hindi ginagamit ang aming Gruntfile, kakailanganin mong isama ang Autoprefixer sa iyong proseso ng build. Kung gumagamit ka ng precompiled Bootstrap o gumagamit ng aming Gruntfile, hindi mo kailangang mag-alala tungkol dito dahil ang Autoprefixer ay isinama na sa aming Gruntfile.

Ano ang kasama

Ang Bootstrap ay mada-download sa dalawang anyo, kung saan makikita mo ang mga sumusunod na direktoryo at file, lohikal na pinagsasama-sama ang mga karaniwang mapagkukunan at nagbibigay ng parehong pinagsama-sama at pinaliit na mga variation.

Precompiled Bootstrap

Kapag na-download na, i-unzip ang naka-compress na folder upang makita ang istraktura ng (ang pinagsama-samang) Bootstrap. Makakakita ka ng ganito:

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

Ito ang pinakapangunahing anyo ng Bootstrap: mga paunang pinagsama-samang mga file para sa mabilisang paggamit ng drop-in sa halos anumang proyekto sa web. Nagbibigay kami ng pinagsama-samang CSS at JS ( bootstrap.*), pati na rin ang pinagsama-sama at pinaliit na CSS at JS ( bootstrap.min.*). Ang mga CSS source na mapa ( bootstrap.*.map) ay magagamit para sa paggamit sa ilang mga tool ng developer ng browser. Ang mga font mula sa Glyphicons ay kasama, pati na rin ang opsyonal na tema ng Bootstrap.

Bootstrap source code

Kasama sa pag-download ng source code ng Bootstrap ang na-precompiled na CSS, JavaScript, at mga asset ng font, kasama ang source Less, JavaScript, at dokumentasyon. Higit na partikular, kabilang dito ang mga sumusunod at higit pa:

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

Ang less/, js/, at fonts/ang source code para sa aming CSS, JS, at mga font ng icon (ayon sa pagkakabanggit). Kasama dist/sa folder ang lahat ng nakalista sa precompiled download na seksyon sa itaas. Kasama docs/sa folder ang source code para sa aming dokumentasyon, at examples/ng paggamit ng Bootstrap. Higit pa riyan, ang anumang iba pang kasamang file ay nagbibigay ng suporta para sa mga pakete, impormasyon ng lisensya, at pag-unlad.

Kino-compile ang CSS at JavaScript

Gumagamit ang Bootstrap ng Grunt para sa build system nito, na may mga maginhawang pamamaraan para sa pagtatrabaho sa framework. Ito ay kung paano namin kino-compile ang aming code, nagpapatakbo ng mga pagsubok, at higit pa.

Pag-install ng Grunt

Upang i-install ang Grunt, kailangan mo munang mag- download at mag-install ng node.js (na kinabibilangan ng npm). Ang npm ay kumakatawan sa mga module na naka-package ng node at isang paraan upang pamahalaan ang mga dependency sa pag-unlad sa pamamagitan ng node.js.

1. I- install grunt-clisa buong mundo gamit ang npm install -g grunt-cli.
2. Mag-navigate sa root /bootstrap/directory, pagkatapos ay patakbuhin ang npm install. titingnan ng npm ang package.jsonfile at awtomatikong i-install ang mga kinakailangang lokal na dependency na nakalista doon.

Kapag nakumpleto, magagawa mong patakbuhin ang iba't ibang mga utos ng Grunt na ibinigay mula sa linya ng command.

Magagamit na mga utos ng Grunt

grunt dist(I-compile lang ang CSS at JavaScript)

Binubuo muli ang /dist/direktoryo gamit ang pinagsama-sama at pinaliit na mga file ng CSS at JavaScript. Bilang isang gumagamit ng Bootstrap, ito ang karaniwang utos na gusto mo.

grunt watch(Panoorin)

Pinapanood ang Mas kaunting pinagmulang mga file at awtomatikong muling kino-compile ang mga ito sa CSS sa tuwing magse-save ka ng pagbabago.

grunt test(Magpatakbo ng mga pagsubok)

Nagpapatakbo ng JSHint at nagpapatakbo ng mga pagsubok sa QUnit nang walang ulo sa PhantomJS .

grunt docs(Buuin at subukan ang mga asset ng docs)

Bumubuo at sumusubok sa CSS, JavaScript, at iba pang mga asset na ginagamit kapag lokal na pinapatakbo ang dokumentasyon sa pamamagitan ng bundle exec jekyll serve.

grunt(Bumuo ng ganap na lahat at magpatakbo ng mga pagsubok)

Kino-compile at pinapaliit ang CSS at JavaScript, bubuo ng website ng dokumentasyon, pinapatakbo ang HTML5 validator laban sa mga doc, nire-regenerate ang mga asset ng Customizer, at higit pa. Kailangan ni Jekyll . Karaniwang kinakailangan lamang kung ikaw ay nagha-hack sa Bootstrap mismo.

Pag-troubleshoot

Kung makaranas ka ng mga problema sa pag-install ng mga dependency o pagpapatakbo ng mga Grunt command, tanggalin muna ang /node_modules/direktoryo na nabuo ng npm. Pagkatapos, muling ipalabas npm install.

Pangunahing template

Magsimula sa pangunahing template ng HTML na ito, o baguhin ang mga halimbawang ito . Umaasa kaming iko-customize mo ang aming mga template at mga halimbawa, iangkop ang mga ito upang umangkop sa iyong mga pangangailangan.

Kopyahin ang HTML sa ibaba upang magsimulang magtrabaho gamit ang kaunting dokumento ng Bootstrap.

<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Mga halimbawa

Bumuo sa pangunahing template sa itaas gamit ang maraming bahagi ng Bootstrap. Hinihikayat ka naming i-customize at ibagay ang Bootstrap upang umangkop sa mga pangangailangan ng iyong indibidwal na proyekto.

Kunin ang source code para sa bawat halimbawa sa ibaba sa pamamagitan ng pag- download ng Bootstrap repository . Ang mga halimbawa ay matatagpuan sa docs/examples/direktoryo.

Gamit ang balangkas

Panimulang template

Walang iba kundi ang mga pangunahing kaalaman: pinagsama-sama ang CSS at JavaScript kasama ang isang lalagyan.

Bootstrap na tema

I-load ang opsyonal na tema ng Bootstrap para sa visually enhanced na karanasan.

Mga grid

Maramihang mga halimbawa ng mga layout ng grid kasama ang lahat ng apat na tier, nesting, at higit pa.

Jumbotron

Bumuo sa paligid ng jumbotron gamit ang isang navbar at ilang pangunahing grid column.

Makitid na jumbotron

Bumuo ng mas custom na page sa pamamagitan ng pagpapaliit sa default na container at jumbotron.

Kumikilos ang mga Navbar

Navbar

Super basic na template na kinabibilangan ng navbar kasama ng ilang karagdagang content.

Static na navbar sa itaas

Super basic na template na may static na tuktok na navbar kasama ng ilang karagdagang content.

Nakapirming navbar

Super basic na template na may nakapirming tuktok na navbar kasama ng ilang karagdagang nilalaman.

Mga custom na bahagi

Takpan

Isang one-page na template para sa pagbuo ng simple at magagandang home page.

Carousel

I-customize ang navbar at carousel, pagkatapos ay magdagdag ng ilang bagong bahagi.

Blog

Simpleng two-column na layout ng blog na may custom na navigation, header, at type.

Dashboard

Pangunahing istraktura para sa isang admin dashboard na may nakapirming sidebar at navbar.

Pahina ng pag-sign in

Custom na layout ng form at disenyo para sa isang simpleng sign in form.

Makatuwirang nav

Lumikha ng custom na navbar na may mga makatwirang link. Heads up! Hindi masyadong Safari friendly.

Malagkit na footer

Maglakip ng footer sa ibaba ng viewport kapag ang nilalaman ay mas maikli kaysa dito.

Malagkit na footer na may navbar

Maglakip ng footer sa ibaba ng viewport na may nakapirming navbar sa itaas.

Mga eksperimento

Hindi tumutugon na Bootstrap

Madaling i-disable ang kakayahang tumugon ng Bootstrap ayon sa aming mga doc .

Off-canvas

Bumuo ng toggleable off-canvas navigation menu para magamit sa Bootstrap.

Mga gamit

Bootlint

Ang Bootlint ay ang opisyal na Bootstrap HTML linter tool. Awtomatiko nitong sinusuri ang ilang karaniwang pagkakamali sa HTML sa mga webpage na gumagamit ng Bootstrap sa medyo "vanilla" na paraan. Ang mga bahagi/widget ng Vanilla Bootstrap ay nangangailangan ng kanilang mga bahagi ng DOM na umayon sa ilang partikular na istruktura. Tinitingnan ng Bootlint na ang mga instance ng mga bahagi ng Bootstrap ay may wastong pagkakaayos ng HTML. Isaalang-alang ang pagdaragdag ng Bootlint sa iyong Bootstrap web development toolchain upang wala sa mga karaniwang pagkakamali ang makapagpabagal sa pagbuo ng iyong proyekto.

Komunidad

Manatiling napapanahon sa pagbuo ng Bootstrap at makipag-ugnayan sa komunidad gamit ang mga kapaki-pakinabang na mapagkukunang ito.

• Magbasa at mag-subscribe sa The Official Bootstrap Blog .
• Makipag-chat sa mga kapwa Bootstrapper gamit ang IRC sa irc.freenode.netserver, sa ##bootstrap channel .
• Para sa tulong sa paggamit ng Bootstrap, magtanong sa StackOverflow gamit ang tagtwitter-bootstrap-3 .
• Dapat gamitin ng mga developer ang keyword bootstrapsa mga package na nagbabago o nagdaragdag sa functionality ng Bootstrap kapag namamahagi sa pamamagitan ng npm o mga katulad na mekanismo ng paghahatid para sa maximum na pagtuklas.
• Humanap ng mga nakasisiglang halimbawa ng mga taong nagtatayo gamit ang Bootstrap sa Bootstrap Expo .

Maaari mo ring sundan ang @getbootstrap sa Twitter para sa pinakabagong tsismis at kahanga-hangang music video.

Hindi pagpapagana ng pagtugon

Awtomatikong inaangkop ng Bootstrap ang iyong mga pahina para sa iba't ibang laki ng screen. Narito kung paano i-disable ang feature na ito para gumana ang iyong page tulad nitong hindi tumutugon na halimbawa .

Mga hakbang upang huwag paganahin ang pagtugon sa pahina

1. Alisin ang viewport na <meta>binanggit sa CSS docs
2. I-override ang widthon .containerpara sa bawat grid tier na may iisang lapad, halimbawa width: 970px !important;Tiyaking darating ito pagkatapos ng default na Bootstrap CSS. Maaari mong opsyonal na iwasan ang !importantmay mga query sa media o ilang selector-fu.
3. Kung gumagamit ng mga navbar, alisin ang lahat ng pag-collapse at lumalawak na gawi ng navbar.
4. Para sa mga layout ng grid, gumamit .col-xs-*ng mga klase bilang karagdagan sa, o kapalit ng, ang medium/malalaki. Huwag mag-alala, ang extra-maliit na grid ng device ay nagsusukat sa lahat ng resolution.

Kakailanganin mo pa rin ang Respond.js para sa IE8 (dahil naroon pa rin ang aming mga query sa media at kailangang iproseso). Hindi nito pinapagana ang mga aspeto ng "mobile site" ng Bootstrap.

Bootstrap template na hindi pinagana ang kakayahang tumugon

Inilapat namin ang mga hakbang na ito sa isang halimbawa. Basahin ang source code nito para makita ang mga partikular na pagbabagong ipinatupad.

Tingnan ang hindi tumutugon na halimbawa

Suporta sa browser at device

Ang Bootstrap ay binuo upang gumana nang pinakamahusay sa pinakabagong mga desktop at mobile browser, ibig sabihin, ang mga mas lumang browser ay maaaring magpakita ng ibang istilo, bagama't ganap na gumagana, ang mga rendering ng ilang partikular na bahagi.

Mga sinusuportahang browser

Sa partikular, sinusuportahan namin ang pinakabagong mga bersyon ng mga sumusunod na browser at platform.

Ang mga alternatibong browser na gumagamit ng pinakabagong bersyon ng WebKit, Blink, o Tuko, direkta man o sa pamamagitan ng web view API ng platform, ay hindi tahasang sinusuportahan. Gayunpaman, ang Bootstrap ay dapat (sa karamihan ng mga kaso) na magpakita at gumana nang tama sa mga browser na ito. Ang mas tiyak na impormasyon ng suporta ay ibinigay sa ibaba.

Mga mobile device

Sa pangkalahatan, sinusuportahan ng Bootstrap ang pinakabagong mga bersyon ng mga default na browser ng bawat pangunahing platform. Tandaan na ang mga proxy browser (gaya ng Opera Mini, Turbo mode ng Opera Mobile, UC Browser Mini, Amazon Silk) ay hindi suportado.

Mga desktop browser

Katulad nito, sinusuportahan ang mga pinakabagong bersyon ng karamihan sa mga desktop browser.

Sa Windows, sinusuportahan namin ang Internet Explorer 8-11 .

Para sa Firefox, bilang karagdagan sa pinakabagong normal na stable na release, sinusuportahan din namin ang pinakabagong Extended Support Release (ESR) na bersyon ng Firefox.

Hindi opisyal, ang Bootstrap ay dapat magmukhang at kumilos nang maayos sa Chromium at Chrome para sa Linux, Firefox para sa Linux, at Internet Explorer 7, pati na rin sa Microsoft Edge, kahit na hindi sila opisyal na suportado.

Para sa isang listahan ng ilan sa mga browser bug na kailangang harapin ng Bootstrap, tingnan ang aming Wall of browser bugs .

Internet Explorer 8 at 9

Ang Internet Explorer 8 at 9 ay sinusuportahan din, gayunpaman, mangyaring magkaroon ng kamalayan na ang ilang mga katangian ng CSS3 at HTML5 na elemento ay hindi ganap na sinusuportahan ng mga browser na ito. Bilang karagdagan, ang Internet Explorer 8 ay nangangailangan ng paggamit ng Respond.js upang paganahin ang suporta sa query ng media.

Bisitahin ang Magagamit ko ba... para sa mga detalye sa suporta ng browser ng mga tampok ng CSS3 at HTML5.

Internet Explorer 8 at Respond.js

Mag-ingat sa mga sumusunod na caveat kapag gumagamit ng Respond.js sa iyong development at production environment para sa Internet Explorer 8.

Respond.js at cross-domain CSS

Ang paggamit ng Respond.js na may CSS na naka-host sa ibang (sub)domain (halimbawa, sa isang CDN) ay nangangailangan ng ilang karagdagang setup. Tingnan ang Respond.js docs para sa mga detalye.

Tumugon.js atfile://

Dahil sa mga panuntunan sa seguridad ng browser, hindi gumagana ang Respond.js sa mga page na tiningnan sa pamamagitan ng file://protocol (tulad ng pagbukas ng lokal na HTML file). Upang subukan ang mga tumutugong feature sa IE8, tingnan ang iyong mga page sa HTTP(S). Tingnan ang Respond.js docs para sa mga detalye.

Tumugon.js at@import

Ang Respond.js ay hindi gumagana sa CSS na isinangguni sa pamamagitan ng @import. Sa partikular, ang ilang mga pagsasaayos ng Drupal ay kilala na gumagamit ng @import. Tingnan ang Respond.js docs para sa mga detalye.

Internet Explorer 8 at box-sizing

Hindi ganap na sinusuportahan ng IE8 box-sizing: border-box;kapag pinagsama sa min-width, max-width, min-height, o max-height. Para sa kadahilanang iyon, mula sa v3.0.1, hindi na kami gumagamit max-widthsa .containers.

Internet Explorer 8 at @font-face

Ang IE8 ay may ilang mga isyu sa @font-facekapag pinagsama sa :before. Ginagamit ng Bootstrap ang kumbinasyong iyon sa mga Glyphicon nito. Kung ang isang page ay naka-cache, at na-load nang walang mouse sa ibabaw ng window (ibig sabihin, pindutin ang refresh button o mag-load ng isang bagay sa isang iframe) pagkatapos ay mai-render ang page bago mag-load ang font. Ang pag-hover sa pahina (katawan) ay magpapakita ng ilan sa mga icon at ang pag-hover sa mga natitirang icon ay magpapakita rin ng mga iyon. Tingnan ang isyu #13863 para sa mga detalye.

IE Compatibility mode

Hindi sinusuportahan ang Bootstrap sa lumang mga mode ng compatibility ng Internet Explorer. Upang matiyak na ginagamit mo ang pinakabagong mode ng pag-render para sa IE, isaalang-alang ang pagsama ng naaangkop na <meta>tag sa iyong mga pahina:

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

Kumpirmahin ang mode ng dokumento sa pamamagitan ng pagbubukas ng mga tool sa pag-debug: pindutin F12at suriin ang "Document Mode".

Ang tag na ito ay kasama sa lahat ng dokumentasyon at mga halimbawa ng Bootstrap upang matiyak ang pinakamahusay na pag-render na posible sa bawat suportadong bersyon ng Internet Explorer.

Tingnan ang tanong na ito sa StackOverflow para sa higit pang impormasyon.

Internet Explorer 10 sa Windows 8 at Windows Phone 8

Hindi iniiba ng Internet Explorer 10 ang lapad ng device mula sa lapad ng viewport , at sa gayon ay hindi maayos na inilalapat ang mga query sa media sa CSS ng Bootstrap. Karaniwang magdaragdag ka lang ng mabilis na snippet ng CSS upang ayusin ito:

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

Gayunpaman, hindi ito gumagana para sa mga device na nagpapatakbo ng mga bersyon ng Windows Phone 8 na mas luma kaysa sa Update 3 (aka GDR3) , dahil nagiging sanhi ito ng mga naturang device na magpakita ng halos desktop view sa halip na makitid na "telepono" na view. Upang matugunan ito, kakailanganin mong isama ang sumusunod na CSS at JavaScript upang malutas ang bug .

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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)
}

Para sa higit pang impormasyon at mga alituntunin sa paggamit, basahin ang Windows Phone 8 at Device-Width .

Bilang pangunguna, isinama namin ito sa lahat ng dokumentasyon at mga halimbawa ng Bootstrap bilang isang demonstrasyon.

Safari percent rounding

Ang rendering engine ng mga bersyon ng Safari bago ang v7.1 para sa OS X at Safari para sa iOS v8.0 ay nagkaroon ng ilang problema sa bilang ng mga decimal na lugar na ginamit sa aming mga .col-*-1klase sa grid. Kaya kung mayroon kang 12 indibidwal na grid column, mapapansin mong maikli ang mga ito kumpara sa iba pang mga row ng column. Bukod sa pag-upgrade ng Safari/iOS, mayroon kang ilang mga opsyon para sa mga solusyon:

• Idagdag .pull-rightsa iyong huling grid column para makuha ang hard-right alignment
• I-tweak ang iyong mga porsyento nang manu-mano upang makuha ang perpektong pag-ikot para sa Safari (mas mahirap kaysa sa unang opsyon)

Mga modal, navbar, at virtual na keyboard

Overflow at pag-scroll

Ang suporta para overflow: hiddensa <body>elemento ay medyo limitado sa iOS at Android. Sa layuning iyon, kapag nag-scroll ka sa itaas o ibaba ng isang modal sa alinman sa mga browser ng mga device na iyon, <body>magsisimulang mag-scroll ang content. Tingnan ang Chrome bug #175502 (naayos sa Chrome v40) at WebKit bug #153852 .

iOS text field at pag-scroll

Simula sa iOS 9.3, habang nakabukas ang isang modal, kung ang paunang pagpindot ng isang galaw sa pag-scroll ay nasa loob ng hangganan ng isang textual <input>o isang <textarea>, ang <body>nilalaman sa ilalim ng modal ay mai-scroll sa halip na ang modal mismo. Tingnan ang WebKit bug #153856 .

Mga virtual na keyboard

Gayundin, tandaan na kung gumagamit ka ng nakapirming navbar o gumagamit ng mga input sa loob ng isang modal, ang iOS ay may rendering bug na hindi nag-a-update sa posisyon ng mga nakapirming elemento kapag ang virtual na keyboard ay na-trigger. Ang ilang mga solusyon para dito ay kinabibilangan ng pagbabago ng iyong mga elemento sa position: absoluteo paggamit ng isang timer sa focus upang subukang iwasto ang pagpoposisyon nang manu-mano. Hindi ito pinangangasiwaan ng Bootstrap, kaya nasa iyo na magpasya kung aling solusyon ang pinakamainam para sa iyong aplikasyon.

Mga Dropdown ng Navbar

Hindi ginagamit ang .dropdown-backdropelemento sa iOS sa nav dahil sa pagiging kumplikado ng z-indexing. Kaya, upang isara ang mga dropdown sa mga navbar, dapat mong direktang i-click ang dropdown na elemento (o anumang iba pang elemento na magpapagana ng kaganapan sa pag-click sa iOS ).

Pag-zoom ng browser

Ang pag-zoom ng page ay hindi maiiwasang magpapakita ng mga artifact sa pag-render sa ilang bahagi, sa Bootstrap at sa iba pang bahagi ng web. Depende sa isyu, maaari naming ayusin ito (maghanap muna at pagkatapos ay magbukas ng isyu kung kinakailangan). Gayunpaman, madalas naming balewalain ang mga ito dahil madalas silang walang direktang solusyon maliban sa mga hacky na workaround.

Malagkit :hover/ :focussa mobile

Kahit na ang tunay na pag-hover ay hindi posible sa karamihan ng mga touchscreen, karamihan sa mga mobile browser ay ginagaya ang pag-hover ng suporta at nagiging :hover"sticky". Sa madaling salita, :hovermagsisimulang mag-apply ang mga istilo pagkatapos mag-tap sa isang elemento at hihinto lang sa paglalapat pagkatapos mag-tap ang user ng ibang elemento. Ito ay maaaring maging sanhi ng mga estado ng Bootstrap :hoverna maging hindi kanais-nais na "natigil" sa mga naturang browser. Ang ilang mga mobile browser ay gumagawa din ng :focuskatulad na malagkit. Kasalukuyang walang simpleng solusyon para sa mga isyung ito maliban sa ganap na pag-alis ng mga ganitong istilo.

Pagpi-print

Kahit na sa ilang modernong browser, ang pag-print ay maaaring kakaiba.

Sa partikular, sa Chrome v32 at anuman ang mga setting ng margin, gumagamit ang Chrome ng lapad ng viewport na mas makitid kaysa sa pisikal na laki ng papel kapag niresolba ang mga query sa media habang nagpi-print ng webpage. Maaari itong magresulta sa sobrang maliit na grid ng Bootstrap na hindi inaasahang na-activate kapag nagpi-print. Tingnan ang isyu #12078 at Chrome bug #273306 para sa ilang detalye. Mga iminungkahing solusyon:

• Yakapin ang napakaliit na grid at tiyaking katanggap-tanggap ang iyong page sa ilalim nito.
• I-customize ang mga halaga ng @screen-*Mas kaunting mga variable upang ang iyong printer na papel ay maituturing na mas malaki kaysa sa sobrang maliit.
• Magdagdag ng mga custom na query sa media upang baguhin ang mga breakpoint ng laki ng grid para lamang sa print media.

Gayundin, mula sa Safari v8.0, ang fixed-width .containers ay maaaring maging sanhi ng Safari na gumamit ng hindi karaniwang maliit na laki ng font kapag nagpi-print. Tingnan ang #14868 at WebKit bug #138192 para sa higit pang mga detalye. Ang isang potensyal na solusyon para dito ay ang pagdaragdag ng sumusunod na CSS:

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

Android stock browser

Sa labas ng kahon, ang Android 4.1 (at tila ilang mas bagong release) ay ipinapadala kasama ang Browser app bilang default na web browser na pinili (kumpara sa Chrome). Sa kasamaang palad, ang Browser app ay may maraming mga bug at hindi pagkakatugma sa CSS sa pangkalahatan.

Pumili ng mga menu

Sa <select>mga elemento, hindi ipapakita ng Android stock browser ang mga side control kung mayroong border-radiusat/o borderinilapat. (Tingnan ang tanong na ito sa StackOverflow para sa mga detalye.) Gamitin ang snippet ng code sa ibaba upang alisin ang nakakasakit na CSS at i-render ang <select>bilang isang hindi naka-istilong elemento sa Android stock browser. Iniiwasan ng pagsinghot ng user agent ang panghihimasok sa mga browser ng Chrome, Safari, at Mozilla.

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

Gustong makakita ng halimbawa? Tingnan ang JS Bin demo na ito.

Mga validator

Upang makapagbigay ng pinakamahusay na posibleng karanasan sa mga luma at maraming buggy na browser, gumagamit ang Bootstrap ng mga hack ng browser ng CSS sa ilang lugar upang i-target ang espesyal na CSS sa ilang bersyon ng browser upang malutas ang mga bug sa mga browser mismo. Ang mga hack na ito ay maliwanag na nagiging sanhi ng mga validator ng CSS na magreklamo na sila ay hindi wasto. Sa ilang lugar, gumagamit din kami ng bleeding-edge na mga feature ng CSS na hindi pa ganap na na-standardize, ngunit ginagamit lamang ang mga ito para sa progresibong pagpapahusay.

Ang mga babala sa pagpapatunay na ito ay hindi mahalaga sa pagsasanay dahil ang hindi-hacky na bahagi ng aming CSS ay ganap na nagpapatunay at ang mga na-hack na bahagi ay hindi nakakasagabal sa wastong paggana ng hindi-hacky na bahagi, kaya kung bakit namin sinasadya ang mga partikular na babalang ito.

Ang aming mga HTML docs ay mayroon ding ilang maliit at walang kabuluhang mga babala sa pagpapatunay ng HTML dahil sa aming pagsasama ng isang solusyon para sa isang partikular na bug sa Firefox .

Suporta ng ikatlong partido

Bagama't hindi namin opisyal na sinusuportahan ang anumang mga third party na plugin o add-on, nag-aalok kami ng ilang kapaki-pakinabang na payo upang makatulong na maiwasan ang mga potensyal na isyu sa iyong mga proyekto.

Sukat ng kahon

Ang ilang software ng third party, kabilang ang Google Maps at Google Custom Search Engine, ay sumasalungat sa Bootstrap dahil sa * { box-sizing: border-box; }, isang panuntunan na ginagawang paddinghindi ito nakakaapekto sa pinal na nakalkulang lapad ng isang elemento. Matuto nang higit pa tungkol sa modelo ng kahon at pagpapalaki sa CSS Tricks .

Depende sa konteksto, maaari mong i-override kung kinakailangan (Option 1) o i-reset ang box-sizing para sa buong rehiyon (Option 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();
}

Accessibility

Sinusunod ng Bootstrap ang mga karaniwang pamantayan sa web at—na may kaunting dagdag na pagsisikap—ay maaaring gamitin upang lumikha ng mga site na naa-access ng mga gumagamit ng AT .

Laktawan ang nabigasyon

Kung ang iyong nabigasyon ay naglalaman ng maraming mga link at nauuna ang pangunahing nilalaman sa DOM, magdagdag ng isang Skip to main contentlink bago ang nabigasyon (para sa isang simpleng paliwanag, tingnan ang artikulo ng A11Y Project na ito sa mga laktawan na link sa nabigasyon ). Ang paggamit ng .sr-onlyklase ay biswal na itatago ang laktawan na link, at .sr-only-focusabletitiyakin ng klase na ang link ay makikita kapag nakatutok (para sa mga nakikitang gumagamit ng 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>

Mga nested na heading

Kapag naglalagay ng mga heading ( <h1>- <h6>), ang iyong pangunahing header ng dokumento ay dapat na isang <h1>. Ang mga kasunod na heading ay dapat gumawa ng lohikal na paggamit <h2>- <h6>upang ang mga screen reader ay makabuo ng isang talaan ng mga nilalaman para sa iyong mga pahina.

Matuto nang higit pa sa HTML CodeSniffer at AccessAbility ng Penn State .

Contrast ng kulay

Sa kasalukuyan, ang ilan sa mga default na kumbinasyon ng kulay na available sa Bootstrap (tulad ng iba't ibang istilong klase ng button, ilan sa mga kulay na nagha-highlight ng code na ginagamit para sa mga pangunahing bloke ng code , ang .bg-primary contextual na background helper class, at ang default na kulay ng link kapag ginamit sa puting background) may mababang contrast ratio (mas mababa sa inirerekomendang ratio na 4.5:1 ). Maaari itong magdulot ng mga problema sa mga user na may mahinang paningin o mga taong bulag sa kulay. Maaaring kailangang baguhin ang mga default na kulay na ito upang mapataas ang kanilang contrast at pagiging madaling mabasa.

Mga karagdagang mapagkukunan

• "HTML Codesniffer" bookmarklet para sa pagtukoy ng mga isyu sa pagiging naa-access
• Extension ng Accessibility Developer Tools ng Chrome
• Color Contrast Analyzer
• Ang A11Y Project
• Dokumentasyon ng pagiging naa-access ng MDN

Mga FAQ sa Lisensya

Ang Bootstrap ay inilabas sa ilalim ng lisensya ng MIT at ito ay copyright 2016 Twitter. Pinakuluan hanggang sa mas maliliit na piraso, maaari itong ilarawan sa mga sumusunod na kondisyon.

Kinakailangan ka nitong:

• Panatilihin ang paunawa sa lisensya at copyright na kasama sa CSS at JavaScript file ng Bootstrap kapag ginamit mo ang mga ito sa iyong mga gawa

Pinahihintulutan ka nitong:

• Malayang i-download at gamitin ang Bootstrap, sa kabuuan o sa bahagi, para sa personal, pribado, panloob ng kumpanya, o komersyal na layunin
• Gamitin ang Bootstrap sa mga package o distribusyon na iyong ginawa
• Baguhin ang source code
• Magbigay ng sublicense para baguhin at ipamahagi ang Bootstrap sa mga third party na hindi kasama sa lisensya

Ipinagbabawal ka nitong:

• Pananagutan ang mga may-akda at may-ari ng lisensya para sa mga pinsala dahil ibinigay ang Bootstrap nang walang warranty
• Pananagutan ang mga tagalikha o may hawak ng copyright ng Bootstrap
• Muling ipamahagi ang anumang piraso ng Bootstrap nang walang wastong pagpapatungkol
• Gumamit ng anumang mga markang pagmamay-ari ng Twitter sa anumang paraan na maaaring magsaad o magpahiwatig na ineendorso ng Twitter ang iyong pamamahagi
• Gumamit ng anumang mga markang pagmamay-ari ng Twitter sa anumang paraan na maaaring magsaad o magpahiwatig na nilikha mo ang Twitter software na pinag-uusapan

Hindi nito kailangan na:

• Isama ang pinagmulan ng Bootstrap mismo, o ng anumang mga pagbabago na maaaring ginawa mo dito, sa anumang muling pamamahagi na maaari mong tipunin na kinabibilangan nito
• Isumite ang mga pagbabagong ginawa mo sa Bootstrap pabalik sa proyekto ng Bootstrap (bagama't hinihikayat ang naturang feedback)

Ang buong lisensya ng Bootstrap ay matatagpuan sa repositoryo ng proyekto para sa karagdagang impormasyon.

Mga pagsasalin

Isinalin ng mga miyembro ng komunidad ang dokumentasyon ng Bootstrap sa iba't ibang wika. Walang opisyal na suportado at maaaring hindi sila palaging napapanahon.

• Bootstrap 中文文档 (Intsik)
• Bootstrap 3 中文手冊 (Chinese (Tradisyonal))
• Bootstrap sa Dansk (Danish)
• Bootstrap en Français (French)
• Bootstrap auf Deutsch (German)
• Bootstrap sa Italiano (Italian)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Brazilian Portuguese)
• Bootstrap по-русски (Russian)
• Bootstrap en Español (Espanyol)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese)

Hindi kami tumulong sa pag-aayos o pag-host ng mga pagsasalin, nagli-link lang kami sa kanila.

Natapos ang bago o mas mahusay na pagsasalin? Magbukas ng pull request para idagdag ito sa aming listahan.