Bootstrap xs sm md lg: Grid system Β· Bootstrap

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Bootstrap Grid: освоСниС Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… свойств Flexbox

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я познакомлю вас с ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ классами Bootstrap CSS для построСния ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ систСмы сСтки Bootstrap.

Bootstrap 4 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Flexbox Π² качСствС основы для своСй сСточной систСмы. Π― объясню свойства CSS Flexbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅ΠΆΠ°Ρ‚ Π² основС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½ΠΎΠ²ΠΎΠΉ сСтки, ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡŽ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ слуТСбныС классы Flex Bootstrap, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ быстро ΠΈ Π±Π΅Π·Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Flexbox?

Π”Π°Π²Π°ΠΉΡ‚Π΅ сначала прСдставим Flexbox . Он ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈ являСтся ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ систСмой ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² CSS, которая позволяСт Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для динамичСских ΠΈΠ»ΠΈ нСизвСстных Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана. (ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ flex ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ своих Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов для Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ областям просмотра.)

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Flexbox, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π½Π°Π±ΠΎΡ€ свойств CSS, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… для этой Π·Π°Π΄Π°Ρ‡ΠΈ.

Bootstrap ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ созданиС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π° основС Flexbox, прСдоставляя Π½Π°Π±ΠΎΡ€ классов-ΠΎΠ±ΠΎΠ»ΠΎΡ‡Π΅ΠΊ ΠΏΠΎΠ²Π΅Ρ€Ρ… свойств Flexbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ просто ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ для достиТСния ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² систСму Bootstrap Grid

Π“Ρ€ΠΈΠ΄-систСмы ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌ элСмСнтом структуры CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ созданиС слоТных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π±Π΅Π· ΠΌΠΎΡ‰Π½ΠΎΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΎΠΉ Π³Ρ€ΠΈΠ΄-систСмы ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡƒΠ³Π°ΡŽΡ‰Π΅ΠΉ Π·Π°Π΄Π°Ρ‡Π΅ΠΉ.

Π‘Ρ€Π΅Π΄ΠΈ Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ послСднСй систСмы сСтки Bootstrap Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ xl прСрывания сСтки xl (ΠΎΡ‡Π΅Π½ΡŒ большой), ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ экрана, ΠΈ использованиС Flexbox вмСсто ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов Π² качСствС Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ классы систСмы Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ΅Ρ‚ΠΎΡ‡Π½ΡƒΡŽ систСму Bootstrap, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² нСсколько классов Bootstrap: .row , .row ΠΈ .col-*-* . (ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ * Π² .col-*-* Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Π½Π΅Π½ спСцификатором Ρ‚ΠΎΡ‡ΠΊΠΈ останова, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ xs, sm, md, lg, xl Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ * Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° столбца. Π‘ΡƒΠΌΠΌΠ° всСх столбцы Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π²Π½Ρ‹ 12.)

Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ посмотрим Π½Π° основныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ сСтки Bootstrap.

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ являСтся внСшнСй ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΎΠΉ для сСтки. Π­Ρ‚ΠΎ div ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ класс .container для фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ .container-fluid для 100% ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

Π‘Ρ‚Ρ€ΠΎΠΊΠ°

Π‘Ρ‚Ρ€ΠΎΠΊΠ° слуТит логичСским ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ для столбцов.

ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°

Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† – это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π±Π»ΠΎΠΊ Π² сСткС. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ Π² ряд.

БистСма сСтки Bootstrap прСдоставляСт ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы столбцов:

  • .col-xs-* : ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранов ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 576 пиксСлСй
  • .col-sm-* : ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, Ρ€Π°Π²Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°ΡŽΡ‰Π΅ΠΉ 576 пиксСлСй
  • .col-md-* : ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для срСдних экранов с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ> = 768 пиксСлСй
  • .col-lg-* : ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ> = 992px
  • . col-xl-* : ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ€Π°Π²Π½Π° ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 1200 пиксСлСй .

Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ нСсколько классов, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана; просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс с наимСньшСй Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ останова. Π’Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, вмСсто

.col-sm-6 ΠΈ .col-md-6 Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ .col-sm-6 .

Π‘Ρ…Π΅ΠΌΡ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΎΡ‡Π½ΠΎΠΉ сСтки с Flexbox ΠΏΡ€ΠΎΡ‚ΠΈΠ² Floats

