Уводзіны
Пачніце з Bootstrap, самага папулярнага ў свеце фрэймворка для стварэння адаптыўных мабільных сайтаў з дапамогай jsDelivr і шаблона стартавай старонкі.
Хуткі старт
Хочаце хутка дадаць Bootstrap у свой праект? Выкарыстоўвайце jsDelivr, які бясплатна прадастаўляецца супрацоўнікамі jsDelivr. Выкарыстоўваеце мэнэджар пакетаў ці вам трэба спампаваць зыходныя файлы? Перайдзіце на старонку загрузак .
CSS
Скапіруйце і ўстаўце табліцу стыляў <link>
у сваю <head>
перад усімі іншымі табліцамі стыляў, каб загрузіць наш CSS.
JS
Для працы многіх нашых кампанентаў патрабуецца выкарыстанне 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 )
- Модалы для адлюстравання, размяшчэння і паводзін пракруткі
- Панэль навігацыі для пашырэння нашага плагіна Collapse для рэалізацыі адаптыўных паводзін
- Падказкі і ўсплывальныя вобразы для адлюстравання і размяшчэння (таксама патрабуецца Popper.js )
- Scrollspy для абнаўлення паводзін пракруткі і навігацыі
Стартавы шаблон
Не забудзьцеся наладзіць вашыя старонкі ў адпаведнасці з найноўшымі стандартамі дызайну і распрацоўкі. Гэта азначае выкарыстанне дакумента HTML5 і ўключэнне метатэга viewport для належнага рэагавання. Збярыце ўсё разам, і вашы старонкі павінны выглядаць так:
Гэта ўсё, што вам трэба для агульных патрабаванняў да старонкі. Наведайце дакументацыю па макету або нашы афіцыйныя прыклады , каб пачаць планаваць змесціва і кампаненты вашага сайта.
Важныя глабальныя
Bootstrap выкарыстоўвае некалькі важных глабальных стыляў і налад, пра якія вам трэба будзе ведаць пры яго выкарыстанні, і ўсе яны амаль выключна накіраваны на нармалізацыю крос-браўзерных стыляў. Давайце акунемся.
Тып дакумента HTML5
Bootstrap патрабуе выкарыстання дакумента HTML5. Без яго вы ўбачыце незвычайную няскончанасць стылю, але ўключэнне яго не павінна выклікаць істотных праблем.
Адаптыўны метатэг
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 , каб даведацца пра апошнія плёткі і дзіўныя музычныя відэа.