DOWNLOAD

Bootstrap (v3.4.1 amin'izao fotoana izao) dia manana fomba tsotra vitsivitsy hanombohana haingana, ny tsirairay dia manintona ny haavon'ny fahaiza-manao sy ny fampiasana. Vakio hatramin'izay mba hahitana izay mifanaraka amin'ny filanao manokana.

jsDelivr

Ny olona ao amin'ny jsDelivr dia manome fanohanana CDN ho an'ny CSS sy JavaScript an'ny Bootstrap. Ampiasao fotsiny ireto rohy jsDelivr ireto .

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

Apetraho amin'ny Bower

Azonao atao koa ny mametraka sy mitantana ny Bootstrap's Less, CSS, JavaScript, ary endritsoratra mampiasa Bower :

bower install bootstrap

Mametraka amin'ny npm

Azonao atao koa ny mametraka Bootstrap mampiasa npm :

npm install bootstrap@3

require('bootstrap')dia hampiditra ny plugins jQuery rehetra an'ny Bootstrap ao amin'ny jQuery object. Ny bootstrapmodule mihitsy dia tsy manondrana na inona na inona. Azonao atao ny mametaka ny plugins jQuery an'ny Bootstrap tsirairay amin'ny alàlan'ny fametahana ireo /js/*.jsrakitra eo ambanin'ny lahatahiry ambony indrindra amin'ny fonosana.

Ny Bootstrap dia package.jsonmisy metadata fanampiny eo ambanin'ireto fanalahidy manaraka ireto:

• less- lalana mankany amin'ny rakitra loharanon'ny Bootstrap lehibe indrindra
• style- lalana mankany amin'ny CSS tsy nohamafisina an'i Bootstrap izay efa natambatra tamin'ny alàlan'ny filaharana default (tsy misy fanamboarana)

Mametraka amin'ny Composer

Azonao atao koa ny mametraka sy mitantana ny Bootstrap's Less, CSS, JavaScript, ary endri-tsoratra mampiasa Composer :

composer require twbs/bootstrap

Autoprefixer ilaina amin'ny Less/Sass

Bootstrap dia mampiasa Autoprefixer mba hiatrehana ireo prefix mpivarotra CSS . Raha manangona Bootstrap avy amin'ny loharano Less/Sass ianao ary tsy mampiasa ny Gruntfile, dia mila mampiditra Autoprefixer amin'ny dingana fananganana anao ianao. Raha mampiasa Bootstrap efa voaomana ianao na mampiasa ny Gruntfile, dia tsy mila manahy momba izany ianao satria efa tafiditra ao anatin'ny Gruntfile ny Autoprefixer.

Inona no tafiditra

Ny Bootstrap dia azo alaina amin'ny endrika roa, ao anatin'izany no ahitanao ireto lahatahiry sy rakitra manaraka ireto, manambatra ny loharanom-baovao mahazatra ary manome ny fiovaovana voaangona sy ahena.

Bootstrap efa namboarina

Vantany vao alaina dia sokafy ny lahatahiry voatsindry hahitana ny firafitry ny (ilay natambatra) Bootstrap. Hahita zavatra toy izao ianao:

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

Ity no endrika fototra indrindra amin'ny Bootstrap: rakitra efa voaomana ho an'ny fampidinana haingana amin'ny saika tetikasa tranonkala rehetra. Manome CSS sy JS ( bootstrap.*), ary koa CSS sy JS ( bootstrap.min.*). Ny sarintany loharano CSS ( bootstrap.*.map) dia azo ampiasaina amin'ny fitaovana mpamorona mpitety tranonkala sasany. Misy endri-tsoratra avy amin'ny Glyphicons, ary koa ny lohahevitra Bootstrap azo atao.

Bootstrap source code

Ny fampidinana kaody loharanon'ny Bootstrap dia ahitana ny CSS, JavaScript, ary ny endri-tsoratra, miaraka amin'ny loharano Less, JavaScript ary antontan-taratasy. Amin'ny ankapobeny dia misy ireto manaraka ireto sy ny maro hafa:

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

Ny less/, js/, ary fonts/no kaody loharanon'ny CSS, JS, ary ny endri-tsoratra kisary (isany). Ny dist/lahatahiry dia ahitana ny zava-drehetra voatanisa ao amin'ny fizarana fampidinana efa voaomana etsy ambony. Ny docs/lahatahiry dia ahitana ny kaody loharano ho an'ny antontan-taratasintsika, sy examples/ny fampiasana Bootstrap. Ankoatra izany, ny rakitra hafa rehetra dia manome fanohanana ny fonosana, fampahalalana momba ny fahazoan-dàlana ary ny fampandrosoana.

Manangona CSS sy JavaScript

Bootstrap dia mampiasa Grunt ho an'ny rafitra fananganana azy, miaraka amin'ny fomba mety amin'ny fiasana amin'ny rafitra. Izany no fomba hanangonanay ny kaodinay, fanaovana fitiliana, sy ny maro hafa.

Fametrahana Grunt

Mba hametrahana Grunt dia tsy maintsy misintona sy mametraka node.js (izay misy npm) aloha ianao. npm dia mijoro ho an'ny maody node fonosana ary fomba iray hitantana ny fiankinan-doha amin'ny fampandrosoana amin'ny alàlan'ny node.js.

1. Mametraka grunt-climaneran-tany miaraka amin'ny npm install -g grunt-cli.
2. Mankanesa any amin'ny /bootstrap/lahatahiry fototra, avy eo mihazakazaka npm install. npm dia hijery ny package.jsonrakitra ary hametraka ho azy ireo fiankinan-doha ilaina eo an-toerana voatanisa ao.

Rehefa vita ianao dia afaka mampandeha ireo baiko Grunt isan-karazany omena avy amin'ny tsipika baiko.

Misy baiko Grunt

grunt dist(Amboary fotsiny ny CSS sy JavaScript)

Mamerina indray ny /dist/lahatahiry miaraka amin'ny rakitra CSS sy JavaScript voaangona sy nohamafisina. Amin'ny maha-mpampiasa Bootstrap azy dia ity no baiko tadiavinao.

grunt watch(Jereo)

Mijery ireo rakitra loharano Kely ary mamerina azy ireo ho azy amin'ny CSS isaky ny mitahiry fanovana ianao.

grunt test(Manao andrana)

Mandeha JSHint ary manao andrana QUnit amin'ny navigateur tena izy noho ny Karma .

grunt docs(Amboary & andramo ny fananan'ny docs)

Manangana sy mitsapa CSS, JavaScript, ary fananana hafa izay ampiasaina amin'ny fampandehanana ny antontan-taratasy eo an-toerana amin'ny alàlan'ny bundle exec jekyll serve.

grunt(Amboary tanteraka ny zava-drehetra ary manaova fitsapana)

Manangona sy manamaivana ny CSS sy JavaScript, manorina ny tranokalan'ny antontan-taratasy, mitantana ny HTML5 validator amin'ny doka, mamerina ny fananan'ny Customizer, sy ny maro hafa. Mitaky Jekyll . Matetika dia ilaina ihany raha toa ianao ka mijirika amin'ny Bootstrap mihitsy.

Fanamboarana

Raha sendra olana ianao amin'ny fametrahana ny fiankinan-doha na ny baiko Grunt dia esory aloha ny /node_modules/lahatahiry novokarin'ny npm. Avy eo, avereno indray npm install.

Modely fototra

Atombohy amin'ity môdely HTML fototra ity, na ovao ireto ohatra ireto . Manantena izahay fa hampifanaraka ny môdely sy ny ohatra izahay, hampifanaraka azy ireo hifanaraka amin'ny filanao.

Adikao ny HTML etsy ambany mba hanombohana miasa miaraka amin'ny rakitra Bootstrap kely indrindra.

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

OHATRA

Amboary amin'ny maodely fototra etsy ambony miaraka amin'ireo singa maro ao amin'ny Bootstrap. Mamporisika anao izahay hanamboatra sy hampifanaraka ny Bootstrap hifanaraka amin'ny filan'ny tetikasanao manokana.

Raiso ny kaody loharano ho an'ny ohatra rehetra etsy ambany amin'ny alàlan'ny fampidinana ny tahiry Bootstrap . Misy ohatra hita ao amin'ny docs/examples/lahatahiry.

Mampiasa ny rafitra

Modely fanombohana

Tsy misy afa-tsy ny fototra: nanangona CSS sy JavaScript miaraka amin'ny container.

Lohahevitra Bootstrap

Ampidiro ny lohahevitry ny Bootstrap azo atao mba hahazoana traikefa nohatsaraina.

Grids

Ohatra maro amin'ny fandrindrana grid miaraka amin'ireo ambaratonga efatra rehetra, fanatobiana ary maro hafa.

Jumbotron

Amboary manodidina ny jumbotron miaraka amin'ny navbar sy tsanganana fototra vitsivitsy.

Jumbotron tery

Manangana pejy mahazatra kokoa amin'ny alàlan'ny faneriterena ny kaontenera mahazatra sy ny jumbotron.

Navbars miasa

Navbar

Môdely fototra fototra izay ahitana ny navbar miaraka amina atiny fanampiny.

Navbar ambony static

Môdely fototra super misy navbar ambony static miaraka amina atiny fanampiny.

Navbar raikitra

Môdely fototra super misy navbar ambony raikitra miaraka amina atiny fanampiny.

singa manokana

MATOAN-DAHATSORATRA

Môdely iray pejy hanamboarana pejy fandraisana tsotra sy tsara tarehy.

Carousel

Amboary ny navbar sy carousel, ary ampio singa vaovao.

Blog

Fandrindrana bilaogy misy tsanganana roa miaraka amin'ny fitetezana manokana, lohapejy ary karazana.

anaty fiara

Rafitra fototra ho an'ny dashboard admin misy sidebar raikitra sy navbar.

Pejy fidirana

Fandrafetana endrika sy endrika manokana ho an'ny endrika famantarana tsotra.

Nohamarinina nav

Mamorona navbar mahazatra misy rohy voamarina. Fampitandremana! Tsy dia namana Safari loatra.

Tongotra miraikitra

Asio tongotra eo amin'ny farany ambany amin'ny seranan-tsambo rehefa fohy noho io ny atiny.

Tongotra miraikitra misy navbar

Ampifandraiso ny tongo-tongony eo amin'ny farany ambany amin'ny seranan-tsambo miaraka amin'ny navbar raikitra eo an-tampony.

fanandramana

Bootstrap tsy mamaly

Esory mora foana ny fandraisan'ny Bootstrap isaky ny docs .

Off-canvas

Manamboara sakafo fitetezana ivelan'ny canvas azo toggle azo ampiasaina amin'ny Bootstrap.

Tools

Bootlint

Bootlint no fitaovana ofisialy Bootstrap HTML linter . Izy io dia manara-maso ho azy ny fahadisoana HTML mahazatra maromaro ao amin'ny pejin-tranonkala izay mampiasa Bootstrap amin'ny fomba "vanilla". Ny singa/widget an'ny Vanilla Bootstrap dia mitaky ny ampahany amin'ny DOM mba hifanaraka amin'ny rafitra sasany. Ny Bootlint dia manamarina fa ny trangan'ny singa Bootstrap dia manana HTML voarafitra tsara. Eritrereto ny manampy an'i Bootlint amin'ny rojom-pitaovana fampivoarana tranonkala Bootstrap mba tsy hisian'ny fahadisoana mahazatra mampiadana ny fivoaran'ny tetikasanao.

fiaraha-monina

Tohizo hatrany ny fivoaran'ny Bootstrap ary manatona ny vondrom-piarahamonina miaraka amin'ireo loharano mahasoa ireo.

• Vakio sy misoratra anarana amin'ny The Official Bootstrap Blog .
• Miresaha amin'ireo Bootstrappers namany mampiasa IRC ao amin'ny irc.freenode.netmpizara, ao amin'ny fantsona ##bootstrap .
• Raha mila fanampiana amin'ny fampiasana Bootstrap, manontania amin'ny StackOverflow mampiasa ny tagtwitter-bootstrap-3 .
• Ny mpamorona dia tokony hampiasa ny teny fototra bootstrapamin'ny fonosana izay manova na manampy amin'ny fiasan'ny Bootstrap rehefa mizara amin'ny npm na mekanika fanaterana mitovitovy amin'izany mba hahitana haingana indrindra.
• Mitadiava ohatra manentana ny olona manorina amin'ny Bootstrap ao amin'ny Bootstrap Expo .

Azonao atao ihany koa ny manaraka @getbootstrap ao amin'ny Twitter ho an'ny fifosana farany sy horonan-tsary mahafinaritra.

Mampiato ny fandraisana andraikitra

Bootstrap dia mampifanaraka ho azy ny pejinao amin'ny haben'ny efijery isan-karazany. Toy izao ny fomba hanafoanana ity endri-javatra ity mba handehanan'ny pejinao tahaka ity ohatra tsy mamaly ity .

Dingana hanesorana ny fandraisan'ny pejy

1. Avelao ny viewport <meta>voalaza ao amin'ny CSS docs
2. Atsipazo ny widtheo amin'ny tsanganana .containertsirairay amin'ny sakany tokana, ohatra width: 970px !important;Ataovy azo antoka fa tonga aorian'ny CSS Bootstrap default izany. Azonao atao ny misoroka ny !importantfanontaniana amin'ny haino aman-jery na ny selector-fu.
3. Raha mampiasa navbars, esory ny fihetsika rehetra mirodana sy mivelatra navbar.
4. Ho an'ny fandrafetana grid, ampiasao ny .col-xs-*kilasy ho fanampin'ny, na ho solon'ny, ny antonony/lehibe. Aza manahy, mizana mizana amin'ny fanapahan-kevitra rehetra ny rindran-damina fitaovana kely fanampiny.

Mbola mila Respond.js ho an'ny IE8 ianao (satria mbola misy ny fanontaniantsika amin'ny haino aman-jery ary mila karakaraina). Izany dia manafoana ny lafiny "tranonkala finday" amin'ny Bootstrap.

Ny môdely Bootstrap miaraka amin'ny famaliana tsy mihetsika

Nampiharinay tamin'ny ohatra ireto dingana ireto. Vakio ny kaody loharanony raha te hahita ny fanovana manokana ampiharina.

Jereo ohatra tsy misy valiny

Fanohanana navigateur sy fitaovana

Bootstrap dia naorina mba hiasa tsara indrindra amin'ny desktop farany sy navigateur finday, midika izany fa ny navigateur tranainy dia mety hampiseho endrika hafa, na dia miasa tanteraka aza, ny dikan'ny singa sasany.

Ireo navigateur tohanana

Indrindra indrindra, manohana ny kinova farany amin'ireto mpitety sy sehatra manaraka ireto izahay.

Ny navigateur hafa izay mampiasa ny kinova farany an'ny WebKit, Blink, na Gecko, na mivantana na amin'ny alàlan'ny API fijerena tranonkala an'ny sehatra, dia tsy tohanana mazava. Na izany aza, ny Bootstrap dia tokony (amin'ny ankamaroan'ny toe-javatra) hiseho sy hiasa tsara amin'ireo navigateur ireo ihany koa. Misy fampahalalana fanampiny momba ny fanohanana omena eto ambany.

Fitaovana finday

Amin'ny ankapobeny, ny Bootstrap dia manohana ny dikan-teny farany amin'ny navigateur default amin'ny sehatra lehibe tsirairay. Mariho fa ny mpitety proxy (toy ny Opera Mini, ny maody Turbo an'ny Opera Mobile, ny UC Browser Mini, ny Amazon Silk) dia tsy tohana.