Благодаря Flexbox Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΡΡ‚ΠΈΠ³Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΡ… Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠ°ΠΊ столбцы ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высоты ΠΈΠ»ΠΈ столбцы ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‡Π΅Π³ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ…Π°ΠΊΠΎΠ² CSS.

CSS-ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ float ΠΈ clearfix для создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π±Ρ‹Π»ΠΈ срСди Ρ‚Π°ΠΊΠΈΡ… Ρ…Π°ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ затрудняли созданиС ΠΈ ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ слоТных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

НапримСр, рассмотрим ΠΌΠ°ΠΊΠ΅Ρ‚ с двумя столбцами. Если Π²Ρ‹ создадитС этот ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bootstrap 3, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

Если Π²Ρ‹ создаСтС Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ с Bootstrap 4, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ:

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bootstrap 4 ΠΈ Π΅Π³ΠΎ сСтки Π½Π° основС flexbox Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ рСалистичный столбСц (ΠΊΠ°ΠΊ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅), ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ столбцы Π² ΠΎΠ΄Π½ΠΎΠΉ строкС Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ высоту.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ столбцов ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹. Благодаря Flexbox Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ доступноС пространство ΠΌΠ΅ΠΆΠ΄Ρƒ нСсколькими столбцами Π² ΠΎΠ΄Π½ΠΎΠΉ строкС. Если Π²Ρ‹ создаСтС сСтку с нСсколькими столбцами Π±Π΅Π· указания ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца (Ρ‚.Π΅. с использованиСм классов .col-* ), доступноС пространство Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΈ ΠΏΠΎΡ€ΠΎΠ²Π½Ρƒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ этими столбцами.

Π’ΠΎΡ‚ простой ΠΈ быстрый ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<div> <div> .col </div> <div> .col </div> <div> .col </div> <div> .col </div> </div> 

Π§Π΅Ρ‚Ρ‹Ρ€Π΅ экзСмпляра .col-sm Π±ΡƒΠ΄ΡƒΡ‚ автоматичСски ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 25% ΠΎΡ‚ малСнькой Ρ‚ΠΎΡ‡ΠΊΠΈ останова ΠΈ Π²Ρ‹ΡˆΠ΅.

Π‘ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ стилСм, Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅:

Flexbox с автоматичСскими полями

Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ Flexbox с автоматичСскими полями ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ интСрСсным Ρ‚Ρ€ΡŽΠΊΠ°ΠΌ.

НапримСр, посмотритС Π½Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ элСмСнты справа ΠΎΡ‚ элСмСнта, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊ . mr-auto класс Bootstrap .mr-auto , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ margin-right: auto; Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ CSS, ΠΈΠ»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ помСститС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты слСва ΠΎΡ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ класса Bootstrap .ml-auto ( margin-left: auto; Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ CSS). Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ элСмСнта с .mr-auto ΠΈΠ»ΠΈ .ml-auto Π² .mr-auto ΠΈΠ»ΠΈ .mr-auto Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ соотвСтствСнно, Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов – Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ этого Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° Π»ΠΈΠ±ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π»ΠΈΠ±ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ повСдСния, пСрСмСщая flex-элСмСнты Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· (Π° Π½Π΅ Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ), Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ mb-auto ( margin-bottom: auto; ) ΠΈ mt-auto ( margin-top: auto; ), установитС flex-direction для column ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ класс align-items-(start|end) .

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Flexbox для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с классами слуТСбной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Bootstrap Flex

Bootstrap 4 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ классы ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ flex , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ эзотСричСскими Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π» ΠΎ Flexbox ΠΈΠ»ΠΈ Π½Π΅ Π·Π½Π°Π΅Ρ‚, ΠΊΠ°ΠΊ Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ flex ΠΈ элСмСнты flex.

НапримСр, Bootstrap Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ примСняСт свойство display:flex ΠΊ своим элСмСнтам ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° сСтки. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Bootstrap позволяСт ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ любой HTML-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π² Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, просто ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² .d-flex ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ элСмСнту.

Π’Π°ΠΊΠΆΠ΅ доступны .d-sm-flex классы, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ .d-sm-flex .d-md-flex ΠΈ Ρ‚. Π”.

