Source

Кереш сүз

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

Тиз башлау

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

CSS

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

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

JS

Күпчелек компонентларыбыз эшләү өчен JavaScript куллануны таләп итә. Аерым алганда, аларга jQuery , Popper.js һәм үзебезнең JavaScript плагиннары кирәк. Аларны эшләтеп җибәрү өчен , түбәндәге битләрне ябу теге <script>алдыннан урнаштырыгыз . </body>jQuery башта килергә тиеш, аннары Popper.js, аннары безнең JavaScript плагиннары.

Без jQuery-ның нечкә төзелешен кулланабыз , ләкин тулы версия дә ярдәм итә.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

JavaScript таләп итүче компонентларны күрсәт
  • Эштән азат итү турында хәбәрләр
  • Штатларны алыштыру төймәләре һәм рамка / радио функциональлеге
  • Барлык слайд тәртибе, контроль, күрсәткечләр өчен карусель
  • Эчтәлекнең күренүчәнлеген алыштыру өчен таркалу
  • Күрсәтү һәм урнаштыру өчен тамчылар (шулай ук ​​Popper.js кирәк )
  • Тәртипне күрсәтү, урнаштыру, әйләндерү тәртибе
  • Respаваплы тәртипне тормышка ашыру өчен безнең Collapse плагинын киңәйтү өчен Navbar
  • Күрсәтү һәм урнаштыру өчен кораллар һәм поповерлар (шулай ук ​​Popper.js кирәк )
  • 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 үсеше турында яңартып торыгыз һәм бу файдалы ресурслар белән җәмгыятькә мөрәҗәгать итегез.

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

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