Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

Bootstrap белән башлап җибәрегез

Bootstrap - көчле, функцияле фронталь кораллар җыелмасы. Прототиптан алып производствога кадәр берничә минут эчендә теләсә нәрсә төзегез.

Бу биттә

Тиз башлау

Bootstrap производствосына әзер CSS һәм JavaScriptны CDN аша кертүдән башлап җибәрегез, бернинди төзү адымнары кирәкми. Бу Bootstrap CodePen демо белән практикада карагыз .


  1. index.htmlПроект тамырында яңа файл ясагыз . Мобиль җайланмаларда дөрес җаваплы тәртип<meta name="viewport"> өчен тегны кертегез .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Bootstrap's CSS һәм JS кертегез. Тегны безнең CSS өчен урнаштырыгыз, һәм <link>безнең JavaScript бәйләнеше өчен тегны ябу алдыннан (тамчыларны, попперларны һәм корал күрсәтмәләрен урнаштыру өчен Попперны да кертеп) . Безнең CDN сылтамалары турында күбрәк белү .<head><script></body>

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Сез шулай ук ​​Поппер һәм безнең JSны аерым кертә аласыз. Әгәр дә тамчыларны, поповерларны яки корал күрсәтмәләрен кулланырга уйламасагыз, Попперны кертмичә, кайбер килобайтларны саклагыз.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Сәлам, Дөнья! Сезнең Bootstrapped битегезне карау өчен браузерыгызда битне ачыгыз. Хәзер сез үзегезнең макетыгызны ясап, дистәләгән компонентлар өстәп һәм безнең рәсми мисалларны кулланып Bootstrap белән төзи башлый аласыз .

Белешмә буларак, монда безнең төп CDN сылтамалары.

Тасвирлау URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Сез шулай ук ​​Эчтәлек битендә күрсәтелгән өстәмә корылмаларны алу өчен CDN куллана аласыз .

Киләсе адымнар

JS компонентлары

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

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

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

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

HTML5 доктипы

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Моның мисалын тиз эштә күрә аласыз .

Бокс-размер

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 блогына укыгыз һәм язылыгыз .
  • Безнең GitHub дискуссияләрен сорагыз .
  • IRCдагы Bootstrappers белән аралашу. Серверда irc.libera.chat, #bootstrapканалда.
  • Тикшерү ярдәме Стек ташкыннан табылырга мөмкин (билгеле bootstrap-5).
  • Эшләүчеләр пакетларда ачкыч сүз кулланырга тиеш, алар npmbootstrap аша таратканда яки максималь ачылу өчен охшаш тапшыру механизмнары аша Bootstrap функциясен үзгәртә яки өсти.

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