Однако, Ссли Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ влияСт Π½Π° Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты, использованиС Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… классов Bootstrap ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½Ρ‹ΠΌ. Π’ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π°Ρ… flex, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ .flex-row , .flex-row-reverse , .flex-column ΠΈ .flex-column-reverse .

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΊΡ€Π°Ρ‚ΠΊΠΎ рассмотрим, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Flexbox. Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ это ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с слуТСбными классами Bootstrap flex.

Flex ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹

Flexbox опрСдСляСт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ flex, примСняя свойство display со значСниями flex ΠΈΠ»ΠΈ inline-flex :

. mycontainer { display: flex; } 

Π£Ρ‚ΠΈΠ»ΠΈΡ‚Π° Bootstrap flex для создания flex-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° называСтся d-flex .

Π“ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ прямой Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° прСвращаСтся Π² Π³ΠΈΠ±ΠΊΠΈΠΉ элСмСнт.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ элСмСнтов Flex, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство CSS flex-direction с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ: row , row-reverse , column ΠΈ column-reverse .

  • row устанавливаСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ
  • row-reverse устанавливаСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ справа Π½Π°Π»Π΅Π²ΠΎ
  • column устанавливаСт Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ свСрху Π²Π½ΠΈΠ·
  • column-reverse устанавливаСт Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ снизу Π²Π²Π΅Ρ€Ρ….

Bootstrap ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ классы flex-row , flex-row-reverse , flex-column

ΠΈ flex-column-reverse для опрСдСлСния направлСния элСмСнтов Flex.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Flexbox позволяСт явно ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ порядок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов Flex, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство order , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½ΠΎ Π½ΡƒΠ»ΡŽ:

.item { order: 1; } 

Bootstrap ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ свои собствСнныС слуТСбныС классы для создания ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ, послСднСго элСмСнта flex ΠΈΠ»ΠΈ для сброса свойства порядка Π² порядок DOM ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнт flex отобраТался ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Π΅Π³ΠΎ Ρ€ΠΎΠ΄Π½Ρ‹ΠΌ элСмСнтам, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ order-1 ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ элСмСнтов Flex

Flexbox позволяСт быстро ΠΈ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты Π»ΡŽΠ±Ρ‹ΠΌ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для вас способом.

НапримСр, свойство justify-content Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ flex позволяСт Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ элСмСнты flex ΠΏΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ оси (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для оси x, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, установив для flex-direction

Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ column ). ДоступныС значСния:

  • flex-start : это Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ выстраиваСт элСмСнты Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°
  • flex-end Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ элСмСнты ΠΏΠΎ ΠΊΠΎΠ½Ρ†Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта
  • center Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ элСмСнты ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°
  • space-between создаСт пространство ΠΌΠ΅ΠΆΠ΄Ρƒ flex-элСмСнтами послС ΠΈΡ… размСщСния
  • space-around создаСт Ρ€Π°Π²Π½ΠΎΠ΅ количСство пространства справа ΠΈ слСва ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта flex.

Π’ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы Bootstrap для примСнСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ justify-content ΠΊ элСмСнтам:

  • justify-content-start
  • justify-content-end
  • justify-content-center
  • justify-content-between
  • justify-content-around

Бвойство flexbox align-items позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ flex-элСмСнтов ΠΏΠΎ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси. (Если Π²Ρ‹ установитС ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ось ΠΊΠ°ΠΊ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ, попСрСчная ось Π±ΡƒΠ΄Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚.)

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния для align-items :

  • stretch : это Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ заставляСт flex-элСмСнты Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎ высоты ΠΈΡ… самых высоких родствСнных элСмСнтов
  • flex-start выстраиваСт ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² Π½Π°Ρ‡Π°Π»Π΅ flex-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°
  • flex-end выстраиваСт элСмСнты Π² ΠΊΠΎΠ½Ρ†Π΅ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°
  • center ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ элСмСнта Π²Π½ΡƒΡ‚Ρ€ΠΈ своСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… классов Bootstrap:

  • align-items-stretch
  • align-items-start
  • align-items-end
  • align-items-center

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ этого ΠΏΠ΅Ρ€Π° для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы Bootstrap flex:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ доступныС ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ… Bootstrap flex .

