Преземи

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- патека до главната помалку изворна датотека на 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 и средства за фонт, заедно со извор помалку, 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. Одете до root /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 за визуелно подобрено искуство.

Решетки

Повеќе примери на распоред на мрежа со сите четири нивоа, гнездење и многу повеќе.

Џамботрон

Изградете околу џамботронот со лента за навигација и некои основни мрежни колони.

Тесен џамботрон

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

Navbars во акција

Navbar

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

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

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

Поправена лента за навигација

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

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

Покријте

Шаблон на една страница за градење едноставни и убави почетни страници.

Рингишпил

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

Блог

Едноставен распоред на блог со две колони со приспособена навигација, заглавие и тип.

Контролна табла

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

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

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

Оправдана навигација

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

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

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

Леплив подножје со лента за навигација

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

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

Bootstrap што не реагира

Лесно оневозможете ја реакцијата на Bootstrap според нашите документи .

Надвор од платно

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

Алатки

Bootlint

Bootlint е официјалната алатка за HTML- линтер на Bootstrap . Тој автоматски проверува неколку вообичаени HTML грешки на веб-страниците кои користат Bootstrap на прилично „ванила“ начин. Компонентите/виџетите на Vanilla Bootstrap бараат нивните делови од DOM да се усогласат со одредени структури. Bootlint проверува дали примероците од компонентите на Bootstrap имаат правилно структуриран HTML. Размислете за додавање Bootlint во синџирот на алатки за веб-развој на Bootstrap, така што ниту една од вообичаените грешки не го забавува развојот на вашиот проект.

Заедница

Останете во тек со развојот на Bootstrap и допрете до заедницата со овие корисни ресурси.

• Прочитајте и претплатете се на Официјалниот блог за подигање .
• Разговарајте со колегите Bootstrapper користејќи IRC на irc.freenode.netсерверот, во каналот ##bootstrap .
• За помош за користење на Bootstrap, прашајте на StackOverflow користејќи ја ознакатаtwitter-bootstrap-3 .
• Програмерите треба да го користат клучниот збор bootstrapна пакетите кои ја менуваат или додаваат функционалноста на Bootstrap при дистрибуција преку npm или слични механизми за испорака за максимална откриеност.
• Најдете инспиративни примери на луѓе кои градат со Bootstrap на Bootstrap Expo .

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

Оневозможување на одговор

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

Чекори за оневозможување на одговор на страницата

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

Сè уште ќе ви треба Respond.js за IE8 (бидејќи нашите барања за медиуми сè уште се таму и треба да се обработат). Ова ги оневозможува аспектите на „мобилната страница“ на 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 за детали.

Одговори.js иfile://

Поради безбедносните правила на прелистувачот, Respond.js не работи со страници прегледани преку file://протоколот (како кога отворате локална HTML-датотека). За да ги тестирате респонзивните функции во IE8, прегледајте ги вашите страници преку HTTP(S). Погледнете ги документите Respond.js за детали.

Одговори.js и@import

Respond.js не работи со CSS кој е референциран преку @import. Конкретно, се знае дека некои конфигурации на Друпал користат @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 пред 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, па на вас останува да одлучите кое решение е најдобро за вашата апликација.

Паѓања за Navbar

Елементот не се користи на .dropdown-backdropiOS во навивањето поради сложеноста на z-индексирањето. Така, за да ги затворите паѓачките мени во лентите за навигација, мора директно да кликнете на паѓачкиот елемент (или кој било друг елемент што ќе активира настан за кликнување во iOS ).

Зумирање на прелистувачот

Зумирањето на страницата неизбежно претставува рендерирање на артефакти во некои компоненти, и во Bootstrap и во останатиот дел од мрежата. Во зависност од проблемот, можеби ќе можеме да го поправиме (прво пребарајте, а потоа отворете проблем доколку е потребно). Сепак, ние тежнееме да ги игнорираме овие, бидејќи тие често немаат директно решение освен хакерски решенија.

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

