in English

Кіріспе

JsDelivr және үлгінің бастапқы беті бар жауап беретін, мобильді бірінші сайттарды құруға арналған әлемдегі ең танымал негіз болып табылатын Bootstrap-пен бастаңыз.

Бұл бетте

Жылдам бастау

Жобаңызға Bootstrap жылдам қосқыңыз келе ме? JsDelivr, тегін ашық бастапқы CDN пайдаланыңыз. Пакет менеджерін пайдалану немесе бастапқы файлдарды жүктеп алу керек пе? Жүктеп алулар бетіне өтіңіз .

CSS

CSS-ті жүктеу үшін стильдер кестесін барлық басқа стиль кестелерінен бұрын көшіріп қойыңыз <link>.<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Біздің көптеген компоненттер жұмыс істеуі үшін JavaScript пайдалануды талап етеді. Атап айтқанда, олар біздің жеке JavaScript плагиндерін және Popper . Оларды қосу үшін беттеріңіздің соңына, жабу тегінің дәл алдына келесі сөздердің бірін<script> қойыңыз .</body>

Бума

Әрбір Bootstrap JavaScript плагинін және тәуелділікті екі топтамамыздың бірімен қосыңыз. Екеуі де bootstrap.bundle.jsжәне біздің кеңестер мен қалқымалы құралдар үшін Поппердіbootstrap.bundle.min.js қамтиды . Bootstrap бағдарламасына не кіретіні туралы қосымша ақпарат алу үшін біздің мазмұн бөлімін қараңыз.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Бөлек

Жеке сценарийлер шешімімен жұмыс істеуді шешсеңіз, алдымен Поппер келуі керек (егер сіз құралдар кеңестерін немесе қалқымалы бағдарламаларды пайдалансаңыз), содан кейін біздің JavaScript плагиндеріміз.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Модульдер

Егер сіз қолдансаңыз <script type="module">, модуль ретінде Bootstrap пайдалану бөлімін қараңыз.

Құрамдас бөліктер

Қандай құрамдас бөліктер біздің JavaScript пен Попперді қажет етеді деп ойлайсыз ба? Төмендегі компоненттерді көрсету сілтемесін басыңыз. Егер сіз жалпы бет құрылымына сенімді болмасаңыз, мысал бет үлгісін оқуды жалғастырыңыз.

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

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Келесі қадамдар үшін сайттың мазмұны мен құрамдастарын орналастыруды бастау үшін Орналасу құжаттарына немесе ресми мысалдарымызға кіріңіз.

Маңызды ғаламдықтар

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мәнді 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-5Іске асыру анықтамасын Stack Overflow (белгіленген ) бөлімінен табуға болады .
Әзірлеушілер npm немесе ұқсас жеткізу механизмдері bootstrapарқылы тарату кезінде Bootstrap функционалдығын өзгертетін немесе қосатын бумалардағы кілт сөзді максималды анықтау үшін пайдалануы керек.

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