Започнување
Преглед на Bootstrap, како да преземате и користите, основни шаблони и примери и многу повеќе.
Преглед на Bootstrap, како да преземате и користите, основни шаблони и примери и многу повеќе.
Bootstrap (во моментов верзија 3.3.7) има неколку лесни начини за брзо започнување, од кои секој е привлечен за различно ниво на вештина и случај на употреба. Прочитајте за да видите што одговара на вашите посебни потреби.
Составен и минификуван CSS, JavaScript и фонтови. Не се вклучени документи или оригинални изворни датотеки.
Извор помалку, JavaScript и датотеки со фонтови, заедно со нашите документи. Потребен е помалку компајлер и одредено поставување.
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
- патека до главната помалку изворна датотека на Bootstrapstyle
- патека до неминифицираниот CSS на Bootstrap кој е претходно компајлиран со користење на стандардните поставки (без прилагодување)Можете исто така да инсталирате и да управувате со Bootstrap's Less, CSS, JavaScript и фонтови користејќи 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 и средства за фонт, заедно со извор помалку, 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 на Твитер за најновите озборувања и прекрасни музички видеа.
Bootstrap автоматски ги прилагодува вашите страници за различни големини на екранот. Еве како да ја оневозможите оваа функција за вашата страница да работи како овој пример што не реагира .
<meta>
споменат во CSS документитеwidth
на .container
за секое ниво на мрежа со една ширина, на пример. width: 970px !important;
Бидете сигурни дека ова доаѓа по стандардниот Bootstrap CSS. Опционално може да ги избегнете !important
прашањата за медиумите или некои избирачи-фу..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) не се поддржани.
Хром | Firefox | Сафари | |
---|---|---|---|
Андроид | Поддржано | Поддржано | N/A |
iOS | Поддржано | Поддржано | Поддржано |
Слично на тоа, се поддржани најновите верзии на повеќето десктоп прелистувачи.
Хром | Firefox | Internet Explorer | Опера | Сафари | |
---|---|---|---|---|---|
Мек | Поддржано | Поддржано | 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
. Конкретно, се знае дека некои конфигурации на Друпал користат @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. Ако страницата е кеширана и вчитана без глувчето преку прозорецот (т.е. притиснете го копчето за освежување или вчитате нешто во iframe), тогаш страницата се прикажува пред да се вчита фонтот. Ако лебдите над страницата (телото) ќе се прикажат некои од иконите, а ако лебдите над останатите икони ќе ги прикажат и тие. Видете го изданието #13863 за детали.
Bootstrap не е поддржан во старите режими на компатибилност на Internet Explorer. За да бидете сигурни дека го користите најновиот режим на рендерирање за IE, размислете да ја вклучите соодветната <meta>
ознака на вашите страници:
Потврдете го режимот на документи со отворање на алатките за отстранување грешки: притиснете F12и проверете го „Режим на документ“.
Оваа ознака е вклучена во целата документација и примери на Bootstrap за да се обезбеди најдобро можно прикажување во секоја поддржана верзија на Internet Explorer.
Погледнете го ова прашање на StackOverflow за повеќе информации.
Internet Explorer 10 не ја разликува ширината на уредот од ширината на приказот , и затоа не ги применува правилно медиумските барања во CSS на Bootstrap. Вообичаено, само треба да додадете брз фрагмент од CSS за да го поправите ова:
Сепак, ова не функционира за уредите што користат Windows Phone 8 верзии постари од Ажурирање 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>
содржината под модалот ќе се прелистува наместо самиот модал. Видете грешка WebKit #153856 .
Исто така, имајте предвид дека ако користите фиксна лента за навигација или користите влезови во модален, iOS има грешка при рендерирање што не ја ажурира позицијата на фиксните елементи кога се активира виртуелната тастатура. Неколку решенија за ова вклучуваат трансформирање на вашите елементи position: absolute
или повикување на тајмер за фокусирање за да се обидете рачно да го поправите позиционирањето. Со ова не се справува Bootstrap, па на вас останува да одлучите кое решение е најдобро за вашата апликација.
Елементот не се користи на .dropdown-backdrop
iOS во навивањето поради сложеноста на 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:
Надвор од кутијата, Андроид 4.1 (па дури и некои понови изданија очигледно) се испорачуваат со апликацијата Прелистувач како стандарден избор на веб-прелистувач (за разлика од 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 Maps и Google Custom Search Engine, се во конфликт со 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 и е авторско право на Twitter од 2016 година. Сварено на помали парчиња, може да се опише со следните услови.
Целосната лиценца за Bootstrap се наоѓа во складиштето на проектот за повеќе информации.
Членовите на заедницата ја преведоа документацијата на Bootstrap на различни јазици. Ниту еден не е официјално поддржан и можеби не е секогаш ажуриран.
Ние не помагаме во организирање или хостирање преводи, туку само поврзуваме со нив.
Завршивте нов или подобар превод? Отворете барање за повлекување за да го додадете во нашата листа.