Изтегли

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

Можете също така да инсталирате и управлявате Less, CSS, JavaScript и шрифтове на Bootstrap с помощта на 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

Можете също да инсталирате и управлявате Less, CSS, JavaScript и шрифтове на Bootstrap с помощта на 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 за визуално подобрено изживяване.

Решетки

Множество примери за мрежови оформления с четирите нива, гнездене и др.

Джъмботрон

Изградете около jumbotron с навигационна лента и някои основни колони на мрежата.

Тесен джъмботрон

Създайте по-персонализирана страница, като стесните контейнера по подразбиране и jumbotron.

Navbars в действие

Навигационна лента

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

Статична горна навигационна лента

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

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

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

Персонализирани компоненти

Покрийте

Шаблон от една страница за създаване на прости и красиви начални страници.

Въртележка

Персонализирайте навигационната лента и въртележката, след което добавете някои нови компоненти.

Блог

Опростено оформление на блог с две колони с персонализирана навигация, заглавка и тип.

Табло

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

Страница за вход

Персонализирано оформление и дизайн на формуляр за прост формуляр за влизане.

Обосновано нав

Създайте персонализирана навигационна лента с подравнени връзки. Горе главата! Не е много подходящ за Safari.

Лепкав долен колонтитул

Прикрепете долен колонтитул към дъното на прозореца за изглед, когато съдържанието е по-кратко от него.

Залепващ долен колонтитул с лента за навигация

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

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

Неотзивчив Bootstrap

Лесно деактивирайте отзивчивостта на Bootstrap според нашите документи .

Извън платно

Създайте превключваемо навигационно меню извън платното за използване с Bootstrap.

Инструменти

Bootlint

Bootlint е официалният инструмент за HTML linter на 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с медийни заявки или някои селектор-fu.
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. Ако дадена страница е кеширана и заредена без мишката върху прозореца (т.е. натиснете бутона за опресняване или заредете нещо във вградена рамка), тогава страницата се изобразява преди зареждането на шрифта. Задържането на курсора на мишката върху страницата (тялото) ще покаже някои от иконите, а задържането на курсора на мишката над останалите икони също ще ги покаже. Вижте брой #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, по-стари от Update 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>съдържанието под модала ще се превърта вместо самия модал. Вижте грешка #153856 в WebKit .

Виртуални клавиатури

Също така имайте предвид, че ако използвате фиксирана лента за навигация или използвате входове в рамките на модал, 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, s с фиксирана ширина .containerможе да накара Safari да използва необичайно малък размер на шрифта при печат. Вижте #14868 и грешка #138192 в WebKit за повече подробности. Едно потенциално решение за това е добавянето на следния CSS:

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

Стандартен браузър за Android

Извън кутията, Android 4.1 (и дори някои по-нови версии очевидно) се доставят с приложението Browser като избран уеб браузър по подразбиране (за разлика от Chrome). За съжаление, приложението Браузър има много грешки и несъответствия с 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
• Анализатор на цветовия контраст
• Проектът 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 на италиански (италиански)
• Bootstrap 한국어 (корейски)
• Bootstrap em Português do Brasil (бразилски португалски)
• Bootstrap по-руски (руски)
• Bootstrap en Español (испански)
• Türkçe Bootstrap (турски)
• Bootstrap українською (украински)
• Bootstrap bằng tiếng Việt (виетнамски)

Ние не помагаме при организирането или хостването на преводи, ние просто се свързваме с тях.

Завършихте ли нов или по-добър превод? Отворете заявка за изтегляне, за да я добавите към нашия списък.