Кіріспе

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-дің жұқа құрылымын қолданамыз , бірақ толық нұсқасына да қолдау көрсетіледі.

Оларды қосу үшін беттеріңіздің соңына, жабу тегінің дәл алдына келесі сөздердің бірін<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 және Popper қажет екені қызық? Төмендегі компоненттерді көрсету сілтемесін басыңыз. Бет құрылымына сенімді болмасаңыз, мысал бет үлгісін оқуды жалғастырыңыз.

JavaScript қажет құрамдастарды көрсету

Бас тарту туралы ескертулер
Күйлерді ауыстыру және құсбелгі/радио функциясы үшін түймелер
Барлық слайд әрекеттеріне, басқару элементтеріне және индикаторларына арналған карусель
Мазмұнның көріну мүмкіндігін ауыстыру үшін жию
Көрсету және орналастыру үшін ашылмалы тізімдер (сонымен қатар Popper қажет )
Көрсету, орналастыру және айналдыру әрекетіне арналған модальдар
Жауапты әрекетті жүзеге асыру үшін Collapse плагинін кеңейтуге арналған шарлау тақтасы
Айналдыру әрекеті мен шарлау жаңартулары үшін 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мәнді content-boxорнына ауыстырамыз border-box. Бұл paddingэлементтің соңғы есептелген еніне әсер етпейтінін қамтамасыз етеді, бірақ ол Google Maps және Google Custom Search Engine сияқты кейбір үшінші тарап бағдарламалық жасақтамасымен проблемалар тудыруы мүмкін.

Сирек жағдайларда оны қайта анықтау керек, келесідей нәрсені пайдаланыңыз:

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

Жоғарыдағы үзіндімен кірістірілген элементтер, соның ішінде ::beforeжәне арқылы жасалған мазмұн - барлығы сол үшін ::afterкөрсетілгенді мұра етеді .box-sizing.selector-for-some-widget

CSS Tricks сайтында қорап үлгісі мен өлшемдері туралы көбірек біліңіз .

Қайта жүктеу

Жақсартылған кросс-браузерлер көрсету үшін біз шолғыштар мен құрылғылардағы сәйкессіздіктерді түзету үшін Қайта жүктеуді қолданамыз, сонымен бірге жалпы HTML элементтеріне сәл көбірек пікірді қалпына келтіруді қамтамасыз етеміз.

Қауымдастық

Bootstrap әзірлемелерін жаңартып отырыңыз және осы пайдалы ресурстармен қауымдастыққа хабарласыңыз.

The Official Bootstrap блогын оқыңыз және жазылыңыз .
IRC жүйесіндегі басқа жүктеушілермен сөйлесіңіз. irc.libera.chatСерверде, арнада #bootstrap.
bootstrap-4Іске асыру анықтамасын Stack Overflow (белгіленген ) бөлімінен табуға болады .
Әзірлеушілер npm немесе ұқсас жеткізу тетіктері bootstrapарқылы тарату кезінде Bootstrap функционалдығын өзгертетін немесе қосатын бумалардағы кілт сөзді максималды анықталу үшін пайдалануы керек.

Сондай-ақ , соңғы өсек пен керемет музыкалық бейнелерді көру үшін Twitter-де @getbootstrap жазылуыңызға болады .

CSP және ендірілген SVG

Бірнеше Bootstrap құрамдастары браузерлер мен құрылғыларда компоненттерді дәйекті және оңай стильдеу үшін CSS-ге енгізілген SVG файлдарын қамтиды. Неғұрлым қатал CSP конфигурациялары бар ұйымдар үшін біз ендірілген SVG файлдарының барлық даналарын құжаттадық (олардың барлығы арқылы қолданылады background-image), осылайша сіз өз опцияларыңызды мұқият қарап шыға аласыз.

Жабу түймесі (ескертулерде және модальдарда қолданылады)
Пайдаланушы құсбелгілері мен радио түймелері
Пішін ауыстырғыштары
Пішінді тексеру белгішелері
Арнайы таңдау мәзірлері
Карусельді басқару элементтері
Шарлау тақтасының ауыспалы түймелері

Қауымдастық әңгімесіне негізделген , оны жеке код базасында шешудің кейбір опциялары URL мекенжайларын жергілікті орналастырылған активтермен ауыстыруды, кескіндерді жоюды және кірістірілген кескіндерді пайдалануды (барлық құрамдастарда мүмкін емес) және CSP өзгертуді қамтиды. Біздің ұсынысымыз - өзіңіздің қауіпсіздік саясатыңызды мұқият қарап шығу және қажет болса, алға қарай ең жақсы жолды таңдау.