Кереш сүз

JsDelivr һәм шаблон стартер бите белән җаваплы, мобиль беренче сайтлар төзү өчен дөньяда иң популяр булган Bootstrap белән башлап җибәрегез.

Тиз башлау

Сезнең проектка Bootstrapны тиз өстәргә телисезме? JsDelivr кулланыгыз, бушлай ачык чыганак CDN. Пакет менеджерын кулланып яки чыганак файлларын йөкләргә кирәкме? Йөкләү битенә керегез .

CSS

Безнең CSS-ны йөкләү өчен стиль таблицасын бүтән стиль таблицаларына <link>күчерегез .<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Күпчелек компонентларыбыз эшләү өчен JavaScript куллануны таләп итә. Аерым алганда, аларга jQuery , Popper һәм үзебезнең JavaScript плагиннары кирәк. Без jQuery-ның нечкә төзелешен кулланабыз , ләкин тулы версия дә ярдәм итә.

Аларны эшләтеп җибәрү өчен, түбәндәге битләрнең берсен<script> битләрегезнең ахырына урнаштырыгыз </body>. jQuery башта килергә тиеш, аннары Поппер, аннары безнең JavaScript плагиннары.

Тапшыру

Boәрбер Bootstrap JavaScript плагинын безнең ике туплагычның берсе белән кертегез. Икесе дә , безнең кораллар bootstrap.bundle.jsһәм поповерлар өчен Попперныbootstrap.bundle.min.js кертәләр , ләкин jQuery түгел . Башта jQuery кертегез, аннары Bootstrap JavaScript тупламасы. Bootstrap'ка кертелгәннәр турында күбрәк мәгълүмат алу өчен зинһар, безнең эчтәлек бүлеген карагыз.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Аерым

Аерым сценарийлар чишелеше белән барырга уйласагыз, Поппер башта килергә тиеш (әгәр сез инструментлар яки поповерлар кулланасыз), аннары безнең JavaScript плагиннары.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Компонентлар

Кайсы компонентлар jQuery, безнең JavaScript һәм Popper таләп итә? Түбәндәге шоу компонентлары сылтамасына басыгыз. Әгәр дә сез бит структурасы турында белмисез икән, бит шаблонын укуны дәвам итегез.

JavaScript таләп итүче компонентларны күрсәт

Эштән азат итү турында хәбәрләр
Штатларны алыштыру төймәләре һәм рамка / радио функциональлеге
Барлык слайд тәртибе, контроль, күрсәткечләр өчен карусель
Эчтәлекнең күренүчәнлеген алыштыру өчен таркалу
Күрсәтү һәм урнаштыру өчен тамчылар (шулай ук Поппер кирәк )
Тәртипне күрсәтү, урнаштыру, әйләндерү тәртибе
Respаваплы тәртипне тормышка ашыру өчен безнең Collapse плагинын киңәйтү өчен Navbar
Scrollspy әйләндерү тәртибе һәм навигация яңартулары өчен
Күрсәтү һәм урнаштыру өчен кораллар һәм поповерлар (шулай ук Поппер кирәк )

Стартер шаблоны

Соңгы дизайн һәм үсеш стандартлары белән битләрегезне урнаштырыгыз. Димәк, HTML5 доктипын куллану һәм дөрес җаваплы тәртип өчен визута мета-тегын кертү дигән сүз. Барысын бергә туплагыз, битләрегез шулай булырга тиеш:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Бу битнең гомуми таләпләре өчен кирәк. Сайтыгызның эчтәлеген һәм компонентларын урнаштыра башлау өчен Layout документларына яки безнең рәсми мисалларга керегез .

Мөһим глобаллар

Bootstrap бик мөһим глобаль стильләр һәм көйләүләр куллана, сез аны кулланганда белергә тиеш, аларның барысы да диярлек кросс браузер стильләрен нормалаштыруга юнәлтелгән. Әйдәгез чумып алыйк.

HTML5 доктипы

Bootstrap HTML5 доктипын куллануны таләп итә. Ансыз, сез кызыклы тулы булмаган стилизацияне күрерсез, ләкин аны кертеп, бик зур тыгызлык тудырырга тиеш түгел.

