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