Преузимање

Боотстрап (тренутно в3.4.1) има неколико једноставних начина да брзо започнете, од којих је сваки привлачан за другачији ниво вештине и случај употребе. Прочитајте да видите шта одговара вашим посебним потребама.

јсДеливр

Људи из јсДеливр-а љубазно пружају ЦДН подршку за Боотстрап-ов ЦСС и ЈаваСцрипт. Само користите ове јсДеливр везе.

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

Инсталирајте помоћу нпм-а

Такође можете да инсталирате Боотстрап користећи нпм :

npm install bootstrap@3

require('bootstrap')ће учитати све Боотстрап-ове јКуери додатке на јКуери објекат. Сам bootstrapмодул не извози ништа. Можете ручно да учитате Боотстрап-ове јКуери додатке појединачно тако што ћете учитати /js/*.jsдатотеке у директоријум највишег нивоа пакета.

Боотстрап package.jsonсадржи неке додатне метаподатке под следећим тастерима:

• less- путања до главне изворне датотеке Боотстрапа Лесс
• style- путања до Боотстрап-овог неминимизираног ЦСС-а који је претходно компајлиран користећи подразумевана подешавања (без прилагођавања)

Инсталирајте помоћу Цомпосер-а

Такође можете да инсталирате и управљате Боотстрап Лесс, ЦСС, ЈаваСцрипт и фонтовима користећи Цомпосер :

composer require twbs/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.*), као и компајлиране и минимизиране ЦСС и ЈС ( bootstrap.min.*). ЦСС изворне мапе ( bootstrap.*.map) су доступне за коришћење са алаткама за програмере одређених претраживача. Фонтови из Глификона су укључени, као и опциона Боотстрап тема.

Боотстрап изворни код

Преузимање изворног кода за Боотстрап укључује унапред компајлиране ЦСС, ЈаваСцрипт и елементе фонтова, заједно са изворним Лесс, ЈаваСцрипт-ом и документацијом. Тачније, укључује следеће и више:

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

, less/, js/и fonts/су изворни код за наше ЦСС, ЈС и фонтове икона (респективно). Фасцикла dist/укључује све што је наведено у претходно компајлираном одељку за преузимање изнад. Фасцикла docs/укључује изворни код за нашу документацију и examples/употребу Боотстрапа. Осим тога, било која друга укључена датотека пружа подршку за пакете, информације о лиценци и развој.

Превођење ЦСС-а и ЈаваСцрипт-а

Боотстрап користи Грунт за свој систем изградње, са погодним методама за рад са оквиром. Тако компајлирамо наш код, покрећемо тестове и још много тога.

Инсталирање Грунт-а

Да бисте инсталирали Грунт, прво морате да преузмете и инсталирате ноде.јс (који укључује нпм). нпм је скраћеница за модуле упаковане у чворове и начин је управљања развојним зависностима преко ноде.јс.

1. Инсталирајте grunt-cliглобално са npm install -g grunt-cli.
2. Идите до основног /bootstrap/директоријума, а затим покрените npm install. нпм ће погледати package.jsonдатотеку и аутоматски инсталирати потребне локалне зависности наведене тамо.

Када завршите, моћи ћете да покренете различите Грунт команде које сте добили из командне линије.

Доступне Грунт команде

grunt dist(Само компајлирајте ЦСС и ЈаваСцрипт)

Регенерише /dist/директоријум са преведеним и минимизираним ЦСС и ЈаваСцрипт датотекама. Као корисник Боотстрап-а, ово је обично команда коју желите.

grunt watch(Гледати)

Гледа изворне датотеке Лесс-а и аутоматски их поново компајлира у ЦСС кад год сачувате промену.

grunt test(Покрени тестове)

Покреће ЈСХинт и покреће КУнит тестове у правим претраживачима захваљујући Карми .

grunt docs(Изградите и тестирајте средства докумената)

Прави и тестира ЦСС, ЈаваСцрипт и друга средства која се користе када се документација покреће локално преко bundle exec jekyll serve.

grunt(Изградите апсолутно све и покрените тестове)

Преводи и минимизира ЦСС и ЈаваСцрипт, прави веб локацију за документацију, покреће ХТМЛ5 валидатор у односу на документе, регенерише средства за прилагођавање и још много тога. Рекуирес Јекилл . Обично је потребно само ако хакујете сам Боотстрап.

Решавање проблема

Ако наиђете на проблеме са инсталирањем зависности или покретањем Грунт команди, прво обришите /node_modules/директоријум који генерише нпм. Затим, поновите npm install.

Основни шаблон

Почните са овим основним ХТМЛ шаблоном или измените ове примере . Надамо се да ћете прилагодити наше шаблоне и примере, прилагођавајући их својим потребама.

Копирајте ХТМЛ у наставку да бисте почели да радите са минималним Боотстрап документом.

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

Примери

Надоградите основни шаблон изнад са Боотстрап-овим многим компонентама. Подстичемо вас да прилагодите и прилагодите Боотстрап тако да одговара потребама вашег индивидуалног пројекта.

Преузмите изворни код за сваки пример испод тако што ћете преузети Боотстрап спремиште . Примери се могу наћи у docs/examples/именику.

Користећи оквир

Почетни шаблон

Ништа осим основа: компајлирани ЦСС и ЈаваСцрипт заједно са контејнером.

Боотстрап тема

Учитајте опционалну Боотстрап тему за визуелно побољшано искуство.

Гридс

Више примера распореда мреже са сва четири нивоа, угнежђења и још много тога.

Јумботрон

Градите око џамботрона помоћу навигационе траке и неких основних колона мреже.

Нарров јумботрон

Направите прилагођенију страницу сужавањем подразумеваног контејнера и јумботрона.

Навбари у акцији

Навбар

Супер основни шаблон који укључује навигациону траку заједно са неким додатним садржајем.

Статичка горња навигациона трака

Супер основни шаблон са статичном горњом траком за навигацију заједно са неким додатним садржајем.

Фиксна навигациона трака

Супер основни шаблон са фиксном горњом траком за навигацију заједно са неким додатним садржајем.

Прилагођене компоненте

Цовер

Шаблон на једној страници за прављење једноставних и лепих почетних страница.

Вртешка

Прилагодите навигациону траку и вртешку, а затим додајте неке нове компоненте.

Блог

Једноставан изглед блога у две колоне са прилагођеном навигацијом, заглављем и типом.

Командна табла

Основна структура за административну контролну таблу са фиксном бочном траком и траком за навигацију.

Страница за пријаву

Прилагођени изглед и дизајн обрасца за једноставан образац за пријаву.

Јустифиед нав

Направите прилагођену навигациону траку са оправданим везама. Главу горе! Није превише прилагођен за Сафари.

Лепљиво подножје

Причврстите подножје на дно оквира за приказ када је садржај краћи од њега.

Лепљиво подножје са траком за навигацију

Причврстите подножје на дно прозора за приказ са фиксном траком за навигацију на врху.

Експерименти

Боотстрап који не реагује

Лако онемогућите одзив Боотстрапа према нашим документима .

Ван платна

Направите преклопни навигациони мени ван платна за употребу са Боотстрапом.

Алати

Боотлинт

Боотлинт је званични алат Боотстрап ХТМЛ линтер . Он аутоматски проверава неколико уобичајених ХТМЛ грешака на веб страницама које користе Боотстрап на прилично „ванилан“ начин. Компоненте/виџети Ванилла Боотстрапа захтевају да њихови делови ДОМ-а буду у складу са одређеним структурама. Боотлинт проверава да ли инстанце Боотстрап компоненти имају исправно структуриран ХТМЛ. Размислите о додавању Боотлинт-а у свој Боотстрап ланац алата за веб развој тако да ниједна од уобичајених грешака не успори развој вашег пројекта.

Заједница

Будите у току са развојем Боотстрапа и обратите се заједници помоћу ових корисних ресурса.

• Прочитајте и претплатите се на званични Боотстрап блог .
• Разговарајте са колегама Боотстрапперима користећи ИРЦ на irc.freenode.netсерверу, на ##боотстрап каналу .
• За помоћ при коришћењу Боотстрап-а, питајте на СтацкОверфлов помоћу ознакеtwitter-bootstrap-3 .
• Програмери би требало да користе кључну реч bootstrapна пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.
• Пронађите инспиративне примере људи који граде са Боотстрапом на сајму Боотстрап Екпо .

Такође можете да пратите @гетбоотстрап на Твитеру за најновије трачеве и сјајне музичке спотове.

Онемогућавање одзива

Боотстрап аутоматски прилагођава ваше странице различитим величинама екрана. Ево како да онемогућите ову функцију да ваша страница ради као овај пример који не реагује .

Кораци за онемогућавање одзива странице

1. Изоставите оквир за приказ <meta>који се помиње у ЦСС документима
2. Заобиђите widthон .containerза сваки ниво мреже са једном ширином, на пример width: 970px !important;Уверите се да ово долази после подразумеваног Боотстрап ЦСС-а. Опционо можете избећи !importantса медијским упитима или неким селектором-фу.
3. Ако користите навигационе траке, уклоните сва понашања навигационе траке која се скупља и шири.
4. За распореде мреже користите .col-xs-*класе поред или уместо средњих/великих. Не брините, изузетно мала мрежа уређаја прилагођава се на све резолуције.

И даље ће вам требати Респонд.јс за ИЕ8 (пошто су наши медијски упити још увек ту и треба их обрадити). Ово онемогућава аспекте „мобилног сајта“ Боотстрапа.

Шаблон за покретање са онемогућеним одзивом

Ове кораке смо применили на пример. Прочитајте његов изворни код да бисте видели примењене конкретне промене.

Погледајте пример који не реагује

Подршка за прегледач и уређај

Боотстрап је направљен да најбоље функционише у најновијим прегледачима за десктоп и мобилне уређаје, што значи да старији прегледачи могу да приказују другачије стилизоване, иако потпуно функционалне, приказе одређених компоненти.

Подржани претраживачи

Конкретно, подржавамо најновије верзије следећих претраживача и платформи.

Алтернативни прегледачи који користе најновију верзију ВебКит-а, Блинк-а или Гецко-а, било директно или преко АПИ-ја за веб приказ на платформи, нису експлицитно подржани. Међутим, Боотстрап би (у већини случајева) требало да се приказује и исправно функционише и у овим претраживачима. Конкретније информације о подршци су наведене у наставку.

Мобилни уређаји

Уопштено говорећи, Боотстрап подржава најновије верзије подразумеваних претраживача сваке главне платформе. Имајте на уму да прокси претраживачи (као што су Опера Мини, Опера Мобиле Турбо режим, УЦ Бровсер Мини, Амазон Силк) нису подржани.

Десктоп претраживачи

Слично томе, подржане су најновије верзије већине десктоп претраживача.

У оперативном систему Виндовс подржавамо Интернет Екплорер 8-11 .

За Фирефок, поред најновијег нормалног стабилног издања, подржавамо и најновију верзију Фирефок- а са проширеном подршком (ЕСР) .

Незванично, Боотстрап би требало да изгледа и понаша се довољно добро у Цхромиум-у и Цхроме-у за Линук, Фирефок-у за Линук и Интернет Екплорер 7, као и у Мицрософт Едге-у, иако нису званично подржани.

За листу неких грешака у прегледачу са којима се Боотстрап мора борити, погледајте наш Зид грешака у прегледачу .

Интернет Екплорер 8 и 9

Интернет Екплорер 8 и 9 су такође подржани, међутим, имајте на уму да неки ЦСС3 својства и ХТМЛ5 елементи нису у потпуности подржани од стране ових прегледача. Поред тога, Интернет Екплорер 8 захтева употребу Респонд.јс да би се омогућила подршка за медијске упите.

Посетите Могу ли да користим... за детаље о подршци претраживача за ЦСС3 и ХТМЛ5 функције.

Интернет Екплорер 8 и Респонд.јс

Пазите на следећа упозорења када користите Респонд.јс у својим развојним и производним окружењима за Интернет Екплорер 8.

Респонд.јс и ЦСС за више домена

Коришћење Респонд.јс-а са ЦСС-ом који се налази на другом (под)домену (на пример, на ЦДН-у) захтева додатно подешавање. За детаље погледајте документе Респонд.јс .

Одговори.јс иfile://

Због безбедносних правила претраживача, Респонд.јс не ради са страницама које се прегледају путем file://протокола (као када отварате локалну ХТМЛ датотеку). Да бисте тестирали прилагодљиве функције у ИЕ8, прегледајте своје странице преко ХТТП(С). За детаље погледајте документе Респонд.јс .

Одговори.јс и@import

Респонд.јс не ради са ЦСС-ом на који се упућује преко @import. Конкретно, познато је да неке Друпал конфигурације користе @import. За детаље погледајте документе Респонд.јс .

Интернет Екплорер 8 и величина кутије

ИЕ8 не подржава у потпуности box-sizing: border-box;када се комбинује са min-width, max-width, min-heightили max-height. Из тог разлога, од в3.0.1, више не користимо max-widthна .containerс.

Интернет Екплорер 8 и @фонт-фаце

ИЕ8 има неких проблема @font-faceкада се комбинује са :before. Боотстрап користи ту комбинацију са својим Глификонима. Ако је страница кеширана и учитана без преласка миша преко прозора (тј. притисните дугме за освежавање или учитајте нешто у ифраме-у), онда се страница приказује пре него што се фонт учита. Прелазак миша преко странице (тела) ће приказати неке од икона, а прелазак миша преко преосталих икона ће приказати и оне. Погледајте издање #13863 за детаље.

ИЕ режими компатибилности

Боотстрап није подржан у старим режимима компатибилности са Интернет Екплорер-ом. Да бисте били сигурни да користите најновији режим приказивања за ИЕ, размислите о укључивању одговарајуће <meta>ознаке на своје странице:

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

Потврдите режим документа отварањем алата за отклањање грешака: притисните F12и означите „Режим документа“.

Ова ознака је укључена у сву Боотстрап документацију и примере како би се обезбедило најбоље могуће приказивање у свакој подржаној верзији Интернет Екплорер-а.

Погледајте ово СтацкОверфлов питање за више информација.

Интернет Екплорер 10 у оперативном систему Виндовс 8 и Виндовс Пхоне 8

Интернет Екплорер 10 не разликује ширину уређаја од ширине прозора за приказ и стога не примењује правилно медијске упите у Боотстрап-овом ЦСС-у. Обично бисте само додали брзи исечак ЦСС-а да бисте ово поправили:

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

Међутим, ово не функционише за уређаје који користе Виндовс Пхоне 8 верзије старије од ажурирања 3 (ака ГДР3) , јер доводи до тога да такви уређаји приказују углавном приказ радне површине уместо уског приказа „телефона“. Да бисте ово решили, мораћете да укључите следећи ЦСС и ЈаваСцрипт да бисте заобишли грешку .

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

За више информација и упутства за коришћење прочитајте Виндовс Пхоне 8 и Девице-Видтх .

Као предоџбу, ово укључујемо у сву Боотстрап документацију и примере као демонстрацију.

Сафари процентно заокруживање

Машина за рендеровање верзија Сафарија пре в7.1 за ОС Кс и Сафари за иОС в8.0 имала је проблема са бројем децималних места коришћених у нашим .col-*-1мрежама. Дакле, ако сте имали 12 појединачних колона мреже, приметили бисте да су они били кратки у поређењу са другим редовима колона. Поред надоградње Сафари/иОС-а, имате неке опције за заобилажење:

• Додајте .pull-rightу своју последњу колону мреже да бисте добили равно десно поравнање
• Подесите своје проценте ручно да бисте добили савршено заокруживање за Сафари (теже од прве опције)

Модали, навигационе траке и виртуелне тастатуре

Преливање и померање

Подршка за overflow: hiddenелемент <body>је прилично ограничена у иОС-у и Андроид-у. У том циљу, када скролујете поред врха или дна модала у прегледачу било ког од тих уређаја, <body>садржај ће почети да се помера. Погледајте Цхроме грешку #175502 (поправљено у Цхроме-у в40) и ВебКит грешку #153852 .

иОС текстуална поља и померање

Од иОС 9.3, док је модал отворен, ако је почетни додир геста померања унутар границе текстуалног <input>или <textarea>, <body>садржај испод модала ће се померати уместо самог модала. Погледајте ВебКит грешку #153856 .

Виртуелне тастатуре

Такође, имајте на уму да ако користите фиксну навигациону траку или користите уносе унутар модалног, иОС има грешку у рендеровању која не ажурира позицију фиксних елемената када се покрене виртуелна тастатура. Неколико заобилазних решења за ово укључује трансформацију ваших елемената у position: absoluteили позивање тајмера у фокусу да бисте покушали да исправите позиционирање ручно. Овим се не бави Боотстрап, тако да је на вама да одлучите које је решење најбоље за вашу апликацију.

Падајући мени за Навбар

Елемент .dropdown-backdropсе не користи на иОС-у у навигацији због сложености з-индексирања. Дакле, да бисте затворили падајуће меније у навигационим тракама, морате директно да кликнете на падајући елемент (или било који други елемент који ће покренути догађај клика у иОС-у ).

Зумирање претраживача

Зумирање странице неизбежно представља артефакте приказивања у неким компонентама, како у Боотстрапу, тако иу остатку веба. У зависности од проблема, можда ћемо моћи да га решимо (прво претражите, а затим отворите проблем ако је потребно). Међутим, склони смо да их игноришемо јер често немају директно решење осим хаковачких решења.

Лепљиво :hover/ :focusна мобилном

Иако право лебдење није могуће на већини екрана осетљивих на додир, већина мобилних претраживача емулира подршку за лебдење и чини их :hover„лепљивим“. Другим речима, :hoverстилови почињу да се примењују након додиривања елемента и престају да се примењују тек када корисник додирне неки други елемент. :hoverОво може довести до тога да се стања Боотстрапа непожељно „заглаве“ на таквим претраживачима. Неки мобилни претраживачи такође чине :focusслично лепљивим. Тренутно не постоји једноставно решење за ове проблеме осим потпуног уклањања таквих стилова.

Штампање

Чак и у неким модерним претраживачима, штампање може бити необично.

Конкретно, од Цхроме в32 и без обзира на подешавања маргина, Цхроме користи ширину оквира за приказ знатно ужу од физичке величине папира када решава медијске упите док штампа веб страницу. Ово може довести до тога да се Боотстрап-ова екстра мала мрежа неочекивано активира приликом штампања. Погледајте проблем #12078 и Цхроме грешку #273306 за неке детаље. Предложена решења:

• Прихватите изузетно малу мрежу и уверите се да ваша страница испод ње изгледа прихватљиво.
• Прилагодите вредности @screen-*променљивих Мање тако да се ваш папир за штампач сматра већим него екстра малим.
• Додајте прилагођене упите за медије да бисте променили граничне тачке величине мреже само за медије за штампање.

Такође, од Сафарија в8.0, фиксна ширина .containerс може проузроковати да Сафари користи необично малу величину фонта приликом штампања. Погледајте #14868 и ВебКит грешку #138192 за више детаља. Једно могуће решење за ово је додавање следећег ЦСС-а:

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

Андроид претраживач

Изван кутије, Андроид 4.1 (па чак и нека новија издања очигледно) се испоручују са апликацијом Бровсер као подразумеваним веб прегледачем по избору (за разлику од Цхроме-а). Нажалост, апликација претраживача има много грешака и недоследности са ЦСС-ом уопште.

Изаберите меније

На <select>елементима, Андроид претраживач неће приказати бочне контроле ако постоји border-radiusи/или borderпримењено. (Погледајте ово СтацкОверфлов питање за детаље.) Користите исечак кода испод да бисте уклонили увредљиви ЦСС и <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>

Желите да видите пример? Погледајте овај ЈС Бин демо.

Валидатори

Да би пружио најбоље могуће искуство старим прегледачима са грешкама, Боотстрап користи хакове ЦСС претраживача на неколико места како би циљао посебан ЦСС на одређене верзије претраживача како би заобишао грешке у самим претраживачима. Ови хакови разумљиво узрокују да се ЦСС валидатори жале да су неважећи. На неколико места такође користимо најсавременије ЦСС функције које још увек нису у потпуности стандардизоване, али се оне користе искључиво за прогресивно побољшање.

Ова упозорења о валидацији нису битна у пракси јер део нашег ЦСС-а који није хакован у потпуности потврђује валидност и делови који се не ометају не ометају правилно функционисање нехакованог дела, стога намерно игноришемо ова посебна упозорења.

Наши ХТМЛ документи такође имају нека тривијална и безначајна упозорења о валидацији ХТМЛ-а због тога што смо укључили решење за одређену грешку у Фирефок -у .

Подршка треће стране

Иако званично не подржавамо никакве додатке или додатке треће стране, нудимо неке корисне савете који ће вам помоћи да избегнете потенцијалне проблеме у вашим пројектима.

Величина кутије

Неки софтвер треће стране, укључујући Гоогле мапе и Гоогле прилагођени претраживач, сукобљавају се са Боотстрапом због * { box-sizing: border-box; }, правило које то чини да paddingне утиче на коначну израчунату ширину елемента. Сазнајте више о моделу кутије и величини на ЦСС Трицкс .

У зависности од контекста, можете заменити по потреби (опција 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();
}

Приступачност

Боотстрап прати уобичајене веб стандарде и — уз минималан додатни напор — може да се користи за креирање сајтова који су доступни онима који користе АТ .

Прескочи навигацију

Ако ваша навигација садржи много веза и налази се испред главног садржаја у ДОМ-у, додајте Skip to main contentвезу пре навигације (за једноставно објашњење погледајте овај чланак пројекта А11И о прескакању веза за навигацију ). Коришћење .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>тако да читачи екрана могу да направе садржај за ваше странице.

Сазнајте више на ХТМЛ ЦодеСниффер и Пенн Стате'с АццессАбилити .

Контраст боја

Тренутно, неке од подразумеваних комбинација боја доступне у Боотстрап-у (као што су различите стилизоване класе дугмади, неке од боја за истицање кода које се користе за основне блокове кода , .bg-primary контекстуална помоћна класа у позадини и подразумевана боја везе када се користи на белој позадини) имају низак однос контраста (испод препорученог односа од 4,5:1 ). Ово може да изазове проблеме корисницима са слабим видом или који су слепи за боје. Ове подразумеване боје ће можда морати да се измене да би се повећао њихов контраст и читљивост.

Додатна средства

• „ХТМЛ Цодесниффер“ обележивач за идентификацију проблема са приступачношћу
• Цхроме-ово проширење Алатке за програмере приступачности
• Анализатор контраста боја
• Пројекат А11И
• МДН документација о приступачности

Честа питања о лиценци

Боотстрап је објављен под лиценцом МИТ-а и заштићен је ауторским правима 2019 Твиттер. Сведен на мање комаде, може се описати следећим условима.

Захтева од вас да:

• Нека лиценца и обавештење о ауторским правима буде укључено у Боотстрап-ове ЦСС и ЈаваСцрипт датотеке када их користите у својим радовима

Омогућава вам да:

• Бесплатно преузмите и користите Боотстрап, у целини или делимично, за личне, приватне, интерне или комерцијалне сврхе компаније
• Користите Боотстрап у пакетима или дистрибуцијама које креирате
• Измените изворни код
• Дајте подлиценцу за модификацију и дистрибуцију Боотстрапа трећим лицима која нису укључена у лиценцу

Забрањује вам да:

• Држите ауторе и власнике лиценци одговорним за штету јер је Боотстрап обезбеђен без гаранције
• Држите одговорним креаторе или носиоце ауторских права за Боотстрап
• Редистрибуирајте било који део Боотстрапа без одговарајућег приписивања
• Користите све ознаке у власништву Твитера на било који начин који може да каже или имплицира да Твиттер подржава вашу дистрибуцију
• Користите све ознаке у власништву Твиттер-а на било који начин који би могао назначити или имплицирати да сте ви креирали дотични Твиттер софтвер

Не захтева од вас да:

• Укључите извор самог Боотстрап-а, или било које модификације које сте можда направили на њему, у било коју редистрибуцију коју можете саставити која укључује
• Пошаљите промене које унесете у Боотстрап назад у пројекат Боотстрап (иако се такве повратне информације охрабрују)

Пуна Боотстрап лиценца се налази у спремишту пројекта за више информација.

Преводи

Чланови заједнице су превели Боотстрап-ову документацију на различите језике. Ниједан није званично подржан и можда није увек ажуран.

• Боотстрап 中文文档 (кинески)
• Боотстрап на Данск (дански)
• Боотстрап ен Францаис (француски)
• Боотстрап ауф Деутсцх (немачки)
• Боотстрап на италијанском (италијанском)
• Боотстрап 한국어 (корејски)
• Боотстрап ем Португуес до Брасил (бразилски португалски)
• Боотстрап по-русски (руски)
• Боотстрап ен Еспанол (шпански)
• Туркце Боотстрап (турски)
• Боотстрап украинско (украјински)
• Боотстрап банг тиенг Виет (вијетнамски)

Ми не помажемо у организовању или хостовању превода, ми само повезујемо са њима.

Завршили сте нови или бољи превод? Отворите захтев за повлачење да бисте га додали на нашу листу.