Downloda

Bootstrap (sweswi v3.3.7) yi na tindlela ti nga ri tingani to olova to sungula hi ku hatlisa, yin’wana na yin’wana yi tsakisa eka xiyimo xa vuswikoti byo hambana na xiyimo xa matirhiselo. Hlaya hi ku helela ku vona leswi fanelaka swilaveko swa wena swo karhi.

Xitirhisiwa xa ku pfula CDN

Vanhu va le henhla eka jsDelivr hi musa va nyika nseketelo wa CDN wa Bootstrap ya CSS na JavaScript. Tirhisa ntsena swihlanganisi leswi swa 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>

Nghenisa na Bower

U nga ha tlhela u nghenisa ni ku lawula Bootstrap’s Less, CSS, JavaScript, na tifonto hi ku tirhisa Bower :

$ bower install bootstrap

Nghenisa hi npm

U nga ha tlhela u nghenisa Bootstrap hi ku tirhisa npm :

$ npm install bootstrap@3

require('bootstrap')yi ta layicha hinkwaswo swa ti-plugin ta jQuery ta Bootstrap eka nchumu wa jQuery. Modyuli hi bootstrapyoxe a yi rhumeli nchumu ehandle. U nga layicha hi voko ti-plugin ta jQuery ta Bootstrap hi toxe hi ku layicha /js/*.jstifayela ehansi ka xikombo xa xiyimo xa le henhla xa phasela.

Bootstrap's package.jsonyi na metadata yin'wana yo engetela ehansi ka swilotlelo leswi landzelaka:

• less- ndlela yo ya eka fayili leyikulu ya xihlovo xa Less ya Bootstrap
• style- ndlela ya Bootstrap's non-minified CSS leyi nga hlengeletiwa ka ha ri emahlweni hi ku tirhisa swiletelo swa ntolovelo (ku hava ku cinca)

Nghenisa hi Composer

U nga ha tlhela u nghenisa ni ku lawula Bootstrap’s Less, CSS, JavaScript, na tifonto hi ku tirhisa Composer :

$ composer require twbs/bootstrap

Autoprefixer ya laveka eka Less/Sass

Bootstrap yi tirhisa Autoprefixer ku tirhana na swirhangi swa vaxavisi va CSS . Loko u hlengeleta Bootstrap ku suka eka xihlovo xa yona xa Less/Sass naswona u nga tirhisi Gruntfile ya hina, u ta lava ku hlanganisa Autoprefixer eka endlelo ra wena ro aka hi wexe. Loko u tirhisa Bootstrap leyi hlengeletiweke ka ha ri emahlweni kumbe u tirhisa Gruntfile ya hina, a wu fanelanga ku vilela hi leswi hikuva Autoprefixer se yi hlanganisiwile eka Gruntfile ya hina.

Leswi swi katsiweke

Bootstrap yi nga dawunilodiwaka hi swivumbeko swimbirhi, endzeni ka swona u ta kuma tidayirekitara leti landzelaka na tifayela, hi ndlela leyi twisisekaka yi hlengeleta switirhisiwa leswi tolovelekeke na ku nyika ku hambana loku hlengeletiweke na loku hungutiweke.

Bootstrap leyi hlengeletiweke ka ha ri emahlweni

Loko se u dawunilodiwile, pfula folda leyi tshikileleriweke leswaku u vona xivumbeko xa (leyi hlengeletiweke) Bootstrap. U ta vona nchumu wo fana ni lowu:

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

Lexi i xivumbeko xa xisekelo swinene xa Bootstrap: tifayela leti hlengeletiweke ka ha ri emahlweni ta matirhiselo ya xihatla ya ku hoxa eka kwalomu ka phurojeke yihi na yihi ya webu. Hi nyika CSS leyi hlengeletiweke na JS ( bootstrap.*), xikan’we na CSS na JS ( bootstrap.min.*) leyi hlengeletiweke ni leyi hungutiweke. Mimepe ya xihlovo xa CSS ( bootstrap.*.map) yi kumeka leswaku yi tirhisiwa ni switirhisiwa swo karhi swa vaendli va swihlamusela-marito. Tifonto leti humaka eka Glyphicons ti katsiwile, tanihi theme ra Bootstrap leri nga hlawuriwa.

Khodi ya xihlovo ya bootstrap

Ku dawuniloda ka khodi ya xihlovo ya Bootstrap ku katsa CSS, JavaScript, na nhundzu ya fonto leyi hlengeletiweke ka ha ri emahlweni, kun’we na xihlovo xa Less, JavaScript, na matsalwa. Hi ku kongoma, yi katsa leswi landzelaka ni swin’wana:

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

, less/, js/na fonts/i khodi ya xihlovo ya tifonto ta hina ta CSS, JS, na swifaniso (hi ku landzelelana). Folda dist/leyi yi katsa hinkwaswo leswi xaxametiweke eka xiyenge xa ​​ku dawuniloda loku hlengeletiweke ka ha ri emahlweni laha henhla. Folda docs/yi katsa khodi ya xihlovo ya matsalwa ya hina, na examples/ya matirhiselo ya Bootstrap. Ku tlula kwalaho, fayili yin’wana na yin’wana leyi katsiweke yi nyika nseketelo wa tiphasela, vuxokoxoko bya layisense, na nhluvukiso.

Ku hlengeleta CSS na JavaScript

Bootstrap yi tirhisa Grunt eka sisiteme ya yona yo aka, na tindlela to olova to tirha na rimba. I ndlela leyi hi hlengeletaka khodi ya hina ha yona, hi fambisa swikambelo, na swin’wana.

Ku nghenisa Grunt

Ku nghenisa Grunt, u fanele ku rhanga u kopa no nghenisa node.js (leyi katsaka npm). npm yi yimela mimojula leyi pakiweke hi node naswona i ndlela yo lawula ku titshega ka nhluvukiso hi ku tirhisa node.js.

1. Nghenisa grunt-cliemisaveni hinkwayo hi npm install -g grunt-cli.
2. Nghena eka /bootstrap/xikombo xa timitsu, kutani u tsutsuma npm install. npm yi ta languta package.jsonfayili naswona yi ta nghenisa hi yoxe swilo leswi lavekaka swa laha kaya leswi xaxametiweke kwalaho.

Loko u hetile, u ta kota ku tirhisa swileriso swo hambana swa Grunt leswi nyikiweke ku suka eka layini ya swileriso.

Swileriso swa Grunt leswi kumekaka

grunt dist(Ntsena hlengeleta CSS na JavaScript)

Ku pfuxeta /dist/xikombo hi tifayela ta CSS na JavaScript leti hlengeletiweke ni leti hungutiweke. Tanihi mutirhisi wa Bootstrap, lexi hi ntolovelo i xileriso lexi u xi lavaka.

grunt watch(Langutisa)

Yi hlalela tifayela ta xihlovo xa Less naswona yi ti hlengeleta nakambe hi ku tisungulela eka CSS nkarhi wun’wana ni wun’wana loko u hlayisa ku cinca.

grunt test(Ku tsutsuma swikambelo) .

Ku fambisa JSHint na ku fambisa swikambelo swa QUnit handle ka nhloko eka PhantomJS .

grunt docs(Aka & kambela nhundzu ya docs)

Ku aka no kambela CSS, JavaScript, na nhundzu yin’wana leyi tirhisiwaka loko ku tirhisiwa matsalwa laha tikweni hi ku tirhisa bundle exec jekyll serve.

grunt(Aka hinkwaswo hi ku helela u tsutsuma swikambelo)

Ku hlengeleta no hunguta CSS na JavaScript, ku aka webusayiti ya matsalwa, ku tirhisa xitiyisisi xa HTML5 ku lwisana na tidokisi, ku pfuxeta nhundzu ya Customizer, na swin’wana. Swi lava Jekyll . Hi ntolovelo swi laveka ntsena loko u ri karhi u hakela eka Bootstrap hi yoxe.

Ku lulamisa swiphiqo

Loko u fanele ku hlangana na swiphiqo swo nghenisa swititshege kumbe ku tirhisa swileriso swa Grunt, rhanga hi ku susa /node_modules/xikombo lexi endliweke hi npm. Kutani, tlhela u tlanga npm install.

Xifaniso xa xisekelo

Sungula hi xifaniso lexi xa xisekelo xa HTML, kutani u cinca swikombiso leswi . Hi tshemba leswaku u ta endla leswaku tithempleyiti ta hina ni swikombiso swi va leswi u swi lavaka, u swi cinca leswaku swi fambisana ni swilaveko swa wena.

Kopa HTML leyi nga laha hansi ku sungula ku tirha hi tsalwa ra Bootstrap leritsongo.

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

Swikombiso

Aka eka xifaniso xa xisekelo lexi nga laha henhla hi swiphemu swo tala swa Bootstrap. Hi ku khutaza ku cinca na ku cinca Bootstrap ku fambisana na swilaveko swa phurojeke ya wena ya munhu hi xiyexe.

Kuma khodi ya xihlovo ya xikombiso xin'wana na xin'wana laha hansi hi ku kopa vuhlayiselo bya Bootstrap . Swikombiso swi nga kumeka eka docs/examples/xikombo.

Hi ku tirhisa rimba

Xifaniso xo sungula

Ku hava nchumu handle ka swilo swa xisekelo: CSS na JavaScript leyi hlengeletiweke swin’we ni xikhomela-ndhawu.

Nhlokomhaka ya bootstrap

Layita theme ra Bootstrap leri nga hlawuriwa ku kuma ntokoto lowu antswisiweke hi ku vona.

Tigridi

Swikombiso swo tala swa swivumbeko swa gridi leswi nga na swiyenge hinkwaswo swa mune, ku endla swisaka, na swin’wana.

Jumbotron leyi vuriwaka Jumbotron

Aka ku rhendzela jumbotron hi navbar na tikholomu tin’wana ta xisekelo ta grid.

Jumbotron yo koma

Aka tluka ra ntolovelo swinene hi ku hunguta xigwitsirisi xa ntolovelo na jumbotron.

Navbars hi ku tirha

Navbar

Super basic template leyi katsaka navbar xikan’we na swin’wana leswi engetelekeke.

Navbar ya le henhla leyi nga cinciki

Super basic template na static top navbar xikan’we na swin’wana swo engetela.

Ku lulamisiwile navbar

Super basic template leyi nga na navbar ya le henhla leyi nga cinciki xikan’we na swin’wana leswi engetelekeke.

Swiphemu swa ntolovelo

Phutsela

Xifaniso xa tluka rin’we xo aka matluka ya le kaya yo olova ni yo saseka.

Xigwitsirisi

Endla leswaku navbar ni carousel swi va leswi u swi lavaka, kutani u engetela swiphemu leswintshwa.

Blog

Xivumbeko xo olova xa blog ya tikholomu timbirhi lexi nga ni ku famba-famba loku endleriweke wena, nhloko-mhaka, ni muxaka.

Dashboard ya kona

Xivumbeko xa xisekelo xa dashboard ya admin leyi nga na sidebar leyi nga cinciki na navbar.

Tluka ro nghena

Xivumbeko xa fomo ya ntolovelo na dizayini ya ku sayina ko olova eka fomo.

Ku lulama nav

Endla navbar ya ntolovelo leyi nga ni swihlanganisi leswi lulamisiweke. Tinhloko ta le henhla! A hi Safari friendly ngopfu.

Xifaniso xa le hansi lexi namarhelaka

Khomanisa xiphemu xa le hansi ehansi ka xivono loko leswi nga endzeni swi komile ku tlula swona.

Xifaniso xa le hansi lexi namarhelaka lexi nga ni navbar

Khomanisa xiphemu xa le hansi ehansi ka xivono lexi nga ni navbar leyi nga cinciki ehenhla.

Swikambelo

Bootstrap leyi nga hlamuriki

Hi ku olova ku tshikisa ku hlamula ka Bootstrap hi tidokisi ta hina .

Ehandle ka canvas

Aka menyu yo famba-famba ya le handle ka canvas leyi cinca-cincaka leswaku yi tirhisiwa na Bootstrap.

Switirho

Xitirhisiwa xa Bootlint

Bootlint i xitirhisiwa xa ximfumo xa Bootstrap HTML linter . Yi ti kambela hi yoxe swihoxo swo hlayanyana swa HTML leswi tolovelekeke eka matluka ya webu lama tirhisaka Bootstrap hi ndlela leyi ringaneleke ya "vanilla". Swiphemu/switirhisiwa swa Vanilla Bootstrap swi lava leswaku swiphemu swa swona swa DOM swi fambisana na swivumbeko swo karhi. Bootlint yi kambela leswaku swikombiso swa swiphemu swa Bootstrap swi na HTML leyi hleriweke kahle. Anakanya hi ku engetela Bootlint eka Bootstrap web development toolchain ya wena leswaku ku nga vi na swihoxo leswi tolovelekeke leswi hungutaka nhluvukiso wa phurojeke ya wena.

Muganga

Tshama u ri na vuxokoxoko bya nhluvukiso wa Bootstrap na ku fikelela vaaki hi switirhisiwa leswi pfunaka.

• Hlaya u tlhela u tsarisa eka The Official Bootstrap Blog .
• Bula na va Bootstrapper kulobye hi ku tirhisa IRC eka irc.freenode.netsevha, eka ##bootstrap channel .
• Ku kuma mpfuneto wo tirhisa Bootstrap, vutisa eka StackOverflow hi ku tirhisa thegitwitter-bootstrap-3 .
• Vatumbuluxi va fanele ku tirhisa rito ra nkoka bootstrapeka tiphasela leti cincaka kumbe ku engetela eka ntirho wa Bootstrap loko va hangalasa hi ku tirhisa npm kumbe tindlela to fana na tona to rhumela ku kuma ku tshuburiwa lokukulu.
• Kuma swikombiso leswi hlohlotelaka swa vanhu lava akaka hi Bootstrap eka Bootstrap Expo .

U nga ha tlhela u landzelela @getbootstrap eka Twitter ku kuma mahungu ya sweswinyana na ti music video to hlamarisa.

Ku tsandzeka ku hlamula

Bootstrap yi tiendlela hi yoxe ku cinca matluka ya wena leswaku ma va ni vukulu byo hambana-hambana bya xikirini. Hi leyi ndlela yo tshikisa xivumbeko lexi leswaku tluka ra wena ri tirha ku fana na xikombiso lexi lexi nga hlamuriki .

Magoza yo tshikisa ku hlamula ka matluka

1. Tshika xivono lexi <meta>boxiweke eka tidoki ta CSS
2. Tlula the widthon the .containerfor each grid tier hi ku anama kun’we, xikombiso width: 970px !important;Tiyisisa leswaku leswi swi ta endzhaku ka Bootstrap CSS ya ntolovelo. U nga ha hlawula ku papalata !importantna swivutiso swa swihangalasamahungu kumbe swin’wana swa selector-fu.
3. Loko u tirhisa ti-navbar, susa mahanyelo hinkwawo ya navbar ya ku wa ni ku andlala.
4. Eka swivumbeko swa gridi, tirhisa .col-xs-*titlilasi ku engetela eka, kumbe ematshan’wini ya, ta le xikarhi/letikulu. U nga vileli, gridi ya xitirhisiwa lexitsongo swinene yi ringanisa eka swiboho hinkwaswo.

U ta ha lava Respond.js ya IE8 (tanihi leswi swivutiso swa hina swa vuhangalasi bya mahungu swa ha riki kona naswona swi lavaka ku endliwa). Leswi swi tshikisa swiphemu swa "sayiti ya movha" ya Bootstrap.

Xifaniso xa bootstrap lexi nga ni ku hlamula loku nga tirhiki

Hi tirhise magoza lawa eka xikombiso. Hlaya khodi ya yona ya xihlovo ku vona ku cinca ko karhi loku tirhisiweke.

Languta xikombiso lexi nga hlamuriki

Nseketelo wa browser na xitirhisiwa

Bootstrap yi akiwile ku tirha kahle eka swihlamusela-marito swa sweswinyana swa desktop na swa tiselfoni, leswi vulaka leswaku swihlamusela-marito swa khale swi nga ha kombisa switayele swo hambana, hambi leswi swi tirhaka hi ku helela, ku hundzuluxela ka swiphemu swo karhi.

Swihlamusela-marito leswi seketeriwaka

Hi ku kongoma, hi seketela tivhidiyo ta sweswinyana ta swihlamusela-marito ni tipulatifomo leti landzelaka.

Swihlamusela-marito swin’wana leswi tirhisaka vuhundzuluxeri bya sweswinyana bya WebKit, Blink, kumbe Gecko, hambi hi ku kongoma kumbe hi ku tirhisa API ya xivono xa webu xa pulatifomo, a swi seketeriwi hi ku kongoma. Kambe, Bootstrap yi fanele (eka swiyimo swo tala) ku kombisa ni ku tirha kahle eka swihlamusela-marito leswi na swona. Vuxokoxoko byo tala byo kongoma bya nseketelo byi nyikiwile laha hansi.

Switirhisiwa swa tiselfoni

Hi ku angarhela, Bootstrap yi seketela vuhundzuluxeri bya sweswinyana bya swihlamusela-marito swa xiviri swa pulatifomo yin’wana ni yin’wana leyikulu. Xiya leswaku swihlamusela-marito swa vuyimeri (swo tanihi Opera Mini, movha wa Turbo wa Opera Mobile, UC Browser Mini, Amazon Silk) a swi seketeriwi.

Swihlamusela-marito swa le desktop

Hilaha ku fanaka, tivhidiyo ta sweswinyana ta swihlamusela-marito swo tala swa le desktop swa seketeriwa.

Eka Windows, hi seketela Internet Explorer 8-11 .

Eka Firefox, ku engetela eka nkandziyiso wa sweswinyana wa ntolovelo lowu tiyeke, hi tlhela hi seketela vuhundzuluxeri bya sweswinyana bya Nkandziyiso wa Nseketelo lowu Engeteriweke (ESR) wa Firefox.

Hi ndlela leyi nga riki ya ximfumo, Bootstrap yi fanele ku languteka no tikhoma kahle ku ringana eka Chromium na Chrome ya Linux, Firefox ya Linux, na Internet Explorer 7, xikan’we na Microsoft Edge, hambi leswi swi nga seketeriwiki ximfumo.

Ku kuma nxaxamelo wa swin’wana swa swihoxo swa browser leswi Bootstrap yi faneleke ku lwisana na swona, vona Rirhangu ra hina ra swihoxo swa browser .

Internet Explorer 8 na 9

Internet Explorer 8 na 9 na tona ta seketeriwa, hambiswiritano, hi kombela u tiva leswaku swihlawulekisi swin’wana swa CSS3 na swiaki swa HTML5 a swi seketeriwi hi ku helela hi swihlamusela-marito leswi. Ku engetela kwalaho, Internet Explorer 8 yi lava ku tirhisiwa ka Respond.js ku endla leswaku ku va ni nseketelo wa swivutiso swa midiya.

Endzela Xana ndzi nga tirhisa... ku kuma vuxokoxoko bya nseketelo wa browser ya swihlawulekisi swa CSS3 na HTML5.

Internet Explorer 8 na Respond.js

Tivonele eka switsundzuxo leswi landzelaka loko u tirhisa Respond.js eka tindhawu ta wena ta nhluvukiso na vuhumelerisi bya Internet Explorer 8.

Respond.js na CSS ya ku tsemakanya domain

Ku tirhisa Respond.js na CSS leyi khomiweke eka (xikombiso, eka CDN) yo hambana (xikombiso, eka CDN) swi lava ku lulamisiwa kun’wana loku engetelekeke. Vona ti docs ta Respond.js ku kuma vuxokoxoko.

Hlamula.js nafile://

Hikwalaho ka milawu ya vuhlayiseki bya browser, Respond.js a yi tirhi na matluka lama langutiwaka hi ku tirhisa file://protocol (ku fana na loko u pfula fayili ya HTML ya laha kaya). Ku kambela swihlawulekisi leswi hlamulaka eka IE8, languta matluka ya wena hi ku tirhisa HTTP(S). Vona ti docs ta Respond.js ku kuma vuxokoxoko.

Hlamula.js na@import

Respond.js a yi tirhi na CSS leyi kongomisiweke hi ku tirhisa @import. Ngopfu-ngopfu, swivumbeko swin’wana swa Drupal swi tiviwa swi tirhisa @import. Vona ti docs ta Respond.js ku kuma vuxokoxoko.

Internet Explorer 8 na ku ringanisa mabokisi

IE8 a yi seketeli hi ku helela box-sizing: border-box;loko yi hlanganisiwa na min-width, max-width, min-height, kumbe max-height. Hi xivangelo xexo, ku sukela eka v3.0.1, a ha ha tirhisi max-widtheka .containers.

Internet Explorer 8 na @font-face hi ku tirhisa xitirhisiwa lexi

IE8 yi na swiphiqo swo karhi na @font-faceloko yi hlanganisiwa na :before. Bootstrap yi tirhisa ku hlanganisiwa koloko na ti Glyphicons ta yona. Loko tluka ri cache, naswona ri layicha handle ka mbeva ehenhla ka fasitere (i.e. ba button yo pfuxeta kutani u layicha swo karhi eka iframe) kutani pheji yi kuma ku hundziseriwa fonto yi nga si layicha. Ku hover ehenhla ka tluka (miri) swi ta kombisa swin’wana swa swifaniso naswona ku hover ehenhla ka swifaniso leswi saleke swi ta kombisa sweswo na swona. Vona nkandziyiso wa #13863 ku kuma vuxokoxoko.

IE Tindlela ta ku fambisana

Bootstrap a yi seketeriwi eka tindlela ta khale ta ku fambisana ka Internet Explorer. Ku tiyiseka leswaku u tirhisa ndlela ya sweswinyana yo hundzuluxela ya IE, anakanya hi ku katsa <meta>thegi leyi faneleke eka matluka ya wena:

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

Tiyisisa movha wa matsalwa hi ku pfula switirhisiwa swo lulamisa swihoxo: cinca F12u kambela "Mode ya matsalwa".

Thegi leyi yi katsiwile eka matsalwa hinkwawo ya Bootstrap na swikombiso ku tiyisisa ku hundzuluxela lokunene loku kotekaka eka vuhundzuluxeri byin’wana na byin’wana lebyi seketeriwaka bya Internet Explorer.

Vona xivutiso lexi xa StackOverflow ku kuma vuxokoxoko byo tala.

Internet Explorer 10 eka Windows 8 na Windows Phone 8

Internet Explorer 10 a yi hambanisi ku anama ka xitirhisiwa na ku anama ka viewport , naswona xisweswo a yi tirhisi kahle swivutiso swa midiya eka CSS ya Bootstrap. Hi ntolovelo u ta engetela ntsena xiphemu xa xihatla xa CSS ku lulamisa leswi:

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

Kambe, leswi a swi tirhi eka switirhisiwa leswi tirhisaka tivhidiyo ta Windows Phone 8 ta khale ku tlula Update 3 (aka GDR3) , tanihi leswi swi endlaka leswaku switirhisiwa swo tano swi kombisa xivono lexikulu xa desktop ematshan’weni ya xivono xo koma xa "foni". Ku lulamisa leswi, u ta fanela ku katsa CSS na JavaScript leswi landzelaka ku tirha ku rhendzela xihoxo .

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

Ku kuma rungula leri engetelekeke ni swiletelo swa matirhiselo, hlaya Windows Phone 8 na Device-Width .

Tanihi tinhloko ta le henhla, hi katsa leswi eka matsalwa hinkwawo ya Bootstrap na swikombiso tanihi nkombiso.

Safari ku rhendzeleka ka tiphesente

Injhini yo hundzuluxela ya tivhidiyo ta Safari emahlweni ka v7.1 ya OS X na Safari ya iOS v8.0 a yi ri na xiphiqo xo karhi hi nhlayo ya tindhawu ta desimali leti tirhisiwaka eka .col-*-1titlilasi ta hina ta giridi. Kutani loko a wu ri na 12 wa tikholomu ta gridi ha yin’we-yin’we, a wu ta xiya leswaku ti tile hi ku koma loko ti pimanisiwa ni tilayini tin’wana ta tikholomu. Handle ko ndlandlamuxa Safari/iOS, u na swin’wana leswi u nga swi hlawulaka swo swi lulamisa:

• Engetela .pull-righteka kholomo ya wena yo hetelela ya gridi ku kuma ku ringanana ka hard-right
• Tweak tiphesente ta wena hi voko ku kuma ku rhendzeleka loku hetisekeke ka Safari (ku tika ku tlula ndlela yo sungula)

Timodali, ti- navbar ni tikhibhodi ta xiviri

Ku tala ni ku rhendzeleka

Nseketelo wa overflow: hiddeneka <body>elemente wu ringaniseriwile swinene eka iOS na Android. Leswaku u endla sweswo, loko u hundza ehenhla kumbe ehansi ka modal eka xin’wana xa swihlamusela-marito swa switirhisiwa sweswo, leswi <body>nga endzeni swi ta sungula ku rhendzeleka. Vona xihoxo xa Chrome #175502 (xi lulamisiwile eka Chrome v40) na xihoxo xa WebKit #153852 .

Tinsimu ta matsalwa ya iOS na ku rhendzeleka

Ku sukela eka iOS 9.3, loko modal yi ri karhi yi pfulekile, loko ku khumba ko sungula ka xikombiso xa ku rhendzeleka ku ri endzeni ka ndzilakano wa tsalwa <input>kumbe a <textarea>, leswi <body>nga ehansi ka modal swi ta rhendzeleka ematshan’weni ya modal hi yoxe. Vona xihoxo xa WebKit #153856 .

Tikhibhodi ta xiviri

Nakambe, xiya leswaku loko u tirhisa navbar leyi nga cinciki kumbe u tirhisa swingheniso endzeni ka modal, iOS yi na xihoxo xa ku hundzuluxela lexi nga pfuxeti xiyimo xa swiaki leswi nga cinciki loko khibhodi ya xiviri yi pfuriwa. Swilo swi nga ri swingani swo tshungula leswi swi katsa ku hundzula swiaki swa wena ku va position: absolutekumbe ku vitana timer eka focus ku ringeta ku lulamisa xiyimo hi voko. Leswi a swi khomiwi hi Bootstrap, kutani swi le ka wena ku teka xiboho xa leswaku hi xihi ntlhantlho lowu nga swinene eka xitirhisiwa xa wena.

Swilo leswi nga ehansi ka Navbar

Element .dropdown-backdropleyi a yi tirhisiwi eka iOS eka nav hikwalaho ka ku rharhangana ka z-indexing. Xisweswo, ku pfala swilo leswi nga ehansi eka ti-navbar, u fanele ku tikhoma hi ku kongoma xiaki lexi nga ehansi (kumbe xiaki xin’wana ni xin’wana lexi nga ta duvula xiendlakalo xo tsindziyela eka iOS ).

Ku kurisa ka browser

Ku kurisa pheji hi ndlela leyi nga papalatekiki ku humesa swilo swa khale swa ku hundzuluxela eka swiphemu swin’wana, eka Bootstrap ni le ka webu hinkwayo. Ku ya hi mhaka, hi nga ha swi kota ku yi lulamisa (rhanga hi lavisisa ivi u pfula mhaka loko swi laveka). Kambe, hi tala ku honisa leswi tanihi leswi hakanyingi swi nga riki na ntlhantlho lowu kongomeke handle ka swintshuxo swa hacky.

Ku namarhela :hover/ :focuseka mobile

Hambi leswi ku hovering ka xiviri ku nga kotekiki eka ti touchscreen to tala, ti-browser to tala ta tiselfoni ti tekelela nseketelo wa ku hovering naswona ti endla :hover"sticky". Hi marito man’wana, :hoverswitayele swi sungula ku tirha endzhaku ko ba elemente naswona swi tshika ku tirha ntsena endzhaku ka loko mutirhisi a ba elemente yin’wana. Leswi swi nga endla leswaku swiyimo swa Bootstrap swi :hover"khoma" hi ndlela leyi nga laviwiki eka swihlamusela-marito swo tano. Swihlamusela-marito swin’wana swa tiselfoni na swona swi endla leswaku swi :focusnamarhela hi ndlela leyi fanaka. Sweswi a ku na ndlela yo olova yo tshungula timhaka leti handle ko susa switayele swo tano hi ku helela.

Ku kandziyisa

Hambi ku ri eka swihlamusela-marito swin’wana swa manguva lawa, ku kandziyisa ku nga va loku hlamarisaka.

Ngopfu-ngopfu, ku sukela eka Chrome v32 naswona ku nga khathariseki swiletelo swa margin, Chrome yi tirhisa ku anama ka viewport lokutsongo swinene ku tlula sayizi ya phepha ra xiviri loko yi tlhantlha swivutiso swa midiya loko yi ri karhi yi kandziyisa tluka ra webu. Leswi swi nga endla leswaku giridi ya Bootstrap leyitsongo swinene yi tirha swi nga languteriwanga loko yi kandziyisa. Vona nkandziyiso wa #12078 na xihoxo xa Chrome #273306 ku kuma vuxokoxoko byo karhi. Swiringanyeto swo tshungula:

• Amukela gridi leyitsongo swinene naswona tiyisisa leswaku tluka ra wena ri languteka ri amukeleka ehansi ka yona.
• Endla leswaku mimpimo ya @screen-*swilo leswi cinca-cincaka swa Less yi va ya wena leswaku phepha ra wena ra muchini wo gandlisa ri tekiwa ri ri lerikulu ku tlula leritsongo swinene.
• Engetelani swivutiso swa midiya ya ntolovelo ku cinca tindhawu to wisa ta sayizi ya giridi ya midiya yo gandlisa ntsena.

Nakambe, ku sukela eka Safari v8.0, fixed-width .containers yi nga endla leswaku Safari yi tirhisa sayizi ya fonto leyitsongo hi ndlela leyi nga tolovelekangiki loko yi kandziyisa. Vona #14868 na WebKit bug #138192 ku kuma vuxokoxoko byo tala. Xin’wana lexi nga tshungulaka leswi i ku engetela CSS leyi landzelaka:

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

Xihlamusela-marito xa xitoko xa Android

Ku huma ebokisini, Android 4.1 (naswona hambi ku ri swin’wana leswintshwa swi tikomba) yi rhumeriwa na app ya Browser tanihi xihlamusela-marito xa webu xa ntolovelo xa ku hlawula (ku hambana na Chrome). Khombo ra kona, app ya Browser yi na swihoxo swo tala na ku nga fambisani na CSS hi ku angarhela.

Hlawula timenyu

Eka <select>swiaki, xihlamusela-marito xa xitoko xa Android a xi nge kombisi vulawuri bya le tlhelo loko ku ri na border-radiusna/kumbe ku bordertirhisiwile. (Vona xivutiso lexi xa StackOverflow ku kuma vuxokoxoko.) Tirhisa xiphemu xa khodi leyi nga laha hansi ku susa CSS leyi khunguvanyisaka ni ku hundzuluxela the <select>tanihi xiphemu lexi nga endliwangiki xitayili eka xihlamusela-marito xa xitoko xa Android. Ku nun’hwetela ka muyimeri wa mutirhisi ku papalata ku kavanyeteka ka swihlamusela-marito swa Chrome, Safari, na 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>

Xana u lava ku vona xikombiso? Languta demo leyi ya JS Bin.

Vatiyisisi

Leswaku yi nyika ntokoto lowunene lowu kotekaka eka swihlamusela-marito swa khale ni leswi nga ni swihoxo, Bootstrap yi tirhisa ku hakeriwa ka swihlamusela-marito swa CSS etindhawini to hlayanyana ku kongomisa CSS yo hlawuleka eka vuhundzuluxeri byo karhi bya swihlamusela-marito leswaku yi ta tirha ku rhendzela swihoxo eka swihlamusela-marito hi swoxe. Ti hack leti hi ndlela leyi twisisekaka ti endla leswaku va-CSS validator va vilela leswaku a va tirhi. Eka tindhawu timbirhi, hi tlhela hi tirhisa swihlawulekisi swa CSS swa bleeding-edge leswi nga si ringanisiwaka hi ku helela, kambe leswi swi tirhisiwa ntsena ku antswisa loku yaka emahlweni.

Switsundzuxo leswi swa ku tiyisisa a swi na mhaka hi ku tirhisa tanihileswi xiphemu lexi nga riki xa hacky xa CSS ya hina xi tiyisisaka hi ku helela naswona swiphemu swa hacky a swi kavanyeti ku tirha kahle ka xiphemu lexi nga riki xa hacky, hi yona mhaka leyi hi honisaka hi vomu switsundzuxo leswi swo karhi.

Tidokisi ta hina ta HTML na tona ti na switsundzuxo swo karhi leswi nga riki swa nkoka na leswi nga riki na nkoka swa ku tiyisisiwa ka HTML hikwalaho ka ku katsa ka hina ka ndlela yo tshungula xihoxo xo karhi xa Firefox .

Nseketelo wa vanhu va vunharhu

Hambileswi hi nga seketeliki ximfumo swiengetelo swihi na swihi swa munhu wa vunharhu kumbe swiengetelo, hi nyika switsundzuxo swo karhi leswi pfunaka ku pfuneta ku papalata swiphiqo leswi nga vaka kona eka tiphurojeke ta wena.

Ku ringanisiwa ka mabokisi

Software yin’wana ya vanhu va vunharhu, ku katsa na Google Maps na Google Custom Search Engine, yi lwisana na Bootstrap hikwalaho ka * { box-sizing: border-box; }, nawu lowu endlaka leswaku swi va tano paddinga wu khumbi ku anama ko hetelela loku hlayiweke ka elemente. Dyondza swo tala hi modele wa bokisi na ku pima mpimo eka CSS Tricks .

Ku ya hi mongo, u nga ha tlula hilaha swi lavekaka hakona (Nhlawulo wa 1) kumbe u tlhela u veka mpimo wa bokisi eka swifundzha hinkwaswo (Nhlawulo wa 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();
}

Ku fikelela

Bootstrap yi landzelela mimpimanyeto leyi tolovelekeke ya webu naswona—hi matshalatshala lamatsongo lama engetelekeke—yi nga tirhisiwa ku endla tisayiti leti fikelelaka lava tirhisaka AT .

Tlula ku famba-famba

Loko ku famba-famba ka wena ku ri ni swihlanganisi swo tala naswona ku ta emahlweni ka swilo leswikulu eka DOM, engetela Skip to main contentxihlanganisi emahlweni ka ku famba-famba (ku kuma nhlamuselo yo olova, vona xihloko lexi xa Phurojeke ya A11Y eka swihlanganisi swo tlula ku famba-famba ). Ku tirhisa .sr-onlytlilasi swi ta fihla hi mahlo xihlanganisi xo tlula, naswona .sr-only-focusabletlilasi yi ta tiyisisa leswaku xihlanganisi xi vonaka loko se xi kongomisiwile (eka vatirhisi va khibhodi lava vonaka).

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

Tinhlokomhaka leti pfanganisiweke

Loko u hlanganisa tinhlokomhaka ( <h1>- <h6>), nhlokomhaka ya wena ya matsalwa ya nkoka yi fanele ku va <h1>. Tinhlokomhaka leti landzelaka ti fanele ku tirhisa hi ndlela leyi twisisekaka ya <h2>- .<h6> leswaku vahlayi va xikirini va nga aka tafula ra swilo leswi nga endzeni ka matluka ya wena.

Dyondza swo tala eka HTML CodeSniffer na Penn State’s AccessAbility .

Ku hambana ka mihlovo

Sweswi, yin’wana ya ku hlanganisiwa ka mihlovo ya ntolovelo leyi kumekaka eka Bootstrap (ku fana ni titlilasi to hambana-hambana ta swikoweto leti nga ni switayele , yin’wana ya mihlovo leyi kombisaka khodi leyi tirhisiwaka eka swibokisana swa khodi ya xisekelo , tlilasi ya mupfuni wa .bg-primary le ndzhaku wa mongo , ni muvala wa xihlanganisi wa xiviri loko wu tirhisiwa eka xivumbeko xo basa) va na mpimo wa le hansi wa ku hambana (ehansi ka mpimo lowu ringanyetiweke wa 4.5:1 ). Leswi swi nga vanga swiphiqo eka vatirhisi lava nga voniki kahle kumbe lava nga voniki mihlovo. Mihlovo leyi ya ntolovelo yi nga ha lava ku cinciwa leswaku yi engetela ku hambana ni ku hlayeka ka yona.

Switirhisiwa leswi engetelekeke

• "HTML Codesniffer" bookmarklet yo kuma timhaka ta ku fikelela
• Xiengetelo xa Switirhisiwa swa Mutumbuluxi wa Mfikelelo wa Chrome
• Xihlahluvi xa ku hambana ka mihlovo
• Phurojeke ya A11Y
• Maphepha ya mfikelelo wa MDN

Swivutiso swa layisense leswi vutisiwaka

Bootstrap yi humesiwile ehansi ka layisense ya MIT naswona yi na mfanelo ya vutshila ya 2016 Twitter. Loko yi virisiwile kuya eka swiphemu leswintsongo, yinga hlamuseriwa hi swiyimo leswi landzelaka.

Swi lava leswaku u:

• Hlayisa xitiviso xa layisense na mfanelo ya vutshila swi katsiwile eka tifayela ta CSS na JavaScript ta Bootstrap loko u swi tirhisa eka mintirho ya wena

Swi ku pfumelela ku:

• Download na ku tirhisa Bootstrap hi ku ntshunxeka, hi ku helela kumbe hi xiphemu, eka swikongomelo swa munhu hi xiyexe, swa le xihundleni, swa le ndzeni ka khampani, kumbe swa mabindzu
• Tirhisa Bootstrap eka tiphasela kumbe ku hangalasiwa loku u ku endlaka
• Cinca khodi ya xihlovo
• Nyika layisense ya le hansi yo cinca no hangalasa Bootstrap eka vanhu va vunharhu lava nga katsiwangiki eka layisense

Swi ku yirisa ku:

• Khoma vatsari na vini va tilayisense na vutihlamuleri bya ku onhaka tanihileswi Bootstrap yi nyikiweke handle ka waranti
• Khoma vatumbuluxi kumbe vakhomi va mfanelo ya vutshila va Bootstrap va ri na vutihlamuleri
• Hlanganisa nakambe xiphemu xihi na xihi xa Bootstrap handle ka ku nyikiwa loku faneleke
• Tirhisa swikoweto swihi na swihi leswi nga swa Twitter hi ndlela yihi na yihi leyi nga vulaka kumbe ku vula leswaku Twitter yi seketela ku hangalasiwa ka wena
• Tirhisa swikoweto swihi na swihi leswi nga swa Twitter hi ndlela yihi na yihi leyi nga ha vulaka kumbe ku vula leswaku u endle software ya Twitter leyi ku vulavuriwaka ha yona

A swi lavi leswaku u:

• Katsa xihlovo xa Bootstrap hi xoxe, kumbe xa ku cinca kwihi na kwihi loku u nga ha vaka u ku endlile eka yona, eka ku hangalasiwa nakambe kwihi na kwihi loku u nga ku hlanganisaka loku yi katsaka
• Rhumela ku cinca loku u ku endlaka eka Bootstrap ku tlhelela eka phurojeke ya Bootstrap (hambi leswi vuyelo byo tano byi khutaziwaka)

Layisense ya Bootstrap leyi heleleke yi kumeka eka vuhlayiselo bya phurojeke ku kuma vuxokoxoko byo tala.

Vuhundzuluxeri

Swirho swa vaaki swi hundzuluxele matsalwa ya Bootstrap hi tindzimi to hambana. Ku hava na yin’we leyi seketeriwaka ximfumo naswona yi nga ha va yi nga ri ya nkarhi wa sweswi minkarhi hinkwayo.

• Xirhendzevutana xa xirhendzevutani 中文文档 (Xichayina) .
• Bootstrap 3 中文手冊 (Xichayina (Xa Ndhavuko))
• Bootstrap på Dansk (Xidenixi) .
• Bootstrap en Français (Xifurwa) .
• Bootstrap auf Deutsch (Xijarimani) .
• Xirhendzevutana xa xirhendzevutani hi Italiano (Xitaliyana) .
• Xirhendzevutana xa xirhendzevutani 한국어 (Xikorea) .
• Bootstrap em Português do Brasil (Xiputukezi xa le Brazil) .
• Xirhendzevutana xa xirhendzevutani по-русски (Xirhaxiya) .
• Bootstrap en Español (Xipaniya) .
• Türkçe Xirhendzevutana xa Xirhendzevutana (Xiturkey) .
• Xirhendzevutana xa xirhendzevutani українською (Xiukraine) .
• Xirhendzevutani xa xirhendzevutani xa Việt (Xivietname) .

A hi pfuni nchumu ku hlela kumbe ku rhurhela vuhundzuluxeri, hi hlanganisa ntsena eka byona.

Xana u hetile vuhundzuluxeri lebyintshwa kumbe byo antswa? Pfula xikombelo xo koka ku xi engetela eka nxaxamelo wa hina.