Desktop navigateur

Toy izany koa, ny kinova farany indrindra amin'ny ankamaroan'ny navigateur desktop dia tohana.

Amin'ny Windows, manohana Internet Explorer 8-11 izahay .

Ho an'ny Firefox, ankoatry ny famoahana stable mahazatra farany indrindra, dia manohana ny dikan-teny farany amin'ny Extended Support Release (ESR) an'ny Firefox ihany koa izahay.

Tsy ofisialy, Bootstrap dia tokony hijery sy hitondra tena tsara ao amin'ny Chromium sy Chrome ho an'ny Linux, Firefox ho an'ny Linux, ary Internet Explorer 7, ary koa ny Microsoft Edge, na dia tsy tohanana amin'ny fomba ofisialy aza izy ireo.

Raha mila lisitry ny sasany amin'ireo bibikely navigateur izay tsy maintsy atrehin'i Bootstrap, jereo ny Rindrin'ny bibikely navigateur .

Internet Explorer 8 sy 9

Ny Internet Explorer 8 sy 9 dia tohana ihany koa, na izany aza, aoka ho fantatrao fa ny fananana CSS3 sy singa HTML5 sasany dia tsy tohanan'ireo mpitety tranonkala ireo. Fanampin'izany, ny Internet Explorer 8 dia mitaky ny fampiasana ny Respond.js mba ahafahana manohana ny fangatahana media.

