Пачатак
Агляд Bootstrap, спосабы загрузкі і выкарыстання, асноўныя шаблоны і прыклады і многае іншае.
Агляд Bootstrap, спосабы загрузкі і выкарыстання, асноўныя шаблоны і прыклады і многае іншае.
У Bootstrap (у цяперашні час версія 3.3.7) ёсць некалькі простых спосабаў хутка пачаць працу, кожны з якіх падыходзіць для рознага ўзроўню навыкаў і варыянтаў выкарыстання. Прачытайце, каб убачыць, што адпавядае вашым канкрэтным патрэбам.
Скампіляваны і мініфікаваны CSS, JavaScript і шрыфты. Ніякія дакументы або арыгінальныя зыходныя файлы не ўключаны.
Source Less, JavaScript і файлы шрыфтоў разам з нашымі дакументамі. Патрабуецца кампілятар Less і некаторыя налады.
Bootstrap перанесены з Less на Sass для лёгкага ўключэння ў праекты Rails, Compass або Sass.
Супрацоўнікі jsDelivr ласкава забяспечваюць падтрымку CDN для CSS і JavaScript Bootstrap. Проста выкарыстоўвайце гэтыя спасылкі Bootstrap CDN .
Вы таксама можаце ўсталяваць і кіраваць Bootstrap's Less, CSS, JavaScript і шрыфтамі з дапамогай Bower :
Вы таксама можаце ўсталяваць Bootstrap з дапамогай npm :
require('bootstrap')
загрузіць усе плагіны jQuery Bootstrap у аб'ект jQuery. Сам bootstrap
модуль нічога не экспартуе. Вы можаце ўручную загрузіць плагіны jQuery Bootstrap паасобку, загрузіўшы /js/*.js
файлы ў каталог верхняга ўзроўню пакета.
Bootstrap package.json
змяшчае некалькі дадатковых метададзеных пад наступнымі ключамі:
less
- шлях да асноўнага зыходнага файла Less Bootstrapstyle
- шлях да немініфікаванага CSS Bootstrap, які быў папярэдне скампіляваны з выкарыстаннем налад па змаўчанні (без налады)Вы таксама можаце ўсталяваць і кіраваць Bootstrap's Less, CSS, JavaScript і шрыфтамі з дапамогай Composer :
Bootstrap выкарыстоўвае Autoprefixer для працы з прэфіксамі пастаўшчыкоў CSS . Калі вы кампілюеце Bootstrap з крыніцы Less/Sass і не выкарыстоўваеце наш Gruntfile, вам трэба будзе самастойна інтэграваць Autoprefixer у працэс зборкі. Калі вы выкарыстоўваеце папярэдне скампіляваны Bootstrap або наш Gruntfile, вам не трэба пра гэта турбавацца, бо Autoprefixer ужо інтэграваны ў наш Gruntfile.
Bootstrap можна загрузіць у дзвюх формах, у якіх вы знойдзеце наступныя каталогі і файлы, якія лагічна групуюць агульныя рэсурсы і забяспечваюць як скампіляваныя, так і мінімізаваныя варыянты.
Звярніце ўвагу, што ўсе плагіны JavaScript патрабуюць уключэння jQuery, як паказана ў пачатковым шаблоне . Пракансультуйцеся з наміbower.json
, каб даведацца, якія версіі jQuery падтрымліваюцца.
Пасля загрузкі распакуйце сціснутую папку, каб убачыць структуру (скампіляванага) Bootstrap. Вы ўбачыце нешта накшталт гэтага:
Гэта самая базавая форма Bootstrap: папярэдне скампіляваныя файлы для хуткага выкарыстання практычна ў любым вэб-праекце. Мы прапануем скампіляваныя CSS і JS ( bootstrap.*
), а таксама скампіляваныя і скарочаныя CSS і JS ( bootstrap.min.*
). Зыходныя карты CSS ( bootstrap.*.map
) даступныя для выкарыстання з інструментамі распрацоўшчыка пэўных браўзераў. Шрыфты ад Glyphicons уключаны, як і дадатковая тэма Bootstrap.
Загрузка зыходнага кода Bootstrap уключае папярэдне скампіляваны CSS, JavaScript і актывы шрыфтоў, а таксама зыходны код Less, JavaScript і дакументацыю. У прыватнасці, гэта ўключае ў сябе наступнае і многае іншае:
, less/
, js/
і fonts/
з'яўляюцца зыходным кодам для нашых шрыфтоў CSS, JS і значкоў (адпаведна). Папка ўключае ў dist/
сябе ўсё, пералічанае ў папярэдне скампіляваным раздзеле загрузкі вышэй. docs/
Папка змяшчае зыходны код нашай дакументацыі і выкарыстання examples/
Bootstrap. Акрамя гэтага, любы іншы ўключаны файл забяспечвае падтрымку пакетаў, інфармацыю аб ліцэнзіі і распрацоўку.
Bootstrap выкарыстоўвае Grunt для сваёй сістэмы зборкі з зручнымі метадамі працы з фрэймворкам. Гэта тое, як мы кампілюем наш код, запускаем тэсты і многае іншае.
Каб усталяваць Grunt, вы павінны спачатку загрузіць і ўсталяваць node.js (які ўключае npm). npm расшыфроўваецца як упакаваныя модулі вузлоў і з'яўляецца спосабам кіравання залежнасцямі распрацоўкі праз node.js.
Затым з каманднага радка:grunt-cli
глабальна з дапамогай npm install -g grunt-cli
./bootstrap/
каталог, затым запусціце npm install
. npm прагледзець package.json
файл і аўтаматычна ўсталюе неабходныя лакальныя залежнасці, пералічаныя там.Пасля завяршэння вы зможаце запускаць розныя каманды Grunt з каманднага радка.
grunt dist
(Проста скампілюйце CSS і JavaScript)Рэгенеруе /dist/
каталог са скампіляванымі і мінімізаванымі файламі CSS і JavaScript. Як карыстальніку Bootstrap, гэта звычайна тая каманда, якую вы хочаце.
grunt watch
(Глядзець)Назірае за зыходнымі файламі Less і аўтаматычна перакампілюе іх у CSS кожны раз, калі вы захоўваеце змены.
grunt test
(Запусціць тэсты)Запускае JSHint і запускае тэсты QUnit без галавы ў PhantomJS .
grunt docs
(Стварэнне і тэставанне актываў дакументаў)Стварае і тэстуе CSS, JavaScript і іншыя актывы, якія выкарыстоўваюцца пры запуску дакументацыі лакальна праз bundle exec jekyll serve
.
grunt
(Стварыце абсалютна ўсё і запусціце тэсты)Кампілюе і мінімізуе CSS і JavaScript, стварае вэб-сайт дакументацыі, запускае валідатар HTML5 з дакументамі, рэгенеруе актывы Customizer і многае іншае. Патрабуецца Джэкіл . Звычайна гэта неабходна толькі ў тым выпадку, калі вы ўзломваеце сам Bootstrap.
Калі ў вас узнікнуць праблемы з усталяваннем залежнасцяў або выкананнем каманд Grunt, спачатку выдаліце /node_modules/
каталог, створаны npm. Потым запусціце паўторна npm install
.
Пачніце з гэтага базавага шаблону HTML або змяніце гэтыя прыклады . Мы спадзяемся, што вы наладзіце нашы шаблоны і прыклады, адаптуючы іх у адпаведнасці са сваімі патрэбамі.
Скапіруйце HTML ніжэй, каб пачаць працаваць з мінімальным дакументам Bootstrap.
Пабудуйце асноўны шаблон вышэй са шматлікімі кампанентамі Bootstrap. Мы рэкамендуем вам наладзіць і адаптаваць Bootstrap у адпаведнасці з патрэбамі вашага індывідуальнага праекта.
Атрымайце зыходны код для кожнага прыкладу ніжэй, загрузіўшы рэпазітар Bootstrap . Прыклады можна знайсці ў docs/examples/
даведніку.
Супер базавы шаблон, які ўключае панэль навігацыі разам з некаторым дадатковым кантэнтам.
Базавая структура панэлі кіравання адміністратара з фіксаванай бакавой і навігацыйнай панэллю.
Стварыце карыстальніцкую навігацыйную панэль з выраўнаванымі спасылкамі. Галаву ўверх! Не надта прыязны да Safari.
Лёгка адключыце спагадлівасць Bootstrap у адпаведнасці з нашай дакументацыяй .
Bootlint з'яўляецца афіцыйным інструментам HTML - лінтэра Bootstrap . Ён аўтаматычна правярае наяўнасць некалькіх распаўсюджаных памылак HTML на вэб-старонках, якія выкарыстоўваюць Bootstrap даволі "ванільным" спосабам. Кампаненты/віджэты Vanilla Bootstrap патрабуюць, каб іх часткі DOM адпавядалі пэўным структурам. Bootlint правярае, што асобнікі кампанентаў Bootstrap маюць правільна структураваны HTML. Падумайце над тым, каб дадаць Bootlint у ланцужок інструментаў вэб-распрацоўкі Bootstrap, каб ні адна з распаўсюджаных памылак не запавольвала развіццё вашага праекта.
Будзьце ў курсе распрацоўкі Bootstrap і звяртайцеся да супольнасці з дапамогай гэтых карысных рэсурсаў.
irc.freenode.net
серверы, у канале ##bootstrap .twitter-bootstrap-3
.bootstrap
ў пакетах, якія змяняюць або дапаўняюць функцыянальнасць Bootstrap пры распаўсюджванні праз npm або падобныя механізмы дастаўкі для максімальнай даступнасці.Вы таксама можаце сачыць за @getbootstrap у Twitter , каб даведацца пра апошнія плёткі і дзіўныя музычныя відэа.
Bootstrap аўтаматычна адаптуе вашы старонкі для розных памераў экрана. Вось як адключыць гэту функцыю, каб ваша старонка працавала, як у гэтым прыкладзе без адказу .
<meta>
, згаданае ў дакументацыі CSSwidth
для .container
кожнага ўзроўню сеткі адзіную шырыню, напрыклад width: 970px !important;
, пераканайцеся, што гэта ідзе пасля стандартнага CSS Bootstrap. Пры жаданні вы можаце пазбегнуць !important
медыя-запытаў або селектара..col-xs-*
класы ў дадатак да сярэдніх/вялікіх або замест іх. Не хвалюйцеся, вельмі маленькая сетка прылады маштабуецца для ўсіх дазволаў.Вам па-ранейшаму спатрэбіцца Respond.js для IE8 (паколькі нашы медыя-запыты ўсё яшчэ існуюць і іх трэба апрацаваць). Гэта адключае аспекты «мабільнага сайта» Bootstrap.
Мы прымянілі гэтыя крокі да прыкладу. Прачытайце зыходны код, каб убачыць унесеныя канкрэтныя змены.
Хочаце перайсці са старой версіі Bootstrap на v3.x? Азнаёмцеся з нашым кіраўніцтвам па міграцыі .
Bootstrap лепш за ўсё працуе ў найноўшых настольных і мабільных браўзерах, што азначае, што старыя браўзеры могуць адлюстроўваць розныя стылі, але цалкам функцыянальныя візуалізацыі пэўных кампанентаў.
У прыватнасці, мы падтрымліваем апошнія версіі наступных браўзераў і платформаў.
Альтэрнатыўныя браўзеры, якія выкарыстоўваюць апошнюю версію WebKit, Blink або Gecko, непасрэдна або праз API вэб-прагляду платформы, відавочна не падтрымліваюцца. Тым не менш, Bootstrap павінен (у большасці выпадкаў) правільна адлюстроўвацца і працаваць і ў гэтых браўзерах. Больш канкрэтная інфармацыя аб падтрымцы прыведзена ніжэй.
Наогул кажучы, Bootstrap падтрымлівае апошнія версіі браўзераў па змаўчанні для кожнай асноўнай платформы. Звярніце ўвагу, што проксі-браўзеры (напрыклад, Opera Mini, рэжым Turbo Opera Mobile, UC Browser Mini, Amazon Silk) не падтрымліваюцца.
Chrome | Firefox | Сафары | |
---|---|---|---|
Android | Падтрымліваецца | Падтрымліваецца | Н/Д |
iOS | Падтрымліваецца | Падтрымліваецца | Падтрымліваецца |
Падобным чынам падтрымліваюцца апошнія версіі большасці настольных браўзераў.
Chrome | Firefox | Internet Explorer | Опера | Сафары | |
---|---|---|---|---|---|
Mac | Падтрымліваецца | Падтрымліваецца | Н/Д | Падтрымліваецца | Падтрымліваецца |
вокны | Падтрымліваецца | Падтрымліваецца | Падтрымліваецца | Падтрымліваецца | Не падтрымліваецца |
У Windows мы падтрымліваем Internet Explorer 8-11 .
Для Firefox у дадатак да апошняй нармальнай стабільнай версіі мы таксама падтрымліваем апошнюю версію Firefox з пашыранай падтрымкай (ESR) .
Неафіцыйна Bootstrap павінен выглядаць і паводзіць сябе дастаткова добра ў Chromium і Chrome для Linux, Firefox для Linux і Internet Explorer 7, а таксама Microsoft Edge, хоць яны афіцыйна не падтрымліваюцца.
Спіс некаторых памылак браўзера, з якімі Bootstrap павінен змагацца, глядзіце ў нашай Сцяне памылак браўзера .
Internet Explorer 8 і 9 таксама падтрымліваюцца, аднак майце на ўвазе, што некаторыя ўласцівасці CSS3 і элементы HTML5 не цалкам падтрымліваюцца гэтымі браўзерамі. Акрамя таго, Internet Explorer 8 патрабуе выкарыстання Respond.js для ўключэння падтрымкі медыя-запытаў.
Асаблівасць | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Не падтрымліваецца | Падтрымліваецца |
box-shadow |
Не падтрымліваецца | Падтрымліваецца |
transform |
Не падтрымліваецца | Падтрымліваецца, з -ms прэфіксам |
transition |
Не падтрымліваецца | |
placeholder |
Не падтрымліваецца |
Наведайце Ці магу я выкарыстоўваць... для атрымання падрабязнай інфармацыі аб падтрымцы браўзерам функцый CSS3 і HTML5.
Сцеражыцеся наступных засцярог пры выкарыстанні Respond.js у асяроддзі распрацоўкі і вытворчасці для Internet Explorer 8.
Выкарыстанне Respond.js з CSS, размешчаным у іншым (суб)дамене (напрыклад, у CDN), патрабуе дадатковай налады. Падрабязнасці глядзіце ў дакументацыі Respond.js .
file://
З-за правілаў бяспекі браўзера Respond.js не працуе са старонкамі, якія праглядаюцца праз file://
пратакол (напрыклад, пры адкрыцці лакальнага файла HTML). Каб праверыць адаптыўныя функцыі ў IE8, праглядзіце свае старонкі праз HTTP(S). Падрабязнасці глядзіце ў дакументацыі Respond.js .
@import
Respond.js не працуе з CSS, на які спасылаюцца праз @import
. У прыватнасці, вядома, што некаторыя канфігурацыі Drupal выкарыстоўваюць @import
. Падрабязнасці глядзіце ў дакументацыі Respond.js .
IE8 не цалкам падтрымлівае box-sizing: border-box;
ў спалучэнні з min-width
, max-width
, min-height
або max-height
. Па гэтай прычыне, пачынаючы з v3.0.1, мы больш не выкарыстоўваем max-width
на .container
s.
IE8 мае некаторыя праблемы @font-face
пры спалучэнні з :before
. Bootstrap выкарыстоўвае гэтую камбінацыю са сваімі Glyphicons. Калі старонка захоўваецца ў кэшы і загружаецца без навядзення курсора мышы на акно (напрыклад, націскання кнопкі абнаўлення або загрузкі чаго-небудзь у iframe), тады старонка адлюстроўваецца да загрузкі шрыфта. Пры навядзенні курсора на старонку (цела) будуць паказаны некаторыя значкі, а пры навядзенні курсора на астатнія значкі яны таксама будуць паказаны. Падрабязнасці глядзіце ў выпуску №13863 .
Bootstrap не падтрымліваецца ў старых рэжымах сумяшчальнасці Internet Explorer. Каб быць упэўненым, што вы выкарыстоўваеце апошні рэжым рэндэрынгу для IE, падумайце аб уключэнні адпаведнага <meta>
тэга на свае старонкі:
Пацвердзіце рэжым дакумента, адкрыўшы сродкі адладкі: націсніце F12і адзначце «Рэжым дакумента».
Гэты тэг уключаны ва ўсю дакументацыю і прыклады Bootstrap, каб забяспечыць найлепшую рэндэрынг у кожнай падтрымліваемай версіі Internet Explorer.
Глядзіце гэтае пытанне StackOverflow для атрымання дадатковай інфармацыі.
Internet Explorer 10 не адрознівае шырыню прылады ад шырыні прагляду і, такім чынам, не прымяняе належным чынам медыя-запыты ў CSS Bootstrap. Звычайна вы проста дадаеце кароткі фрагмент CSS, каб выправіць гэта:
Аднак гэта не працуе для прылад пад кіраваннем Windows Phone 8 версій, старэйшых за абнаўленне 3 (ён жа GDR3) , бо гэта прыводзіць да таго, што такія прылады паказваюць у асноўным працоўны стол замест вузкага "тэлефоннага" выгляду. Каб вырашыць гэтую праблему, вам трэба будзе ўключыць наступныя CSS і JavaScript, каб абыйсці памылку .
Для атрымання дадатковай інфармацыі і рэкамендацый па выкарыстанні прачытайце Windows Phone 8 і Device-Width .
У якасці папярэджання мы ўключаем гэта ва ўсю дакументацыю і прыклады Bootstrap у якасці дэманстрацыі.
Механізм рэндэрынгу версій Safari да v7.1 для OS X і Safari для iOS v8.0 меў некаторыя праблемы з колькасцю знакаў пасля коскі, якія выкарыстоўваюцца ў нашых .col-*-1
класах сеткі. Такім чынам, калі б у вас было 12 асобных слупкоў сеткі, вы б заўважылі, што яны атрымаліся меншымі ў параўнанні з іншымі радкамі слупкоў. Акрамя абнаўлення Safari/iOS, у вас ёсць некаторыя варыянты абыходных шляхоў:
.pull-right
да апошняга слупка сеткі, каб атрымаць выраўноўванне ўправаПадтрымка overflow: hidden
элемента <body>
даволі абмежаваная ў iOS і Android. З гэтай мэтай, калі вы пракручваеце міма верхняй або ніжняй часткі мадальнага ў любым з браўзераў гэтых прылад, <body>
змесціва пачне пракручвацца. Глядзіце памылку Chrome №175502 (выпраўлена ў Chrome v40) і памылку WebKit №153852 .
Пачынаючы з iOS 9.3, пакуль мадаль адкрыты, калі першы дотык жэсту пракруткі знаходзіцца ў межах тэксту <input>
або <textarea>
, <body>
змесціва пад мадалам будзе пракручвацца замест самога мадалу. Глядзіце памылку WebKit №153856 .
Таксама звярніце ўвагу, што калі вы выкарыстоўваеце фіксаваную навігацыйную панэль або выкарыстоўваеце ўвод у мадальным рэжыме, у iOS ёсць памылка рэндэрынгу, якая не абнаўляе становішча фіксаваных элементаў пры запуску віртуальнай клавіятуры. Некалькі абыходных шляхоў для гэтага ўключаюць пераўтварэнне вашых элементаў у position: absolute
або выклік таймера ў фокусе, каб паспрабаваць выправіць пазіцыянаванне ўручную. Гэта не апрацоўваецца Bootstrap, так што вам вырашаць, якое рашэнне лепш для вашага прыкладання.
Элемент .dropdown-backdrop
не выкарыстоўваецца ў iOS у навігацыі з-за складанасці z-індэксацыі. Такім чынам, каб закрыць выпадаючыя спісы ў панэлі навігацыі, вы павінны непасрэдна пстрыкнуць элемент выпадальнага меню (або любы іншы элемент, які выкліча пстрычку ў iOS ).
Маштабаванне старонкі непазбежна стварае артэфакты рэндэрынгу ў некаторых кампанентах, як у Bootstrap, так і ў астатнім сеціве. У залежнасці ад праблемы мы можам яе выправіць (спачатку пашукайце, а потым адкрыйце праблему, калі спатрэбіцца). Аднак мы схільныя ігнараваць іх, бо яны часта не маюць прамога рашэння, акрамя хакерскіх абыходных шляхоў.
:hover
/ :focus
на мабільным тэлефонеНягледзячы на тое, што рэальнае навядзенне курсора немагчыма на большасці сэнсарных экранаў, большасць мабільных браўзераў эмулюе падтрымку навядзення і робіць :hover
"ліпкім". Іншымі словамі, :hover
стылі пачынаюць прымяняцца пасля націску на элемент і спыняюцца толькі пасля таго, як карыстальнік націскае на іншы элемент. :hover
Гэта можа прывесці да непажаданага "затрымання" станаў Bootstrap у такіх браўзерах. Некаторыя мабільныя браўзеры таксама робяць тое :focus
ж самае ліпкім. У цяперашні час няма простага рашэння гэтых праблем, акрамя поўнага выдалення такіх стыляў.
Нават у некаторых сучасных браўзерах друк можа быць мудрагелістым.
У прыватнасці, пачынаючы з Chrome v32 і незалежна ад налад палёў, Chrome выкарыстоўвае шырыню акна прагляду значна меншую, чым фізічны памер паперы, пры вырашэнні медыя-запытаў падчас друку вэб-старонкі. Гэта можа прывесці да нечаканай актывацыі вельмі дробнай сеткі Bootstrap пры друку. Глядзіце праблему № 12078 і памылку Chrome № 273306 для атрымання некаторых падрабязнасцей. Прапанаваныя абыходныя шляхі:
@screen-*
зменных Less так, каб ваша папера для друкаркі лічылася большай, чым вельмі маленькая.Акрамя таго, пачынаючы з Safari v8.0, фіксаваная шырыня .container
s можа прымусіць Safari выкарыстоўваць незвычайна малы памер шрыфта пры друку. Для больш падрабязнай інфармацыі глядзіце #14868 і памылку WebKit #138192 . Адным з патэнцыйных рашэнняў для гэтага з'яўляецца даданне наступнага CSS:
Android 4.1 (і, відаць, нават некаторыя новыя выпускі) адразу пастаўляецца з дадаткам Browser у якасці вэб-браўзера па змаўчанні (у адрозненне ад Chrome). На жаль, праграма Browser мае шмат памылак і неадпаведнасцяў з CSS у цэлым.
На <select>
элементах стандартны браўзер Android не будзе адлюстроўваць бакавыя элементы кіравання, калі ёсць border-radius
і/або border
прыменена. (Падрабязнасці глядзіце ў гэтым пытанні StackOverflow .) Скарыстайцеся фрагментам кода ніжэй, каб выдаліць парушальны CSS і адлюстраваць <select>
элемент без стылю ў стандартным браўзеры Android. Сніфінг карыстальніцкага агента пазбягае ўмяшання ў браўзеры Chrome, Safari і Mozilla.
Хочаце ўбачыць прыклад? Праверце гэтую дэманстрацыю JS Bin.
Каб забяспечыць найлепшы вопыт для старых браўзераў і браўзераў з памылкамі, Bootstrap выкарыстоўвае ўзломы браўзераў CSS у некалькіх месцах, каб нацэліць спецыяльны CSS на пэўныя версіі браўзераў, каб абыйсці памылкі ў саміх браўзерах. Зразумела, гэтыя ўзломы прымушаюць валідатары CSS скардзіцца, што яны несапраўдныя. У некалькіх месцах мы таксама выкарыстоўваем перадавыя функцыі CSS, якія яшчэ не цалкам стандартызаваны, але яны выкарыстоўваюцца выключна для прагрэсіўнага паляпшэння.
Гэтыя папярэджанні аб праверцы не маюць значэння на практыцы, паколькі неўзламаная частка нашага CSS выконвае поўную праверку, а ўзламаныя часткі не перашкаджаюць належнаму функцыянаванню неўзламанай часткі, таму мы наўмысна ігнаруем гэтыя канкрэтныя папярэджанні.
Нашы HTML-дакументы таксама маюць некаторыя трывіяльныя і неістотныя папярэджанні аб праверцы HTML з-за таго, што мы ўключылі абыходны шлях для пэўнай памылкі Firefox .
Нягледзячы на тое, што мы афіцыйна не падтрымліваем убудовы і дапаўненні іншых вытворцаў, мы прапануем некаторыя карысныя парады, якія дапамогуць пазбегнуць магчымых праблем у вашых праектах.
Некаторае праграмнае забеспячэнне іншых вытворцаў, у тым ліку Карты Google і Карыстальніцкая пошукавая сістэма Google, канфліктуе з Bootstrap з- * { box-sizing: border-box; }
за правіла, якое робіць гэта padding
не ўплывае на канчатковую вылічаную шырыню элемента. Даведайцеся больш пра мадэль скрынкі і памеры на CSS Tricks .
У залежнасці ад кантэксту вы можаце перавызначыць пры неабходнасці (Варыянт 1) або скінуць памер скрынкі для цэлых рэгіёнаў (Варыянт 2).
Bootstrap адпавядае агульным вэб-стандартам і — з мінімальнымі дадатковымі намаганнямі — можа выкарыстоўвацца для стварэння сайтаў, даступных для тых, хто выкарыстоўвае AT .
Калі ваша навігацыя змяшчае шмат спасылак і знаходзіцца перад асноўным змесцівам у DOM, дадайце Skip to main content
спасылку перад навігацыяй (для простага тлумачэння глядзіце гэты артыкул праекта A11Y пра пропуск спасылак навігацыі ). Выкарыстанне .sr-only
класа візуальна схавае спасылку для пропуску, а .sr-only-focusable
клас гарантуе, што спасылка стане бачнай пасля навядзення фокусу (для відучых карыстальнікаў клавіятуры).
З-за даўніх недахопаў/памылак у Chrome (гл. праблему 262171 у праграме адсочвання памылак Chromium ) і Internet Explorer (гл. гэты артыкул пра спасылкі на старонцы і парадак факусоўкі ), вам трэба будзе пераканацца, што мэта вашай спасылкі для пропуску па меншай меры праграмна сфакусаваць шляхам дадання tabindex="-1"
.
Акрамя таго, вы можаце яўна забараніць бачную індыкацыю фокусу на мэты (у прыватнасці, у цяперашні час Chrome таксама ўстанаўлівае фокус на элементах tabindex="-1"
, калі на іх націскаецца мышшу) з дапамогай #content:focus { outline: none; }
.
Звярніце ўвагу, што гэтая памылка таксама паўплывае на любыя іншыя спасылкі на старонцы, якія можа выкарыстоўваць ваш сайт, робячы іх бескарыснымі для карыстальнікаў клавіятуры. Вы можаце разгледзець пытанне аб даданні аналагічнага выпраўлення прыпынку для ўсіх іншых названых ідэнтыфікатараў прывязак / фрагментаў, якія дзейнічаюць як мэты спасылак.
Пры ўкладанні загалоўкаў ( <h1>
- <h6>
) ваш асноўны загаловак дакумента павінен быць <h1>
. Наступныя загалоўкі павінны быць лагічна выкарыстаны <h2>
- <h6>
такім чынам, каб праграмы чытання з экрана маглі стварыць змест вашых старонак.
Даведайцеся больш на HTML CodeSniffer і AccessAbility ад Penn State .
У цяперашні час некаторыя каляровыя камбінацыі па змаўчанні, даступныя ў Bootstrap (напрыклад, розныя стылізаваныя класы кнопак, некаторыя колеры падсвятлення кода, якія выкарыстоўваюцца для асноўных блокаў кода , дапаможны клас .bg-primary
кантэкстнага фону і колер спасылак па змаўчанні пры выкарыстанні на белым фоне) маюць нізкі каэфіцыент кантраснасці (ніжэй рэкамендаванага каэфіцыента 4,5:1 ). Гэта можа выклікаць праблемы ў карыстальнікаў са слабым зрокам або дальтонікам. Гэтыя стандартныя колеры, магчыма, спатрэбіцца змяніць, каб павялічыць іх кантраснасць і разборлівасць.
Bootstrap выпушчаны пад ліцэнзіяй Масачусецкага тэхналагічнага інстытута і абаронены аўтарскім правам Twitter 2016. Зведзены да больш дробных кавалкаў, ён можа быць апісаны з наступнымі ўмовамі.
Для атрымання дадатковай інфармацыі поўная ліцэнзія Bootstrap знаходзіцца ў рэпазітары праекта .
Члены супольнасці пераклалі дакументацыю Bootstrap на розныя мовы. Ні адзін з іх афіцыйна не падтрымліваецца, і яны не заўсёды могуць быць актуальнымі.
Мы не дапамагаем арганізоўваць і не размяшчаем пераклады, мы проста спасылаемся на іх.
Скончылі новы або лепшы пераклад? Адкрыйце запыт на выцягванне, каб дадаць яго ў наш спіс.