Киришүү

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'дин slim build'ин колдонобуз , бирок толук версиясы да колдоого алынат.

Аларды иштетүү үчүн , төмөнкүлөрдүн бирин<script> баракчаларыңыздын аягына, жабуу </body>тегинин алдына коюңуз. Биринчи jQuery келиши керек, андан кийин Поппер, анан биздин JavaScript плагиндерибиз.

таңгак

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

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

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

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

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

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

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

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

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

CSPs жана камтылган SVGs

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

Жабуу баскычы (эскертүүлөрдө жана модальдарда колдонулат)
Ыңгайлаштырылган кутучалар жана радио баскычтар
Форма которгучтары
Форманы текшерүү сүрөтчөлөрү
Ыңгайлаштырылган тандоо менюлары
Карусель башкаруулары
Navbar которуштуруу баскычтары

Коомчулуктун сүйлөшүүсүнө таянып , муну өзүңүздүн коддук базаңызда чечүүнүн айрым варианттары URL'дерди жергиликтүү жайгаштырылган активдер менен алмаштыруу, сүрөттөрдү алып салуу жана ички сүрөттөрдү колдонуу (бардык компоненттерде мүмкүн эмес) жана CSPди өзгөртүү кирет. Биздин сунуш - өзүңүздүн коопсуздук саясаттарыңызды кылдаттык менен карап чыгуу жана зарыл болсо, алдыга карай эң жакшы жолду тандоо.