Π’Ρ‹Π²ΠΎΠ΄

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрСли, ΠΊΠ°ΠΊ Flexbox Π΄Π΅Π»Π°Π΅Ρ‚ систСму сСтки Bootstrap Π±ΠΎΠ»Π΅Π΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΉ с Ρ‚Π°ΠΊΠΈΠΌΠΈ функциями, ΠΊΠ°ΠΊ автоматичСскиС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ столбцы ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высоты. Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ рассмотрСли Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ свойства Flexbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ для освоСния классов ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ Flex Bootstrap ΠΈ получСния максимальной ΠΎΡ‚Π΄Π°Ρ‡ΠΈ ΠΎΡ‚ ΠΈΡ… ΠΌΠΎΡ‰Π½Ρ‹Ρ… возмоТностСй ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.

Если Π²Ρ‹ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ ΠΎ Bootstrap, Π½ΠΎ ΠΎΡ‚ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΈ Π΅Π³ΠΎ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ каТСтся слишком слоТным, Ρ‚ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ наш курс Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Bootstrap 4, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро ΠΈ вСсСло ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠΌΠΎΡ‰ΡŒΡŽ Bootstrap.

Π¨Π°Π±Π»ΠΎΠ½ сСтки для Bootstrap

Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ сСтки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с построСниСм Π² систСмС сСтки Bootstrap.

ΠŸΡΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ сСтки

БущСствуСт ΠΏΡΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ сСтки Bootstrap, ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π½Π°ΠΌΠΈ устройств. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ начинаСтся с минимального Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π° просмотра ΠΈ автоматичСски примСняСтся ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌ устройствам, Ссли это Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ.

.col-xs-4

.col-xs-4

.col-xs-4

.col-sm-4

.col-sm-4

.col-sm-4

.col-md-4

.col-md-4

.col-md-4

.col-lg-4

.col-lg-4

9000 2 . col-lg-4

.col-xl-4

.col-xl-4

.col-xl-4

Π’Ρ€ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… столбца

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ‚Ρ€ΠΈ столбца ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ , начиная с Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡ ΠΈΡ… Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ столы . На ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… ΠΈ ​​болСС Ρ€Π°Π½Π½ΠΈΡ… вСрсиях столбцы Π±ΡƒΠ΄ΡƒΡ‚ автоматичСски ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ.

.col-md-4

.col-md-4

.col-md-4

Π’Ρ€ΠΈ Π½Π΅Ρ€Π°Π²Π½Ρ‹Ρ… столбца

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ‚Ρ€ΠΈ столбца , начиная с Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… столов ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡ ΠΈΡ… Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… столов Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ столбцов сСтки Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎ Π΄Π²Π΅Π½Π°Π΄Ρ†Π°Ρ‚ΠΈ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, столбцы Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ нСзависимо ΠΎΡ‚ области просмотра.

.col-md-3

.col-md-6

.col-md-3

Π”Π²Π° столбца

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π΄Π²Π° столбца , начиная с Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… столов ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡ ΠΈΡ… Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… столов .

.col-md-8

.col-md-4

Полная ΡˆΠΈΡ€ΠΈΠ½Π°, ΠΎΠ΄ΠΈΠ½ столбСц

Для элСмСнтов ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ классы сСтки Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ.


Π”Π²Π° столбца с двумя Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ столбцами

Богласно Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ выполняСтся просто β€” просто помСститС ряд столбцов Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ столбСц. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π΄Π²Π° столбца , начиная с Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… столов ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡΡΡŒ Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… столов , с Π΅Ρ‰Π΅ двумя (Ρ€Π°Π²Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹) Π²Π½ΡƒΡ‚Ρ€ΠΈ большСго столбца.

ΠŸΡ€ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ мСньшС, эти столбцы ΠΈ ΠΈΡ… Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ столбцы Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ.

.col-MD-8

.col-md-6

.col-md-6

.col-md-4


Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ: ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ

БСточная систСма Bootstrap v4 ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ классов: xs (ΠΎΡ‡Π΅Π½ΡŒ малСнький) , sm (малСнький), md (срСдний), lg (большой) ΠΈ xl (ΠΎΡ‡Π΅Π½ΡŒ большой). Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ‡Ρ‚ΠΈ Π»ΡŽΠ±ΡƒΡŽ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ этих классов для создания Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹Ρ… ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ классов ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, Ссли Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для xs ΠΈ sm, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ xs.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6


Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ: ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ

. col-xs-12 .col-sm-6 .col-lg-8

.col-xs-6 .col-lg-4

.col-xs-6 . col-sm-4

.col- xs-6 .col-sm-4

.col-xs-6 .col-sm-4