Tsidiho ny Azoko ampiasaina... raha mila antsipiriany momba ny fanohanan'ny navigateur ny endri-javatra CSS3 sy HTML5.

Internet Explorer 8 sy Respond.js

Mitandrema amin'ireto fampitandremana manaraka ireto rehefa mampiasa Respond.js amin'ny tontolon'ny fampandrosoana sy famokarana anao ho an'ny Internet Explorer 8.

Respond.js sy cross-domain CSS

Ny fampiasana Respond.js miaraka amin'ny CSS ampiantranoana amin'ny sehatra hafa (ohatra, amin'ny CDN) dia mitaky fanamboarana fanampiny. Jereo ny Respond.js docs raha mila antsipiriany.

Respond.js aryfile://

Noho ny fitsipika fiarovana amin'ny navigateur, Respond.js dia tsy miasa amin'ny pejy jerena amin'ny alàlan'ny file://protocol (toy ny rehefa manokatra rakitra HTML eo an-toerana). Mba hitsapana ireo endri-javatra mandray andraikitra ao amin'ny IE8, jereo ny pejinao amin'ny HTTP(S). Jereo ny Respond.js docs raha mila antsipiriany.

Respond.js ary@import

Respond.js dia tsy miasa miaraka amin'ny CSS izay voatondro amin'ny @import. Indrindra indrindra, ny sasany Drupal configurations dia fantatra fa mampiasa @import. Jereo ny Respond.js docs raha mila antsipiriany.

Internet Explorer 8 sy ny haben'ny boaty

Tsy manohana tanteraka ny IE8 box-sizing: border-box;rehefa atambatra amin'ny min-width, max-width, min-height, na max-height. Noho izany antony izany, amin'ny v3.0.1, tsy mampiasa s intsony max-widthizahay .container.

Internet Explorer 8 sy @font-face

IE8 dia manana olana sasany @font-facerehefa atambatra amin'ny :before. Bootstrap dia mampiasa io fitambarana io miaraka amin'ny Glyphicons. Raha misy pejy iray voatahiry, ary fenoina tsy misy totozy eo amin'ny varavarankely (izany hoe tsindrio ny bokotra famelombelomana na asio zavatra ao anaty iframe) dia avoaka alohan'ny hidiran'ny endritsoratra ilay pejy. Ny fanodinkodinana eo amin'ny pejy (vatana) dia hampiseho ny sasany amin'ireo kisary ary ny fanodinkodinana eo amin'ireo kisary sisa dia hampiseho izany koa. Jereo ny laharana #13863 raha mila fanazavana fanampiny.

IE Compatibility modes

Bootstrap dia tsy tohanana amin'ny fomba fampifanarahana Internet Explorer taloha. Mba hahazoana antoka fa mampiasa ny fomba famadihana farany indrindra ho an'ny IE ianao, dia diniho ny hampiditra ny <meta>marika mety amin'ny pejinao:

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

Hamafiso ny maody antontan-taratasy amin'ny fanokafana ny fitaovana debug: tsindrio F12ary jereo ny "Document Mode".

Ity tenifototra ity dia tafiditra ao anatin'ny antontan-taratasin'i Bootstrap sy ohatra rehetra mba hiantohana ny famoahana tsara indrindra azo atao amin'ny dikan-teny Internet Explorer tohana tsirairay.

Jereo ity fanontaniana StackOverflow ity raha mila fanazavana fanampiny.

Internet Explorer 10 amin'ny Windows 8 sy Windows Phone 8

Internet Explorer 10 dia tsy manavaka ny sakan'ny fitaovana amin'ny sakan'ny seranan -tsambo , ary noho izany dia tsy mampihatra araka ny tokony ho izy ny fangatahana media ao amin'ny CSS Bootstrap. Amin'ny ankapobeny dia ampiana sombintsombiny haingana amin'ny CSS ianao hamahana izany:

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

Na izany aza, tsy mety izany ho an'ny fitaovana mampiasa Windows Phone 8 dikan-teny tranainy kokoa noho ny Update 3 (aka GDR3) , satria mahatonga ny fitaovana toy izany hampiseho ny ankamaroan'ny desktop fa tsy mijery "telefaonina" tery. Mba hamahana izany dia mila mampiditra ireto CSS sy JavaScript manaraka ireto ianao mba hamahana ilay bug .

@-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)
}

