Зеркашӣ кунед

Bootstrap (дар айни замон v3.4.1) дорои якчанд роҳи осони зуд оғоз кардан мебошад, ки ҳар кадоми онҳо ба сатҳи маҳорат ва ҳолатҳои истифода муроҷиат мекунанд. Барои дидани он, ки ба ниёзҳои махсуси шумо мувофиқат мекунад, хонед.

jsDelivr

Одамон дар jsDelivr меҳрубонона дастгирии CDN-ро барои CSS ва JavaScript-и Bootstrap таъмин мекунанд. Танҳо ин истинодҳои 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>

Бо Bower насб кунед

Шумо инчунин метавонед бо истифода аз Bower Less, CSS, JavaScript ва шрифтҳои Bootstrap-ро насб ва идора кунед :

bower install bootstrap

Бо npm насб кунед

Шумо инчунин метавонед Bootstrap-ро бо истифода аз npm насб кунед :

npm install bootstrap@3

require('bootstrap')ҳамаи плагинҳои jQuery Bootstrap-ро ба объекти jQuery бор мекунад. Худи bootstrapмодул чизе содир намекунад. Шумо метавонед плагинҳои jQuery-и Bootstrap-ро ба таври инфиродӣ тавассути бор кардани /js/*.jsфайлҳо дар феҳристи сатҳи болоии бастаҳо ба таври дастӣ бор кунед.

Bootstrap package.jsonдорои якчанд метамаълумоти иловагӣ дар зери калидҳои зерин:

• less- роҳ ба файли асосии манбаи Less Bootstrap
• style- роҳ ба CSS-и хурднашудаи Bootstrap, ки бо истифода аз танзимоти пешфарз пешакӣ тартиб дода шудааст (бе мутобиқсозӣ)

Бо Composer насб кунед

Шумо инчунин метавонед бо истифода аз Composer Less, CSS, JavaScript ва шрифтҳои Bootstrap-ро насб ва идора кунед :

composer require twbs/bootstrap

Барои Less/Sass худкор префикс лозим аст

Bootstrap барои кор бо префиксҳои фурӯшандаи CSS Autoprefixer-ро истифода мебарад . Агар шумо Bootstrap-ро аз манбаи Less/Sass тартиб дода бошед ва Gruntfile-и моро истифода набаред, ба шумо лозим меояд, ки Autoprefixer-ро ба раванди сохтани худ худатон ворид кунед. Агар шумо Bootstrap-и пешакӣ тартибдодашуда ё Gruntfile-и моро истифода баред, ба шумо лозим нест, ки дар ин бора хавотир шавед, зеро Autoprefixer аллакай ба Gruntfile мо ворид карда шудааст.

Чӣ дохил карда шудааст

Bootstrap-ро дар ду шакл зеркашӣ кардан мумкин аст, ки дар дохили онҳо шумо директорияҳо ва файлҳои зеринро пайдо мекунед, мантиқан гурӯҳбандӣ кардани захираҳои умумӣ ва пешниҳоди ҳам вариантҳои тартибдодашуда ва ҳам хурд.

Bootstrap пешакӣ тартибдодашуда

Пас аз зеркашӣ, ҷузвдони фишурдашударо кушоед, то сохтори Bootstrap-ро бубинед. Шумо чизе монанди ин хоҳед дид:

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 аст: файлҳои пешакӣ тартибдодашуда барои истифодаи зуд дар қариб ҳама лоиҳаҳои веб. Мо CSS ва JS-и тартибдодашуда ( bootstrap.*), инчунин CSS ва JS-и тартибдодашуда ва хурдкардашударо ( bootstrap.min.*) пешниҳод мекунем. Харитаҳои сарчашмаҳои CSS ( bootstrap.*.map) барои истифода бо абзорҳои таҳиягари браузерҳои муайян дастрасанд. Ҳарфҳо аз Glyphicons, инчунин мавзӯи ихтиёрии Bootstrap дохил карда шудаанд.

Рамзи сарчашмаи Bootstrap

Зеркашии коди сарчашмаи Bootstrap дорои CSS, JavaScript ва дороиҳои шрифти пешакӣ тартибдодашуда дар якҷоягӣ бо сарчашмаи Less, JavaScript ва ҳуҷҷатҳо иборат аст. Аниқтараш, он чизҳои зерин ва ғайраро дар бар мегирад:

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

, less/, js/ва fonts/рамзи сарчашмаи шрифтҳои CSS, JS ва нишонаи мо мебошанд (мутаносибан). Папка dist/ҳама чизҳоеро дар бар мегирад, ки дар қисмати зеркашии пешакӣ дар боло номбар шудаанд. Папка docs/рамзи сарчашмаи ҳуҷҷатҳои мо ва examples/истифодаи Bootstrap-ро дар бар мегирад. Ғайр аз ин, ҳама гуна файли дигари дохилшуда барои бастаҳо, иттилооти иҷозатнома ва рушд дастгирӣ мекунад.

Тартиб додани CSS ва JavaScript

Bootstrap барои системаи сохтани худ Grunt -ро бо усулҳои мувофиқ барои кор бо чаҳорчӯба истифода мебарад. Маҳз ҳамин тавр мо коди худро тартиб медиҳем, санҷишҳоро иҷро мекунем ва ғайра.

Насб кардани Grunt

Барои насб кардани Grunt, шумо бояд аввал node.js-ро зеркашӣ ва насб кунед (ки npm-ро дар бар мегирад). npm барои модулҳои бастабандишудаи гиреҳ тааллуқ дорад ва як роҳи идоракунии вобастагии рушд тавассути node.js мебошад.

1. Дар саросари grunt-cliҷаҳон бо npm install -g grunt-cli.
2. Ба феҳристи решавӣ /bootstrap/гузаред ва сипас иҷро npm installкунед. npm ба package.jsonфайл назар мекунад ва ба таври худкор вобастагии маҳаллии дар он номбаршударо насб мекунад.

Пас аз анҷом, шумо метавонед фармонҳои гуногуни Grunt-ро, ки аз сатри фармон дода шудаанд, иҷро кунед.

Фармонҳои дастраси Grunt

grunt dist(Танҳо CSS ва JavaScript тартиб диҳед)

/dist/Директорияро бо файлҳои CSS ва JavaScript тартибдодашуда ва хурдкардашуда барқарор мекунад. Ҳамчун корбари Bootstrap, ин одатан фармонест, ки шумо мехоҳед.

grunt watch(Тамошо кунед)

Файлҳои сарчашмаи Less -ро тамошо мекунад ва ҳар вақте ки шумо тағиротро захира мекунед, онҳоро ба таври худкор ба CSS дубора тартиб медиҳад.

grunt test(Санҷишҳоро иҷро кунед)

JSHint -ро иҷро мекунад ва ба шарофати Karma санҷишҳои QUnit -ро дар браузерҳои воқеӣ иҷро мекунад.

grunt docs(Дороиҳои ҳуҷҷатҳоро созед ва санҷед)

CSS, JavaScript ва дигар дороиҳоро, ки ҳангоми иҷро кардани ҳуҷҷатҳо тавассути локалӣ истифода мешаванд, месозад ва месанҷад bundle exec jekyll serve.

grunt(Мутлақо ҳама чизро созед ва санҷишҳоро иҷро кунед)

CSS ва JavaScript-ро мураттаб ва кам мекунад, вебсайти ҳуҷҷатҳоро месозад, валидатори HTML5-ро бар зидди ҳуҷҷатҳо кор мекунад, дороиҳои Customizer -ро барқарор мекунад ва ғайра. Ҷекилро талаб мекунад . Одатан танҳо лозим аст, агар шумо дар худи Bootstrap ҳакерӣ кунед.

Мушкилкушо

Агар шумо ҳангоми насб кардани вобастагӣ ё иҷро кардани фармонҳои Grunt бо мушкилот рӯ ба рӯ шавед, аввал /node_modules/директорияеро, ки аз ҷониби npm тавлид шудааст, нест кунед. Сипас, такрор npm installкунед.

Шаблони асосӣ

Бо ин қолаби асосии HTML оғоз кунед ё ин мисолҳоро тағир диҳед . Мо умедворем, ки шумо қолибҳо ва намунаҳои моро мутобиқ карда, онҳоро ба ниёзҳои худ мутобиқ месозед.

Барои оғоз кардани кор бо ҳуҷҷати ҳадди ақали Bootstrap, HTML-ро дар зер нусхабардорӣ кунед.

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

Мисолхо

Дар қолаби асосии боло бо ҷузъҳои зиёди Bootstrap созед. Мо шуморо ташвиқ мекунем, ки Bootstrap-ро ба эҳтиёҷоти лоиҳаи инфиродии худ мутобиқ созед ва мутобиқ кунед.

Рамзи сарчашмаро барои ҳар як мисоли зер тавассути зеркашии анбори Bootstrap гиред . docs/examples/Намунаҳоро дар директория пайдо кардан мумкин аст .

Истифодаи чаҳорчӯба

Шаблони ибтидоӣ

Ҳеҷ чиз ҷуз асосҳо: CSS ва JavaScript дар якҷоягӣ бо контейнер тартиб дода шудааст.

Мавзӯи bootstrap

Мавзӯи ихтиёрии Bootstrap-ро барои таҷрибаи беҳтаршудаи визуалӣ бор кунед.

Шабакаҳо

Намунаҳои сершумори тарҳбандиҳои шабакавӣ бо ҳамаи чаҳор сатҳ, лонагузорӣ ва ғайра.

Ҷумботрон

Дар атрофи jumbotron бо навбар ва баъзе сутунҳои асосии шабака созед.

Ҷумботрони танг

Бо танг кардани контейнери пешфарз ва jumbotron як саҳифаи фармоишии бештар созед.

Навбарҳо дар амал

Навбар

Шаблони супер асосӣ, ки навбарро бо баъзе мундариҷаи иловагӣ дар бар мегирад.

Навори болои статикӣ

Шаблони супер асосӣ бо навбари болои статикӣ дар якҷоягӣ бо баъзе мундариҷаи иловагӣ.

Навори собит

Шаблони супер асосӣ бо навбари собит боло ва бо баъзе мундариҷаи иловагӣ.

Компонентҳои фармоишӣ

Сарпӯш

Шаблони яксаҳифа барои сохтани саҳифаҳои хонагии оддӣ ва зебо.

Карусель

Навор ва каруселро танзим кунед, пас чанд ҷузъҳои нав илова кунед.

Блог

Тарҳбандии оддии ду сутуни блог бо паймоиши фармоишӣ, сарлавҳа ва намуд.

Панели асбобҳо

Сохтори асосӣ барои панели идоракунӣ бо панели собит ва навбар.

Саҳифаи воридшавӣ

Тарҳ ва тарҳрезии шакли фармоишӣ барои аломати оддӣ дар шакл.

Нави асоснок

Навори фармоиширо бо истинодҳои асоснок созед. Сарҳо боло! На он қадар дӯстона Сафари.

Поёнти часпанда

Вақте ки мундариҷа аз он кӯтоҳтар аст, поёнро ба поёни порти намоиш замима кунед.

Пойнтҳои часпанда бо навбар

Поёнтарро ба поёни равзанаи намоиш бо навори собит дар боло замима кунед.

Тачрибахо

Bootstrap-и ҷавобнашаванда

Вокуниши Bootstrap-ро дар ҳуҷҷатҳои мо ба осонӣ хомӯш кунед .

Гап-канвас

Барои истифода бо Bootstrap менюи навигатсионии рафъи ивазшаванда созед.

Воситаҳо

Bootlint

Bootlint воситаи расмии HTML linter Bootstrap мебошад. Он ба таври худкор якчанд хатогиҳои умумии HTML-ро дар вебсаҳифаҳое, ки Bootstrap-ро ба таври хеле "ванилӣ" истифода мебаранд, тафтиш мекунад. Компонентҳо/виджетҳои Vanilla Bootstrap қисмҳои DOM-ро талаб мекунанд, ки ба сохторҳои муайян мувофиқат кунанд. Bootlint тафтиш мекунад, ки намунаҳои ҷузъҳои Bootstrap дорои HTML-и дурусти сохторӣ мебошанд. Дар бораи илова кардани Bootlint ба асбобҳои таҳияи веби Bootstrap фикр кунед, то ҳеҷ яке аз хатогиҳои маъмул рушди лоиҳаи шуморо суст накунанд.

Ҷамъият

Дар бораи рушди Bootstrap бохабар бошед ва бо ин захираҳои муфид ба ҷомеа муроҷиат кунед.

• Хонед ва ба The Official Bootstrap Blog обуна шавед .
• Бо ҳамкорони Bootstrap бо истифода аз IRC дар irc.freenode.netсервер, дар канали ##bootstrap сӯҳбат кунед.
• Барои кӯмак дар истифодаи Bootstrap, бо истифода аз теги StackOverflowtwitter-bootstrap-3 пурсед .
• Таҳиягарон бояд калимаи калидиро дар бастаҳое истифода баранд, ки ҳангоми паҳнкунӣ тавассути npm ё механизмҳои шабеҳи интиқол барои дарёфти ҳадди аксар bootstrapфунксияҳои Bootstrapро тағир медиҳанд ё илова мекунанд .
• Намунаҳои илҳомбахши одамонро бо Bootstrap дар Expo Bootstrap пайдо кунед.

Шумо инчунин метавонед @getbootstrap-ро дар Twitter барои ғайбатҳои навтарин ва видеоҳои мусиқии аҷиб пайгирӣ кунед.

Хомӯш кардани ҷавобгарӣ

Bootstrap ба таври худкор саҳифаҳои шуморо ба андозаҳои гуногуни экран мутобиқ мекунад. Ин аст, ки чӣ тавр ин хусусиятро ғайрифаъол кардан мумкин аст, то саҳифаи шумо мисли ин мисоли беҷавоб кор кунад.

Қадамҳо барои хомӯш кардани посухгӯии саҳифа

1. Намоишгоҳи дар ҳуҷҷатҳои CSS<meta> зикршударо тарк кунед
2. Барои widthҳар .containerяк қабати шабака бо паҳнои ягона бекор кунед, масалан width: 970px !important;Боварӣ ҳосил кунед, ки ин пас аз CSS-и пешфарз Bootstrap меояд. Шумо метавонед ба таври ихтиёрӣ аз !importantдархостҳои медиавӣ ё баъзе селектор-фу канорагирӣ кунед.
3. Агар навбарҳоро истифода баред, ҳама рафтори фурӯпошӣ ва васеъшавии навбарро хориҷ кунед.
4. Барои тарҳбандиҳои шабака, .col-xs-*синфҳоро ба ғайр аз синфҳои миёна/калон истифода баред ё ба ҷои онҳо. Парво накунед, шабакаи хеле хурди дастгоҳ барои ҳама қарорҳо миқёс дорад.

Шумо ба ҳар ҳол ба Respond.js барои IE8 ниёз доред (зеро дархостҳои медиавии мо ҳанӯз вуҷуд доранд ва бояд коркард шаванд). Ин ҷанбаҳои "сайти мобилии" Bootstrap-ро ғайрифаъол мекунад.

Шаблони bootstrap бо вокуниш ғайрифаъол

Мо ин қадамҳоро ба мисол татбиқ кардем. Барои дидани тағйироти мушаххаси амалӣ рамзи сарчашмаи онро хонед.

Намунаи беҷавобро бинед

Дастгирии браузер ва дастгоҳ

Bootstrap барои беҳтар кор кардан дар браузерҳои охирини мизи корӣ ва мобилӣ сохта шудааст, ки маънои браузерҳои кӯҳна метавонанд бо услуби гуногун, ҳарчанд пурра кор кунанд, намоиши ҷузъҳои муайянро намоиш диҳанд.

Браузерҳои дастгирӣшаванда

Махсусан, мо версияҳои охирини браузерҳо ва платформаҳои зеринро дастгирӣ мекунем.

Браузерҳои алтернативӣ, ки версияи охирини WebKit, Blink ё Gecko -ро истифода мебаранд, хоҳ мустақиман ё тавассути API-и веби платформа, ба таври возеҳ дастгирӣ намешаванд. Бо вуҷуди ин, Bootstrap бояд (дар аксар ҳолатҳо) дар ин браузерҳо низ дуруст нишон диҳад ва кор кунад. Маълумоти мушаххаси дастгирӣ дар зер оварда шудааст.

Дастгоҳҳои мобилӣ

Умуман, Bootstrap версияҳои охирини браузерҳои пешфарзии ҳар як платформаи асосиро дастгирӣ мекунад. Дар хотир доред, ки браузерҳои прокси (ба монанди Opera Mini, режими Turbo Opera Mobile, UC Browser Mini, Amazon Silk) дастгирӣ намешаванд.

Браузерҳои мизи корӣ

Ба ҳамин монанд, версияҳои охирини аксари браузерҳои мизи корӣ дастгирӣ карда мешаванд.

Дар Windows, мо Internet Explorer 8-11 -ро дастгирӣ мекунем .

Барои Firefox, ба ғайр аз версияи охирини мӯътадили муқаррарӣ, мо инчунин версияи охирини Release Extended Support (ESR) -и Firefox-ро дастгирӣ мекунем.

Ба таври ғайрирасмӣ, Bootstrap бояд дар Chromium ва Chrome for Linux, Firefox for Linux ва Internet Explorer 7 ва инчунин Microsoft Edge ба қадри кофӣ хуб назар ва рафтор кунад, гарчанде ки онҳо расман дастгирӣ намешаванд.

Барои рӯйхати баъзе хатогиҳои браузер, ки Bootstrap бояд бо онҳо мубориза барад, ба девори хатоҳои браузери мо нигаред .

Internet Explorer 8 ва 9

Internet Explorer 8 ва 9 низ дастгирӣ мешаванд, аммо лутфан бидонед, ки баъзе хосиятҳои CSS3 ва унсурҳои HTML5 аз ҷониби ин браузерҳо пурра дастгирӣ намешаванд. Илова бар ин, Internet Explorer 8 истифодаи Respond.js -ро барои фаъол кардани дастгирии дархости медиа талаб мекунад.

Барои гирифтани тафсилот дар бораи дастгирии браузери хусусиятҳои CSS3 ва HTML5, Оё метавонам истифода кунам... ба саҳифа равед.

Internet Explorer 8 ва Respond.js

Ҳангоми истифодаи Respond.js дар муҳити таҳия ва истеҳсолии худ барои Internet Explorer 8 аз огоҳиҳои зерин эҳтиёт шавед.

Respond.js ва CSS-домени

Истифодаи Respond.js бо CSS, ки дар домени дигар (зер) ҷойгир шудааст (масалан, дар CDN) баъзе танзимоти иловагиро талаб мекунад. Барои тафсилот ба ҳуҷҷатҳои Respond.js нигаред.

Respond.js ваfile://

Аз сабаби қоидаҳои амнияти браузер, Respond.js бо саҳифаҳое, ки тавассути file://протокол дида мешаванд (масалан, ҳангоми кушодани файли HTMLи маҳаллӣ) кор намекунад. Барои санҷидани хусусиятҳои ҷавобгӯ дар IE8, саҳифаҳои худро тавассути HTTP(S) бубинед. Барои тафсилот ба ҳуҷҷатҳои Respond.js нигаред.

Respond.js ва@import

Respond.js бо CSS кор намекунад, ки тавассути @import. Махсусан, баъзе конфигуратсияҳои Drupal маълуманд, ки @import. Барои тафсилот ба ҳуҷҷатҳои Respond.js нигаред.

Internet Explorer 8 ва андозаи қуттӣ

box-sizing: border-box;IE8 ҳангоми якҷоя шудан бо min-width, max-width, min-height, ё , пурра дастгирӣ намекунад max-height. Аз ин рӯ, аз v3.0.1, мо дигар max-widthдар .containers истифода намебарем.

Internet Explorer 8 ва @font-face

IE8 @font-faceҳангоми якҷоя шудан бо :before. Bootstrap ин комбинатсияро бо Glyphicons худ истифода мебарад. Агар саҳифа кэш карда шуда бошад ва бе муш дар болои тиреза бор карда шавад (яъне тугмаи навсозиро пахш кунед ё чизеро дар iframe бор кунед), саҳифа пеш аз боркунии шрифт намоиш дода мешавад. Гузаштан ба болои саҳифа (бадан) баъзе аз нишонаҳо ва дар болои нишонаҳои боқимонда гузоштан онҳо низ нишон дода мешаванд. Барои тафсилот ба шумораи №13863 нигаред.

Усулҳои мутобиқати IE

Bootstrap дар режимҳои кӯҳнаи мутобиқати Internet Explorer дастгирӣ намешавад. Барои итминон ҳосил кунед, ки шумо режими охирини визуалиро барои IE истифода мебаред, фикр кунед, ки <meta>тегҳои мувофиқро дар саҳифаҳои худ дохил кунед:

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

Ҳолати ҳуҷҷатро тавассути кушодани абзорҳои ислоҳкунӣ тасдиқ кунед: пахш кунед F12ва "Усули ҳуҷҷат" -ро тафтиш кунед.

Ин барчасп дар ҳама ҳуҷҷатҳои Bootstrap ва мисолҳо барои таъмини беҳтарин намоиши имконпазир дар ҳар як версияи дастгирӣшавандаи Internet Explorer дохил карда шудааст.

Барои маълумоти бештар ба ин саволи StackOverflow нигаред .

Internet Explorer 10 дар Windows 8 ва Windows Phone 8

Internet Explorer 10 паҳнои дастгоҳро аз паҳнои намоиш фарқ намекунад ва аз ин рӯ дархостҳои медиаро дар CSS-и Bootstrap дуруст истифода намебарад. Одатан, шумо танҳо як пораи зуди CSS-ро илова мекунед, то инро ислоҳ кунед:

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

Аммо, ин барои дастгоҳҳое кор намекунад, ки версияҳои Windows Phone 8-и аз Навсозии 3 калонтар (ака GDR3) кор мекунанд , зеро он боиси он мегардад, ки чунин дастгоҳҳо ба ҷои намуди танги "телефон" намуди бештари мизи корӣ нишон медиҳанд. Барои ҳалли ин, ба шумо лозим меояд, ки CSS ва JavaScript-и зеринро дар бар гиред, то бо хатогӣ кор кунед .

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

Барои маълумоти бештар ва дастурҳои истифода, Windows Phone 8 ва Width-ро хонед .

Ҳамчун роҳбарӣ, мо инро дар ҳама ҳуҷҷатҳои Bootstrap ва мисолҳо ҳамчун намоиш дохил мекунем.

Сафари дарсад яклухткунӣ

Муҳаррики визуалии версияҳои Safari пеш аз v7.1 барои OS X ва Safari барои iOS v8.0 бо шумораи ҷойҳои даҳӣ, ки дар .col-*-1синфҳои шабакаҳои мо истифода мешуданд, каме мушкилот доштанд. Пас, агар шумо 12 сутуни шабакаи инфиродӣ дошта бошед, шумо хоҳед дид, ки онҳо дар муқоиса бо дигар сатрҳои сутунҳо кӯтоҳанд. Ба ғайр аз навсозии Safari/iOS, шумо якчанд имконоти ҳалли ҳалли худро доред:

• Ба .pull-rightсутуни охирини шабакаи худ илова кунед, то мувофиқати рости сахтро ба даст оред
• Фоизи худро ба таври дастӣ тағир диҳед, то як мудавваркунии комилро барои Safari ба даст оред (аз варианти аввал мушкилтар аст)

Модалҳо, наворҳо ва клавиатураҳои виртуалӣ

Зиёдшавӣ ва ҳаракат

Дастгирии элемент overflow: hiddenдар <body>iOS ва Android хеле маҳдуд аст. Бо ин мақсад, вақте ки шумо дар яке аз браузерҳои ин дастгоҳҳо аз боло ё поёни модаль ҳаракат мекунед, <body>мундариҷа ба ҳаракат оғоз мекунад. Ба хатогии Chrome #175502 (дар Chrome v40 собит шудааст) ва хатои WebKit #153852 нигаред .

Майдонҳои матнии iOS ва ҳаракат

Аз iOS 9.3, вақте ки модаль кушода аст, агар ламси ибтидоии имову ҳаракат дар ҳудуди матн <input>ё a бошад <textarea>, <body>мундариҷаи зери модаль ба ҷои худи модаль ҳаракат карда мешавад. Ба хатогии WebKit # 153856 нигаред .

Клавиатураҳои виртуалӣ

Инчунин, қайд кунед, ки агар шумо наворҳои собитро истифода баред ё вурудҳоро дар дохили модаль истифода баред, iOS хатои визуалӣ дорад, ки ҳангоми ба кор андохтани клавиатураи виртуалӣ мавқеи унсурҳои собитро нав намекунад. Якчанд роҳҳои ҳалли ин табдил додани унсурҳои худро ба position: absoluteё даъват кардани таймер дар фокус барои кӯшиши ислоҳи мавқеъи дастӣ дар бар мегирад. Ин аз ҷониби Bootstrap ҳал намешавад, бинобар ин шумо қарор медиҳед, ки кадом ҳалли барои барномаи шумо беҳтар аст.

Навбарҳои афтанда

Аз .dropdown-backdropсабаби мураккабии индексатсияи z ин элемент дар iOS дар нав истифода намешавад. Ҳамин тариқ, барои пӯшидани афтандаҳо дар наворҳо, шумо бояд бевосита унсури афтандаро пахш кунед (ё ягон унсури дигаре, ки ҳодисаи кликро дар iOS оғоз мекунад).

Масштабкунии браузер

Масштабкунии саҳифа ногузир артефактҳоро дар баъзе ҷузъҳо ҳам дар Bootstrap ва ҳам дар боқимондаи веб пешкаш мекунад. Вобаста ба мушкилот, мо метавонем онро ҳал кунем (аввал ҷустуҷӯ кунед ва баъд агар лозим бошад, масъаларо кушоед). Бо вуҷуди ин, мо майл ба инҳо сарфи назар мекунем, зеро онҳо аксар вақт ба ҷуз ҳалли ҳакерӣ роҳи мустақим надоранд.

Часпон :hover/ :focusдар мобилӣ

Гарчанде ки дар аксари экранҳои сенсорӣ ҷойгиркунии воқеӣ ғайриимкон аст, аксари браузерҳои мобилӣ ба дастгирии овезон тақлид мекунанд ва :hover"часпак" мекунанд. Ба ибораи дигар, :hoverуслубҳо пас аз пахш кардани элемент ба корбурд шурӯъ мекунанд ва танҳо пас аз он ки корбар ягон унсури дигарро пахш мекунад, татбиқро қатъ мекунад. Ин метавонад боиси он гардад, ки ҳолати Bootstrap :hoverдар чунин браузерҳо ба таври номатлуб "часпида" шаванд. Баъзе браузерҳои мобилӣ низ :focusҳамин тавр часпанда мекунанд. Дар айни замон роҳи ҳалли оддии ин мушкилот вуҷуд надорад, ба ҷуз аз нест кардани чунин услубҳо.

Чоп

Ҳатто дар баъзе браузерҳои муосир, чоп метавонад аҷиб бошад.

Аз ҷумла, аз Chrome v32 ва новобаста аз танзимоти маржа, Chrome ҳангоми ҳалли дархостҳои медиавӣ ҳангоми чопи веб саҳифа паҳнои намоишро аз андозаи коғази физикӣ хеле тангтар истифода мебарад. Ин метавонад боиси ба таври ғайричашмдошт ҳангоми чоп фаъол шудани шабакаи хурди Bootstrap гардад. Барои баъзе тафсилот ба шумораи №12078 ва хатогии Chrome #273306 нигаред. Роҳҳои тавсияшаванда:

• Шабакаи хурдро қабул кунед ва боварӣ ҳосил кунед, ки саҳифаи шумо дар зери он қобили қабул аст.
• Қиматҳои @screen-*тағирёбандаҳои Камтарро танзим кунед, то коғази чопгари шумо аз ҳад зиёд хурдтар ҳисобида шавад.
• Барои тағир додани нуқтаи ҷудошавии андозаи шабака танҳо барои васоити чопӣ дархостҳои медиаи фармоиширо илова кунед.

Инчунин, аз рӯи Safari v8.0, паҳнои собит .containers метавонад боиси истифодаи Safari андозаи ҳуруфи ғайриоддӣ ҳангоми чоп кардан гардад. Барои тафсилоти бештар нигаред #14868 ва хатои WebKit #138192 . Як ҳалли эҳтимолӣ барои ин илова кардани CSS-и зерин аст:

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

Браузери саҳҳомии Android

Дар берун аз қуттӣ, Android 4.1 (ва ҳатто баъзе версияҳои навтар) бо барномаи Browser ҳамчун браузери пешфарзи интихобшуда фиристода мешавад (бар хилофи Chrome). Мутаассифона, барномаи Browser дар маҷмӯъ хатогиҳо ва номутобиқатӣ бо CSS дорад.

Менюҳоро интихоб кунед

Дар <select>унсурҳо, браузери саҳҳомии Android назорати паҳлӯиро намоиш намедиҳад, агар мавҷуд бошад border-radiusва/ё borderтатбиқ карда шавад. (Барои тафсилот ба ин саволи StackOverflow нигаред.) Барои нест кардани CSS-и хафакунанда ва намоиш додани он <select>ҳамчун унсури услубнашуда дар браузери саҳҳомии Android порчаи кодро истифода баред. Снифинги агенти корбар аз дахолат ба браузерҳои Chrome, Safari ва 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>

Мехоҳед як мисол бинед? Ин намоиши JS Bin-ро санҷед.

Санҷишҳо

Бо мақсади фароҳам овардани таҷрибаи беҳтарини имконпазир ба браузерҳои кӯҳна ва хатогиҳо, Bootstrap ҳакҳои браузери CSS-ро дар якчанд ҷойҳо истифода мебарад, то CSS-и махсусро ба версияҳои муайяни браузер равона кунад, то дар худи браузерҳо кор кунад. Ин ҳакерҳо ба таври фаҳмо боиси валидаторҳои CSS мешаванд, ки онҳо беэътиборанд. Дар якчанд ҷойҳо, мо инчунин хусусиятҳои CSS-ро истифода мебарем, ки ҳанӯз пурра стандартизатсия нашудаанд, аммо онҳо танҳо барои такмили прогрессивӣ истифода мешаванд.

Ин огоҳиҳои тасдиқкунӣ дар амал аҳамият надоранд, зеро қисмати ҳакерии CSS-и мо пурра тасдиқ карда мешавад ва қисмҳои ҳакӣ ба кори дурусти қисми ғайриҳакӣ халал намерасонанд, аз ин рӯ мо дидаву дониста ин огоҳиҳои мушаххасро нодида мегирем.

Ҳуҷҷатҳои HTML-и мо низ ба далели ворид кардани роҳи ҳал барои хатои муайяни Firefox огоҳиҳои ночиз ва ночиз дар бораи тасдиқи HTML доранд .

Дастгирии тарафи сеюм

Гарчанде ки мо ягон плагинҳо ё иловаҳои тарафи сеюмро расман дастгирӣ намекунем, мо барои пешгирӣ кардани мушкилоти эҳтимолӣ дар лоиҳаҳои шумо маслиҳатҳои муфид пешниҳод мекунем.

Андозаи қуттӣ

Баъзе нармафзорҳои тарафи сеюм, аз ҷумла Google Maps ва Google Custom Engine Search Engine, бо Bootstrap аз сабаби он ихтилоф мекунанд * { box-sizing: border-box; }, ки қоидае, ки онро paddingба паҳнои ниҳоии ҳисобшудаи элемент таъсир намерасонад. Дар бораи модели қуттӣ ва андозагирӣ дар CSS Tricks маълумоти бештар гиред .

Вобаста аз контекст, шумо метавонед дар ҳолати зарурӣ бекор кунед (Варианти 1) ё андозаи қуттиҳоро барои тамоми минтақаҳо аз нав танзим кунед (Варианти 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();
}

Дастрасӣ

Bootstrap стандартҳои маъмули вебро риоя мекунад ва бо кӯшиши ҳадди ақали иловагӣ метавонад барои сохтани сайтҳое истифода шавад, ки барои онҳое, ки AT -ро истифода мебаранд, дастрас бошанд .

Гузаронидани навигатсия

Агар паймоиши шумо истинодҳои зиёде дошта бошад ва пеш аз мундариҷаи асосӣ дар DOM омада бошад, Skip to main contentпеш аз паймоиш истинод илова кунед (барои шарҳи оддӣ, ба ин мақолаи лоиҳаи A11Y дар бораи гузариш ба пайвандҳои паймоиш нигаред). Истифодаи .sr-onlyсинф истиноди гузаришро ба таври визуалӣ пинҳон мекунад ва .sr-only-focusableсинф кафолат медиҳад, ки истинод пас аз тамаркуз намоён мешавад (барои корбарони клавиатураи чашмдор).

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

Сарлавҳаҳои ҷойгиршуда

Ҳангоми ҷойгиркунии сарлавҳаҳо ( <h1>- <h6>), сарлавҳаи асосии ҳуҷҷати шумо бояд <h1>. Сарлавҳаҳои минбаъда бояд истифодаи мантиқии он бошанд <h2>- <h6>ба тавре ки хонандагони экран метавонанд ҷадвали мундариҷаро барои саҳифаҳои шумо созанд.

Маълумоти бештарро дар HTML CodeSniffer ва AccessAbility Penn State омӯзед .

Контрасти ранг

Дар айни замон, баъзе аз комбинатсияи рангҳои пешфарз, ки дар Bootstrap дастрасанд (масалан, синфҳои гуногуни тугмаҳои услубӣ, баъзе аз рамзҳои равшанкунандаи рангҳо, ки барои блокҳои коди асосӣ истифода мешаванд , синфи ёрирасони .bg-primary заминаи контекстӣ ва ранги истинод ҳангоми истифода дар заминаи сафед) таносуби пасти контраст дошта бошед (аз таносуби тавсияшудаи 4,5:1 ). Ин метавонад барои корбарони дорои бинишашон паст ё нобиноёни рангӣ мушкилот эҷод кунад. Ин рангҳои пешфарз метавонанд барои баланд бардоштани контраст ва хониши онҳо тағир дода шаванд.

Захираҳои иловагӣ

• Хатчӯби "HTML Codesniffer" барои муайян кардани мушкилоти дастрасӣ
• Васеъгардонии асбобҳои таҳиягари дастрасии Chrome
• Таҳлилгари контрасти ранг
• Лоиҳаи A11Y
• Ҳуҷҷатҳои дастрасии MDN

Саволҳо оид ба иҷозатнома

Bootstrap таҳти иҷозатномаи MIT бароварда шудааст ва ҳуқуқи муаллифии 2019 Twitter мебошад. Ба қисмҳои хурдтар ҷӯшонида шуда, онро бо шартҳои зерин тавсиф кардан мумкин аст.

Он аз шумо талаб мекунад, ки:

• Вақте ки шумо онҳоро дар корҳои худ истифода мекунед, иҷозатнома ва огоҳиномаи ҳуқуқи муаллифро дар файлҳои CSS ва JavaScript Bootstrap нигоҳ доред

Он ба шумо имкон медиҳад, ки:

• Bootstrap-ро пурра ё қисман барои мақсадҳои шахсӣ, хусусӣ, дохилӣ ё тиҷоратӣ ройгон зеркашӣ кунед ва истифода баред
• Bootstrap-ро дар бастаҳо ё тақсимоте, ки шумо эҷод мекунед, истифода баред
• Рамзи сарчашмаро тағир диҳед
• Барои тағир додан ва паҳн кардани Bootstrap ба шахсони сеюм, ки ба иҷозатнома дохил карда нашудаанд, зерлитсензия диҳед

Он шуморо манъ мекунад:

• Муаллифон ва соҳибони литсензияро барои хисорот масъул кунед, зеро Bootstrap бидуни кафолат дода мешавад
• Эҷодкорон ё дорандагони ҳуқуқи муаллифии Bootstrap-ро ба ҷавобгарӣ кашед
• Ҳама гуна пораи Bootstrap-ро бидуни таснифи дуруст аз нав тақсим кунед
• Ҳама гуна тамғаҳои ба Twitter тааллуқдоштаро бо ҳар роҳе истифода баред, ки метавонанд изҳор кунанд ё маънои онро дошта бошанд, ки Twitter паҳнкунии шуморо тасдиқ мекунад
• Ҳама гуна тамғаҳои ба Twitter тааллуқдоштаро бо ҳар роҳе истифода баред, ки метавонанд нишон диҳанд ё маънои онро дошта бошанд, ки шумо нармафзори Twitter-ро дар назар доред

Он аз шумо талаб намекунад:

• Манбаи худи Bootstrap ё ҳама тағиротҳоеро, ки шумо метавонед ба он ворид кардаед, ба ҳама тақсимот, ки шумо метавонед ҷамъоварӣ кунед, дохил кунед.
• Тағироте, ки шумо ба Bootstrap ворид мекунед, ба лоиҳаи Bootstrap баргардонед (гарчанде ки чунин фикру мулоҳизаҳо ташвиқ карда мешаванд)

Литсензияи пурраи Bootstrap барои маълумоти бештар дар анбори лоиҳа ҷойгир аст.

Тарҷумаҳо

Аъзоёни ҷомеа ҳуҷҷатҳои Bootstrapро ба забонҳои гуногун тарҷума кардаанд. Ҳеҷ кадоме аз онҳо расман дастгирӣ намешавад ва онҳо на ҳамеша навсозӣ мешаванд.

• Bootstrap 中文文档 (Чинӣ)
• Bootstrap på Dansk (Дания)
• Bootstrap en Français (Фаронса)
• Bootstrap auf Deutsch (Олмонӣ)
• Bootstrap дар Italiano (Италия)
• Bootstrap (Корея)
• Bootstrap em Português do Brasil (Португалии Бразилия)
• Bootstrap по-русски (русӣ)
• Bootstrap en Español (Испанӣ)
• Türkçe Bootstrap (туркӣ)
• Bootstrap українською (Украина)
• Bootstrap bằng tiếng Việt (Ветнамӣ)

Мо дар ташкил ё мизбони тарҷумаҳо кӯмак намекунем, мо танҳо ба онҳо пайванд медиҳем.

Тарҷумаи нав ё беҳтарро анҷом додед? Барои илова кардани он ба рӯйхати мо дархости ҷалбро кушоед.