Почетак
Преглед Боотстрапа, како да преузмете и користите, основне шаблоне и примере и још много тога.
Преглед Боотстрапа, како да преузмете и користите, основне шаблоне и примере и још много тога.
Боотстрап (тренутно в3.3.7) има неколико једноставних начина да брзо започнете, од којих је сваки привлачан за другачији ниво вештине и случај употребе. Прочитајте да видите шта одговара вашим посебним потребама.
Преведен и минимизован ЦСС, ЈаваСцрипт и фонтови. Нису укључени никакви документи или оригинални изворни фајлови.
Соурце Лесс, ЈаваСцрипт и датотеке фонтова, заједно са нашим документима. Захтева мање компајлер и нека подешавања.
Боотстрап пренет са Лесс на Сасс ради лакшег укључивања у пројекте Раилс, Цомпасс или само за Сасс.
Људи из јсДеливр-а љубазно пружају ЦДН подршку за Боотстрап-ов ЦСС и ЈаваСцрипт. Само користите ове Боотстрап ЦДН везе.
Такође можете да инсталирате и управљате Боотстрап Лесс, ЦСС, ЈаваСцрипт и фонтовима користећи Бовер :
Такође можете да инсталирате Боотстрап користећи нпм :
require('bootstrap')
ће учитати све Боотстрап-ове јКуери додатке на јКуери објекат. Сам bootstrap
модул не извози ништа. Можете ручно да учитате Боотстрап-ове јКуери додатке појединачно тако што ћете учитати /js/*.js
датотеке у директоријум највишег нивоа пакета.
Боотстрап package.json
садржи неке додатне метаподатке под следећим тастерима:
less
- путања до главне изворне датотеке Боотстрапа Лессstyle
- путања до Боотстрап-овог неминимизираног ЦСС-а који је претходно компајлиран користећи подразумевана подешавања (без прилагођавања)Такође можете да инсталирате и управљате Боотстрап Лесс, ЦСС, ЈаваСцрипт и фонтовима користећи Цомпосер :
Боотстрап користи Аутопрефикер за рад са ЦСС префиксима добављача . Ако компајлирате Боотстрап из његовог Лесс/Сасс извора и не користите наш Грунтфиле, мораћете сами да интегришете Аутопрефикер у свој процес прављења. Ако користите унапред компајлирани Боотстрап или користите наш Грунтфиле, не морате да бринете о томе јер је Аутопрефикер већ интегрисан у наш Грунтфиле.
Боотстрап се може преузети у два облика, у оквиру којих ћете пронаћи следеће директоријуме и датотеке, логички груписане уобичајене ресурсе и обезбеђујући и компајлиране и минимизиране варијације.
Имајте на уму да сви ЈаваСцрипт додаци захтевају да јКуери буде укључен, као што је приказано у почетном шаблону . Консултујте нашеbower.json
да видите које су верзије јКуери-ја подржане.
Када се преузме, распакујте компримовану фасциклу да бисте видели структуру (преведеног) Боотстрапа. Видећете нешто овако:
Ово је најосновнији облик Боотстрап-а: унапред компајлиране датотеке за брзу употребу у скоро сваком веб пројекту. Пружамо преведене ЦСС и ЈС ( bootstrap.*
), као и компајлиране и минимизиране ЦСС и ЈС ( bootstrap.min.*
). ЦСС изворне мапе ( bootstrap.*.map
) су доступне за коришћење са алаткама за програмере одређених претраживача. Фонтови из Глификона су укључени, као и опциона Боотстрап тема.
Преузимање изворног кода за Боотстрап укључује унапред компајлиране ЦСС, ЈаваСцрипт и елементе фонтова, заједно са изворним Лесс, ЈаваСцрипт-ом и документацијом. Тачније, укључује следеће и више:
, less/
, js/
и fonts/
су изворни код за наше ЦСС, ЈС и фонтове икона (респективно). Фасцикла dist/
укључује све што је наведено у претходно компајлираном одељку за преузимање изнад. Фасцикла docs/
укључује изворни код за нашу документацију и examples/
употребу Боотстрапа. Осим тога, било која друга укључена датотека пружа подршку за пакете, информације о лиценци и развој.
Боотстрап користи Грунт за свој систем изградње, са погодним методама за рад са оквиром. Тако компајлирамо наш код, покрећемо тестове и још много тога.
Да бисте инсталирали Грунт, прво морате да преузмете и инсталирате ноде.јс (који укључује нпм). нпм је скраћеница за модуле упаковане у чворове и начин је управљања развојним зависностима преко ноде.јс.
Затим, из командне линије:grunt-cli
глобално са npm install -g grunt-cli
./bootstrap/
директоријума, а затим покрените npm install
. нпм ће погледати package.json
датотеку и аутоматски инсталирати потребне локалне зависности наведене тамо.Када завршите, моћи ћете да покренете различите Грунт команде које сте добили из командне линије.
grunt dist
(Само компајлирајте ЦСС и ЈаваСцрипт)Регенерише /dist/
директоријум са преведеним и минимизираним ЦСС и ЈаваСцрипт датотекама. Као корисник Боотстрап-а, ово је обично команда коју желите.
grunt watch
(Гледати)Гледа изворне датотеке Лесс-а и аутоматски их поново компајлира у ЦСС кад год сачувате промену.
grunt test
(Покрени тестове)Покреће ЈСХинт и покреће КУнит тестове безглаво у ПхантомЈС- у .
grunt docs
(Изградите и тестирајте средства докумената)Прави и тестира ЦСС, ЈаваСцрипт и друга средства која се користе када се документација покреће локално преко bundle exec jekyll serve
.
grunt
(Изградите апсолутно све и покрените тестове)Преводи и минимизира ЦСС и ЈаваСцрипт, прави веб локацију за документацију, покреће ХТМЛ5 валидатор у односу на документе, регенерише средства за прилагођавање и још много тога. Рекуирес Јекилл . Обично је потребно само ако хакујете сам Боотстрап.
Ако наиђете на проблеме са инсталирањем зависности или покретањем Грунт команди, прво обришите /node_modules/
директоријум који генерише нпм. Затим, поновите npm install
.
Почните са овим основним ХТМЛ шаблоном или измените ове примере . Надамо се да ћете прилагодити наше шаблоне и примере, прилагођавајући их својим потребама.
Копирајте ХТМЛ у наставку да бисте почели да радите са минималним Боотстрап документом.
Надоградите основни шаблон изнад са Боотстрап-овим многим компонентама. Подстичемо вас да прилагодите и прилагодите Боотстрап тако да одговара потребама вашег индивидуалног пројекта.
Преузмите изворни код за сваки пример испод тако што ћете преузети Боотстрап спремиште . Примери се могу наћи у docs/examples/
именику.
Основна структура за административну контролну таблу са фиксном бочном траком и траком за навигацију.
Направите прилагођену навигациону траку са оправданим везама. Главу горе! Није превише прилагођен за Сафари.
Боотлинт је званични алат Боотстрап ХТМЛ линтер . Он аутоматски проверава неколико уобичајених ХТМЛ грешака на веб страницама које користе Боотстрап на прилично „ванилан“ начин. Компоненте/виџети Ванилла Боотстрапа захтевају да њихови делови ДОМ-а буду у складу са одређеним структурама. Боотлинт проверава да ли инстанце Боотстрап компоненти имају исправно структуриран ХТМЛ. Размислите о додавању Боотлинт-а у свој Боотстрап ланац алата за веб развој тако да ниједна од уобичајених грешака не успори развој вашег пројекта.
Будите у току са развојем Боотстрапа и обратите се заједници помоћу ових корисних ресурса.
irc.freenode.net
серверу, на ##боотстрап каналу .twitter-bootstrap-3
.bootstrap
на пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.Такође можете пратити @гетбоотстрап на Твитеру за најновије трачеве и сјајне музичке спотове.
Боотстрап аутоматски прилагођава ваше странице различитим величинама екрана. Ево како да онемогућите ову функцију да ваша страница ради као овај пример који не реагује .
<meta>
који се помиње у ЦСС документимаwidth
он .container
за сваки ниво мреже са једном ширином, на пример width: 970px !important;
Уверите се да ово долази после подразумеваног Боотстрап ЦСС-а. Опционо можете избећи !important
са медијским упитима или неким селектором-фу..col-xs-*
класе поред или уместо средњих/великих. Не брините, изузетно мала мрежа уређаја прилагођава се на све резолуције.И даље ће вам требати Респонд.јс за ИЕ8 (пошто су наши медијски упити још увек ту и треба их обрадити). Ово онемогућава аспекте „мобилног сајта“ Боотстрапа.
Ове кораке смо применили на пример. Прочитајте његов изворни код да бисте видели примењене конкретне промене.
Желите да пређете са старије верзије Боотстрапа на в3.к? Погледајте наш водич за миграцију .
Боотстрап је направљен да најбоље функционише у најновијим прегледачима за десктоп и мобилне уређаје, што значи да старији прегледачи могу да приказују другачије стилизоване, иако потпуно функционалне, приказе одређених компоненти.
Конкретно, подржавамо најновије верзије следећих претраживача и платформи.
Алтернативни прегледачи који користе најновију верзију ВебКит-а, Блинк-а или Гецко-а, било директно или преко АПИ-ја за веб приказ на платформи, нису експлицитно подржани. Међутим, Боотстрап би (у већини случајева) требало да се приказује и исправно функционише и у овим претраживачима. Конкретније информације о подршци су наведене у наставку.
Уопштено говорећи, Боотстрап подржава најновије верзије подразумеваних претраживача сваке главне платформе. Имајте на уму да прокси претраживачи (као што су Опера Мини, Опера Мобиле Турбо режим, УЦ Бровсер Мини, Амазон Силк) нису подржани.
Хром | Фирефок | Сафари | |
---|---|---|---|
Андроид | Подржан | Подржан | Н/А |
иОС | Подржан | Подржан | Подржан |
Слично томе, подржане су најновије верзије већине десктоп претраживача.
Хром | Фирефок | интернет претраживач | Опера | Сафари | |
---|---|---|---|---|---|
Мац | Подржан | Подржан | Н/А | Подржан | Подржан |
Виндовс | Подржан | Подржан | Подржан | Подржан | Није подржан |
У оперативном систему Виндовс подржавамо Интернет Екплорер 8-11 .
За Фирефок, поред најновијег нормалног стабилног издања, подржавамо и најновије издање проширене подршке (ЕСР) верзију Фирефок-
Незванично, Боотстрап би требало да изгледа и понаша се довољно добро у Цхромиум-у и Цхроме-у за Линук, Фирефок-у за Линук и Интернет Екплорер 7, као и у Мицрософт Едге-у, иако нису званично подржани.
За листу неких грешака у прегледачу са којима Боотстрап мора да се бори, погледајте наш Зид грешака у прегледачу .
Интернет Екплорер 8 и 9 су такође подржани, међутим, имајте на уму да неки ЦСС3 својства и ХТМЛ5 елементи нису у потпуности подржани од стране ових прегледача. Поред тога, Интернет Екплорер 8 захтева употребу Респонд.јс да би се омогућила подршка за медијске упите.
одлика | Интернет Екплорер 8 | Интернет Екплорер 9 |
---|---|---|
border-radius |
Није подржан | Подржан |
box-shadow |
Није подржан | Подржан |
transform |
Није подржан | Подржано, са -ms префиксом |
transition |
Није подржан | |
placeholder |
Није подржан |
Посетите Могу ли да користим... за детаље о подршци претраживача за ЦСС3 и ХТМЛ5 функције.
Пазите на следећа упозорења када користите Респонд.јс у својим развојним и производним окружењима за Интернет Екплорер 8.
Коришћење Респонд.јс-а са ЦСС-ом хостованим на другом (под)домену (на пример, на ЦДН-у) захтева додатно подешавање. За детаље погледајте документе Респонд.јс .
file://
Због безбедносних правила претраживача, Респонд.јс не ради са страницама које се прегледају путем file://
протокола (као када отварате локалну ХТМЛ датотеку). Да бисте тестирали прилагодљиве функције у ИЕ8, прегледајте своје странице преко ХТТП(С). Погледајте документе Респонд.јс .
@import
Респонд.јс не ради са ЦСС-ом на који се упућује преко @import
. Конкретно, познато је да неке Друпал конфигурације користе @import
. За детаље погледајте документе Респонд.јс .
ИЕ8 не подржава у потпуности box-sizing: border-box;
када се комбинује са min-width
, max-width
, min-height
или max-height
. Из тог разлога, од в3.0.1, више не користимо max-width
на .container
с.
ИЕ8 има неких проблема @font-face
када се комбинује са :before
. Боотстрап користи ту комбинацију са својим Глификонима. Ако је страница кеширана и учитана без преласка миша преко прозора (тј. притисните дугме за освежавање или учитајте нешто у ифраме-у), онда се страница приказује пре него што се фонт учита. Прелазак миша преко странице (тела) ће приказати неке од икона, а прелазак миша преко преосталих икона ће приказати и оне. Погледајте издање #13863 .
Боотстрап није подржан у старим режимима компатибилности са Интернет Екплорер-ом. Да бисте били сигурни да користите најновији режим приказивања за ИЕ, размислите о укључивању одговарајуће <meta>
ознаке на своје странице:
Потврдите режим документа отварањем алата за отклањање грешака: притисните F12и означите „Режим документа“.
Ова ознака је укључена у сву Боотстрап документацију и примере како би се обезбедило најбоље могуће приказивање у свакој подржаној верзији Интернет Екплорер-а.
Погледајте ово СтацкОверфлов питање за више информација.
Интернет Екплорер 10 не разликује ширину уређаја од ширине прозора за приказ и стога не примењује правилно медијске упите у Боотстрап-овом ЦСС-у. Обично бисте само додали брзи исечак ЦСС-а да ово поправите:
Међутим, ово не функционише за уређаје који користе Виндовс Пхоне 8 верзије старије од ажурирања 3 (ака ГДР3) , јер доводи до тога да такви уређаји приказују углавном приказ радне површине уместо уског приказа „телефона“. Да бисте ово решили, мораћете да укључите следећи ЦСС и ЈаваСцрипт да бисте заобишли грешку .
За више информација и упутства за коришћење прочитајте Виндовс Пхоне 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 за више детаља. Једно могуће решење за ово је додавање следећег ЦСС-а:
Изван кутије, Андроид 4.1 (па чак и нека новија издања очигледно) се испоручују са апликацијом Бровсер као подразумеваним веб прегледачем по избору (за разлику од Цхроме-а). Нажалост, апликација претраживача има много грешака и недоследности са ЦСС-ом уопште.
На <select>
елементима, Андроид претраживач неће приказати бочне контроле ако постоји border-radius
и/или border
примењено. (Погледајте ово СтацкОверфлов питање за детаље.) Користите исечак кода испод да бисте уклонили увредљиви ЦСС и <select>
приказали као елемент без стила на Андроид претраживачу. Кориснички агент њушкање избегава сметње у Цхроме, Сафари и Мозилла претраживачима.
Желите да видите пример? Погледајте овај ЈС Бин демо.
Да би пружио најбоље могуће искуство старим прегледачима са грешкама, Боотстрап користи хакове ЦСС претраживача на неколико места како би циљао посебан ЦСС на одређене верзије претраживача како би заобишао грешке у самим претраживачима. Ови хакови разумљиво узрокују да се ЦСС валидатори жале да су неважећи. На неколико места такође користимо најсавременије ЦСС функције које још увек нису у потпуности стандардизоване, али се оне користе искључиво за прогресивно побољшање.
Ова упозорења о валидацији нису битна у пракси јер део нашег ЦСС-а који није хакован у потпуности потврђује валидност и делови који се не ометају не ометају правилно функционисање нехакованог дела, стога намерно игноришемо ова посебна упозорења.
Наши ХТМЛ документи такође имају нека тривијална и безначајна упозорења о валидацији ХТМЛ-а због тога што смо укључили решење за одређену грешку у Фирефок -у .
Иако званично не подржавамо никакве додатке или додатке треће стране, нудимо неке корисне савете који ће вам помоћи да избегнете потенцијалне проблеме у вашим пројектима.
Неки софтвер треће стране, укључујући Гоогле мапе и Гоогле прилагођени претраживач, сукобљавају се са Боотстрапом због * { box-sizing: border-box; }
, правило које то чини да padding
не утиче на коначну израчунату ширину елемента. Сазнајте више о моделу кутије и величини на ЦСС Трицкс .
У зависности од контекста, можете заменити по потреби (опција 1) или ресетовати величину кутије за читаве регионе (опција 2).
Боотстрап прати уобичајене веб стандарде и — уз минималан додатни напор — може да се користи за креирање сајтова који су доступни онима који користе АТ .
Ако ваша навигација садржи много веза и налази се испред главног садржаја у ДОМ-у, додајте Skip to main content
везу пре навигације (за једноставно објашњење погледајте овај чланак пројекта А11И о прескакању веза за навигацију ). Коришћење .sr-only
класе ће визуелно сакрити везу за прескакање, а .sr-only-focusable
класа ће осигурати да веза постане видљива када се фокусира (за видеће кориснике тастатуре).
Због дуготрајних недостатака/бугова у Цхроме-у (погледајте издање 262171 у Цхромиум праћењу грешака ) и Интернет Екплорер-у (погледајте овај чланак о везама на страници и редоследу фокуса ), мораћете да се уверите да је циљ ваше везе за прескакање је барем програмски фокусиран додавањем tabindex="-1"
.
Поред тога, можда ћете желети да експлицитно потиснете видљиву индикацију фокуса на циљу (посебно зато што Цхроме тренутно такође поставља фокус на елементе са tabindex="-1"
када се на њих кликне мишем) помоћу #content:focus { outline: none; }
.
Имајте на уму да ће ова грешка такође утицати на све друге везе на страници које ваш сајт можда користи, чинећи их бескорисним за кориснике тастатуре. Можете размислити о додавању сличне исправке застоја за све друге именоване сидра/идентификаторе фрагмента који делују као циљеви везе.
Када угнежујете наслове ( <h1>
- <h6>
), ваше примарно заглавље документа треба да буде <h1>
. Наредни наслови би требало да логично користе <h2>
- <h6>
тако да читачи екрана могу да направе садржај за ваше странице.
Сазнајте више на ХТМЛ ЦодеСниффер и Пенн Стате'с АццессАбилити .
Тренутно, неке од подразумеваних комбинација боја доступне у Боотстрап-у (као што су различите стилизоване класе дугмади, неке од боја за истицање кода које се користе за основне блокове кода , .bg-primary
контекстуална помоћна класа у позадини и подразумевана боја везе када се користи на белој позадини) имају низак однос контраста (испод препорученог односа од 4,5:1 ). Ово може да изазове проблеме корисницима са слабим видом или који су слепи за боје. Ове подразумеване боје ће можда морати да се измене да би се повећао њихов контраст и читљивост.
Боотстрап је објављен под лиценцом МИТ-а и заштићен је ауторским правима Твиттер-а 2016. Сведен на мање комаде, може се описати следећим условима.
Пуна Боотстрап лиценца се налази у спремишту пројекта за више информација.
Чланови заједнице су превели Боотстрап-ову документацију на различите језике. Ниједан није званично подржан и можда није увек ажуран.
Ми не помажемо у организовању или хостовању превода, ми само повезујемо са њима.
Завршили сте нови или бољи превод? Отворите захтев за повлачење да бисте га додали на нашу листу.