Raha mila fanazavana fanampiny sy torolalana momba ny fampiasana, vakio ny Windows Phone 8 sy Device-Width .

Amin'ny maha lohan-doha azy dia ampidirinay ao anatin'ny antontan-taratasin'i Bootstrap rehetra izany ho toy ny fihetsiketsehana.

Safari isan-jato fihodinana

Ny maotera fandikana ny dikan-teny Safari talohan'ny v7.1 ho an'ny OS X sy Safari ho an'ny iOS v8.0 dia nanana olana kely tamin'ny isan'ny toeran'ny decimal ampiasaina amin'ny .col-*-1kilasin'ny grid. Ka raha manana tsanganana tsanganana 12 ianao dia ho hitanao fa fohy izy ireo raha oharina amin'ny andalana hafa. Ankoatra ny fanavaozana ny Safari/iOS, dia manana safidy ho an'ny vahaolana ianao:

• Ampio .pull-rightamin'ny tsanganana grid-nao farany mba hahazoana ny fampifanarahana mafy havanana
• Amboary ny isan-jaton'ny tananao mba hahazoana ny fihodinana tonga lafatra ho an'ny Safari (sarotra kokoa noho ny safidy voalohany)

Modals, navbars ary kitendry virtoaly

Mihoatra sy mihodina

