Муқаддима

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

Оғози зуд

Мехоҳед зуд ба лоиҳаи худ Bootstrap илова кунед? jsDelivr, CDN-и ройгони кушодаро истифода баред. Бо истифода аз мудири баста ё зеркашии файлҳои сарчашма? Ба саҳифаи зеркашиҳо равед .

CSS

Барои бор кардани CSS-и мо ҷадвали сабкро пеш аз ҳама <link>варақаҳои сабки худ нусхабардорӣ кунед.<head>

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

JS

Бисёре аз ҷузъҳои мо барои кор кардан истифодаи JavaScript-ро талаб мекунанд. Махсусан, онҳо jQuery , Popper ва плагинҳои JavaScript-и моро талаб мекунанд. Мо сохтори slim-и jQuery -ро истифода мебарем , аммо версияи пурра низ дастгирӣ мешавад.

Яке аз сҳои зеринро <script>дар охири саҳифаҳои худ, рост пеш аз </body>барчаспҳои пӯшида ҷойгир кунед, то онҳоро фаъол созед. jQuery бояд аввал биёяд, баъд Поппер ва баъд плагинҳои JavaScript-и мо.

баста

Ҳар як плагини Bootstrap JavaScript-ро бо яке аз ду бастаи мо дохил кунед. Ҳарду bootstrap.bundle.jsва Попперро барои маслиҳатҳои асбобҳо ва поповерҳои мо дар бар мегиранд, аммо bootstrap.bundle.min.jsна jQuery . Аввал jQuery, баъд бастаи JavaScript Bootstrap -ро дохил кунед. Барои маълумоти бештар дар бораи он чизе, ки ба Bootstrap дохил шудааст, лутфан ба бахши мундариҷаи мо нигаред .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Алоҳида

Агар шумо қарор диҳед, ки бо ҳалли скриптҳои алоҳида равед, Поппер бояд аввал биёяд (агар шумо маслиҳатҳои асбобҳо ё поповҳоро истифода баред) ва сипас плагинҳои JavaScript-и мо.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Компонентхо

Аҷиб аст, ки кадом ҷузъҳо ба таври возеҳ jQuery, JavaScript-и мо ва Попперро талаб мекунанд? Истиноди намоиши ҷузъҳои зерро клик кунед. Агар шумо дар бораи сохтори саҳифа боварӣ надоред, барои намунаи шаблон саҳифа хонданро давом диҳед.

Намоиши ҷузъҳое, ки JavaScript-ро талаб мекунанд

Огоҳӣ барои бекор кардан
Тугмаҳо барои иваз кардани ҳолат ва қуттии қайдкунӣ/функсияҳои радио
Карусел барои ҳама рафтори слайдҳо, назоратҳо ва нишондиҳандаҳо
Барои иваз кардани намуди зоҳирии мӯҳтаво
Намоишҳои афтанда барои намоиш ва ҷойгиркунӣ (инчунин Popper талаб мекунад )
Модалҳо барои намоиш, ҷойгиркунӣ ва ҳаракати ҳаракат
Навбар барои васеъ кардани плагини Collapse мо барои амалисозии рафтори ҷавобгӯ
Scrollspy барои рафтори ҳаракат ва навсозиҳои паймоиш
Маслиҳатҳо ва поповҳо барои намоиш ва ҷойгиркунӣ (инчунин Popper талаб мекунад )

Шаблони ибтидоӣ

Боварӣ ҳосил кунед, ки саҳифаҳои худро бо стандартҳои охирини тарроҳӣ ва рушд насб кунед. Ин маънои онро дорад, ки истифодаи ҳуҷҷати 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 бохабар бошед ва бо ин захираҳои муфид ба ҷомеа муроҷиат кунед.

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

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

CSPs ва SVG-ҳои воридшуда

Якчанд ҷузъҳои Bootstrap SVG-ҳои дарунсохташударо дар CSS-и мо дар бар мегиранд, то ҷузъҳоро пайваста ва ба осонӣ дар байни браузерҳо ва дастгоҳҳо услуб кунанд. Барои созмонҳое , ки конфигуратсияҳои сахттари CSP доранд , мо ҳама намунаҳои SVG-ҳои дарунсохтаи худро ҳуҷҷатгузорӣ кардем (ҳамаи онҳо тавассути background-image.

Тугмаи пӯшида (дар огоҳиҳо ва модальҳо истифода мешавад)
Қуттиҳои фармоишӣ ва тугмаҳои радио
Калидҳои форма
Нишонаҳои тасдиқи форма
Менюҳои интихоби фармоишӣ
Назорати карусел
Тугмаҳои ивазкунандаи Navbar

Бар асоси сӯҳбати ҷомеа , баъзе имконоти ҳалли ин масъала дар пойгоҳи коди шахсии худ иваз кардани URL-ҳо бо дороиҳои дар маҳал ҷойгиршуда, нест кардани тасвирҳо ва истифодаи тасвирҳои дохилӣ (на дар ҳама ҷузъҳо имконнопазир аст) ва тағир додани CSP-и худро дар бар мегиранд. Тавсияи мо ин аст, ки сиёсатҳои амниятии худро бодиққат аз назар гузаронед ва дар ҳолати зарурӣ роҳи беҳтарини пешрафтро муайян кунед.