Bootstrap менен баштаңыз

Bootstrap - бул күчтүү, өзгөчөлүктөргө бай алдыңкы инструменттер. Прототиптен өндүрүшкө чейин бир нече мүнөттүн ичинде бардыгын куруңуз.

Бул бетте

Тез баштоо

Эч кандай куруу кадамдарын талап кылбастан, CDN аркылуу Bootstrap өндүрүшүнө даяр CSS жана JavaScript кошуу менен баштаңыз. Бул Bootstrap CodePen демосунда аны иш жүзүндө көрүңүз .

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>

Bootstrap'тин 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>

Сиз ошондой эле Popper жана биздин 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>

Салам дүйнө! Bootstrapped баракчаңызды көрүү үчүн каалаган браузериңизден баракты ачыңыз. Эми сиз Bootstrap менен өзүңүздүн макетиңизди түзүп , ондогон компоненттерди кошуп жана расмий мисалдарыбызды колдонуп баштасаңыз болот .

CDN шилтемелери

Маалымат катары, бул жерде биздин негизги CDN шилтемелер.

Description	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ди колдоно аласыз .

Кийинки кадамдар

Bootstrap колдонгон кээ бир маанилүү глобалдык чөйрө жөндөөлөрү жөнүндө бир аз көбүрөөк окуңуз .
Биздин мазмун бөлүмүндө Bootstrap'ке эмнелер камтылганы жана төмөндө JavaScript талап кылган компоненттердин тизмесин окуңуз.
Бир аз көбүрөөк күч керекпи? пакет менеджери аркылуу баштапкы файлдарды кошуу менен Bootstrap менен курууну карап көрөлү .
Bootstrap менен модуль катары колдонгуңуз <script type="module">келеби? Сураныч, биздин Bootstrap модулун колдонуу бөлүмүн караңыз.

JS компоненттери

Кызыгып жатасызбы, кайсы компоненттер биздин JavaScript менен Попперди талап кылат? Төмөнкү компоненттерди көрсөтүү шилтемесин басыңыз. Эгер сиз барактын жалпы структурасы жөнүндө такыр ишенбесеңиз, мисал бет шаблоны үчүн окууну улантыңыз.

JavaScript талап кылган компоненттерди көрсөтүү

Четтетүү үчүн эскертүүлөр
Которуу/күйгүзүүчү баскычтар жана белги кутучасы/радио функциялары
Бардык слайд жүрүм-турумдары, башкаруу элементтери жана индикаторлор үчүн карусель
Мазмундун көрүнүшүн өчүрүү/күйгүзүү үчүн жыйыштыруу
Көрсөтүү жана жайгаштыруу үчүн ачылуучу тизмелер (ошондой эле Popper талап кылынат )
Көрсөтүү, жайгаштыруу жана жылдыруу жүрүм-туруму үчүн модалдар
Жооптуу жүрүм-турумду ишке ашыруу үчүн Collapse жана Offcanvas плагиндерибизди кеңейтүү үчүн Navbar
Мазмун панелдерин которуштуруу үчүн Tab плагини менен Navs
Көрсөтүү, жайгаштыруу жана сыдыруу жүрүм-туруму үчүн Offcanvases
Жылдыруу жүрүм-туруму жана навигация жаңыртуулары үчүн Scrollspy
Көрсөтүү жана четке кагуу үчүн тосттор
Көрсөтүү жана жайгаштыруу үчүн кеңештер жана поповерлер (ошондой эле Popper талап кылынат )

Маанилүү глобалдар

Bootstrap бир нече маанилүү глобалдык стилдерди жана орнотууларды колдонот, алардын бардыгы дээрлик кайчылаш браузер стилдерин нормалдаштырууга багытталган. Келгиле, сууга түшөлү.

HTML5 документ түрү

Bootstrap HTML5 документ түрүн колдонууну талап кылат. Ансыз сиз кызыктуу жана толук эмес стилди көрөсүз.

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

Жооптуу мета теги

Bootstrap адегенде мобилдик телефон аркылуу иштелип чыккан , бул стратегияда биз адегенде мобилдик түзмөктөр үчүн кодду оптималдаштырып, андан кийин CSS медиа сурамдарын колдонуу менен зарыл болгон компоненттердин масштабын кеңейтебиз. Бардык түзмөктөр үчүн туура рендеринг жана тийүү масштабын камсыз кылуу үчүн, <head>.

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

Мунун мисалын тез баштоодон көрө аласыз .

Коробканын өлчөмү

CSS'те жөнөкөй өлчөмдү аныктоо үчүн биз глобалдык маанини box-sizingдан которуштурабыз . Бул элементтин акыркы эсептелген туурасына таасирин тийгизбесин камсыздайт, бирок Google Карталар жана Google Custom Search Engine сыяктуу кээ бир үчүнчү тараптын программалары менен көйгөйлөрдү жаратышы мүмкүн.content-boxborder-boxpadding

Сейрек учурларда, сиз аны жокко чыгарышыңыз керек, төмөнкүдөй нерсени колдонуңуз:

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

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

CSS Tricks дарегинен кутучанын модели жана өлчөмү жөнүндө көбүрөөк билиңиз .

Кайра жүктөө

Жакшыртылган кайчылаш браузер рендеринги үчүн биз Reboot функциясын браузерлер менен түзмөктөрдөгү карама-каршылыктарды оңдоо үчүн колдонобуз, ошол эле учурда жалпы HTML элементтерине бир аз көбүрөөк пикирди баштапкы абалга келтиребиз.

Коомчулук

Bootstrap'тин өнүгүшүнөн кабардар болуңуз жана бул пайдалуу ресурстар менен коомчулукка кайрылыңыз.

Оку жана The Official Bootstrap блогуна жазылыңыз .
GitHub талкууларыбызды сураңыз жана изилдеңиз .
IRCдеги башка жүктөөчүлөр менен баарлашыңыз. irc.libera.chatСерверде, каналда #bootstrap.
Ишке ашыруу боюнча жардамды Stack Overflow дарегинен тапса болот (белгиленген bootstrap-5).
Иштеп чыгуучулар ачкыч сөздү npm же ушуга окшош жеткирүү механизмдери bootstrapаркылуу бөлүштүрүүдө Bootstrap функциясын өзгөрткөн же кошумчалаган пакеттерде колдонушу керек.

Сиз ошондой эле акыркы ушактарды жана укмуштуудай музыкалык видеолорду көрүү үчүн Twitter'де @getbootstrap баракчасына жазылсаңыз болот.