Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Муқаддима

Бо Bootstrap, чаҳорчӯбаи маъмултарин дар ҷаҳон барои сохтани сайтҳои аввалини ҷавобгӯ ва мобилӣ бо jsDelivr ва саҳифаи ибтидоии шаблонро оғоз кунед.

Дар ин саҳифа

Оғози зуд

Мехоҳед зуд ба лоиҳаи худ 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>барчаспҳои пӯшида ҷойгир кунед, то онҳоро фаъол созед.

баста

Ҳар як плагини JavaScript Bootstrap ва вобастагиро бо яке аз ду бастаи мо дохил кунед. Ҳарду 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 ва Popper-и моро талаб мекунанд? Истиноди намоиши ҷузъҳои зерро клик кунед. Агар шумо дар бораи сохтори умумии саҳифа мутмаъин набошед, барои намунаи саҳифа хонданро давом диҳед.

Намоиши ҷузъҳое, ки 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>

Барои қадамҳои оянда, ба ҳуҷҷатҳои Layout ё намунаҳои расмии мо муроҷиат кунед, то мундариҷа ва ҷузъҳои сайти худро оғоз кунед.

Глобалҳои муҳим

Bootstrap як қатор услубҳо ва танзимоти муҳими глобалиро истифода мебарад, ки шумо бояд ҳангоми истифодаи он огоҳ бошед, ки ҳамаи онҳо қариб танҳо барои ба эътидол овардани услубҳои браузер нигаронида шудаанд. Биёед ғарқ шавем.

Ҳуҷҷати HTML5

Bootstrap истифодаи ҳуҷҷати HTML5-ро талаб мекунад. Бе он, шумо як ороиши нопурраро хоҳед дид, аммо аз он ҷумла он набояд боиси хичоқҳои назаррас гардад.

<!doctype html>
<html lang="en">
  ...
</html>

Мета теги ҷавобӣ

Bootstrap аввал мобилӣ таҳия шудааст , стратегияест, ки дар он мо аввал кодро барои дастгоҳҳои мобилӣ оптимизатсия мекунем ва сипас ҷузъҳоро дар ҳолати зарурӣ бо истифода аз дархостҳои медиаи CSS васеъ мекунем. Барои таъмин намудани намоиши дуруст ва масштабкунии ламс барои ҳама дастгоҳҳо, мета тегҳои ҷавобгӯи намоишро ба <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Шумо метавонед як мисоли инро дар қолаби оғозёбӣ бинед .

Андозаи қуттӣ

box-sizingБарои осонтар кардани андоза дар CSS, мо арзиши глобалиро 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 маълумоти бештар гиред .

Аз нав оғоз кунед

Барои беҳтар кардани намоиши байнибраузерҳо, мо Reboot - ро барои ислоҳи номувофиқатӣ дар байни браузерҳо ва дастгоҳҳо истифода мебарем ва ҳамзамон ба ҷузъҳои маъмули HTML бозсозии каме бештар бо ақидаро таъмин мекунем.

Ҷамъият

Дар бораи рушди Bootstrap бохабар бошед ва бо ин захираҳои муфид ба ҷомеа муроҷиат кунед.

  • Хонед ва ба The Official Bootstrap Blog обуна шавед .
  • Бо ҳамкорони Bootstrapper дар IRC сӯҳбат кунед. Дар irc.libera.chatсервер, дар #bootstrapканал.
  • Кӯмаки татбиқро дар Stack Overflow пайдо кардан мумкин аст (tagged bootstrap-5).
  • Таҳиягарон бояд калимаи калидиро bootstrapдар бастаҳое истифода баранд, ки функсияҳои Bootstrapро тағир медиҳанд ё илова мекунанд, ҳангоми паҳнкунӣ тавассути npm ё механизмҳои шабеҳи интиқол барои дарёфти ҳадди аксар.

Шумо инчунин метавонед @getbootstrap-ро дар Twitter барои ғайбатҳои навтарин ва видеоҳои мусиқии аҷиб пайгирӣ кунед.