Спампаваць

У Bootstrap (у цяперашні час версія 3.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

Вы таксама можаце ўсталяваць і кіраваць Bootstrap's Less, CSS, JavaScript і шрыфтамі з дапамогай Bower :

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

Вы таксама можаце ўсталяваць і кіраваць Bootstrap's Less, CSS, JavaScript і шрыфтамі з дапамогай Composer :

composer require twbs/bootstrap

Аўтапрэфікс патрабуецца для Less/Sass

Bootstrap выкарыстоўвае Autoprefixer для працы з прэфіксамі пастаўшчыкоў CSS . Калі вы кампілюеце 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 і запускае тэсты QUnit у рэальных браўзерах дзякуючы Karma .

grunt docs(Стварэнне і тэставанне актываў дакументаў)

Стварае і тэстуе CSS, JavaScript і іншыя актывы, якія выкарыстоўваюцца пры запуску дакументацыі лакальна праз bundle exec jekyll serve.

grunt(Стварыце абсалютна ўсё і запусціце тэсты)

Кампілюе і мінімізуе CSS і JavaScript, стварае вэб-сайт дакументацыі, запускае валідатар HTML5 з дакументамі, рэгенеруе актывы Customizer і многае іншае. Патрабуецца Джэкіл . Звычайна гэта неабходна толькі ў тым выпадку, калі вы ўзломваеце сам Bootstrap.

Ліквідацыю непаладак

Калі ў вас узнікнуць праблемы з усталяваннем залежнасцяў або выкананнем каманд Grunt, спачатку выдаліце /node_modules/​​каталог, створаны npm. Потым запусціце паўторна npm install.

Базавы шаблон

Пачніце з гэтага базавага шаблону HTML або змяніце гэтыя прыклады . Мы спадзяемся, што вы наладзіце нашы шаблоны і прыклады, адаптуючы іх у адпаведнасці са сваімі патрэбамі.

Скапіруйце HTML ніжэй, каб пачаць працаваць з мінімальным дакументам Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link 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 для паляпшэння візуальнага вопыту.

Сеткі

Некалькі прыкладаў макетаў сеткі з усімі чатырма ярусамі, укладаннем і іншым.

Джамбатрон

Пабудуйце вакол джамбатрона з навігацыйнай панэллю і некаторымі базавымі слупкамі сеткі.

Вузкі джамбатрон

Ствар��це больш карыстальніцкую старонку, звузіўшы кантэйнер па змаўчанні і джамбатрон.

Навбары ў дзеянні

Навігацыйная панэль

Супер базавы шаблон, які ўключае панэль навігацыі разам з некаторым дадатковым кантэнтам.

Статычная верхняя панэль навігацыі

Супер базавы шаблон са статычнай верхняй навігацыйнай панэллю разам з дадатковым кантэнтам.

Выпраўлена панэль навігацыі

Супер базавы шаблон з фіксаванай верхняй панэллю навігацыі разам з некаторым дадатковым кантэнтам.

Нестандартныя кампаненты

Вокладка

Аднастаронкавы шаблон для стварэння простых і прыгожых хатніх старонак.

Карусель

Наладзьце панэль навігацыі і карусель, затым дадайце некалькі новых кампанентаў.

Блог

Просты макет блога ў два слупкі з карыстацкай навігацыяй, загалоўкам і тыпам.

Прыборная панэль

Базавая структура панэлі кіравання адміністратара з фіксаванай бакавой і навігацыйнай панэллю.

Старонка ўваходу

Карыстальніцкі макет формы і дызайн для простай формы ўваходу.

Абгрунтавана нав

Стварыце карыстальніцкую навігацыйную панэль з выраўнаванымі спасылкамі. Галаву ўверх! Не надта прыязны да Safari.

Ліпкі калонтытул

Прымацуйце ніжні калонтытул унізе акна прагляду, калі змесціва карацейшае за яго.

Ліпкі ніжні калонтытул з панэллю навігацыі

Прымацуйце ніжні калонтытул унізе акна прагляду з фіксаванай панэллю навігацыі ўверсе.

Эксперыменты

Не адказвае Bootstrap

Лёгка адключыце спагадлівасць Bootstrap у адпаведнасці з нашай дакументацыяй .

Па-за палатном

Стварыце пераключальнае меню навігацыі па-за палатном для выкарыстання з Bootstrap.

інструменты

Bootlint

Bootlint з'яўляецца афіцыйным інструментам HTML - лінтэра Bootstrap . Ён аўтаматычна правярае наяўнасць некалькіх распаўсюджаных памылак HTML на вэб-старонках, якія выкарыстоўваюць Bootstrap даволі "ванільным" спосабам. Кампаненты/віджэты Vanilla Bootstrap патрабуюць, каб іх часткі DOM адпавядалі пэўным структурам. Bootlint правярае, што асобнікі кампанентаў Bootstrap маюць правільна структураваны HTML. Падумайце над тым, каб дадаць Bootlint у ланцужок інструментаў вэб-распрацоўкі Bootstrap, каб ні адна з распаўсюджаных памылак не запавольвала развіццё вашага праекта.

Супольнасць

Будзьце ў курсе распрацоўкі Bootstrap і звяртайцеся да супольнасці з дапамогай гэтых карысных рэсурсаў.

• Чытайце і падпісвайцеся на афіцыйны блог Bootstrap .
• Чат з іншымі Bootstrappers з дапамогай IRC на irc.freenode.netсерверы, у канале ##bootstrap .
• Каб атрымаць дапамогу ў выкарыстанні Bootstrap, звярніцеся ў StackOverflow, выкарыстоўваючы тэгtwitter-bootstrap-3 .
• Распрацоўшчыкі павінны выкарыстоўваць ключавое слова bootstrapў пакетах, якія змяняюць або дапаўняюць функцыянальнасць Bootstrap пры распаўсюджванні праз npm або падобныя механізмы дастаўкі для максімальнай даступнасці.
• Знайдзіце натхняльныя прыклады людзей, якія будуюць з дапамогай Bootstrap, на выставе Bootstrap Expo .

Вы таксама можаце сачыць за @getbootstrap у Twitter , каб даведацца пра апошнія плёткі і дзіўныя музычныя відэа.

Адключэнне хуткасці рэагавання

Bootstrap аўтаматычна адаптуе вашы старонкі для розных памераў экрана. Вось як адключыць гэту функцыю, каб ваша старонка працавала, як у гэтым прыкладзе без адказу .

Крокі для адключэння спагадлівасці старонкі

1. Апусціце поле прагляду <meta>, згаданае ў дакументацыі CSS
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 у дадатак да апошняй нармальнай стабільнай версіі мы таксама падтрымліваем апошнюю версію Firefox з пашыранай падтрымкай (ESR) .

Неафіцыйна Bootstrap павінен выглядаць і паводзіць сябе дастаткова добра ў Chromium і Chrome для Linux, Firefox для 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 і памер скрынкі

IE8 не цалкам падтрымлівае box-sizing: border-box;ў спалучэнні з 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 і Device-Width .

У якасці папярэджання мы ўключаем гэта ва ўсю дакументацыю і прыклады Bootstrap у якасці дэманстрацыі.

Працэнтнае акругленне Safari

Механізм рэндэрынгу версій 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>або <textarea>, <body>змесціва пад мадалам будзе пракручвацца замест самога мадалу. Глядзіце памылку WebKit №153856 .

Віртуальныя клавіятуры

Таксама звярніце ўвагу, што калі вы выкарыстоўваеце фіксаваную навігацыйную панэль або выкарыстоўваеце ўвод у мадальным рэжыме, у iOS ёсць памылка рэндэрынгу, якая не абнаўляе становішча фіксаваных элементаў пры запуску віртуальнай клавіятуры. Некалькі абыходных шляхоў для гэтага ўключаюць пераўтварэнне вашых элементаў у position: absoluteабо выклік таймера ў фокусе, каб паспрабаваць выправіць пазіцыянаванне ўручную. Гэта не апрацоўваецца Bootstrap, так што вам вырашаць, якое рашэнне лепш для вашага прыкладання.

Выпадаючыя панэлі навігацыі

Элемент .dropdown-backdropне выкарыстоўваецца ў iOS у навігацыі з-за складанасці z-індэксацыі. Такім чынам, каб закрыць выпадаючыя спісы ў панэлі навігацыі, вы павінны непасрэдна пстрыкнуць элемент выпадальнага меню (або любы іншы элемент, які выкліча пстрычку ў iOS ).

Маштабаванне браўзэра

Маштабаванне старонкі непазбежна стварае артэфакты рэндэрынгу ў некаторых кампанентах, як у Bootstrap, так і ў астатнім сеціве. У залежнасці ад праблемы мы можам яе выправіць (спачатку пашукайце, а потым адкрыйце праблему, калі спатрэбіцца). Аднак мы схільныя ігнараваць іх, бо яны часта не маюць прамога рашэння, акрамя хакерскіх абыходных шляхоў.

Sticky :hover/ :focusна мабільным тэлефоне

Нягледзячы на ​​тое, што рэальнае навядзенне курсора немагчыма на большасці сэнсарных экранаў, большасць мабільных браўзераў эмулюе падтрымку навядзення і робіць :hover"ліпкім". Іншымі словамі, :hoverстылі пачынаюць прымяняцца пасля націску на элемент і спыняюцца толькі пасля таго, як карыстальнік націскае на іншы элемент. :hoverГэта можа прывесці да непажаданага "затрымання" станаў Bootstrap у такіх браўзерах. Некаторыя мабільныя браўзеры таксама робяць тое :focusж самае ліпкім. У цяперашні час няма простага рашэння гэтых праблем, акрамя поўнага выдалення такіх стыляў.

Друк

Нават у некаторых сучасных браўзерах друк можа быць мудрагелістым.

У прыватнасці, пачынаючы з Chrome v32 і незалежна ад налад палёў, Chrome выкарыстоўвае шырыню акна прагляду значна меншую, чым фізічны памер паперы, пры вырашэнні медыя-запытаў падчас друку вэб-старонкі. Гэта можа прывесці да нечаканай актывацыі вельмі дробнай сеткі Bootstrap пры друку. Глядзіце праблему № 12078 і памылку Chrome № 273306 для атрымання некаторых падрабязнасцей. Прапанаваныя абыходныя шляхі:

• Прыміце вельмі дробную сетку і пераканайцеся, што ваша старонка пад ёй выглядае прымальна.
• Наладзьце значэнні @screen-*зменных Less так, каб ваша папера для друкаркі лічылася большай, чым вельмі маленькая.
• Дадайце карыстальніцкія медыя-запыты, каб змяніць кропкі супыну памеру сеткі толькі для друкаваных носьбітаў.

Акрамя таго, пачынаючы з 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-дакументы таксама маюць некаторыя трывіяльныя і неістотныя папярэджанні аб праверцы HTML з-за таго, што мы ўключылі абыходны шлях для пэўнай памылкі Firefox .

Падтрымка трэціх асоб

Нягледзячы на ​​тое, што мы афіцыйна не падтрымліваем убудовы і дапаўненні іншых вытворцаў, мы прапануем некаторыя карысныя парады, якія дапамогуць пазбегнуць магчымых праблем у вашых праектах.

Памер скрынкі

Некаторае праграмнае забеспячэнне іншых вытворцаў, у тым ліку Карты Google і Карыстальніцкая пошукавая сістэма Google, канфліктуе з 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 Accessibility Developer Tools
• Аналізатар каляровага кантрасту
• Праект A11Y
• Дакументацыя па спецыяльных магчымасцях MDN

Частыя пытанні па ліцэнзіі

Bootstrap выпушчаны пад ліцэнзіяй Масачусецкага тэхналагічнага інстытута і абаронены аўтарскім правам Twitter 2019. Зведзены да больш дробных кавалкаў, ён можа быць апісаны з наступнымі ўмовамі.

Гэта патрабуе ад вас:

• Захоўвайце ліцэнзію і апавяшчэнне аб аўтарскіх правах у файлах 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 на італьянскай (італьянская)
• Bootstrap 한국어 (карэйская)
• Bootstrap em Português do Brasil (партугальская бразільская)
• Bootstrap по-русски (рас.)
• Bootstrap en Español (іспанская)
• Türkçe Bootstrap (турэцкая)
• Bootstrap українською (украінская)
• Bootstrap bằng tiếng Việt (в'етнамская)

Мы не дапамагаем арганізоўваць і не размяшчаем пераклады, мы проста спасылаемся на іх.

Скончылі новы або лепшы пераклад? Адкрыйце запыт на выцягванне, каб дадаць яго ў наш спіс.