Source

Муқаддима

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

Оғози зуд

Мехоҳед зуд ба лоиҳаи худ 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-и мо.

Мо сохтори slim-и 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">

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

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

box-sizingБарои осонтар кардани андоза дар CSS, мо арзиши глобалиро content-boxаз border-box. Ин кафолат медиҳад padding, ки ба паҳнои ниҳоии ҳисобшудаи элемент таъсир намерасонад, аммо он метавонад бо баъзе нармафзори тарафи сеюм, ба монанди Google Maps ва Engine Search Custom Google мушкилот эҷод кунад.

Дар ҳолатҳои нодир ба шумо лозим аст, ки онро бекор кунед, чизе монанди зеринро истифода баред:

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

Бо порчаи дар боло зикршуда, унсурҳои лона гузошташуда, аз ҷумла мундариҷаи тавассути ::beforeва тавлидшуда, ҳама чизҳои барои он ::afterмуайяншударо мерос мегиранд.box-sizing.selector-for-some-widget

Дар бораи модели қуттӣ ва андозагирӣ дар CSS Tricks маълумоти бештар гиред .

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

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

Ҷамъият

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

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

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