Ny fanohanana overflow: hiddenamin'ny <body>singa dia voafetra ihany amin'ny iOS sy Android. Mba hanaovana izany, rehefa mihodinkodina eo amin'ny farany ambony na ambany amin'ny mody iray amin'ny iray amin'ireo mpitety ireo fitaovana ireo ianao, <body>dia hanomboka hihodina ny atiny. Jereo Chrome bug #175502 (amboarina ao amin'ny Chrome v40) sy WebKit bug #153852 .

Sahan-tsoratra sy horonan-taratasy iOS

Amin'ny iOS 9.3, raha misokatra ny modal iray, raha toa ka ao anatin'ny sisin-tanin'ny soratra <input>na <textarea>, ny <body>atiny eo ambanin'ny modal dia hokodina fa tsy ny modal mihitsy. Jereo ny WebKit bug #153856 .

Kitendry virtoaly

Mariho koa fa raha mampiasa navbar raikitra ianao na mampiasa fampidirana ao anatin'ny modal iray, iOS dia manana bug rendering izay tsy manavao ny toeran'ny singa raikitra rehefa mipoitra ny klavier virtoaly. Ny vahaolana vitsivitsy amin'izany dia ahitana ny fanovana ny singanao ho position: absolutena ny fiantsoana fameram-potoana hifantohana mba hanandrana hanitsy ny fametrahan-tanana. Tsy vitan'ny Bootstrap io, ka anjaranao ny manapa-kevitra hoe inona no vahaolana tsara indrindra amin'ny fampiharanao.

