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>s-ды баракчаларыңыздын аягына, жабуу </body>тегинин алдына коюңуз. Биринчи jQuery, андан кийин Popper.js, анан биздин JavaScript плагиндерибиз келиши керек.

Биз jQuery'дин slim build'ин колдонобуз , бирок толук версиясы да колдоого алынат.

<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 талап кылынат )
  • Көрсөтүү, жайгаштыруу жана жылдыруу жүрүм-туруму үчүн модалдар
  • Жооптуу жүрүм-турумду ишке ашыруу үчүн 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>

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

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

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

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

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

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'тин өнүгүшүнөн кабардар болуңуз жана бул пайдалуу ресурстар менен коомчулукка кайрылыңыз.

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

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