Göçürip al

“Bootstrap” (häzirki wagtda v3.4.1) çalt başlamagyň birnäçe aňsat usuly bar, olaryň hersi başga bir ussatlyk derejesini özüne çekýär. Aýratyn zerurlyklaryňyza laýykdygyny görmek üçin okaň.

jsDelivr

JsDelivr -daky adamlar Bootstrap-yň CSS we JavaScript üçin CDN goldawyny hoşniýetlilik bilen üpjün edýärler. Diňe şu jsDelivr baglanyşyklaryny ulanyň.

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

Bower bilen guruň

Şeýle hem, “ Bower ” -iň kömegi bilen “Bootstrap's Less”, “CSS”, “JavaScript” we şriftleri gurup we dolandyryp bilersiňiz :

bower install bootstrap

Npm bilen guruň

Şeýle hem, “Bootstrap” -y npm ulanyp gurup bilersiňiz :

npm install bootstrap@3

require('bootstrap')Bootstrap-yň ähli jQuery pluginlerini jQuery obýektine ýüklär. bootstrapModulyň özi hiç zat eksport etmeýär . /js/*.js“Bootstrap” -yň jQuery pluginlerini bukjanyň iň ýokary derejeli katalogynyň aşagyndaky faýllary ýükläp aýratynlykda ýükläp bilersiňiz.

“Bootstrap” -da package.jsonaşakdaky düwmeleriň aşagyndaky goşmaça metadata bar:

• less- “Bootstrap” -yň esasy az çeşme faýlyna barýan ýol
• style- Bootstrap-yň kiçeldilmedik CSS-e barýan ýol, deslapky sazlamalary ulanyp düzülen (özleşdirme ýok)

Kompozitor bilen guruň

Şeýle hem, “ Compoter ” -i ulanyp, “Bootstrap's Less”, “CSS”, “JavaScript” we şriftleri gurup we dolandyryp bilersiňiz :

composer require twbs/bootstrap

Az / Sass üçin zerur awtoprefikser

“ Bootstrap ”, CSS satyjy prefiksleri bilen iş salyşmak üçin “ Autoprefixer ” -i ulanýar . “Bootstrap” -y “Less / Sass” çeşmesinden düzýän bolsaňyz we “Gruntfile” -ni ulanmaýan bolsaňyz, “Autoprefixer” -i gurmak prosesiňize özüňiz birikdirmeli bolarsyňyz. Öňünden düzülen Bootstrap ulanýan bolsaňyz ýa-da Gruntfile-ni ulanýan bolsaňyz, bu barada alada etmegiň zerurlygy ýok, sebäbi Autoprefixer eýýäm Gruntfile-e goşuldy.

Näme girýär

“Bootstrap” -y iki görnüşde göçürip alyp bolýar, içinde aşakdaky çeşmeleri we faýllary tapyp bilersiňiz, umumy çeşmeleri logiki taýdan toparlaşdyryp, düzülen we kiçeldilen üýtgeşmeleri üpjün edip bilersiňiz.

Öňünden düzülen Bootstrap

Göçürilenden soň, (düzülen) Bootstrap-yň gurluşyny görmek üçin gysylan bukjany açyň. Munuň ýaly bir zady görersiňiz:

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

“Bootstrap” -yň iň esasy görnüşi: islendik web taslamasynda diýen ýaly çalt ulanylmagy üçin deslapky faýllar. bootstrap.*Toplanan CSS we JS ( ), şeýle hem düzülen we kiçeldilen CSS we JS ( ) üpjün edýäris bootstrap.min.*. CSS çeşme kartalary ( bootstrap.*.map) käbir brauzerleri dörediji gurallar bilen ulanmak üçin elýeterlidir. “Glyphicons” -yň şriftleri, goşmaça “Bootstrap” mowzugy ýaly.

Bootstrap deslapky kody

“Bootstrap” deslapky kody göçürip almak deslapky CSS, JavaScript we şrift aktiwlerini, çeşme Less, JavaScript we resminamalary öz içine alýar. Has takygy, aşakdakylary we başgalary öz içine alýar:

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

CSS less/, JS we nyşan şriftlerimiziň ( js/we fonts/degişlilikde) deslapky kody. Papkada ýokardaky dist/deslapky göçüriş bölüminde görkezilen zatlaryň hemmesi bar. Papkada resminamalarymyzyň docs/deslapky kody we examples/Bootstrap ulanylyşy bar. Mundan başga, islendik beýleki faýl paketleri, ygtyýarnama maglumatlary we ösüşi goldaýar.

CSS we JavaScript düzmek

“ Bootstrap ”, çarçuwa bilen işlemek üçin amatly usullar bilen “ Grunt ” -y gurmak ulgamy üçin ulanýar. Kodumyzy nädip düzýäris, synaglary geçirýäris we başgalar.

Grunt gurmak

Grunt-y gurmak üçin ilki bilen node.js-i göçürip almaly we gurnamaly (npm-i öz içine alýar). npm düwün gaplanan modullary aňladýar we node.js. arkaly ösüşe baglylygy dolandyrmagyň usulydyr.

1. grunt-cliBütin dünýäde guruň npm install -g grunt-cli.
2. Kök katalogyna geçiň /bootstrap/, soňra işlediň npm install. npm faýla sereder package.jsonwe şol ýerde görkezilen zerur ýerli garaşlylygy awtomatiki gurar.

Gutaransoň, buýruk setirinden berlen dürli Grunt buýruklaryny işledip bilersiňiz.

Elýeterli Grunt buýruklary

grunt dist(Diňe CSS we JavaScript düzüň)

Toplanan /dist/we kiçeldilen CSS we JavaScript faýllary bilen katalogy täzeleýär. “Bootstrap” ulanyjysy hökmünde bu adatça isleýän buýrugyňyzdyr.

grunt watch(Serediň)

Az çeşme faýllaryna tomaşa edýär we üýtgeşmäni ýatda saklanyňyzda olary awtomatiki usulda CSS-e düzýär.

grunt test(Synaglary işlediň)

JSHint -i işledýär we Karma -nyň kömegi bilen QUnit synaglaryny hakyky brauzerlerde işleýär .

grunt docs(Dokumentleriň aktiwlerini guruň we synagdan geçiriň)

Resminamalary ýerli görnüşde işledilende ulanylýan CSS, JavaScript we beýleki emläkleri gurýar we synagdan geçirýär bundle exec jekyll serve.

grunt(Hemme zady guruň we synaglary işlediň)

CSS we JavaScript-i düzýär we kiçeldýär, resminamalar web sahypasyny gurýar, resminamalara garşy HTML5 tassyklaýjysyny işledýär, Müşderi aktiwlerini täzeden döredýär we ş.m. Jekyll talap edýär . Adatça diňe “Bootstrap” -yň özüni döwýän bolsaňyz zerur.

Näsazlyklary düzeltmek

Baglanyşyklary gurmak ýa-da Grunt buýruklaryny işletmek bilen baglanyşykly kynçylyklar bilen ýüzbe-ýüz bolsaňyz, ilki /node_modules/bilen npm tarapyndan döredilen katalogy pozuň. Soňra täzeden işlediň npm install.

Esasy şablon

Bu esasy HTML şablonyndan başlaň ýa-da bu mysallary üýtgediň . Şablonlarymyzy we mysallarymyzy islegleriňize laýyklaşdyryp, düzersiňiz diýip umyt edýäris.

Minimal Bootstrap resminamasy bilen işe başlamak üçin aşakdaky HTML-i göçüriň.

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

Mysallar

“Bootstrap” -yň köp komponentleri bilen ýokardaky esasy şablonda guruň. “Bootstrap” -y aýratyn taslamaňyzyň isleglerine laýyklaşdyrmagy we uýgunlaşdyrmagy maslahat berýäris.

“Bootstrap” ammaryny göçürip alyp, aşakdaky her mysal üçin deslapky kody alyň . docs/examples/Mysallary katalogdan tapyp bilersiňiz .

Çarçuwany ulanmak

Başlangyç şablon

Esasy zatlardan başga zat: konteýner bilen bilelikde CSS we JavaScript düzüldi.

Bootstrap mowzugy

Görüşi güýçlendirilen tejribe üçin goşmaça Bootstrap mowzugyny ýükläň.

Gridler

Dört derejeli, höwürtge we ş.m. bilen gözenekli ýerleşişiň birnäçe mysallary.

Jumbotron

Jambotronyň töwereginde deňiz paneli we esasy gözenek sütünleri bilen guruň.

Dar jumbotron

Adaty konteýner we jumbotrony daraltmak arkaly has ýörite sahypa guruň.

Gämi duralgalary

Navbar

Käbir goşmaça mazmun bilen birlikde deňiz panelini öz içine alýan super esasy şablon.

Statik ýokarky paneli

Käbir goşmaça mazmun bilen birlikde statiki ýokarky deňiz paneli bilen super esasy şablon.

Bellenen gämi paneli

Käbir goşmaça mazmun bilen birlikde ýokary derejeli navbar bilen super esasy şablon.

Omörite komponentler

Gapak

Simpleönekeý we owadan baş sahypalary gurmak üçin bir sahypalyk şablon.

Karusel

Deňiz panelini we karuseli sazlaň, soňra käbir täze komponentleri goşuň.

Blog

Customörite nawigasiýa, sözbaşy we görnüşi bilen ýönekeý iki sütünli blog düzülişi.

Dolandyryş paneli

Kesgitli gapdal paneli we deňiz paneli bolan administrator paneli üçin esasy gurluş.

Giriş sahypasy

Formönekeý görnüşdäki forma düzülişi we dizaýny.

Dogry deňiz

Dogry baglanyşyklar bilen ýörite deňiz paneli dörediň. Başlar! Safari dost däl.

Ickapyk sözbaşy

Mazmuny ondan gysga bolsa, görnüşiň aşagyna aşaky sözbaşy dakyň.

Deňiz paneli bilen ýelmeşýän aşaky sözbaşy

Görkezişiň aşaky bölegine ýokarsynda kesgitli deňiz paneli bilen bir aşaky sözbaşy dakyň.

Synaglar

Jogap bermeýän Bootstrap

“Bootstrap” -yň resminamalarymyza jogap bermegini aňsatlyk bilen öçüriň .

Off-kanwas

“Bootstrap” bilen ulanmak üçin üýtgedip bolýan kanwas nawigasiýa menýusyny guruň.

Gurallar

Bootlint

Bootlint resmi Bootstrap HTML linter guralydyr. Bootstrap-y diýseň “vanil” görnüşinde ulanýan web sahypalarynda birnäçe umumy HTML ýalňyşlyklaryny awtomatiki barlaýar. Vanilla Bootstrap-yň komponentleri / gurallary DOM-yň bölekleriniň belli bir gurluşlara laýyk gelmegini talap edýär. “Bootlint”, “Bootstrap” komponentleriniň mysallarynyň dogry düzülen HTML bardygyny barlaýar. Bootlint web ösüş gurallar zynjyryna Bootlint goşmagy göz öňünde tutuň, umumy ýalňyşlyklaryň hiç biri taslamaňyzyň ösüşini haýallatmaz.

Jemgyýet

“Bootstrap” -yň ösüşi barada habarly boluň we bu peýdaly çeşmeler bilen jemgyýet bilen habarlaşyň.

• Resmi “Bootstrap” blogyny okaň we ýazylyň .
• irc.freenode.netSerwerde, ## bootstrap kanalynda IRC ulanyp, Bootstrappers bilen söhbetdeşlik .
• Bootstrap ulanmaga kömek üçin belligi ulanyp StackOverflowtwitter-bootstrap-3 -dan soraň .
• Işläp düzüjiler, npm ýa-da iň ýokary açyş üçin şuňa meňzeş gowşuryş mehanizmleri bootstraparkaly paýlanylanda Bootstrap-yň işleýşini üýtgedýän ýa-da goşýan paketlerdäki açar sözden peýdalanmalydyrlar .
• Bootstrap sergisinde Bootstrap bilen gurýan adamlaryň ylham beriji mysallaryny tapyň .

Şeýle hem iň soňky gybat we ajaýyp aýdym-saz wideolary üçin Twitter - de @getbootstrap yzarlap bilersiňiz .

Jogapkärçiligi öçürmek

“Bootstrap” sahypalaryňyzy dürli ekran ululyklary üçin awtomatiki usulda uýgunlaşdyrýar. Ine, bu aýratynlygy nädip öçürmeli, sahypaňyz bu jogap bermeýän mysal ýaly işleýär .

Sahypanyň duýgurlygyny öçürmek üçin ädimler

1. CSS resminamalarynda<meta> görkezilen görnüşi goýuň
2. widthHer gözenegiň derejesi üçin bir ini bilen üstaşyr ýazyň, .containermysal üçin width: 970px !important;, Bootstrap CSS-den soň gelendigine göz ýetiriň. !importantMediýa talaplary ýa-da käbir saýlaýjy-fu bilen islege görä gaça durup bilersiňiz .
3. Gämi duralgalaryny ulanýan bolsaňyz, ähli gämi duralgasynyň çökmegini we özüni alyp barşyny giňeltmegi aýyryň.
4. Panel düzülişleri .col-xs-*üçin orta / uly sapaklara goşmaça ýa-da ýerine sapaklary ulanyň. Alada etme, kiçijik kiçi enjam paneli ähli çözgütlere terezini berýär.

IE8 üçin size Respond.js gerek bolar (sebäbi media soraglarymyz henizem bar we işlenmeli). Bu, “Bootstrap” -yň “ykjam sahypasy” taraplaryny öçürýär.

Jogapkärçiligi ýapyk “Bootstrap” şablony

Bu ädimleri mysal üçin ulandyk. Geçirilen anyk üýtgeşmeleri görmek üçin deslapky kody okaň.

Jogap bermeýän mysaly görüň

Brauzer we enjam goldawy

“Bootstrap” iň soňky iş stoly we ykjam brauzerlerde has gowy işlemek üçin guruldy, ýagny köne brauzerler belli bir komponentleriň doly işleýän hem bolsa, dürli görnüşli görkezilip bilner.

Goldanýan brauzerler

Has takygy, aşakdaky brauzerleriň we platformalaryň iň soňky wersiýalaryny goldaýarys.

WebKit, Blink ýa-da Gecko-nyň iň soňky wersiýasyny ulanýan alternatiw brauzerler, gönüden-göni ýa-da platformanyň web görnüşi API arkaly bolsun, aç-açan goldanylmaýar. Şeýle-de bolsa, “Bootstrap” (köplenç halatda) bu brauzerlerde dogry işlemeli we işlemeli. Has anyk goldaw maglumatlary aşakda berilýär.

Jübi enjamlary

Umuman aýdanyňda, Bootstrap her esasy platformanyň esasy brauzerleriniň iň soňky wersiýalaryny goldaýar. Proksi brauzerleriniň (Opera Mini, Opera Mobile-nyň Turbo rejimi, UC Browser Mini, Amazon Silk ýaly) goldanmaýandygyny ýadyňyzdan çykarmaň.

Stol brauzerleri

Şonuň ýaly-da, iş stoly brauzerleriniň köpüsiniň iň soňky wersiýalary goldanýar.

Windows-da Internet Explorer 8-11-i goldaýarys .

“Firefox” üçin iň soňky adaty durnukly goýberişden başga-da, “Firefox” -yň iň soňky “ Giňeldilen goldaw goýberiş” (ESR) wersiýasyny hem goldaýarys.

Resmi däl bolsa, Bootstrap resmi taýdan goldanylmasa-da, Linux üçin Chromium we Chrome, Linux üçin Firefox, Internet Explorer 7, şeýle hem Microsoft Edge-de ýeterlik derejede özüni alyp barmaly.

“Bootstrap” -yň çözmeli käbir brauzer säwlikleriniň sanawy üçin brauzerimizdäki näsazlyklar diwaryna serediň .

Internet Explorer 8 we 9

Internet Explorer 8 we 9 hem goldanýar, ýöne käbir CSS3 häsiýetleriniň we HTML5 elementleriniň bu brauzerler tarapyndan doly goldanmaýandygyny ýatdan çykarmaň. Mundan başga-da, Internet Explorer 8 media talap goldawyny işjeňleşdirmek üçin Respond.js -den peýdalanmagy talap edýär.

CSS3 we HTML5 aýratynlyklaryny brauzer goldawy barada jikme-jiklikler üçin ulanyp bilerinmi?

Internet Explorer 8 we Respond.js

Internet Explorer 8 üçin ösüş we önümçilik gurşawyňyzda Respond.js ulanylanda aşakdaky gowaklardan ägä boluň.

Respond.js we kross-domen CSS

Başga (kiçi) domende (mysal üçin CDN-de) ýerleşdirilen CSS bilen Respond.js-i ulanmak goşmaça gurnama talap edýär. Jikme-jiklikler üçin Respond.js resminamalaryna serediň.

Jogap.js wefile://

Brauzeriň howpsuzlyk düzgünleri sebäpli, Respond.js protokol arkaly görlen sahypalar bilen işlemeýär file://(ýerli HTML faýly açanyňyz ýaly). IE8-de täsirli aýratynlyklary barlamak üçin, HTTP (S) sahypalaryňyzy görüň. Jikme-jiklikler üçin Respond.js resminamalaryna serediň.

Jogap.js we@import

Respond.js salgylanylýan CSS bilen işlemeýär @import. Hususan-da, käbir Drupal konfigurasiýalarynyň ulanylýandygy mälimdir @import. Jikme-jiklikler üçin Respond.js resminamalaryna serediň.

Internet Explorer 8 we guty ululygy

IE8 ,,, ýa-da birleşdirilende box-sizing: border-box;doly goldaw bermeýär . Şol sebäpli, v3.0.1 bolşy ýaly, indi s - lerde ulanmaýarys .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 we @ font-face

@font-faceIE8 bilen birleşdirilende käbir meseleler bar :before. “Bootstrap” bu kombinasiýany “Glyphicons” bilen ulanýar. Sahypa keş görnüşinde saklanylsa we penjiräniň üstünde syçanjyk bolmasa ýüklense (täzeleme düwmesine basyň ýa-da iframe bir zat ýükläň), şrift ýüklenmänkä sahypa görkezilýär. Sahypanyň (bedeniň) üstünde gezmek käbir nyşanlary görkezer we galan nyşanlaryň üstünde gezmek hem şollary görkezer. Jikme-jiklikler üçin # 13863 sanyna serediň .

IE laýyklyk rejeleri

Bootstrap köne Internet Explorer sazlaşyk reesimlerinde goldanylmaýar. IE üçin iň soňky görkeziş tertibini ulanýandygyňyza göz ýetirmek üçin <meta>sahypalaryňyza degişli belligi goşmagy göz öňünde tutuň:

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

Düzediş gurallaryny açmak bilen resminama re modeimini tassyklaň: F12"Resminama reodeimi" basyň we barlaň.

Bu bellik, Internet Explorer-iň her goldanýan wersiýasynda mümkin bolan iň gowy görkezilişi üpjün etmek üçin Bootstrap-yň ähli resminamalaryna we mysallaryna girýär.

Has giňişleýin maglumat üçin bu StackOverflow soragyna serediň.

Windows 8-de Internet Explorer 10 we Windows Phone 8

Internet Explorer 10 enjamyň giňligini görüniş giňliginden tapawutlandyrmaýar we şeýlelik bilen Bootstrap-yň CSS-de media talaplaryny dogry ulanmaýar. Adatça muny düzetmek üçin CSS-iň çalt bölegini goşarsyňyz:

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

Şeýle-de bolsa, “Windows Phone 8” täzelenme 3-den (aka GDR3) köne wersiýalary işleýän enjamlar üçin işlemeýär , sebäbi bu enjamlaryň dar “telefon” görnüşine derek iş stoly görnüşini görkezmegine sebäp bolýar. Bu meseläni çözmek üçin, näsazlygyň üstünde işlemek üçin aşakdaky CSS we JavaScript-i goşmaly bolarsyňyz .

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

Has giňişleýin maglumat we ulanyş görkezmeleri üçin Windows Phone 8 we Enjam-Width okaň .

Başlyk hökmünde, muny Bootstrap-yň ähli resminamalaryna we görkeziş hökmünde mysallara goşýarys.

Safari göterim tegelek

OS X üçin v7.1-den öň Safari we iOS v8.0 üçin Safari wersiýalarynyň hereketlendirijisi, .col-*-1gözenek synplarymyzda ulanylýan onluk ýerleriň sanynda birneme kynçylyk çekdi. Şeýlelik bilen, 12 sany aýratyn sütün bar bolsa, beýleki hatar sütünler bilen deňeşdirilende olaryň gysga çykandygyny görersiňiz. Safari / iOS-ny täzelemekden başga-da, iş usullary üçin käbir mümkinçilikleriňiz bar:

• .pull-rightGaty sag deňleşmek üçin iň soňky gözenegiň sütünine goşuň
• Safari üçin ajaýyp tegelek almak üçin göterimleriňizi el bilen ýuwuň (birinji wariantdan has kyn)

Modallar, deňiz panelleri we wirtual klawiaturalar

Artmak we aýlamak

overflow: hiddenElement üçin goldaw <body>iOS we Android-de gaty çäklidir. Şol maksat bilen, şol enjamlaryň brauzerleriniň birinde modalyň ýokarsyny ýa-da aşagyny aýlasaňyz, <body>mazmun aýlanyp başlar. Chrome bug # 175502 ( Chrome v40-da düzedilen) we WebKit bug # 153852 serediň .

iOS tekst meýdanlary we aýlamak

IOS 9.3-e görä, modal açyk bolsa-da, aýlaw hereketiniň başlangyç degmegi tekstiň <input>ýa-da a -nyň çäginde bolsa <textarea>, <body>modalyň aşagyndaky mazmun modalyň ýerine derek aýlanar. WebKit bug # 153856 serediň .

Wirtual klawiatura

Mundan başga-da, kesgitli bir paneli ulanýan bolsaňyz ýa-da modalyň içindäki girişleri ulanýan bolsaňyz, iOS-da wirtual klawiatura işledilende kesgitli elementleriň ýagdaýyny täzelemeýän görkeziji näsazlygy bar. Munuň üçin birnäçe çözgüt, elementleriňizi üýtgetmek position: absoluteýa-da ýerleşişini el bilen düzetmek üçin fokus taýmerini ulanmagy öz içine alýar. Bu “Bootstrap” tarapyndan dolandyrylmaýar, şonuň üçin haýsy çözgüdiňiz üçin iň oňat çözgüdiňiz size bagly.

Gämi duralgasy

.dropdown-backdropZ-indeksirlemegiň çylşyrymlylygy sebäpli bu element deňizde iOS-da ulanylmaýar . Şeýlelik bilen, deňiz panellerindäki açylanlary ýapmak üçin aşak düşýän elemente (ýa-da iOS-da basmak hadysasyny ýakjak başga element ) göni basmaly.

Brauzeri ulaltmak

Sahypany ulaltmak hökmany suratda “Bootstrap” -da we webiň beýleki böleklerinde görkezilen eserleri görkezýär. Meselä baglylykda, ony düzedip bileris (ilki gözläň, zerur bolsa bir meseläni açyň). Şeýle-de bolsa, bulary äsgermezlik edýäris, sebäbi köplenç hackly işlerden başga göni çözgüt ýok.

Ykjam :hover/ :focusykjam

Duýgur ekranlaryň köpüsinde hakyky gezelenç mümkin bolmasa-da, ykjam brauzerleriň köpüsi aýlaw goldawyna öýkünýärler we :hover"ýelmeşýärler". Başga sözler bilen aýdylanda, :hoverstiller bir elemente degensoň ulanylyp başlaýar we diňe ulanyjy başga bir elementi basandan soň ulanylmagyny bes edýär. Bu, “Bootstrap” -yň :hoverýagdaýlarynyň şeýle brauzerlerde islenilmeýän “ýapyşmagyna” sebäp bolup biler. Käbir ykjam brauzerler hem :focusşuňa meňzeş ýelmeşýärler. Häzirki wagtda bu meseleler üçin beýle stilleri düýbünden aýyrmakdan başga ýönekeý iş ýok.

Çap etmek

Käbir döwrebap brauzerlerde-de çap etmek gaty gyzykly bolup biler.

Hususan-da, Chrome v32 görnüşinde we margin sazlamalaryna garamazdan, Chrome web sahypasyny çap edende media soraglaryny çözmekde fiziki kagyz ölçeginden ep-esli dar görünýär. Bu, “Bootstrap” -yň goşmaça kiçi torunyň çap edilende garaşylmadyk ýagdaýda işjeňleşmegine sebäp bolup biler. Käbir jikme-jiklikler üçin 120 12078 we Chrome bug # 273306 serediň. Teklip edilýän iş usullary:

• Artykmaç paneli gujaklaň we sahypaňyzyň aşagynda makul görünýändigine göz ýetiriň.
• Has az üýtgeýänleriň bahalaryny özleşdiriň, @screen-*printer kagyzyňyz kiçijikden has uly hasaplanar.
• Diňe çap metbugaty üçin gözenegiň ölçeg nokatlaryny üýtgetmek üçin ýörite media talaplaryny goşuň.

Şeýle hem, “Safari v8.0” -e görä, kesgitli ini “ .containerSafari” çap edilende adatdan daşary kiçi şrift ululygyny ulanmagyna sebäp bolup biler. Has giňişleýin maglumat üçin # 14868 we WebKit bug # 138192 serediň. Munuň üçin potensial çözgütleriň biri aşakdaky CSS-ni goşmakdyr:

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

Android aksiýa brauzeri

“Android 4.1” (hatda käbir täze çykanlar hem görünýär) brauzer programmasy bilen deslapky web brauzeri hökmünde saýlanýar (Chrome-dan tapawutlylykda). Gynansagam, Brauzer programmasynda köp sanly kemçilikler we umuman CSS bilen gapma-garşylyklar bar.

Menýu saýlaň

Elementlerde, we / ýa-da ulanylýan bolsa <select>, Android aksiýa brauzeri gapdal dolandyryşlary görkezmez . ( Jikme-jiklikler üçin şu StackOverflow soragyna serediň.) Göwnüňize degýän CSS-i aýyrmak we Android aksiýa brauzerinde tertipsiz element hökmünde görkezmek üçin aşakdaky kod parçasyny ulanyň. Ulanyjy agentiniň ys almagy, Chrome, Safari we Mozilla brauzerlerine päsgelçiliklerden gaça durýar.border-radiusborder<select>

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

Mysal görmek isleýärsiňizmi? Bu JS Bin demosyna göz aýlaň.

Barlaýjylar

Köne we ýalňyş brauzerlere iň oňat tejribe bermek üçin Bootstrap , brauzerleriň özlerinde ýüze çykýan näsazlyklaryň üstünde işlemek üçin belli bir brauzer wersiýalaryna ýörite CSS-ni nyşana almak üçin birnäçe ýerde CSS brauzer hakerlerini ulanýar. Bu haklar CSS tassyklaýjylarynyň nädogrydygyna nägilelik bildirmegine sebäp bolýar. Birnäçe ýerde, entek doly standartlaşdyrylmadyk ganly CSS aýratynlyklaryny ulanýarys, ýöne bular diňe progressiw güýçlendirmek üçin ulanylýar.

Bu tassyklama duýduryşlary iş ýüzünde möhüm däl, sebäbi CSS-iň hack däl bölegi doly tassyklanýar we hakly bölekler haker däl bölegiň dogry işlemegine päsgel bermeýär, şonuň üçin bu duýduryşlary bilgeşleýin äsgermezlik edýäris.

HTML resminamalarymyzda belli bir Firefox näsazlygy üçin iş meýilnamasynyň goşulmagy sebäpli käbir ownuk we ähmiýetsiz HTML tassyklama duýduryşlary bar .

Üçünji tarap goldawy

Haýsydyr bir üçünji tarap plaginlerini ýa-da goşmaçalaryny resmi taýdan goldamaýarys, taslamalaryňyzda ýüze çykyp biljek meselelerden gaça durmak üçin käbir peýdaly maslahatlary berýäris.

Guty ululygy

Käbir üçünji tarap programma üpjünçiligi, şol sanda Google Kartalar we Google Custom Search Engine, Bootstrap bilen gapma-garşy gelýär * { box-sizing: border-box; }, bu düzgün paddingelementiň soňky hasaplanan giňligine täsir etmeýär. CSS hilelerinde guty modeli we ululygy barada has giňişleýin öwreniň .

Kontekste baglylykda, zerur bolanda (1-nji wariant) ýok edip bilersiňiz ýa-da tutuş sebitler üçin guty ölçegini täzeden düzüp bilersiňiz (2-nji wariant).

/* 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();
}

Elýeterlilik

“Bootstrap” umumy web ülňülerine eýerýär we iň az goşmaça tagallalar bilen, AT ulanýanlar üçin elýeterli saýtlary döretmek üçin ulanylyp bilner .

Nawigasiýa geçiň

Nawigasiýaňyzda köp baglanyşyk bar bolsa we DOM-daky esasy mazmundan Skip to main contentöň gelen bolsa, nawigasiýa başlamazdan ozal bir baglanyşyk goşuň (ýönekeý düşündiriş üçin nawigasiýa baglanyşyklaryndan geçmek baradaky A11Y Taslama makalasyna serediň ). Synpdan peýdalanmak, .sr-onlygeçiriş baglanyşygyny wizual gizlär we .sr-only-focusablesynp baglanyşygyň bir gezek ünsi jemläninde görüner (klawiatura ulanyjylary üçin).

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

Höweslendirilen sözbaşylar

Höwürtge sözbaşylary ( <h1>- <h6>) ýerleşdirilende, esasy resminama sözbaşy bolmaly <h1>. Ondan soňky sözbaşylar logiki taýdan peýdalanmalydyr <h2>- <h6>ekrany okyjylar sahypalaryňyz üçin mazmun tablisasyny gurup bilerler.

HTML CodeSniffer we Penn State's AccessAbility -da has giňişleýin öwreniň .

Reňk tapawudy

Häzirki wagtda “Bootstrap” -da bar bolan deslapky reňk kombinasiýalary (dürli görnüşli düwme synplary, esasy kod bloklary üçin ulanylýan reňkleri görkezýän käbir kodlar , .bg-primary kontekst fon kömekçi synpy we ak fonda ulanylanda deslapky baglanyşyk reňki) pes kontrast gatnaşygy bar ( maslahat berilýän gatnaşygy 4,5: 1 ). Görüşi pes bolan ýa-da reňk kör bolan ulanyjylara kynçylyk döredip biler. Bu deslapky reňkler, kontrastyny ​​we laýyklygyny ýokarlandyrmak üçin üýtgedilmeli bolup biler.

Goşmaça çeşmeler

• Elýeterlilik meselelerini kesgitlemek üçin "HTML Codesniffer" bellik
• “Chrome” -yň elýeterliligi dörediji gurallarynyň giňeltmesi
• Reňk kontrast analizatory
• A11Y taslamasy
• MDN elýeterlilik resminamalary

Ygtyýarnamanyň soraglary

“Bootstrap” MIT ygtyýarnamasy boýunça çykýar we awtorlyk hukugy 2019 Twitter. Kiçijik böleklere gaýnadylan bolsa, aşakdaky şertler bilen düşündirip bolar.

Sizden talap edýär:

• Bootstrap-yň CSS we JavaScript faýllaryna öz eserleriňizde ulananyňyzda ygtyýarnama we awtorlyk hukugy habarnamasyny saklaň

Size rugsat berýär:

• Şahsy, hususy, kompaniýanyň içerki ýa-da täjirçilik maksatlary üçin Bootstrap-y doly ýa-da bölekleýin göçürip alyň
• Döredýän paketleriňizde ýa-da paýlamalaryňyzda Bootstrap ulanyň
• Çeşme koduny üýtgediň
• “Bootstrap” -y ygtyýarnamada ýok üçünji taraplara üýtgetmek we paýlamak üçin sublicense beriň

Size gadagan edýär:

• Bootstrap kepilliksiz üpjün edilýändigi sebäpli awtorlary we ygtyýarnamanyň eýelerini ýitgiler üçin jogapkärçilik çekiň
• “Bootstrap” -yň döredijilerini ýa-da awtorlyk hukugynyň eýelerini jogapkärçilige çekiň
• “Bootstrap” -yň islendik bölegini degişli atsyz paýlaň
• Twitter-e degişli bellikleri, Twitter-iň paýlanyşyňyzy goldaýandygyny ýa-da manysyny ulanyp bilersiňiz
• Twitter-e degişli bellikleri, sorag edilýän Twitter programma üpjünçiligini döredendigiňizi görkezip biljek ýa-da aňladýan görnüşde ulanyň

Bu sizden talap etmeýär:

• “Bootstrap” -yň çeşmesini ýa-da oňa girizen islendik üýtgetmeleriňizi, şol sanda ýygnap boljak islendik paýlanyşda goşuň.
• Bootstrap-a girizen üýtgeşmeleriňizi Bootstrap taslamasyna iberiň (şeýle seslenme höweslendirilse-de)

Doly Bootstrap ygtyýarnamasy has giňişleýin maglumat üçin taslama ammarynda ýerleşýär.

Terjimeler

Jemgyýet agzalary Bootstrap resminamalaryny dürli dillere terjime etdiler. Hiç biri resmi taýdan goldanylmaýar we olar hemişe täzelenip bilmez.

• Bootstrap 中文 文档 (Hytaý)
• Bootstrap på Dansk (Daniýa)
• “Bootstrap en Français” (fransuzça)
• Bootstrap auf Doýç (nemes)
• Italýan dilinde “Bootstrap” (italýança)
• Bootstrap 한국어 (Koreýçe)
• “Bootstrap em Português do Brasil” (Braziliýaly Portugaliýa)
• Bootstrap по-русски (rus)
• “Bootstrap en Español” (Ispança)
• Türkçe Bootstrap (Türkçe)
• Bootstrap ukраїнською (ukrain)
• Bootstrap bằng tiếng Việt (Wýetnam)

Terjimeleri gurnamaga ýa-da ýerleşdirmäge kömek etmeýäris, diňe olar bilen baglanyşýarys.

Täze ýa-da has gowy terjime gutardyňyzmy? Sanawymyza goşmak üçin çekiş haýyşyny açyň.