ΠžΡ‡ΠΈΡΡ‚ΠΊΠ° столбцов

ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚Π΅ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ пСрСнос Π½Π΅Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ содСрТимого.

.col-xs-6 .col-sm-3
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° просмотра ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π½Π° своСм Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅ для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3


Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΈ pull resets

Бброс смСщСний, вставок ΠΈ ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠΉ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ….

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col -md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

React-Bootstrap Β· ДокумСнтация React-Bootstrap

БСточная систСма Bootstrap ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ряд ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², строк ΠΈ столбцов для ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΈ выравнивания содСрТимого. Он построСн Π½Π° flexbox ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π΅Π½. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ ΠΎΠ±Π·ΠΎΡ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ сСтка собираСтся вмСстС.

Π’Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ ΠΈΠ»ΠΈ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с flexbox? ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ это руководство CSS Tricks ΠΏΠΎ флСксбоксу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎΠ± основах, Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, рСкомСндациях ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°Ρ… ΠΊΠΎΠ΄Π°.

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€#

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ срСдства цСнтрирования ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ размСщСния содСрТимого вашСго сайта. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² пиксСлях.

1 ΠΈΠ· 1

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 1

Fluid Container #

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π½Π°Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ /> для ΡˆΠΈΡ€ΠΈΠ½Ρ‹: 100% для всСх Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° просмотра ΠΈ устройства.

1 ΠΈΠ· 1

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π½Π°Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 1

МоТно ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ останова с для ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΏ. Установка Π΅Π³ΠΎ Π² Ρ‚ΠΎΡ‡ΠΊΡƒ останова ( sm, md, lg, xl, xxl ) установит ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π² качСствС Тидкости Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ останова.

1 ΠΈΠ· 1

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Тидкости="md"> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 1

Auto -ΠΌΠ°ΠΊΠ΅Ρ‚ columns#

Если ΡˆΠΈΡ€ΠΈΠ½Π° столбцов Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½Π°, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Col Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ столбцы ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹

1 ΠΈΠ· 2

2 ΠΈΠ· 2

1 ΠΈΠ· 3

2 ΠΈΠ· 3

3 ΠΈΠ· 3

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>
1 ΠΈΠ· 22 ΠΈΠ· 2 <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 32 ΠΈΠ· 33 ΠΈΠ· 3

Установка ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца#

Авто-ΠΌΠ°ΠΊΠ΅Ρ‚ для столбцов сСтки flexbox Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца ΠΈ автоматичСски ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ родствСнных столбцов Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ классы сСтки (ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅), примСси сСтки ΠΈΠ»ΠΈ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π΄Ρ€ΡƒΠ³ΠΈΡ… столбцов Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ нСзависимо ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ столбца.

1 ΠΈΠ· 3

2 ΠΈΠ· 3 (ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ)

3 ΠΈΠ· 3

1 ΠΈΠ· 3

2 ΠΈΠ· 3 (ΡˆΠΈΡ€Π΅)

3 ΠΈΠ· 3

< ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 32 ΠΈΠ· 3 (ΡˆΠΈΡ€Π΅)3 ΠΈΠ· 3 <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 32 ΠΈΠ· 3 (ΡˆΠΈΡ€Π΅)3 ΠΈΠ· 3

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹#

УстановитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ столбца (для любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ‚ΠΎΡ‡ΠΊΠΈ останова) Ρ€Π°Π²Π½Ρ‹ΠΌ "auto" для измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° столбцов Π½Π° основС СстСствСнной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΡ… содСрТимого.

1 ΠΈΠ· 3

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹

3 ΠΈΠ· 3

1 ΠΈΠ· 3

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹

3 ΠΈΠ· 3

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> 1 ΠΈΠ· 3 ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ 3 ΠΈΠ· 3 <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>1 ΠΈΠ· 3ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ 3 ΠΈΠ· 3

АдаптивныС сСтки#

Col позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов для 6 Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ (xs, sm, md, lg, xl ΠΈ xxl).

Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ останова Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ количСство столбцов для ΠΎΡ…Π²Π°Ρ‚Π° ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для автоматичСской ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

см=8

см=4

см=истина

sm=true

sm=true

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>sm=8sm=4 <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>sm=truesm=truesm=true

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠΏΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ останова для создания Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… сСток Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

xs=12 md=8

xs=6 md=4

xs=6 md=4

xs=6 md=4

xs=6 md=4

