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>сөздерді беттеріңіздің соңына, жабу тегіне дейін қойыңыз . </body>Алдымен jQuery, содан кейін Popper.js, содан кейін JavaScript плагиндері болуы керек.

Біз jQuery-дің жұқа құрылымын қолданамыз , бірақ толық нұсқасына да қолдау көрсетіледі.

<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 плагинін кеңейтуге арналған шарлау тақтасы
  • Көрсету және орналастыру үшін құралдар кеңестері мен қалқымалы құралдар (сонымен қатар 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мәнді 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 әзірлемелерін жаңартып отырыңыз және осы пайдалы ресурстармен қауымдастыққа хабарласыңыз.

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

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