Иако вистинското лебдење не е возможно на повеќето екрани на допир, повеќето мобилни прелистувачи ја имитираат поддршката за лебдење и прават :hover„леплива“. Со други зборови, :hoverстиловите почнуваат да се применуваат откако ќе допре некој елемент и престануваат да се применуваат само откако корисникот ќе допре некој друг елемент. Ова може да предизвика состојбите на Bootstrap :hoverда станат непожелно „заглавени“ на таквите прелистувачи. Некои мобилни прелистувачи исто така прават :focusслично лепливи. Во моментов не постои едноставен начин за решавање на овие прашања освен целосно отстранување на таквите стилови.

Печатење

Дури и во некои модерни прелистувачи, печатењето може да биде чудно.

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

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

Исто така, од Safari v8.0, s со фиксна ширина .containerможе да предизвикаат Safari да користи невообичаено мала големина на фонтот при печатење. Видете #14868 и грешка во WebKit #138192 за повеќе детали. Еден потенцијален решение за ова е додавање на следниов CSS:

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

Андроид берзански прелистувач

Надвор од кутијата, Андроид 4.1 (па дури и некои понови изданија очигледно) се испорачуваат со апликацијата Прелистувач како стандарден избор на веб-прелистувач (за разлика од 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 Maps и Google Custom Search Engine, се во конфликт со Bootstrap поради * { box-sizing: border-box; }, правило што го прави така paddingда не влијае на конечната пресметана ширина на елементот. Дознајте повеќе за моделот на кутијата и големината на CSS Tricks .

Во зависност од контекстот, може да ја отфрлите по потреба (Опција 1) или да ја ресетирате големината на кутијата за цели региони (Опција 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Пристапност

Bootstrap ги следи вообичаените веб-стандарди и - со минимален дополнителен напор - може да се користи за создавање страници кои се достапни за оние кои користат AT .

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

Ако вашата навигација содржи многу врски и доаѓа пред главната содржина во DOM, додајте Skip to main contentврска пред навигацијата (за едноставно објаснување, видете ја оваа статија на проектот A11Y за прескокнување на врски за навигација ). Користењето на .sr-onlyкласата визуелно ќе ја скрие врската за прескокнување, а .sr-only-focusableкласата ќе се погрижи врската да стане видлива откако ќе се фокусира (за корисници на тастатура со вид).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Вгнездени наслови

Кога ги вгнездувате насловите ( <h1>- <h6>), заглавието на вашиот примарен документ треба да биде <h1>. Следните наслови треба логично да ги користат <h2>- <h6>така што читателите на екранот можат да конструираат табела со содржина за вашите страници.

Дознајте повеќе на HTML CodeSniffer и AccessAbility на Penn State .

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

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

Дополнителни ресурси

• Обележувач „HTML Codesniffer“ за идентификување проблеми со пристапноста
• Екстензија на Алатки за програмери за пристапност на Chrome
• Анализатор за контраст на бои
• Проектот A11Y
• Документација за пристапност на МДН

ЧПП за лиценца

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

Тоа бара од вас да:

• Чувајте ја лиценцата и известувањето за авторски права вклучени во датотеките CSS и JavaScript на Bootstrap кога ги користите во вашите дела

Тоа ви дозволува да:

• Слободно преземете го и користете го Bootstrap, целосно или делумно, за лични, приватни, внатрешни или комерцијални цели на компанијата
• Користете Bootstrap во пакетите или дистрибуциите што ги креирате
• Изменете го изворниот код
• Доделете подлиценца за менување и дистрибуирање на Bootstrap на трети страни кои не се вклучени во лиценцата

Ви забранува:

• Поставете ги авторите и сопствениците на лиценците одговорни за штетите бидејќи Bootstrap е обезбеден без гаранција
• Следете ги одговорните креаторите или носителите на авторските права на Bootstrap
• Прераспределете кое било парче од Bootstrap без соодветна атрибуција
• Користете ги сите ознаки во сопственост на Твитер на кој било начин што може да наведе или да имплицира дека Твитер ја поддржува вашата дистрибуција
• Користете ги сите ознаки во сопственост на 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 (виетнамски)

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

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