Khoasolla

Bootstrap (hona joale v3.3.7) e na le litsela tse 'maloa tse bonolo tsa ho qala ka potlako, e' ngoe le e 'ngoe e ipiletsa ho boemo bo fapaneng ba tsebo le nyeoe ea tšebeliso. Bala kaofela ho bona hore na ke eng e lumellanang le litlhoko tsa hau.

Bootstrap CDN

Batho ba jsDelivr ka mosa ba fana ka tšehetso ea CDN bakeng sa CSS ea Bootstrap le JavaScript. Sebelisa feela lihokelo tsena tsa 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>

Kenya le Bower

U ka kenya le ho laola Bootstrap's Less, CSS, JavaScript, le fonte u sebelisa Bower :

$ bower install bootstrap

Kenya ka npm

U ka kenya Bootstrap u sebelisa npm :

$ npm install bootstrap@3

require('bootstrap')e tla kenya li-plugins tsohle tsa Bootstrap tsa jQuery nthong ea jQuery. Mojule bootstrapka boeona ha e rekise letho kantle ho naha. U ka kenya li-plugins tsa jQuery tsa Bootstrap ka bo mong ka ho kenya /js/*.jslifaele tlas'a bukana ea boemo bo holimo ea sephutheloana.

Bootstrap's package.jsone na le metadata e 'ngoe e eketsehileng tlas'a linotlolo tse latelang:

• less- tsela ea ho ea faeleng e ka sehloohong ea Bootstrap e Less source
• style- tsela ea ho CSS ea Bootstrap eo e seng ea mini-minified e seng e hlophisitsoe esale pele ho sebelisoa litlhophiso tsa kamehla (ha ho na tloaelo)

Kenya le Composer

U ka kenya le ho laola Bootstrap's Less, CSS, JavaScript, le fonte u sebelisa Composer :

$ composer require twbs/bootstrap

Autoprefix e hlokeha bakeng sa Less/Sass

Bootstrap e sebelisa Autoprefixer ho sebetsana le li-prefixes tsa barekisi ba CSS . Haeba u ntse u bokella Bootstrap ho tsoa mohloling oa eona oa Less/Sass mme o sa sebelise Gruntfile ea rona, o tla hloka ho kenyelletsa Autoprefixer ts'ebetsong ea hau ea kaho ka bouena. Haeba u sebelisa Bootstrap e hlophisitsoeng esale pele kapa u sebelisa Gruntfile ea rona, ha ho hlokahale hore u tšoenyehe ka sena hobane Autoprefixer e se e kopantsoe le Gruntfile ea rona.

Se kenyellelitsoeng

Bootstrap e ka khoasolloa ka mefuta e 'meli, eo ka har'a eona u tla fumana li-directory le lifaele tse latelang, ho hlophisa lisebelisoa tse tloaelehileng le ho fana ka mefuta e fapaneng e hlophisitsoeng le e fokolang.

Bootstrap e hlophisitsoeng esale pele

Ha e se e jarollotsoe, notlolla foldara e hatelitsoeng ho bona sebopeho sa (se hlophisitsoeng) Bootstrap. U tla bona ntho e kang ena:

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

Ona ke mofuta oa mantlha oa Bootstrap: lifaele tse hlophisitsoeng esale pele bakeng sa ts'ebeliso e potlakileng ea ts'ebeliso hoo e batlang e le projeke efe kapa efe ea webo. Re fana ka CSS le JS ( bootstrap.*) tse hlophisitsoeng, hammoho le CSS le JS ( bootstrap.min.*). Limmapa tsa mohloli oa CSS ( bootstrap.*.map) lia fumaneha bakeng sa ho sebelisoa le lisebelisoa tse ling tsa ntlafatso ea libatli. Lifonti tse tsoang ho Glyphicons li kenyellelitsoe, joalo ka sehlooho sa boikhethelo sa Bootstrap.

Bootstrap khoutu ea mohloli

Ho jarolla khoutu ea mohloli oa Bootstrap ho kenyelletsa CSS, JavaScript, le thepa ea fonte e hlophisitsoeng esale pele, hammoho le mohloli o fokolang, JavaScript le litokomane. Haholo-holo, e kenyelletsa tse latelang le tse ling:

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

The less/, js/, 'me fonts/ke khoutu ea mohloli bakeng sa lifonti tsa rona tsa CSS, JS, le matšoao (ka ho latellana). Foldara dist/e kenyelletsa ntho e 'ngoe le e' ngoe e thathamisitsoeng karolong ea download e hlophisitsoeng esale pele. Foldara docs/e kenyelletsa khoutu ea mohloli bakeng sa litokomane tsa rona, le examples/ts'ebeliso ea Bootstrap. Ntle le moo, faele efe kapa efe e kenyellelitsoeng e fana ka tšehetso bakeng sa liphutheloana, tlhaiso-leseling ea laesense le nts'etsopele.

Ho kopanya CSS le JavaScript

Bootstrap e sebelisa Grunt bakeng sa sistimi ea eona ea kaho, e nang le mekhoa e bonolo ea ho sebetsa le moralo. Ke kamoo re bokellang khoutu ea rona, re etsa liteko, le tse ling.

Ho kenya Grunt

Ho kenya Grunt, o tlameha ho qala ka ho khoasolla le ho kenya node.js (e kenyeletsang npm). npm e emetse li-node packaged modules mme ke mokhoa oa ho laola litšepeho tsa nts'etsopele ka node.js.

1. Kenya grunt-clilefats'e ka bophara ka npm install -g grunt-cli.
2. Tsamaea ho directory ea motso /bootstrap/, ebe o matha npm install. npm e tla sheba package.jsonfaele ebe e kenya ka bo eona litšepiso tse hlokahalang tsa lehae tse thathamisitsoeng moo.

Ha o qetile, o tla khona ho tsamaisa litaelo tse fapaneng tsa Grunt tse fanoeng ho tsoa moleng oa taelo.

Litaelo tse fumanehang tsa Grunt

grunt dist(Ngola feela CSS le JavaScript)

E nchafatsa bukana /dist/ka lifaele tsa CSS le JavaScript tse hlophisitsoeng le tse ntlafalitsoeng. Joaloka mosebelisi oa Bootstrap, hangata ena ke taelo eo u e batlang.

grunt watch(Sheba)

E shebella lifaele tse Nyane tsa mohloli ebe o li khutlisetsa ho CSS neng kapa neng ha u boloka phetoho.

grunt test(Etsa liteko)

E tsamaisa JSHnt mme e etsa liteko tsa QUnit ntle le hlooho ho PhantomJS .

grunt docs(Haha 'me u leke thepa ea litokomane)

E aha le ho etsa liteko CSS, JavaScript, le matlotlo a mang a sebelisoang ha ho etsoa litokomane sebakeng sa heno ka bundle exec jekyll serve.

grunt(Haha ntho e 'ngoe le e' ngoe 'me u tsamaise liteko)

E bokella le ho fokotsa CSS le JavaScript, e aha sebaka sa marang-rang sa litokomane, e tsamaisa sebali sa HTML5 khahlano le litokomane, e nchafatsa thepa ea Customizer, le tse ling. E hloka Jekyll . Hangata ho hlokahala feela ha o ntse o senya Bootstrap ka boeona.

Ho batle phoso

Haeba u ka kopana le mathata ka ho kenya litšepe kapa ho tsamaisa litaelo tsa Grunt, qala ka ho hlakola bukana e /node_modules/hlahisitsoeng ke npm. Ebe u khutlisetsa npm install.

Template ea motheo

Qala ka template ena ea mantlha ea HTML, kapa u fetole mehlala ena . Re ts'epa hore o tla hlophisa litempele le mehlala ea rona, oa li fetola hore li lumellane le litlhoko tsa hau.

Kopitsa HTML e ka tlase ho qala ho sebetsa ka tokomane e nyane ea 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>

Mehlala

Theha holim'a template ea mantlha e kaholimo ka likarolo tse ngata tsa Bootstrap. Re u khothalletsa hore u ikamahanye le Bootstrap hore e lumellane le litlhoko tsa morero oa hau.

Fumana khoutu ea mohloli bakeng sa mohlala o mong le o mong o ka tlase ka ho khoasolla polokelo ea Bootstrap . Mehlala e ka fumanoa bukeng docs/examples/.

Ho sebelisa moralo

template ea ho qala

Ha ho letho haese metheo feela: e hlophisitse CSS le JavaScript hammoho le setshelo.

Theme ea Bootstrap

Laola sehlooho sa boikhethelo sa Bootstrap bakeng sa boiphihlelo bo ntlafalitsoeng ba pono.

Li-grids

Mehlala e mengata ea meralo ea grid e nang le li-tiers tse 'ne, lihlaha, le tse ling.

Jumbotron

Haha ho potoloha jumbotron ka navbar le litšiea tse ling tsa mantlha tsa grid.

Jumbotron e nyane

Iketsetse leqephe la tloaelo ka ho fokotsa setshelo sa kamehla le jumbotron.

Navbar e sebetsa

Navbar

template ea mantlha e kenyelletsang navbar hammoho le litaba tse ling tse ling.

Navbar e holimo e tsitsitseng

Template ea mantlha e nang le navbar e sa fetoheng hammoho le litaba tse ling.

Navbar e tsitsitseng

Template ea mantlha e nang le "navbar" e tsitsitseng hammoho le litaba tse ling.

Likarolo tse ikhethileng

Sekoahelo

Template ea leqephe le le leng bakeng sa ho aha maqephe a lehae a bonolo le a matle.

Carousel

Iketsetse navbar le carousel, ebe u eketsa likarolo tse ncha.

Blog

Sebopeho se bonolo sa likholomo tse peli tse nang le mokhoa oa ho tsamaea, lihlooho le mofuta.

Dashboard

Sebopeho sa motheo bakeng sa dashboard ea admin e nang le lehlakore le tsitsitseng le navbar.

Leqephe la ho kena

Sebopeho le moralo oa mokhoa o ikhethileng bakeng sa lets'oao le bonolo ka foromo.

Nav e nepahetseng

Theha navbar e ikhethileng e nang le lihokelo tse loketseng. Hlokomela! Ha e na botsoalle haholo ho Safari.

Letlapa le khomarelang

Hokela botlaaseng ba sebaka sa pono ha litaba li le khuts'oane ho feta eona.

Botlaaseng ba leqephe bo khomarelang bo nang le navbar

Hokela botlaaseng ba sebaka sa ho shebella ka navbar e tsitsitseng holimo.

Liteko

Bootstrap e sa arabeleng

Thibela karabelo ea Bootstrap habonolo ho latela litokomane tsa rona .

Off-canvas

Iketsetse lethathamo la ho sesa ka seile hore le sebelisoe le Bootstrap.

Lisebelisoa

Bootlint

Bootlint ke sesebelisoa sa semmuso sa Bootstrap HTML linter . E itlhahloba ka bo eona bakeng sa liphoso tse 'maloa tse tloaelehileng tsa HTML maqepheng a marang-rang a sebelisang Bootstrap ka tsela e nepahetseng ea "vanilla". Likarolo / lisebelisoa tsa Vanilla Bootstrap li hloka hore likarolo tsa bona tsa DOM li lumellane le meaho e itseng. Bootlint e hlahloba hore na maemo a likarolo tsa Bootstrap a na le HTML e hlophisitsoeng hantle. Nahana ka ho kenyelletsa Bootlint ho Bootstrap web development toolchain e le hore ho se be le liphoso tse tloaelehileng tse liehisang nts'etsopele ea morero oa hau.

Sechaba

Lula u le haufi le nts'etsopele ea Bootstrap 'me u ikopanye le sechaba ka lisebelisoa tsena tse thusang.

• Bala 'me u ingolise ho The Official Bootstrap Blog .
• Buisana le li-Bootstrappers tse ling u sebelisa IRC ho irc.freenode.netseva, ho ##bootstrap channel .
• Bakeng sa thuso ea ho sebelisa Bootstrap, botsa ho StackOverflow u sebelisa tagtwitter-bootstrap-3 .
• Bahlahisi ba lokela ho sebelisa lentsoe bootstrapla bohlokoa ho lipakete tse fetolang kapa li ekelletsang tšebetsong ea Bootstrap ha e tsamaisoa ka npm kapa mekhoa e ts'oanang ea ho fana ka lits'oants'o tse ngata bakeng sa ho sibolloa haholo.
• Fumana mehlala e khothatsang ea batho ba hahang ka Bootstrap ho Bootstrap Expo .

U ka latela @getbootstrap ho Twitter bakeng sa litšebo tsa morao-rao le livideo tse monate tsa mmino.

Ho sitisa karabelo

Bootstrap e ikamahanya le maqephe a hau bakeng sa boholo bo fapaneng ba skrine. Mona ke mokhoa oa ho tima tšobotsi ena hore leqephe la hau le sebetse joalo ka mohlala o sa arabeleng .

Mehato ea ho thibela karabelo ea leqephe

1. Tlohela pono e <meta>boletsoeng ho litokomane tsa CSS
2. Feta widthholimo .containerbakeng sa ntlha e 'ngoe le e' ngoe ea gridi e nang le bophara bo le bong, ho etsa mohlala width: 970px !important;Etsa bonnete ba hore sena se tla ka morao ho Bootstrap CSS ea kamehla. U ka ikhethela ho qoba !importantka lipotso tsa mecha ea litaba kapa ba bang ba khethang-fu.
3. Haeba u sebelisa navbar, tlosa navbar eohle e putlamang le boits'oaro bo ntseng bo hola.
4. Bakeng sa meralo ea marang-rang, sebelisa .col-xs-*litlelase ho kenyelletsa, kapa sebakeng sa tse mahareng/ tse kholo. Seke oa tšoenyeha, grid ea lisebelisoa tse nyane e fihla ho liqeto tsohle.

U ntse u tla hloka Respond.js bakeng sa IE8 (kaha lipotso tsa rona tsa media li ntse li le teng 'me li hloka ho sebetsoa). Sena se tima "mobile site" likarolo tsa Bootstrap.

Template ea Bootstrap e nang le karabelo e koetsoe

Re sebelisitse mehato ena ho mohlala. Bala khoutu ea eona ea mohloli ho bona liphetoho tse itseng tse kentsoeng.

Sheba mohlala o sa tloaelehang

Tšehetso ea sebatli le lisebelisoa

Bootstrap e hahiloe hore e sebetse hantle ho li-browser tsa morao-rao tsa komporo le li-mobile, ho bolelang hore libatli tsa khale li ka bonts'a setaele se fapaneng, leha se sebetsa ka botlalo, phepelo ea likarolo tse itseng.

Libatli tse tšehelitsoeng

Ka ho khetheha, re ts'ehetsa liphetolelo tsa morao-rao tsa libatli le liforomo tse latelang.

Libatli tse ling tse sebelisang mofuta oa morao-rao oa WebKit, Blink, kapa Gecko, ebang ke ka kotloloho kapa ka mokhoa oa API, ha li tšehetsoe ka ho hlaka. Leha ho le joalo, Bootstrap e lokela (maemong a mangata) ho bonts'a le ho sebetsa ka nepo le ho libatli tsena. Lintlha tse ling tse tobileng tsa tšehetso li fanoe ka tlase.

Lisebelisoa tsa mohala

Ka kakaretso, Bootstrap e ts'ehetsa liphetolelo tsa morao-rao tsa sebatli se seng le se seng se seholo sa sethala. Hlokomela hore libatli tsa proxy (tse kang Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ha li tšehetsoe.

Libatli tsa desktop

Ka mokhoa o ts'oanang, liphetolelo tsa morao-rao tsa li-browser tse ngata tsa desktop lia tšehetsoa.

Ho Windows, re tšehetsa Internet Explorer 8-11 .

Bakeng sa Firefox, ntle le tokollo ea morao-rao e tsitsitseng, re boetse re ts'ehetsa Phatlalatso ea Ts'ehetso e Atolositsoeng ea morao-rao (ESR) ea Firefox.

Ka mokhoa o sa reroang, Bootstrap e lokela ho shebahala le ho itšoara hantle ka ho lekaneng ho Chromium le Chrome bakeng sa Linux, Firefox bakeng sa Linux, le Internet Explorer 7, hammoho le Microsoft Edge, leha li sa tšehetsoe ka molao.

Bakeng sa lethathamo la tse ling tsa liphoso tsa sebatli tseo Bootstrap e tlamehang ho sebetsana le tsona, bona Wall of browser bugs .

Internet Explorer 8 le 9

Internet Explorer 8 le 9 le tsona lia tšehetsoa, ​​leha ho le joalo, ka kopo hlokomela hore lisebelisoa tse ling tsa CSS3 le likarolo tsa HTML5 ha li tšehetsoe ka botlalo ke libali tsena. Ho feta moo, Internet Explorer 8 e hloka ts'ebeliso ea Respond.js ho nolofalletsa tšehetso ea lipotso tsa media.

Etela Na nka sebelisa... bakeng sa lintlha tse mabapi le tšehetso ea sebatli ea likarolo tsa CSS3 le HTML5.

Internet Explorer 8 le Respond.js

Hlokomela litemoso tse latelang ha u sebelisa Respond.js tikolohong ea hau ea nts'etsopele le tlhahiso ea Internet Explorer 8.

Respond.js le CSS ea libaka tse fapaneng

Ho sebelisa Respond.js ka CSS e tsamaisoang sebakeng se fapaneng (se seng) (mohlala, ho CDN) ho hloka ho seta ho itseng. Sheba litokomane tsa Respond.js bakeng sa lintlha tse ling.

Araba.js lefile://

Ka lebaka la melaoana ea ts'ireletso ea sebatli, Respond.js ha e sebetse le maqephe a shebiloeng ka file://protocol (joalo ka ha u bula faele ea lehae ea HTML). Ho leka likarolo tse arabelang ho IE8, sheba maqephe a hau ho HTTP(S). Sheba litokomane tsa Respond.js bakeng sa lintlha tse ling.

Araba.js le@import

Respond.js ha e sebetse le CSS eo ho buuoang ka eona ka @import. Haholo-holo, litlhophiso tse ling tsa Drupal li tsejoa ho sebelisa @import. Sheba litokomane tsa Respond.js bakeng sa lintlha tse ling.

Internet Explorer 8 le boholo ba lebokose

IE8 ha e tšehetse ka botlalo box-sizing: border-box;ha e kopantsoe le min-width, max-width, min-height, kapa max-height. Ka lebaka leo, ho tloha ho v3.0.1, ha re sa sebelisa max-widthho .containers.

Internet Explorer 8 le @font-face

IE8 e na le mathata a itseng @font-faceha e kopantsoe le :before. Bootstrap e sebelisa motsoako oo le li-Glyphicons tsa eona. Haeba leqephe le bolokoa, 'me le laetsoe ntle le toeba holim'a fensetere (ke hore, tobetsa konopo ea refresh kapa kenya ntho e itseng ka iframe) joale leqephe le tla fanoa pele fonte e jara. Ho fetella ka holim'a leqephe ('mele) ho tla bonts'a li-icon tse ling,' me ho ts'oarella holim'a li-icon tse setseng ho tla bontša le tsona. Sheba khatiso #13863 bakeng sa lintlha tse ling.

IE Compatibility mekhoa

Bootstrap ha e tšehetsoe mekhoeng ea khale ea ho sebelisana le Internet Explorer. Ho etsa bonnete ba hore o sebelisa mokhoa oa morao-rao oa phetolelo bakeng sa IE, nahana ka ho kenyelletsa <meta>tag e loketseng maqepheng a hau:

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

Netefatsa mokhoa oa tokomane ka ho bula lisebelisoa tsa ho lokisa liphoso: tobetsa F12'me u hlahlobe "Document Mode".

Theke ena e kenyelelitsoe litokomaneng tsohle tsa Bootstrap le mehlala ho etsa bonnete ba hore phetolelo e ntle ka ho fetesisa e fumaneha mofuta o mong le o mong o tšehetsoeng oa Internet Explorer.

Sheba potso ena ea StackOverflow bakeng sa lintlha tse ling.

Internet Explorer 10 ho Windows 8 le Windows Phone 8

Internet Explorer 10 ha e khetholle bophara ba sesebelisoa ho bophara ba sebaka sa pono , kahoo ha e sebelise lipotso tsa media ho CSS ea Bootstrap. Ka tloaelo u ka eketsa snippet e potlakileng ea CSS ho lokisa sena:

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

Leha ho le joalo, sena ha se sebetse bakeng sa lisebelisoa tse tsamaisang mefuta ea Windows Phone 8 ea khale ho feta Update 3 (aka GDR3) , kaha e etsa hore lisebelisoa tse joalo li bontše pono e ngata ea desktop ho e-na le pono e fokolang ea "fono". Ho rarolla sena, o tla hloka ho kenyelletsa CSS le JavaScript tse latelang ho rarolla bothata .

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

Ho fumana lintlha tse ling le litataiso tsa tšebeliso, bala Windows Phone 8 le Device-Width .

Ha re ntse re tsoela pele, re kenyelletsa sena litokomaneng tsohle tsa Bootstrap le mehlala e le pontšo.

Safari liperesente tse pota-potileng

Enjene ea ho fana ka mefuta ea Safari pele ho v7.1 bakeng sa OS X le Safari bakeng sa iOS v8.0 e bile le bothata ka palo ea libaka tse sebelisoang .col-*-1litlelaseng tsa rona tsa grid. Kahoo haeba u ne u e-na le litšiea tse 12 tsa marang-rang, u ne u tla hlokomela hore li tlile li le khutšoanyane ha li bapisoa le mela e meng ea likholomo. Ntle le ho ntlafatsa Safari/iOS, o na le likhetho tse ling bakeng sa li-workaround:

• Eketsa kholomong .pull-rightea hau ea ho qetela ea grid ho fumana tatellano e thata-le letona
• Fetola liperesente tsa hau ka letsoho ho fumana sebaka se phethahetseng sa Safari (ho thata ho feta khetho ea pele)

Li-modal, li-navbar, le likonopo tsa sebele

Ho khaphatseha le ho tsamaisetsa

Ts'ehetso bakeng overflow: hiddensa <body>element e na le moeli ho iOS le Android. Ho fihlela seo, ha o feta ka holimo kapa tlase ho modal ho e 'ngoe ea li-browser tsa lisebelisoa tseo, <body>litaba li tla qala ho tsamaea. Sheba Chrome bug #175502 (e tsitsitseng ho Chrome v40) le WebKit bug #153852 .

Libaka tsa mongolo tsa iOS le ho tsamaisetsa

Ho tloha ka iOS 9.3, ha modal e ntse e butsoe, haeba ho ts'oaroa ha pele ha boitšisinyo ba moqolo ho le ka har'a moeli oa mongolo <input>kapa a <textarea>, <body>litaba tse ka tlase ho modal li tla tsamaisoa ho fapana le modal ka boeona. Sheba WebKit bug #153856 .

Li-keyboards tsa Virtual

Hape, hlokomela hore haeba u sebelisa navbar e tsitsitseng kapa u sebelisa lintho tse kenang ka har'a modal, iOS e na le phoso ea ho fana e sa ntlafatse boemo ba likarolo tse tsitsitseng ha keyboard ea sebele e hlahisoa. Litsela tse 'maloa tsa ho etsa sena li kenyelletsa ho fetola likarolo tsa hau ho position: absolutekapa ho kopa sebali sa nako ho leka ho lokisa boemo ka letsoho. Sena ha se sebetsoe ke Bootstrap, kahoo ho ho uena ho etsa qeto ea hore na ke tharollo efe e loketseng kopo ea hau.

Navbar Dropdowns

The .dropdown-backdropelement ha e sebelisoe ho iOS ho nav ka lebaka la ho rarahana ha z-indexing. Kahoo, ho koala li-dropdown tsa li-navbar, u tlameha ho tobetsa ka ho toba ntho e theolelang (kapa ntho efe kapa efe e tla chesa ketsahalo ea ho tobetsa ho iOS ).

Ho atometsa sebatli

Ho ata ha leqephe ho fana ka li-artifact likarolong tse ling, ka bobeli ho Bootstrap le web kaofela. Ho ipapisitse le bothata, re ka khona ho e lokisa (batla pele ebe u bula bothata haeba ho hlokahala). Leha ho le joalo, re tloaetse ho iphapanyetsa tsena kaha hangata ha li na tharollo e tobileng ntle le li-workaround tse qhekellang.

E Stick :hover/ :focusho mobile

Leha ho ts'oara ha 'nete ho sa khonehe ho li-touchscreens tse ngata, libatli tse ngata tsa mehala li etsisa tšehetso ea hovering le ho :hover"khomarela". Ka mantsoe a mang, :hoversetaele se qala ho sebetsa ka mor'a ho tobetsa ntho e itseng ebe se emisa ho se sebelisa ka mor'a hore mosebelisi a tobetse ntho e 'ngoe. Sena se ka etsa hore linaha tsa Bootstrap :hoverli "khomarele" ka mokhoa o sa rateheng ho libatli tse joalo. Li-browser tse ling tsa mobile le tsona li etsa hore :focusli khomarele ka tsela e tšoanang. Hajoale ha ho na tharollo e bonolo bakeng sa litaba tsena ntle le ho tlosa mefuta e joalo ka botlalo.

Khatiso

Esita le ho li-browser tse ling tsa morao-rao, khatiso e ka ba quirky.

Haholo-holo, ho tloha ka Chrome v32 le ho sa tsotelehe litlhophiso tsa marang-rang, Chrome e sebelisa bophara ba pono bo tšesaane haholo ho feta boholo ba pampiri ha e rarolla lipotso tsa mecha ea litaba ha e ntse e hatisa leqephe la webo. Sena se ka etsa hore grid e nyane ea Bootstrap e kenngoe tšebetsong ho sa lebelloa ha e hatisa. Sheba khatiso #12078 le Chrome bug #273306 bakeng sa lintlha tse ling. Litharollo tse khothalelitsoeng:

• Amohela gridi e nyane haholo 'me u netefatse hore leqephe la hau le shebahala le amoheleha tlas'a eona.
• Iketsetse boleng ba lintho @screen-*tse Nyane e le hore pampiri ea hau ea khatiso e nkoe e le kholo ho feta e nyane haholo.
• Eketsa lipotso tse tloaelehileng tsa media ho fetola li-breakpoints tsa boholo ba grid bakeng sa mecha ea phatlalatso feela.

Hape, joalo ka Safari v8.0, fixed-width .containers e ka etsa hore Safari e sebelise boholo bo bonyenyane bo sa tloaelehang ha e hatisa. Sheba #14868 le WebKit bug #138192 bakeng sa lintlha tse ling. E 'ngoe ea tharollo e ka bang teng bakeng sa sena ke ho eketsa CSS e latelang:

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

Android stock browser

Ka ntle ho lebokose, Android 4.1 (esita le tse ling tse ncha ho bonahala) e tsamaisana le sesebelisoa sa Browser e le sebatli sa marang-rang sa khetho (ho fapana le Chrome). Ka bomalimabe, sesebelisoa sa Browser se na le liphoso tse ngata le ho se lumellane le CSS ka kakaretso.

Khetha menyetla

Ho <select>likarolo, sebatli sa stock sa Android se ke ke sa bonts'a li-control tsa lehlakore haeba ho na border-radiusle / kapa borderho sebelisoa. (Sheba potso ena ea StackOverflow bakeng sa lintlha tse ling.) Sebelisa tlhahiso e nyane ea khoutu e ka tlase ho tlosa CSS e khopisang le ho fana ka <select>ntho e sa tloaelehang ho sebatli sa stock sa Android. Ho fofonela ha basebelisi ho qoba ho kena-kenana le libatli tsa Chrome, Safari, le 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>

U batla ho bona mohlala? Sheba setšoantšo sena sa JS Bin.

Bahlahlobisisi

E le ho fana ka phihlelo e molemo ka ho fetisisa ho libatli tsa khale le li-buggy, Bootstrap e sebelisa li-hacks tsa CSS libakeng tse 'maloa ho lebisa CSS e khethehileng liphetolelong tse itseng tsa sebatli e le ho sebetsana le likokoana-hloko ho libatli ka botsona. Ka ho utloahalang, li-hacks tsena li etsa hore bahlahisi ba CSS ba tletlebe ka hore ha ba sebetse. Libakeng tse 'maloa, re boetse re sebelisa likarolo tsa CSS tse e-s'o be le maemo ka botlalo, empa li sebelisoa molemong oa ntlafatso e tsoelang pele.

Litemoso tsena tsa netefatso ha li na taba ts'ebetsong kaha karolo eo e seng ea bosholu ea CSS ea rona e netefatsa ka botlalo mme likarolo tsa bosholu ha li kena-kenane le ts'ebetso e nepahetseng ea karolo eo e seng ea bosholu, ke ka lebaka leo re hlokomolohang litemoso tsena ka boomo.

Litokomane tsa rona tsa HTML le tsona li na le litemoso tse sa reng letho le tse sa hlokahaleng tsa netefatso ea HTML ka lebaka la ho kenyelletsa ha rona mokhoa oa ho lokisa phoso e itseng ea Firefox .

Tšehetso ea motho oa boraro

Le hoja re sa tšehetse ka molao li-plugins kapa li-add-on tsa batho ba bang, re fana ka likeletso tse molemo ho u thusa ho qoba mathata a ka bang teng mererong ea hau.

Boholo ba mabokose

Software e 'ngoe ea batho ba bang, ho kenyeletsoa Google Maps le Google Custom Search Engine, e hohlana le Bootstrap ka lebaka la * { box-sizing: border-box; }, molao o etsang hore ho be joalo paddingha o ame bophara ba ho qetela ba computed ea element. Ithute haholoanyane ka mohlala oa lebokose le boholo ho CSS Tricks .

Ho ipapisitsoe le moelelo oa taba, u ka tlola ka moo ho hlokahalang (Khetho ea 1) kapa ua seta bocha boholo ba lebokose bakeng sa libaka tsohle (Khetho ea 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();
}

Ho fihlella

Bootstrap e latela maemo a tloaelehileng a marang-rang 'me-ka boiteko bo fokolang bo eketsehileng-e ka sebelisoa ho theha libaka tse fumanehang ho ba sebelisang AT .

Tlola ho tsamaea

Haeba ho tsamaea ha hau ho na le lihokelo tse ngata 'me ho tla pele ho litaba tsa mantlha ho DOM, eketsa Skip to main contentsehokelo pele u tsamaea (bakeng sa tlhaloso e bonolo, bona sengoloa sena sa Morero oa A11Y mabapi le lihokelo tsa ho sesa ). Ho sebelisa .sr-onlysehlopha ho tla pata sehokelo sa ho tlola, 'me .sr-only-focusablesehlopha se tla netefatsa hore sehokelo se bonahala hang ha se tsepamisitsoe (bakeng sa basebelisi ba bone ba 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>

Lihlooho tse hlahisitsoeng

Ha u theha lihlooho ( <h1>- <h6>), sehlooho sa hau sa mantlha se lokela ho ba <h1>. Lihlooho tse latelang li lokela ho sebelisa <h2>- <h6>hoo babali ba skrine ba ka iketsetsang lethathamo la litaba tsa maqephe a hau.

Ithute haholoanyane ho HTML CodeSniffer le Penn State's AccessAbility .

Phapang ea mebala

Hajoale, mefuta e meng ea mebala e sa fetoheng e fumanehang ho Bootstrap (joalo ka li-buttons tse fapaneng tsa setaele , mebala e meng e totobatsang khoutu e sebelisoang bakeng sa li-block tsa khoutu , sehlopha sa bathusi ba .bg-primary maemo , le 'mala oa sehokelo oa kamehla ha o sebelisoa bokaholimo bo bosoeu) ho ba le tekanyo e tlaase ea phapang (ka tlase ho tekanyo e khothalletsoang ea 4.5: 1 ). Sena se ka baka mathata ho basebelisi ba nang le pono e tlase kapa ba sa boneng mebala. Mebala ena ea kamehla e kanna ea hloka ho fetoloa ho eketsa phapang ea eona le ho ba bonolo.

Lisebelisoa tse ling

• "HTML Codesniffer" bookmarklet bakeng sa ho tseba litaba tsa phihlello
• Chrome's Accessibility Developer Developer Tools
• Mohlahlobi oa Phapang ea Mebala
• Morero oa A11Y
• Litokomane tsa phihlello ea MDN

Lipotso tsa License

Bootstrap e lokolloa tlas'a laesense ea MIT mme ke copyright 2016 Twitter. E phehiloe ho fihlela likotoana tse nyane, e ka hlalosoa ka maemo a latelang.

E hloka hore u:

• Boloka laesense le tsebiso ea litokelo li kenyelelitsoe lifaeleng tsa Bootstrap tsa CSS le JavaScript ha u li sebelisa mesebetsing ea hau

E u lumella ho:

• Khoasolla mahala 'me u sebelise Bootstrap, e feletse kapa e sa fella, molemong oa hau, oa poraefete, oa kahare oa khamphani kapa oa khoebo
• Sebelisa Bootstrap ka har'a liphutheloana kapa kabo eo u e thehang
• Fetola khoutu ea mohloli
• Fana ka lengolo la tumello ea ho fetola le ho aba Bootstrap ho batho ba bang ba sa kenyelletsoeng laesenseng

E u thibela ho:

• Tšoara bangoli le beng ba laesense ba ikarabella bakeng sa litšenyehelo kaha Bootstrap e fanoa ntle le tiisetso
• Tšoara baqapi kapa ba nang le litokelo tsa litokelo tsa molao tsa Bootstrap molato
• Abela karolo efe kapa efe ea Bootstrap ntle le tlhahiso e nepahetseng
• Sebelisa matšoao afe kapa afe a Twitter ka tsela efe kapa efe e ka bolelang kapa e fana ka maikutlo a hore Twitter e khothaletsa kabo ea hau
• Sebelisa matšoao afe kapa afe a Twitter ka tsela efe kapa efe e ka bolelang kapa e fana ka maikutlo a hore u thehile software ea Twitter eo ho buuoang ka eona

Ha e hloke hore u:

• Kenyelletsa mohloli oa Bootstrap ka boeona, kapa liphetoho life kapa life tseo u ka beng u li entse ho eona, kabong efe kapa efe eo u ka e kopanyang e kenyelletsang eona.
• Kenya liphetoho tseo u li etsang ho Bootstrap khutlela morerong oa Bootstrap (le hoja maikutlo a joalo a khothaletsoa)

Laesense e felletseng ea Bootstrap e sebakeng sa polokelo ea projeke bakeng sa tlhaiso-leseling e batsi.

Liphetolelo

Litho tsa sechaba li fetoletse litokomane tsa Bootstrap lipuong tse fapaneng. Ha ho tse tšehetsoeng ka molao 'me mohlomong ha se kamehla li leng nakong.

• Bootstrap 中文档 (Sechaena)
• Bootstrap 3 中文手冊 (Sechaena (Setso)
• Bootstrap ho Dansk (Danish)
• Bootstrap en Français (Sefora)
• Bootstrap auf Deutsch (Sejeremane)
• Bootstrap ka Setaliana (Setaliana)
• Bootstrap 한국어 (Sekorea)
• Bootstrap em Português do Brasil (Sepotoketsi sa Brazil)
• Bootstrap по-русски (Serussia)
• Bootstrap en Español (Sepanish)
• Türkçe Bootstrap (Seturkey)
• Bootstrap українською (Seukraine)
• Bootstrap bằng tiếng Việt (Vietnamese)

Ha re thuse ho hlophisa kapa ho amohela liphetolelo, re li hokahanya feela.

Na u qetile phetolelo e ncha kapa e betere? Bula kopo ea ho hula ho e kenyelletsa lethathamong la rona.