Taonelouta

Bootstrap (ga bjale v3.4.1) e na le ditsela tše mmalwa tše bonolo tša go thoma ka pela, e nngwe le e nngwe e ipiletša go maemo a bokgoni bjo bo fapanego le taba ya tšhomišo. Bala go fihla go bona seo se swanetšego dinyakwa tša gago tše itšego.

jsDelivr

The folks ka jsDelivr ka mohau fana ka CDN tšehetso bakeng sa Bootstrap o CSS le JavaScript. E no diriša dikgokagano tše tša jsDelivr .

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

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

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

Tsenya ka Bower

O ka boela wa kenya le ho laola Bootstrap's Less, CSS, JavaScript, le difonte o sebedisa Bower :

bower install bootstrap

Tsenya ka npm

O ka boela wa kenya Bootstrap o sebedisa npm :

npm install bootstrap@3

require('bootstrap')e tla laetša di-plugin ka moka tša jQuery tša Bootstrap godimo ga selo sa jQuery. Mojule bootstrapka bowona ga o romele ntle selo. O ka laetša ka seatla di-plugin tša jQuery tša Bootstrap ka botee ka go laetša /js/*.jsdifaele ka tlase ga tšhupetšo ya maemo a godimo ya sephuthelwana.

Bootstrap's package.jsone na le metadata ye nngwe ya tlaleletšo ka fase ga dinotlelo tše di latelago:

• less- tsela ho Bootstrap e ka sehloohong Less mohlodi faele
• style- tsela ya go ya go Bootstrap ya CSS yeo e sa fokotšwago yeo e kgobokeditšwego pele ka go diriša dipeakanyo tša go se fetoge (ga go na go tlwaetša) .

Tsenya ka Mohlami

O ka boela wa kenya le ho laola Bootstrap's Less, CSS, JavaScript, le difonte o sebedisa Composer :

composer require twbs/bootstrap

Sehlongwa sa go itiriša se a nyakega bakeng sa Less/Sass

Bootstrap e šomiša Autoprefixer go šomana le dihlongwapele tša morekiši wa CSS . Ge e ba o kgoboketša Bootstrap go tšwa mothopong wa yona wa Less/Sass gomme o sa šomiše Gruntfile ya rena, o tla swanelwa ke go kopanya Autoprefixer tshepedišong ya gago ya go aga ka bowena. Ge e ba o diriša Bootstrap yeo e kgobokeditšwego pele goba o diriša Gruntfile ya rena, ga go nyakege gore o tshwenyege ka se ka gobane Autoprefixer e šetše e kopantšwe ka gare ga Gruntfile ya rena.

Seo se akareditšwego

Bootstrap e downloadable ka dibopego tše pedi, ka gare ga tšona o tla hwetša dipuku tše di latelago le difaele, go hlopha ka mo go kwagalago methopo ye e tlwaelegilego le go fana ka bobedi diphetogo tše di kgobokeditšwego le tše di fokoditšwego.

Bootstrap e kgobokeditšwego pele

Ge o šetše o taoneloutilwe, phumola foltara yeo e gateletšwego go bona sebopego sa (yeo e kgobokeditšwego) Bootstrap. O tla bona selo sa go swana le se:

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

Ye ke mokgwa wa motheo kudu wa Bootstrap: difaele tše di kgobokeditšwego pele bakeng sa tšhomišo ya go theoga ka pela mo e nyakilego go ba projeke efe goba efe ya wepe. Re fana ka bokella CSS le JS ( bootstrap.*), hammoho le bokella le minified CSS le JS ( bootstrap.min.*). Dimmapa tša mohlodi tša CSS ( bootstrap.*.map) di hwetšagala bakeng sa go dirišwa le didirišwa tša bahlami ba diphensele tše itšego. Difonte go tšwa go Glyphicons di a akaretšwa, go swana le sehlogo sa Bootstrap sa boikhethelo.

Khoutu ya mohlodi ya Bootstrap

Khoutu ya mohlodi ya go taonelouta ya Bootstrap e akaretša CSS, JavaScript, le dithoto tša fonte tšeo di kgobokeditšwego pele, gotee le Less ya mothopo, JavaScript, le ditokomane. Ka go lebanya, e akaretša tše di latelago le tše dingwe:

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

, less/, js/le fonts/ke khoutu ya mohlodi ya difonte tša rena tša CSS, JS le tša leswao (ka go latelelana). Foltara dist/e akaretša se sengwe le se sengwe seo se lokeleditšwego karolong ya go taonelouta yeo e kgobokeditšwego pele ka mo godimo. Foltara docs/e akaretša khoutu ya mohlodi ya ditokomane tša rena, le examples/ya tšhomišo ya Bootstrap. Ka ntle ga seo, faele efe goba efe ye nngwe ye e akareditšwego e fa thekgo ya diphuthelwana, tshedimošo ya laesense, le tlhabollo.

Go kgoboketša CSS le JavaScript

Bootstrap e šomiša Grunt bakeng sa tshepedišo ya yona ya go aga, ka mekgwa ye e loketšego ya go šoma ka tlhako. Ke ka fao re kgoboketšago khoutu ya rena, re sepetšago diteko, le tše dingwe.

Go tsenya Grunt

Go tsenya Grunt, o swanetše go thoma ka go taonelouta le go tsenya node.js (yeo e akaretšago npm). npm e emela dimmojule tše di phuthetšwego ka node gomme ke tsela ya go laola ditshepetšo tša tlhabollo ka node.js.

1. Tsenya grunt-clilefaseng ka bophara ka npm install -g grunt-cli.
2. Tsamaya go tšhupetšo ya modu /bootstrap/, ke moka o kitimiše npm install. npm e tla lebelela package.jsonfaele gomme ka go iketla e tsenya ditshepetšo tše di nyakegago tša selegae tšeo di lokeleditšwego moo.

Ge o phethilwe, o tla kgona go sepetša ditaelo tša go fapafapana tša Grunt tšeo di filwego go tšwa mothalong wa taelo.

Ditaelo tša Grunt tše di lego gona

grunt dist(E no kgoboketša CSS le JavaScript)

E tsošološa /dist/tšhupetšo ka difaele tša CSS le JavaScript tše di kgobokeditšwego le tše di fokoditšwego. Bjalo ka modiriši wa Bootstrap, ye ka tlwaelo ke taelo yeo o e nyakago.

grunt watch(Bogela)

E lebelela difaele tša mohlodi wa Ka fase gomme ka go iketla e di kgoboketša gape go CSS neng le neng ge o boloka phetogo.

grunt test(Matha diteko) .

E sepetša JSHint gomme e sepetša diteko tša QUnit ka go diphensele tša nnete ka lebaka la Karma .

grunt docs(Aga & leka dithoto tša docs)

E aga le go leka CSS, JavaScript, le dithoto tše dingwe tšeo di šomišwago ge o sepetša ditokomane ka mo nageng ka bundle exec jekyll serve.

grunt(Aga se sengwe le se sengwe ka mo go feletšego gomme o kitime diteko)

E kgoboketša le go fokotša CSS le JavaScript, e aga weposaete ya ditokomane, e sepetša sedirišwa sa go netefatša HTML5 kgahlanong le ditokomane, e tsošološa dithoto tša Customizer, le tše dingwe. E nyaka Jekyll . Hangata feela ho hlokahala haeba u hacking ka Bootstrap ka boeona e.

Tharollo ya mathata

Ge e ba o swanetše go kopana le mathata a go tsenya dilo tšeo di ithekgilego ka tšona goba go sepetša ditaelo tša Grunt, thoma ka go phumola /node_modules/tšhupetšo yeo e tšweleditšwego ke npm. Ke moka, kitimiša gape npm install.

Thempleite ya motheo

Thoma ka thempleite ye ya motheo ya HTML, goba o fetoše mehlala ye . Re holofela gore o tla tlwaetša dithempleite le mehlala ya rena, wa di fetoša gore di swane le dinyakwa tša gago.

Khopiša HTML ye e lego ka mo tlase go thoma go šoma ka tokumente ya Bootstrap ye nnyane.

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

Mehlala

Aga godimo ga thempleite ya motheo ka godimo ka dikarolo tše dintši tša Bootstrap. Re go kgothaletša go tlwaetša le go fetoša Bootstrap go swanela dinyakwa tša projeke ya gago ka noši.

Hwetša khoutu ya mohlodi ya mohlala o mongwe le o mongwe ka mo tlase ka go taonelouta polokelo ya Bootstrap . Mehlala e ka hwetšwa ka gare ga docs/examples/tšhupetšo.

Go šomiša tlhako

Thempleite ya go thoma

Ga go selo ge e se dilo tša motheo: e kgobokeditšwego CSS le JavaScript gotee le setshelo.

Sehlogo sa bootstrap

Laetša sehlogo sa Bootstrap sa boikhethelo bakeng sa phihlelo yeo e kaonafaditšwego ka pono.

Digridi

Mehlala ye mentši ya dipeakanyo tša keriti ka maemo ka moka a mane, go bea dihlaga, le tše dingwe.

Jumbotron ya go swana le yona

Aga go dikologa jumbotron ka navbar le dikholomo tše dingwe tša motheo tša keriti.

Jumbotron e tshesane

Aga letlakala la tlwaelo kudu ka go fokotša setshelo sa go se fetoge le jumbotron.

Navbars ka tiro

Navbar

Super motheo thempleite e akarelletsang navbar hammoho le ba bang ba dikahare tlatsetso.

Navbar ya godimo ya go se fetoge

Super motheo thempleite le static holimo navbar hammoho le ba bang ba dikahare tlatsetso.

Navbar e tsitsitseng

Super motheo thempleite le tsitsitseng holimo navbar hammoho le ba bang ba dikahare tlatsetso.

Dikarolo tša tlwaelo

Šireletša

Thempleite ya letlakala le tee ya go aga matlakala a gae a bonolo le a mabotse.

Carousel ya go swara

Tlwaetša navbar le carousel, ke moka o oketše dikarolo tše dingwe tše mpsha.

Blog ya go

Peakanyo ye bonolo ya blog ya dikholomo tše pedi ka go sepelasepela ga tlwaelo, hlogo, le mohuta.

Dashboard ya go šoma

Sebopego sa motheo sa dashboard ya admin yeo e nago le sidebar ye e sa fetogego le navbar.

Letlakala la go tsena

Custom foromo peakanyo le moralo bakeng sa letšoao bonolo ka foromo.

Nav e lokafaditšwego

Thea navbar ya tlwaelo ka dikgokagano tše di lokafaditšwego. Dihlogo godimo! E sego kudu Safari bogwera.

Footer e kgomaretšego

Kgomaretša letlakala la ka fase ka fase ga lefelo la go lebelela ge diteng di le tše kopana go e feta.

Sekhomaretsi footer le navbar

Kgomaretša letlakala la ka fase ka fase ga lefelo la go lebelela ka navbar ye e sa fetogego ka godimo.

Diteko

Bootstrap e sa arabeleng

Habonolo thibela karabelo ya Bootstrap ka docs rona .

Off-seile

Aga thepo ya go sepelasepela ya ka ntle ga lešela yeo e fetošwago bakeng sa go dirišwa le Bootstrap.

Ditlabela

Bootlint ya go swara

Bootlint ke sedirišwa sa semmušo sa Bootstrap HTML linter . E hlahloba ka go iketla diphošo tše mmalwa tše di tlwaelegilego tša HTML matlakaleng a wepe ao a dirišago Bootstrap ka tsela ya "vanilla" ka toka. Dikarolo/di-widget tša Vanilla Bootstrap di nyaka gore dikarolo tša tšona tša DOM di sepelelane le dibopego tše itšego. Bootlint e hlahloba gore ditiragalo tša dikarolo tša Bootstrap di na le HTML yeo e rulagantšwego gabotse. Nagana ka go oketša Bootlint go ketane ya gago ya didirišwa tša tlhabollo ya wepe ya Bootstrap gore go se be le le e tee ya diphošo tše di tlwaelegilego yeo e diegišago tlhabollo ya projeke ya gago.

Setšhaba

Dula o tseba ka tlhabollo ya Bootstrap gomme o fihlelele setšhaba ka methopo ye e thušago.

• Bala gomme o ingwadiše go The Official Bootstrap Blog .
• Boledišana le Bootstrappers-gotee le wena o diriša IRC ka irc.freenode.netseva, ka mokerong wa ##bootstrap .
• Bakeng sa thušo ya go diriša Bootstrap, botšiša go StackOverflow o diriša leswaotwitter-bootstrap-3 .
• Bahlami ba swanetše go šomiša lentšu la bohlokwa bootstrapgo diphuthelwana tšeo di fetošago goba di tlaleletšago go mošomo wa Bootstrap ge di aba ka npm goba mekgwa ye e swanago ya go tliša bakeng sa go utolla mo gogolo.
• Hwetša mehlala ye e hlohleletšago ya batho ba go aga ka Bootstrap go Bootstrap Expo .

O ka latela gape @getbootstrap go Twitter go hwetša lesebo la moragorago le dibidio tša mmino tše di makatšago.

Go šitiša go arabela

Bootstrap ka go iketla e fetoša matlakala a gago bakeng sa bogolo bjo bo fapa-fapanego bja skrine. Mona ke kamoo o ka šitišago tšobotsi ye gore letlakala la gago le šome go swana le mohlala wo o sa arabelego .

Megato ya go šitiša go arabela ga letlakala

1. Tlogela lefelo la go lebelela leo le <meta>boletšwego ka go ditokomane tša CSS
2. Tloša godimo ga widthya .containerbakeng sa legato le lengwe le le lengwe la keriti ka bophara bjo tee, mohlala width: 970px !important;Kgonthiša gore se se tla ka morago ga CSS ya Bootstrap ya go se fetoge. O ka boikgethelo qoba le !importantle mecha ea litaba dipotso kapa ba bang ba selector-fu.
3. Ge e ba o diriša di-navbar, tloša boitshwaro ka moka bja go phuhlama le go katološa di-navbar.
4. Bakeng sa dipeakanyo tša keriti, šomiša .col-xs-*diklase go tlaleletša go, goba legatong la, tša magareng/tše kgolo. O se ke wa tshwenyega, keriti ya sedirišwa se senyenyane kudu e lekanyetša go diphetho ka moka.

You’ll still need Respond.js for IE8 (ka ge dipotšišo tša rena tša methopo ya ditaba di sa le gona gomme di swanetše go šongwa). Se se šitiša dikarolo tša "sebaka sa sellathekeng" sa Bootstrap.

Bootstrap thempleite le karabelo e golofetseng

Re dirišitše magato a go mohlala. Bala khoutu ya yona ya mohlodi go bona diphetogo tše di itšego tšeo di phethagaditšwego.

Lebelela mohlala wo o sa arabelego

Browser le sesebediswa tšehetso

Bootstrap e agilwe go šoma gabotse go diphensele tša moragorago tša komporong le tša sellathekeng, go ra gore diphensele tša kgale di ka bontšha diphetolelo tša setaele se se fapanego, le ge di šoma ka botlalo, tša dikarolo tše itšego.

Diphensele tše di thekgwago

Ka go lebanya, re thekga diphetolelo tša moragorago tša diphensele le diforamo tše di latelago.

Diphensele tše dingwe tšeo di šomišago phetolelo ya moragorago ya WebKit, Blink, goba Gecko, e ka ba ka go lebanya goba ka API ya pono ya wepe ya sefala, ga di thekgwe ka go lebanya. Le ge go le bjalo, Bootstrap e swanetše (mabakeng a mantši) go bontšha le go šoma gabotse go diphensele tše le tšona. Tshedimošo ye nngwe ye e itšego ya thekgo e filwe ka mo tlase.

Didirišwa tša sellathekeng

Ka kakaretšo, Bootstrap e thekga diphetolelo tša moragorago tša diphensele tša go se fetoge tša sefala se sengwe le se sengwe se segolo. Hlokomela gore diphensele tša moemedi (go swana le Opera Mini, mokgwa wa Turbo wa Opera Mobile, UC Browser Mini, Amazon Silk) ga di thekgwe.

Diphensele tša komporong

Ka mo go swanago, diphetolelo tša moragorago tša bontši bja diphensele tša komporong di a thekgwa.

Go Windows, re thekga Internet Explorer 8-11 .

Bakeng sa Firefox, go tlaleletša go tokollo ya moragorago ya tlwaelo ye e tsepamego, re thekga gape phetolelo ya moragorago ya Tokollo ya Thekgo ye e Atološitšwego (ESR) ya Firefox.

Ka tsela yeo e sego ya semmušo, Bootstrap e swanetše go lebelela le go itshwara gabotse ka mo go lekanego go Chromium le Chrome bakeng sa Linux, Firefox bakeng sa Linux, le Internet Explorer 7, gammogo le Microsoft Edge, le ge e le gore ga di thekgwe semmušo.

Bakeng sa lenaneo la tše dingwe tša diphošo tša sephephediši tšeo Bootstrap e swanetšego go katana le tšona, bona Leboto la rena la diphošo tša sephephediši .

Internet Explorer 8 le 9

Internet Explorer 8 le 9 le tšona di a thekgwa, le ge go le bjalo, hle ela hloko gore dithoto tše dingwe tša CSS3 le dielemente tša HTML5 ga di thekgwe ka botlalo ke diphensele tše. Go tlaleletša, Internet Explorer 8 e nyaka tšhomišo ya Respond.js go kgontšha thekgo ya dipotšišo tša methopo ya ditaba.

Etela Na nka šomiša... go hwetša dintlha ka ga thekgo ya sephephediši sa dikarolo tša CSS3 le HTML5.

Internet Explorer 8 le Respond.js

Hlokomela ditemošo tše di latelago ge o diriša Respond.js ditikologong tša gago tša tlhabollo le tša tšweletšo bakeng sa Internet Explorer 8.

Respond.js le sefapano-domain CSS

Go šomiša Respond.js ka CSS yeo e amogetšwego go domain ye e fapanego (mohlala, go CDN) go nyaka peakanyo ye nngwe ya tlaleletšo. Bona ditokomane tša Respond.js bakeng sa dintlha.

Araba.js lefile://

Ka lebaka la melao ya tšhireletšo ya sephephediši, Respond.js ga e šome ka matlakala ao a lebelelwago ka file://protocol (go swana le ge o bula faele ya HTML ya selegae). Go leka dikarolo tše di arabelago go IE8, lebelela matlakala a gago ka HTTP(S). Bona ditokomane tša Respond.js bakeng sa dintlha.

Araba.js le@import

Respond.js ga e šome ka CSS yeo e šupeditšwego ka @import. Ka mo go kgethegilego, dipeakanyo tše dingwe tša Drupal di tsebja ka go diriša @import. Bona ditokomane tša Respond.js bakeng sa dintlha.

Internet Explorer 8 le go beakanya bogolo bja lepokisi

IE8 ga e thekge ka botlalo box-sizing: border-box;ge e kopantšwe le min-width, max-width, min-height, goba max-height. Ka lebaka leo, go tloga ka v3.0.1, ga re sa šomiša max-widthgo .containers.

Internet Explorer 8 le @font-sefahleho

IE8 e na le ditaba tše dingwe ka @font-facege e kopantšwe le :before. Bootstrap e diriša motswako woo le di-Glyphicon tša yona. Ge e le gore letlakala le bolokilwe, gomme le imelwa ntle le toeba godimo ga lefasetere (ke gore otla konope ya go hlabolla goba laetša selo se sengwe ka go iframe) gona letlakala le hwetša go tšweletšwa pele ga ge fonte e laetša. Go bea godimo ga letlakala (mmele) go tla bontšha tše dingwe tša diaekhone gomme go bea godimo ga diaekhone tše di šetšego go tla bontšha tšeo le tšona. Bona tokollo #13863 bakeng sa dintlha.

IE Mekgwa ya go sepelelana

Bootstrap ga e thekgwe ka mekgwa ya kgale ya go sepelelana ya Internet Explorer. Go kgonthiša gore o diriša mokgwa wa moragorago wa go fetolela bakeng sa IE, nagana ka go akaretša <meta>leswao la maleba matlakaleng a gago:

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

Netefatša mokgwa wa tokomane ka go bula didirišwa tša go lokiša diphošo: tobetsa F12gomme o lekole "Mokgwa wa Tokomane".

Theke ye e akaretšwa ka go ditokomane ka moka tša Bootstrap le mehlala go netefatša phetolelo ye kaone ye e kgonegago go phetolelo ye nngwe le ye nngwe ye e thekgwago ya Internet Explorer.

Bona potšišo ye ya StackOverflow go hwetša tshedimošo ye ntši.

Internet Explorer 10 ka go Windows 8 le Windows Phone 8

Internet Explorer 10 ga e fapantšhe bophara bja sedirišwa go tšwa go bophara bja lefelo la go lebelela , gomme ka go rialo ga e diriše gabotse dipotšišo tša methopo ya ditaba go CSS ya Bootstrap. Ka tlwaelo o be o tla no oketša seripa sa ka pela sa CSS go lokiša se:

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

Le ge go le bjalo, se ga se šome go didirišwa tšeo di šomišago diphetolelo tša Windows Phone 8 tša kgale go feta Update 3 (aka GDR3) , ka ge se dira gore didirišwa tše bjalo di bontšhe pono yeo e nago le bontši bja komporong go e na le pono ye tshesane ya "mogala". Go rarolla se, o tla swanelwa ke go akaretša CSS le JavaScript tše di latelago go šoma go dikologa phošo .

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

Bakeng sa tshedimošo ye ntši le ditlhahlo tša tšhomišo, bala Windows Phone 8 le Device-Width .

Bjalo ka dihlogo godimo, re akaretša se ka go ditokomane ka moka tša Bootstrap le mehlala bjalo ka pontšho.

Safari phesente potoloha

Enjene ya go fetolela ya diphetolelo tša Safari pele ga v7.1 bakeng sa OS X le Safari bakeng sa iOS v8.0 e bile le bothata bjo itšego ka palo ya mafelo a tesimale ao a šomišitšwego ka .col-*-1diklaseng tša rena tša keriti. Ka fao ge o be o na le dikholomo tše 12 tša keriti ka botee, o be o tla lemoga gore di tlile ka boripana ge di bapetšwa le methaladi ye mengwe ya dikholomo. Ntle le go kaonafatša Safari/iOS, o na le dikgetho tše dingwe tša go rarolla:

• Oketša .pull-rightgo kholomo ya gago ya mafelelo ya keriti go hwetša go logaganya ga go thata-go le letona
• Tweak diphesente tša gago ka seatla go hwetša go dikologa mo go phethagetšego bakeng sa Safari (go thata go feta kgetho ya pele) .

Di-modal, di-navbar, le dikhiboto tša go bonagala

Go tlala le go kgokološa

Support bakeng sa overflow: hiddenka <body>elements e batla e lekanyelitsoeng ka iOS le Android. Go fihlelela seo, ge o sepela go feta godimo goba tlase ga modal go e nngwe ya diphensele tša didirišwa tšeo, <body>diteng di tla thoma go sepelasepela. Bona phošo ya Chrome #175502 (e lokišitšwe go Chrome v40) le phošo ya WebKit #153852 .

iOS mongolo masimo le ho phethola

Go tloga ka iOS 9.3, mola modal e bulegile, ge e ba go kgoma ga mathomo ga boitšhišinyo bja mmele bja go phuthwa go le ka gare ga mollwane wa sengwalwa <input>goba a <textarea>, <body>diteng tšeo di lego ka tlase ga modal di tla kgokološwa go e na le modal ka boyona. Bona phošo ya WebKit #153856 .

Dikhiboto tša go bonagala

Gape, ela hloko gore ge e ba o diriša navbar e sa fetogego goba o diriša ditseno ka gare ga modal, iOS e na le phošo ya go fetolela yeo e sa mpshafatšego boemo bja dielemente tše di sa fetogego ge khiiboto ya go bonagala e hlohleletšwa. Diphetogo tše mmalwa tša se di akaretša go fetoša dielemente tša gago go position: absolutegoba go bitša sešupanako go tsepamiša kgopolo go leka go phošolla go beakanya ka seatla. Se ga se swarwe ke Bootstrap, ka fao go go wena go tšea sephetho sa gore ke tharollo efe yeo e lego kaone bakeng sa tirišo ya gago.

Di-dropdown tša Navbar

Elemente .dropdown-backdropga e šomišwe go iOS ka go nav ka lebaka la go raragana ga z-indexing. Ka go realo, go tswalela di-dropdown ka go di-navbar, o swanetše go kgotla ka go lebanya elemente ya go theoga (goba elemente efe goba efe ye nngwe yeo e tlago go thunya tiragalo ya go kgotla ka go iOS ).

Go godiša ga sephephediši

Go godiša letlakala ka mo go sa phemegego go tšweletša dilo tša kgale tša go fetolela dikarolong tše dingwe, ka bobedi go Bootstrap le wepe ka moka. Go ya ka taba, re ka kgona go e lokiša (nyaka pele gomme ka morago wa bula taba ge go nyakega). Le ge go le bjalo, re na le tshekamelo ya go hlokomologa tše ka ge gantši di se na tharollo ye e lebanyago ntle le diphetogo tša go thuba.

Kgomarela :hover/ :focuska selefouno

Le ge e le gore go hovering ga nnete ga go kgonege go bontši bja di-touchscreen, bontši bja diphensele tša sellathekeng di ekiša thekgo ya go hovering gomme di dira gore :hover"go kgomarele". Ka mantšu a mangwe, :hoverditaele di thoma go diriša ka morago ga go kgotla elemente gomme di emiša go diriša fela ka morago ga ge modiriši a kgotla elemente ye nngwe. Se se ka dira gore maemo a Bootstrap a :hover"kgomarele" ka mo go sa rategego go diphensele tše bjalo. Diphensele tše dingwe tša diselefouno le tšona di dira gore :focusdi kgomarele ka mo go swanago. Ga bjale ga go na tharollo e bonolo bakeng sa ditaba tše ntle le go tloša mekgwa e bjalo ka mo go feletšego.

Go gatiša

Gaešita le go diphensele tše dingwe tša mehleng yeno, go gatiša e ka ba mo go makatšago.

Ka mo go kgethegilego, go tloga go Chrome v32 le go sa šetšwe dipeakanyo tša mošito, Chrome e diriša bophara bja lefelo la go lebelela bjo bo sesane kudu go feta bogolo bja pampiri ya mmele ge e rarolla dipotšišo tša boraditaba ge e dutše e phrintha letlakala la wepe. Se se ka feletša ka gore keriti ye nnyane kudu ya Bootstrap e šome ka mo go sa letelwago ge e gatiša. Bona taba #12078 le Chrome bug #273306 bakeng sa dintlha tše dingwe. Diphetogo tše di šišintšwego tša go rarolla:

• Amogela keriti ye nnyane kudu gomme o kgonthišetše gore letlakala la gago le bonala le amogelega ka fase ga yona.
• Tlwaetša dikelo tša @screen-*diphetogo tša Ka fase gore pampiri ya gago ya mogatiši e tšewe e le ye kgolo go feta ye nnyane kudu.
• Oketša dipotšišo tša methopo ya ditaba ya tlwaelo go fetoša dintlha tša go kgaotša tša bogolo bja keriti tša methopo ya ditaba ya go phrintha fela.

Gape, go tloga go Safari v8.0, .containers ya bophara bjo bo sa fetogego e ka dira gore Safari e diriše bogolo bja fonte bjo bonyenyane ka mo go sa tlwaelegago ge e gatiša. Bona #14868 le WebKit bug #138192 bakeng sa dintlha tše dingwe. E nngwe ya tharollo yeo e ka bago gona ya se ke go oketša CSS ye e latelago:

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

Sephephediši sa setoko sa Android

Out of the box, Android 4.1 (esita le ba bang ba litokollo tse ncha ho bonahala) sekepe le Browser tiriso ye e le default web sebadi sa kgetho (ho fapana le Chrome). Ka bomadimabe, tirišo ya Browser e na le diphošo tše ntši le go se dumelelane le CSS ka kakaretšo.

Kgetha dimenu

Ka <select>dielemente, sephephediši sa setoko sa Android se ka se bontšhe ditaolo tša lehlakore ge e ba go na le border-radiusle/goba bordertšeo di dirišitšwego. (Bona potšišo ye ya StackOverflow bakeng sa dintlha.) Šomiša seripa sa khoutu ye e lego ka mo tlase go tloša CSS yeo e kgopišago gomme o tšweletše <select>e le elemente yeo e sa setaelego go sephephediši sa setoko sa Android. Go nkga ga moemedi wa mosediriši go efoga tšhitišo le diphensele tša 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>

O nyaka go bona mohlala? Hlahloba demo ena ea JS Bin.

Batho bao ba tiišetšago

Gore e kgone go fa phihlelo ye kaone ye e kgonegago go diphensele tša kgale le tša diphošo, Bootstrap e šomiša di-hack tša sephephediši sa CSS mafelong a mmalwa go nepiša CSS ye e kgethegilego go diphetolelo tše itšego tša sephephediši e le gore e šome go dikologa diphošo ka go diphensele ka botšona. Di-hack tše ka mo go kwešišegago di dira gore ba netefatši ba CSS ba ngongorege ka gore ga di šome. Ka banyalani ba bang ba libaka, re boetse re sebelisa bleeding-bohale CSS litšobotsi tse sa 'n't yet ka botlalo standardized, empa tsena di sebediswa feela bakeng sa ntlafatso tsoelang pele.

Ditemošo tše tša netefatšo ga di na taba ka tirišo ka ge karolo yeo e sego ya hacky ya CSS ya rena e netefatša ka botlalo gomme dikarolo tša hacky ga di šitiše go šoma gabotse ga karolo yeo e sego ya hacky, ke ka fao ke ka lebaka la eng re hlokomologa ka boomo ditemošo tše tše itšego.

Ditokomane tša rena tša HTML ka mo go swanago di na le ditemošo tše dingwe tše di sa rego selo le tše di se nago mohola tša netefatšo ya HTML ka lebaka la go akaretšwa ga rena ga tharollo ya phošo ya phošo ye e itšego ya Firefox .

Thekgo ya mokgatlo wa boraro

Le ge re sa thekge semmušo di-plugin tša mokgatlo wa boraro goba ditlaleletšo, re nea keletšo e itšego e nago le mohola go thuša go efoga ditaba tšeo di ka bago gona diprotšekeng tša gago.

Go beakanya bogolo bja lepokisi

Ba bang ba mokga wa boraro software, ho akarelletsa le Google Maps le Google Custom Search Engine, thulano le Bootstrap ka lebaka la * { box-sizing: border-box; }, molao e leng etsa hore e joalo paddingha e ame bophara ba ho qetela balwa ya elements. Ithute ka botlalo ka ga mohlala wa lepokisi le go lekanyetša bogolo go CSS Tricks .

Go ya ka seemo, o ka tloša ka mo go nyakegago (Kgetho 1) goba wa beakanya gape bogolo bja lepokisi bakeng sa dilete ka moka (Kgetho 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();
}

Phihlelelo

Bootstrap e latela ditekanyetšo tše di tlwaelegilego tša wepe gomme—ka boiteko bjo bonyenyane bjo bo oketšegilego—e ka dirišetšwa go hlama mafelo ao a fihlelelwago ke bao ba dirišago AT .

Tlolela go sepelasepela

Ge e le gore go sepelasepela ga gago go na le dikgokagano tše ntši gomme go tla pele ga diteng tše kgolo ka go DOM, oketša Skip to main contentkgokagano pele ga go sepelasepela (bakeng sa tlhalošo ye bonolo, bona sehlogo se sa Protšeke ya A11Y ka ga dikgokagano tša go tlola tša go sepelasepela ). Go šomiša .sr-onlysehlopha go tla uta ka pono kgokagano ya go tlola, gomme .sr-only-focusablesehlopha se tla netefatša gore kgokagano e ba ye e bonagalago ge e šetše e tsepeletše (bakeng sa badiriši ba khiiboto bao ba bonago).

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

Dihlogo tše di tsentšwego ka gare ga dihlaga

Ge o beakanya dihlogo ( <h1>- <h6>), hlogo ya gago ya mathomo ya tokumente e swanetše go ba <h1>. Dihlogo tše di latelago di swanetše go šomiša ka tsela ye e kwagalago ya <h2>- <h6>mo e lego gore babadi ba skrine ba ka aga tafola ya diteng tša matlakala a gago.

Ithute ka botlalo go HTML CodeSniffer le Bokgoni bja Phihlelelo bja Penn State .

Phapano ya mebala

Ga bjale, tše dingwe tša metswako ya mebala ya go se fetoge yeo e hwetšagalago go Bootstrap (go swana le diklase tša konope tša go fapafapana tša setaele , tše dingwe tša mebala ya go hlaola khoutu yeo e šomišwago bakeng sa diboloko tša motheo tša khoutu , sehlopha sa mothuši sa .bg-primary morago sa seemo , le mmala wa kgokagano wa go se fetoge ge o dirišwa ka morago ga mmala o mošweu) ba le tekanyo e tlase ya phapano (ka tlase ga tekanyo e kgothaletšwago ya 4,5:1 ). Se se ka baka mathata go badiriši bao ba nago le pono e nyenyane goba bao ba foufetšego mmala. Mebala ye ya go se fetoge e ka swanelwa ke go fetošwa go oketša phapano ya yona le go balega.

Methopo ya tlaleletšo

• "HTML Codesniffer" bookmarklet bakeng sa go hlaola ditaba tša phihlelelo
• Katološo ya Didirišwa tša Motšweletši wa Phihlelelo ya Chrome
• Sesekaseki sa Phapano ya Mmala
• Protšeke ya A11Y
• Ditokomane tša phihlelelo ya MDN

Dipotšišo tše di botšišwago gantši tša laesense

Bootstrap e lokollotšwe ka tlase ga laesense ya MIT gomme ke tokelo ya ngwalollo ya 2019 Twitter. E bedišwa go fihla go dikarolo tše nnyane, e ka hlalošwa ka maemo a latelago.

E nyaka gore o:

• Boloka tsebišo ya laesense le tokelo ya ngwalollo e akareditšwe ka go difaele tša CSS le JavaScript tša Bootstrap ge o di šomiša mešomong ya gago

E go dumelela go:

• Taonelouta le go diriša Bootstrap ka bolokologi, ka botlalo goba karolo ya yona, bakeng sa merero ya motho ka noši, ya poraebete, ya ka gare ya khamphani goba ya kgwebo
• Šomiša Bootstrap ka go diphuthelwana goba dikabo tšeo o di hlamago
• Fetoša khoutu ya mohlodi
• Fana laesense ya ka fasana ya go fetoša le go aba Bootstrap go batho ba boraro bao ba sa akaretšwago ka go laesense

E go thibela go:

• Swara bangwadi le beng ba dilaesense maikarabelo a tshenyo ka ge Bootstrap e filwe ntle le tiisetšo
• Swara bahlami goba baswari ba tokelo ya ngwalollo ya Bootstrap ba ikarabela
• Aba gape seripa sefe goba sefe sa Bootstrap ntle le kabo ya maleba
• Diriša maswao afe goba afe ao a nago le Twitter ka tsela efe goba efe yeo e ka bolelago goba ya bolela gore Twitter e thekga kabo ya gago
• Diriša maswao afe goba afe ao a nago le Twitter ka tsela efe goba efe yeo e ka bolelago goba ya bolela gore o hlotše softwere ya Twitter yeo go bolelwago ka yona

Ga e nyake gore o:

• Akaretša mothopo wa Bootstrap ka boyona, goba wa diphetogo dife goba dife tšeo o ka bago o di dirile go yona, kabong efe goba efe yeo o ka e kgoboketšago yeo e e akaretšago
• Romela diphetogo tšeo o di dirago go Bootstrap morago go porojeke ya Bootstrap (le ge e le gore ditshwayotshwayo tše bjalo di a hlohleletšwa)

Laesense ya Bootstrap ka botlalo e hwetšwa ka polokelong ya projeke bakeng sa tshedimošo ye ntši.

Diphetolelo

Maloko a setšhaba a fetoleditše ditokomane tša Bootstrap ka maleme a go fapafapana. Ga go le e tee yeo e thekgwago semmušo gomme e ka no se be nakong ka mehla.

• Bootstrap 中文文档 (Sechaena) .
• Bootstrap på Dansk (Sedanishe) .
• Bootstrap en Français (Sefora) .
• Bootstrap auf Deutsch (Sejeremane) .
• Bootstrap ka Setaliana (Setaliana) .
• Bootstrap 한국어 (Sekorea) .
• Bootstrap em Sepotokisi do Brasil (Sepotokisi sa Brazil) .
• Bootstrap по-русски (Se-Russia) .
• Bootstrap en Sepaniši (Sepaniši) .
• Türkçe Lebanta la Boot (Seturkey) .
• Bootstrap українською (Seukraine) .
• Bootstrap bằng tếng Việt (Sevietname) .

Ga re thuše go rulaganya goba go amogela diphetolelo, re no kgokaganya le tšona.

O feditše phetolelo e mpsha goba e kaone? Bula kgopelo ya go goga go e tlaleletša lenaneong la rena.