xs=6 9000 3

Ρ…Π·=6

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> {/* ΠžΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚Π΅ столбцы Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, сдСлав ΠΎΠ΄ΠΈΠ½ столбСц ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ */} <Π‘Ρ‚Ρ€ΠΎΠΊΠ°> хс=12 ΠΌΠ΄=8 Ρ…Π·=6 ΠΌΠ΄=4 {/* Π¨ΠΈΡ€ΠΈΠ½Π° столбцов начинаСтся с 50 % Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΈ увСличиваСтся Π΄ΠΎ 33,3 % Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… */} <Π‘Ρ‚Ρ€ΠΎΠΊΠ°> Ρ…Π·=6 ΠΌΠ΄=4 Ρ…Π·=6 ΠΌΠ΄=4 Ρ…Π·=6 ΠΌΠ΄=4 {/* Π¨ΠΈΡ€ΠΈΠ½Π° столбцов всСгда составляСт 50 % Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… */} <Π‘Ρ‚Ρ€ΠΎΠΊΠ°> <столбСц xs={6}>xs=6 <столбСц xs={6}>xs=6

ΠŸΡ€ΠΎΠΏΡ Ρ‚ΠΎΡ‡ΠΊΠΈ останова Col Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ пропса object : {span: number, order: number, offset: number} для указания смСщСний ΠΈ упорядочивания эффСктов.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство order для управлСния Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ порядком вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ, Π½ΠΎ нСупорядочСнный

Π’Ρ‚ΠΎΡ€ΠΎΠΉ, Π½ΠΎ послСдний

Π’Ρ€Π΅Ρ‚ΠΈΠΉ, Π½ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>Π‘Π½Π°Ρ‡Π°Π»Π°, Π½ΠΎ Π½Π΅ ΠΏΠΎ порядкуВторой, Π½ΠΎ послСднийВрСтий, Π½ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ

Бвойство order Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ first ( order: -1 ) ΠΈ послСдним ( порядок : $columns+1 ).

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ, Π½ΠΎ послСдний

Π’Ρ‚ΠΎΡ€ΠΎΠΉ, Π½ΠΎ нСупорядочСнный

Π’Ρ€Π΅Ρ‚ΠΈΠΉ, Π½ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ, Π½ΠΎ послСднийВторой, Π½ΠΎ нСупорядочСнныйВрСтий, Π½ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ

Для смСщСния столбцов сСтки ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ смСщСниС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ для Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ класса поля.

md=4

md={{Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½: 4, смСщСниС: 4}}

md={{Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½: 3, смСщСниС: 3}}

md={{Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½: 3, смСщСниС: 3}}

md={{ span: 6, offset: 3 }}

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>md=4{`md={{ span: 4, offset: 4 }}`} <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>{`md={{ span: 3, offset: 3 }}`}{`md={{ span: 3, offset: 3 }}`} <Π‘Ρ‚Ρ€ΠΎΠΊΠ°>{`md={{ span: 6, offset: 3 }}`}

Установка ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов Π² строкС #

Π‘Ρ‚Ρ€ΠΎΠΊΠ° позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов для 5 Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ (xs, sm, md, lg, xl ΠΈ xxl). Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ останова Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ количСство столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ auto , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.

1 ΠΈΠ· 2

2 ΠΈΠ· 2

1 ΠΈΠ· 3

2 ΠΈΠ· 3

3 ΠΈΠ· 3

1 ΠΈΠ· 3

2 ΠΈΠ· 3 900 03

3 ΠΈΠ· 3

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ° xs={2} md={4} lg={6}>1 ΠΈΠ· 22 ΠΈΠ· 2 <Π‘Ρ‚Ρ€ΠΎΠΊΠ° xs={1} md={2}>1 ΠΈΠ· 32 ΠΈΠ· 33 ΠΈΠ· 3 <Π‘Ρ‚Ρ€ΠΎΠΊΠ° xs="Π°Π²Ρ‚ΠΎ">1 ΠΈΠ· 32 ΠΈΠ· 33 ΠΈΠ· 3

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° столбца Row пСрСопрСдСляСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбца Col , ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½Π½ΡƒΡŽ для Π½ΠΈΠΆΠ½ΠΈΡ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΏΡ€ΠΈ просмотрС Π½Π° большом экранС с. Π Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΌΠ΅Π½Π΅Π½ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π½Π° срСдних ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах.