<!doctype html>
<html lang="en">
  ...
</html>

Onsаваплы мета-тег

Bootstrap башта мобиль эшләнде , без мобиль җайланмалар өчен кодны оптимальләштерәбез, аннары CSS медиа соравы ярдәмендә компонентларны киңәйтәбез. Барлык җайланмалар өчен дөрес күрсәтүне һәм сенсорны зурайтуны тәэмин итү өчен , сезнең өчен җаваплы күренеш мета-тегын өстәгез <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Сез моның мисалын стартер шаблонында күрә аласыз .

Бокс-размер

CSS-та турыдан-туры зурлау өчен без глобаль box-sizingкыйммәтне content-boxкүчәбез border-box. Бу paddingэлементның соңгы исәпләнгән киңлегенә тәэсир итмәвен тәэмин итә, ләкин ул Google Карталар һәм Google Custom Search Engine кебек өченче як программаларында проблемалар тудырырга мөмкин.

Сирәк очракта сез аны кире кагарга тиеш, түбәндәге кебек әйберләр кулланыгыз:

.selector-for-some-widget {
  box-sizing: content-box;
}

Aboveгарыдагы фрагмент белән, ояланган элементлар, шул исәптән барлыкка килгән эчтәлекне ::beforeдә кертеп, барысы да моның өчен ::afterкүрсәтелгәнне мирас итеп алалар .box-sizing.selector-for-some-widget

CSS Tricks-та бокс моделе һәм зурлыгы турында күбрәк белү .

Яңарту

Яхшыртылган кросс-браузерны күрсәтү өчен, без Reboot кулланабыз , браузерлар һәм җайланмалардагы туры килмәүләрне төзәтү өчен, шул ук вакытта гомуми HTML элементларына бераз күбрәк фикерле яңадан торгызу.

Communityәмгыять

Bootstrap үсеше турында яңартып торыгыз һәм бу файдалы ресурслар белән җәмгыятькә мөрәҗәгать итегез.

Рәсми Bootstrap блогына укыгыз һәм язылыгыз .
IRCдагы Bootstrappers белән аралашу. Серверда irc.libera.chat, #bootstrapканалда.
Тикшерү ярдәме Стек ташкыннан табылырга мөмкин (билгеле bootstrap-4).
Эшләүчеләр пакетларда ачкыч сүз кулланырга тиеш, алар npmbootstrap аша таратканда яки максималь ачылу өчен охшаш тапшыру механизмнары аша Bootstrap функциясен үзгәртә яки өсти.

Соңгы гайбәтләр һәм искиткеч музыкаль видеолар өчен сез шулай ук Твиттерда @getbootstrap артыннан бара аласыз.

CSPлар һәм урнаштырылган SVGлар

Берничә Bootstrap компонентлары безнең CSS эчендә урнаштырылган SVG-ны үз эченә ала, браузерлар һәм җайланмалар аша стиль компонентларын эзлекле һәм җиңел. Катлаулы CSP конфигурациясе булган оешмалар өчен без урнаштырылган SVG'ларның барлык очракларын документлаштырдык (аларның барысы да кулланыла background-image), шуңа күрә сез үз вариантларыгызны җентекләп тикшерә аласыз.

Ябу төймәсе (хәбәрләр һәм модальләрдә кулланыла)
Махсус пунктлар һәм радио төймәләре
Форма ачкычлары
Форма тикшерү иконалары
Сайлау менюлары
Карусель контроле
Навбар төймәләрен алыштыру

Communityәмгыять сөйләшүенә нигезләнеп, моны үзегезнең код базасында чишү өчен кайбер вариантлар URL-ны җирле урнашкан активлар белән алыштыру, рәсемнәрне бетерү һәм эчке рәсемнәрне куллану (барлык компонентларда мөмкин түгел) һәм CSP-ны үзгәртү. Безнең рекомендация - үзегезнең куркынычсызлык политикасын җентекләп карау һәм кирәк булса алга таба иң яхшы юлны сайлау.