Бо Bootstrap оғоз кунед

Bootstrap як абзори пуриқтидори фарогир ва дорои хусусиятҳост. Ҳама чизро аз прототип то истеҳсолот дар дақиқаҳо созед.

Дар ин саҳифа

Оғози зуд

Бо дохил кардани CSS ва JavaScript-и истеҳсолии Bootstrap тавассути CDN бидуни ниёз ба қадамҳои сохтмон оғоз кунед. Онро дар амал бо ин намоиши 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>

CSS ва JS-и Bootstrap-ро дар бар гиред. Тегро <link>дар <head>CSS-и мо ва <script>тегро барои бастаи JavaScript-и мо (аз ҷумла Поппер барои ҷойгиркунии афтандаҳо, попперҳо ва маслиҳатҳои асбобҳо) пеш аз пӯшидани </body>. Дар бораи истинодҳои CDN-и мо бештар маълумот гиред .

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

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

Огоҳӣ барои бекор кардан
Тугмаҳо барои иваз кардани ҳолат ва қуттии қайдкунӣ/функсияҳои радио
Карусел барои ҳама рафтори слайдҳо, назоратҳо ва нишондиҳандаҳо
Барои иваз кардани намуди зоҳирии мӯҳтаво
Намоишҳои афтанда барои намоиш ва ҷойгиркунӣ (инчунин Popper талаб мекунад )
Модалҳо барои намоиш, ҷойгиркунӣ ва ҳаракати ҳаракат
Навбар барои васеъ кардани плагинҳои Collapse ва Offcanvas мо барои татбиқи рафтори ҷавобгӯ
Navs бо плагини 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">

Шумо метавонед мисоли инро дар амал дар оғози зуд бинед .

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

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 обуна шавед .
Муҳокимаҳои GitHub-и моро пурсед ва омӯзед .
Бо ҳамкорони Bootstrapper дар IRC сӯҳбат кунед. Дар irc.libera.chatсервер, дар #bootstrapканал.
Кӯмаки татбиқро дар Stack Overflow пайдо кардан мумкин аст (tagged bootstrap-5).
Таҳиягарон бояд калимаи калидиро bootstrapдар бастаҳое истифода баранд, ки функсияҳои Bootstrapро тағир медиҳанд ё илова мекунанд, ҳангоми паҳнкунӣ тавассути npm ё механизмҳои шабеҳи интиқол барои дарёфти ҳадди аксар.

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