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 сілтемелері берілген.

Сипаттама	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 плагиндерін кеңейтуге арналған шарлау тақтасы
Мазмұн тақталарын ауыстырып қосуға арналған Tab плагині бар навигациялар
Көрсету, орналастыру және айналдыру әрекетіне арналған 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мәнді 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 блогын оқыңыз және жазылыңыз .
GitHub талқылауларымызды сұраңыз және зерттеңіз .
IRC жүйесіндегі басқа жүктеушілермен сөйлесіңіз. irc.libera.chatСерверде, арнада #bootstrap.
bootstrap-5Іске асыру анықтамасын Stack Overflow (белгіленген ) бөлімінен табуға болады .
Әзірлеушілер npm немесе ұқсас жеткізу механизмдері bootstrapарқылы тарату кезінде Bootstrap функционалдығын өзгертетін немесе қосатын бумалардағы кілт сөзді максималды анықтау үшін пайдалануы керек.

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