Navbar Dropdowns

Ny .dropdown-backdropsinga dia tsy ampiasaina amin'ny iOS ao amin'ny nav noho ny fahasarotan'ny z-indexing. Noho izany, mba hanakatona ny dropdowns amin'ny navbars, dia tsy maintsy manindry mivantana ny singa dropdown ianao (na singa hafa izay handrehitra hetsika kitiho ao amin'ny iOS ).

Fanamafisana ny navigateur

Tsy azo ihodivirana ny fampitomboana ny pejin'ny rindrankajy amin'ny singa sasany, na ao amin'ny Bootstrap na ny sisa amin'ny tranonkala. Miankina amin'ny olana, mety ho vitantsika ny manamboatra izany (mitadiava aloha ary manokatra olana raha ilaina). Na izany aza, mirona tsy miraharaha ireo isika satria matetika izy ireo dia tsy manana vahaolana mivantana afa-tsy ny hacky workarounds.

Mipetaka :hover/ :focusamin'ny finday

Na dia tsy azo atao amin'ny ankamaroan'ny ecran touchy aza ny tena manidina, ny ankamaroan'ny navigateur finday dia maka tahaka ny fanohanana mihodinkodina ary manao :hover"miraikitra". Raha lazaina amin'ny teny hafa, :hovermanomboka mihatra ny fomba rehefa manindry singa iray ary mijanona fotsiny rehefa manindry singa hafa ny mpampiasa. Izany dia mety hahatonga ny fanjakan'i Bootstrap :hoverho lasa "miraikitra" amin'ny navigateur toy izany. Ny navigateur finday sasany koa dia manao :focustoy izany koa. Tsy misy vahaolana tsotra ho an'ireo olana ireo amin'izao fotoana izao afa-tsy ny fanesorana tanteraka ireo fomba ireo.

pirinty natao tamin'ny

Na dia amin'ny navigateur maoderina sasany aza, ny fanontana dia mety ho hafahafa.

Amin'ny ankapobeny, amin'ny Chrome v32 ary na inona na inona firafitry ny sisiny, ny Chrome dia mampiasa ny sakan'ny seranan-tsambo tery kokoa noho ny haben'ny taratasy ara-batana rehefa mamaha ny fanontanian'ny media rehefa manonta pejy web. Mety hiteraka tsy nampoizina ny tady kely fanampiny an'ny Bootstrap rehefa manonta. Jereo ny olana #12078 sy Chrome bug #273306 ho an'ny antsipiriany. Soso-kevitra vahaolana:

• Raiso ny takelaka kely fanampiny ary ataovy azo antoka fa ho azo ekena ny pejinao eo ambaniny.
• Amboary ny sandan'ny @screen-*Variable Kely mba ho heverina ho lehibe kokoa noho ny kely kokoa ny taratasy mpanonta anao.
• Manampia fanontaniana momba ny haino aman-jery manokana hanovana ireo teboka tapaka habe ho an'ny haino aman-jery printy ihany.

Ary koa, amin'ny Safari v8.0, ny sakan'ny raikitra .containerdia mety hahatonga an'i Safari hampiasa habe kely tsy mahazatra rehefa manonta. Jereo ny #14868 sy WebKit bug #138192 raha mila fanazavana fanampiny. Ny vahaolana iray mety ho an'ity dia ny fampidirana ity CSS manaraka ity:

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

navigateur stock Android

Eo ivelan'ny boaty, ny Android 4.1 (ary na dia ny famoahana vaovao sasany aza) dia alefa miaraka amin'ny app Browser ho navigateur tranonkala safidy (mifanohitra amin'ny Chrome). Indrisy anefa fa ny app Browser dia manana bug sy tsy mifanaraka amin'ny CSS amin'ny ankapobeny.

Mifidiana menus

Amin'ny <select>singa, ny navigateur stock Android dia tsy hampiseho ny fanaraha-maso amin'ny lafiny raha misy border-radiussy/na borderampiharina. (Jereo ity fanontaniana StackOverflow ity ho an'ny antsipiriany.) Ampiasao ny sombin-kaody etsy ambany hanesorana ny CSS manafintohina ary <select>adika ho singa tsy misy endrika amin'ny navigateur stock Android. Misoroka ny fitsabahana amin'ny navigateur Chrome, Safari, ary Mozilla ny mpitsikilo mpampiasa.

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

Te hahita ohatra? Jereo ity demo JS Bin ity.

Validators

Mba hanomezana traikefa tsara indrindra ho an'ny mpitety tranonkala taloha sy buggy, Bootstrap dia mampiasa hacks amin'ny navigateur CSS amin'ny toerana maromaro mba hikendry CSS manokana amin'ny dikan-tranonkala sasany mba hamahana ireo bibikely ao amin'ny navigateur. Ireo hacks ireo dia azo antoka fa mahatonga ny validators CSS hitaraina fa tsy manan-kery. Any amin'ny toerana roa dia mampiasa endri-javatra CSS bleeding-edge ihany koa izahay izay mbola tsy manara-penitra tanteraka, fa ireo dia ampiasaina ho fanatsarana miandalana.

Ireo fampitandremana fanamarinana ireo dia tsy misy dikany amin'ny fampiharana satria ny ampahany tsy hacky amin'ny CSS-ntsika dia manamarina tanteraka ary ny ampahany hacky dia tsy manelingelina ny fampandehanana araka ny tokony ho izy ny ampahany tsy mijirika, noho izany antony izany dia tsy miraharaha ireo fampitandremana manokana ireo isika.

Ny antontan-taratasy HTML anay koa dia manana fampitandremana fanamafisana HTML tsy misy dikany sy tsy misy dikany noho ny fampidiranay vahaolana ho an'ny bug Firefox iray .

Fanohanana antoko fahatelo

Na dia tsy manohana amin'ny fomba ofisialy plugins na add-on avy amin'ny antoko fahatelo aza izahay, dia manolotra torohevitra mahasoa izahay mba hisorohana ny olana mety hitranga amin'ny tetikasanao.

Fametahana boaty

Ny rindrambaikon'ny antoko fahatelo sasany, anisan'izany ny Google Maps sy ny Google Custom Search Engine, dia mifanohitra amin'ny Bootstrap noho ny * { box-sizing: border-box; }, fitsipika iray izay mahatonga azy io paddingtsy hisy fiantraikany amin'ny sakan'ny kajy farany amin'ny singa iray. Mianara bebe kokoa momba ny maodely boaty sy ny habeny ao amin'ny CSS Tricks .

Miankina amin'ny teny manodidina, azonao atao ny manilika araka izay ilaina (Safidy 1) na mamerina ny fametahana boaty ho an'ny faritra manontolo (Safidy 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

Manaraka ny fenitry ny tranonkala mahazatra ny Bootstrap ary—miaraka amin'ny ezaka fanampiny faran'izay kely—dia azo ampiasaina hamoronana tranokala azon'ireo mampiasa AT .

Tsidiho ny navigation

Raha misy rohy maro ny fitetezanao ary tonga alohan'ny votoaty lehibe ao amin'ny DOM, ampio Skip to main contentrohy alohan'ny fitetezana (raha mila fanazavana tsotra, jereo ity lahatsoratra momba ny Tetikasa A11Y momba ny rohy fitetezana skip ). Ny fampiasana ny .sr-onlykilasy dia hanafina an-tsary ny rohin'ny tsipìka, ary ny .sr-only-focusablekilasy dia hiantoka fa ny rohy dia ho hita rehefa mifantoka (ho an'ireo mpampiasa klavier hita maso).

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

Lohateny voatokana

Rehefa mametraka lohateny ( <h1>- <h6>), ny lohatenin'ny antontan-taratasy voalohany dia tokony ho <h1>. Ny lohateny manaraka dia tokony hampiasaina amin'ny lojika <h2>- <h6>mba ahafahan'ny mpamaky efijery manangana lisitry ny atiny ho an'ny pejinao.

Mianara bebe kokoa amin'ny HTML CodeSniffer sy ny AccessAbility an'ny Penn State .

Mifanohitra amin'ny loko

Amin'izao fotoana izao, ny sasany amin'ireo fampifangaroana loko mahazatra misy ao amin'ny Bootstrap (toy ny kilasin'ny bokotra isan-karazany , ny sasany amin'ireo kaody manasongadina loko ampiasaina amin'ny sakana kaody fototra , ny kilasy mpanampy amin'ny .bg-primary foto-kevitra , ary ny lokon'ny rohy mahazatra rehefa ampiasaina amin'ny afara fotsy) manana tahan'ny fifanoherana ambany (eo ambanin'ny tahan'ny soso-kevitra 4.5: 1 ). Mety hiteraka olana ho an'ireo mpampiasa tsy mahita maso na jamba miloko izany. Mety mila ovaina ireo loko mahazatra ireo mba hampitomboana ny fifanoherana sy ny fahavakisan'izy ireo.

Loharano fanampiny

• Bookmarklet "HTML Codesniffer" hamantarana ny olan'ny fidirana
• Extension'ny Chrome Accessibility Developer Tools
• Color Contrast Analyzer
• Ny tetikasa A11Y
• Ireo singa mifandraika amin'ny MDN

FAQ momba ny fahazoan-dàlana

Navoaka teo ambanin'ny lisansa MIT ny Bootstrap ary copyright 2019 Twitter. Ampangotrahina hatramin'ny kely kokoa, dia azo faritana amin'ireto fepetra manaraka ireto.

Mitaky anao izany:

• Tazony ao amin'ny rakitra CSS sy JavaScript an'ny Bootstrap ny fahazoan-dàlana sy ny filazana momba ny zon'ny mpamorona rehefa ampiasainao amin'ny asanao

Izany dia mamela anao:

• Misintona malalaka sy mampiasa Bootstrap, manontolo na ampahany, ho an'ny tanjona manokana, manokana, orinasa anatiny, na ara-barotra
• Ampiasao ny Bootstrap amin'ny fonosana na fizarana izay noforoninao
• Ovao ny kaody loharano
• Omeo sublicense hanovana sy hizarana ny Bootstrap amin'ny antoko fahatelo tsy tafiditra ao anatin'ny lisansa

Mandrara anao ny:

• Tazony ho tompon'andraikitra amin'ny fahavoazana ny mpanoratra sy ny tompon'ny lisansa satria omena tsy misy fiantohana ny Bootstrap
• Tazony ho tompon'andraikitra ny mpamorona na ny tompon'ny zon'ny mpamorona ny Bootstrap
• Avereno zaraina ny ampahany amin'ny Bootstrap tsy misy fanomezan-danja
• Mampiasà marika rehetra ananan'ny Twitter amin'ny fomba rehetra mety hilazana na hidika fa manohana ny fizaranao ny Twitter
• Mampiasà marika rehetra ananan'ny Twitter amin'ny fomba rehetra mety hilazana na hidika fa ianao no namorona ny rindrambaiko Twitter resahina

Tsy mitaky anao izany:

• Ampidiro ny loharanon'ny Bootstrap mihitsy, na ny fanovana rehetra mety nataonao tamin'izany, amin'ny fitsinjarana indray mety ho tafangonao izay ahitana azy
• Alefaso ny fanovana ataonao amin'ny Bootstrap hiverina amin'ny tetikasa Bootstrap (na dia ampirisihina aza ny fanehoan-kevitra toy izany)

Ny fahazoan-dàlana Bootstrap feno dia hita ao amin'ny tranokalan'ny tetikasa raha mila fanazavana fanampiny.

Anarana iombonana

Nandika ny antontan-taratasin'i Bootstrap tamin'ny fiteny samihafa ny mpikambana ao amin'ny vondrom-piarahamonina. Tsy misy tohana amin'ny fomba ofisialy ary mety tsy ho tonga amin'ny daty foana.

• Bootstrap 中文文档 (Sinoa)
• Bootstrap amin'ny Dansk (Danio)
• Bootstrap en Français (frantsay)
• Bootstrap auf Deutsch (Alemaina)
• Bootstrap amin'ny teny Italiano (Italiana)
• Bootstrap 한국어 (Koreana)
• Bootstrap em Português do Brasil (Portogey Breziliana)
• Bootstrap по-русски (Rosiana)
• Bootstrap en Español (espaniola)
• Türkçe Bootstrap (Tiorka)
• Bootstrap українською (Okrainiana)
• Bootstrap bằng tiếng Việt (Vietnamie)

Tsy manampy amin'ny fandaminana na fampiantranoana fandikan-teny izahay fa mampifandray azy ireo fotsiny.

Nahavita fandikan-teny vaovao na tsara kokoa? Sokafy ny fangatahana misintona mba hampidirana azy amin'ny lisitray.