1 ΠΈΠ· 3

2 ΠΈΠ· 3

3 ΠΈΠ· 3

<ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€> <Π‘Ρ‚Ρ€ΠΎΠΊΠ° md={4}>1 ΠΈΠ· 32 ΠΈΠ· 33 ΠΈΠ· 3

API#

Container#

ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный Ρ„Π°ΠΉΠ» import Container from 'react-bootstrap/Container' 9 0166 Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° для ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚
НаимСнованиС Π’ΠΈΠΏ По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ОписаниС
ΠΊΠ°ΠΊ

elementType

9073 0

Для этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт

ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ true | "см" | "ΠœΠ”" | "Π»Π³" | "XL" | "xxl"

false

Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всС доступноС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ пространство.

bsPrefix

строка

'ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€'

ИзмСнСниС прСфикса ΠΈΠΌΠ΅Π½ΠΈ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ класса ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° CSS ΠΈ ΠΈΠΌΠ΅Π½ΠΈ класса ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° . Π­Ρ‚ΠΎ Π°Π²Π°Ρ€ΠΈΠΉΠ½Ρ‹ΠΉ люк для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с сильно настроСнным Π·Π°Π³Ρ€ΡƒΠ·ΠΎΡ‡Π½Ρ‹ΠΌ css.

Row#

ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный Ρ„Π°ΠΉΠ» import Row from 'react-bootstrap/Row' Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Row
Имя Π’ΠΈΠΏ По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ОписаниС
ΠΊΠ°ΠΊ

elementType

Для этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Ρ‚ΠΈΠΏ элСмСнта.

LG

Π½ΠΎΠΌΠ΅Ρ€ | 'Π°Π²Ρ‚ΠΎ' | { столбцы: Π½ΠΎΠΌΠ΅Ρ€ | 'auto' }

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах (β‰₯992 пиксСлСй). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Π²Ρ‚ΠΎ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ столбцам ΠΈΡ… Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

ΠΌΠΊΡ€

Π½ΠΎΠΌΠ΅Ρ€ | 'Π°Π²Ρ‚ΠΎ' | { столбцы: Π½ΠΎΠΌΠ΅Ρ€ | 'auto' }

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° устройствах срСднСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (β‰₯768 пиксСлСй). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ auto , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.

см

Π½ΠΎΠΌΠ΅Ρ€ | 'Π°Π²Ρ‚ΠΎ' | { столбцы: Π½ΠΎΠΌΠ΅Ρ€ | 'auto' }

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах (β‰₯576 пиксСлСй). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ auto , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.

xl

Π½ΠΎΠΌΠ΅Ρ€ | 'Π°Π²Ρ‚ΠΎ' | { столбцы: Π½ΠΎΠΌΠ΅Ρ€ | 'auto' }

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах (β‰₯1200 пиксСлСй). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ auto , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.

xs

Π½ΠΎΠΌΠ΅Ρ€ | 'Π°Π²Ρ‚ΠΎ' | { столбцы: Π½ΠΎΠΌΠ΅Ρ€ | 'auto' }

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… устройствах (<576 пиксСлСй). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ auto , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.

xxl

Π½ΠΎΠΌΠ΅Ρ€ | ‘Π°Π²Ρ‚ΠΎ’ | { столбцы: Π½ΠΎΠΌΠ΅Ρ€ | ‘auto’ }

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах (β‰₯1400 пиксСлСй). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ auto , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.

BSPREFIX

Π‘Ρ‚Ρ€ΠΎΠΊΠ°

'ряд

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° CSS Base Name ΠΈ Modifier ΠΈΠΌΠ΅Π½Π° класса Prefix. Π­Ρ‚ΠΎ Π°Π²Π°Ρ€ΠΈΠΉΠ½Ρ‹ΠΉ люк для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с сильно настроСнным Π·Π°Π³Ρ€ΡƒΠ·ΠΎΡ‡Π½Ρ‹ΠΌ css.

Col#

ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный Ρ„Π°ΠΉΠ» ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Col ΠΈΠ· 'react-bootstrap/Col' Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Col
Имя 90 718 Π’ΠΈΠΏ По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ОписаниС
as

elementType

Для этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Ρ‚ΠΈΠΏ элСмСнта.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *