Въведение
Започнете с Bootstrap, най-популярната рамка в света за създаване на адаптивни, ориентирани към мобилните устройства сайтове, с jsDelivr и шаблонна начална страница.
Искате бързо да добавите Bootstrap към вашия проект? Използвайте jsDelivr, предоставен безплатно от хората в jsDelivr. Използвате мениджър на пакети или трябва да изтеглите изходните файлове? Отидете на страницата за изтегляне.
Копирайте и поставете листа със стилове <link>
във вашия <head>
преди всички останали листове със стилове, за да заредите нашия CSS.
Много от нашите компоненти изискват използването на JavaScript, за да функционират. По-конкретно, те изискват jQuery , Popper.js и нашите собствени плъгини за JavaScript. Поставете следните <script>
s близо до края на страниците си, точно преди затварящия </body>
етикет, за да ги активирате. Първо трябва да е jQuery, след това Popper.js и след това нашите плъгини за JavaScript.
Използваме тънката версия на jQuery , но се поддържа и пълната версия.
Любопитни ли сте кои компоненти изрично изискват jQuery, нашия JS и Popper.js? Щракнете върху връзката за показване на компоненти по-долу. Ако изобщо не сте сигурни за общата структура на страницата, продължете да четете за примерен шаблон на страница.
Нашите bootstrap.bundle.js
и bootstrap.bundle.min.js
включват Popper , но не и jQuery . За повече информация относно това, което е включено в Bootstrap, моля, вижте нашия раздел със съдържание .
Показване на компоненти, изискващи JavaScript
- Сигнали за отхвърляне
- Бутони за превключване на състояния и квадратчета за отметка/радио функционалност
- Въртележка за всички поведения на слайдове, контроли и индикатори
- Свиване за превключване на видимостта на съдържанието
- Падащи менюта за показване и позициониране (също изисква Popper.js )
- Модали за показване, позициониране и поведение при превъртане
- Лента за навигация за разширяване на нашия плъгин за свиване за прилагане на отзивчиво поведение
- Подсказки и изскачащи елементи за показване и позициониране (също изисква Popper.js )
- Scrollspy за поведение при превъртане и актуализации на навигацията
Уверете се, че вашите страници са настроени с най-новите стандарти за дизайн и разработка. Това означава да използвате HTML5 doctype и да включите мета таг за прозорец за правилно реагиращо поведение. Съберете всичко заедно и вашите страници трябва да изглеждат така:
Това е всичко, от което се нуждаете за общите изисквания към страницата. Посетете документите за оформление или нашите официални примери , за да започнете да оформяте съдържанието и компонентите на вашия сайт.
Bootstrap използва шепа важни глобални стилове и настройки, с които ще трябва да сте наясно, когато го използвате, всички от които са почти изключително насочени към нормализиране на стилове между браузъри. Нека се потопим.
Bootstrap изисква използването на HTML5 doctype. Без него ще видите някакъв фънки непълен стайлинг, но включването му не би трябвало да причини значителни проблеми.
Bootstrap е разработен първо за мобилни устройства, стратегия, при която първо оптимизираме кода за мобилни устройства и след това увеличаваме компонентите, ако е необходимо, като използваме CSS медийни заявки. За да осигурите правилно изобразяване и мащабиране с докосване за всички устройства, добавете мета маркера за адаптивен прозорец към вашия <head>
.
Можете да видите пример за това в действие в началния шаблон .
За по-лесно оразмеряване в CSS превключваме глобалната box-sizing
стойност от content-box
на border-box
. Това гарантира padding
, че няма да повлияе на крайната изчислена ширина на елемент, но може да причини проблеми с някои софтуери на трети страни като Google Maps и Google Custom Search Engine.
В редките случаи, когато трябва да го замените, използвайте нещо като следното:
С горния фрагмент всички вложени елементи – включително генерирано съдържание чрез ::before
и ::after
– ще наследят указаното box-sizing
за това .selector-for-some-widget
.
Научете повече за модела на кутията и оразмеряването на CSS Tricks .
За подобрено изобразяване в различни браузъри, ние използваме Reboot , за да коригираме несъответствията между браузърите и устройствата, като същевременно предоставяме малко по-убедителни нулирания на общи HTML елементи.
Бъдете в крак с развитието на Bootstrap и се свържете с общността с тези полезни ресурси.
- Следвайте @getbootstrap в Twitter .
- Прочетете и се абонирайте за официалния блог на Bootstrap .
- Разговаряйте с други Bootstrappers в IRC. На
irc.freenode.net
сървъра, в##bootstrap
канала. - Помощ за внедряване може да бъде намерена в Stack Overflow (маркирано
bootstrap-4
). - Разработчиците трябва да използват ключовата дума
bootstrap
в пакети, които променят или добавят към функционалността на Bootstrap, когато разпространяват чрез npm или подобни механизми за доставка за максимална откриваемост.
Можете също да следвате @getbootstrap в Twitter за най-новите клюки и страхотни музикални видеоклипове.