Овај чланак ће дати пример методе за примену тачака прекида и медијских упита на мрежу редова у Таилвинд ЦСС-у.
Како применити тачке прекида и медијске упите на мрежу редова у Таилвинд-у?
Да бисте применили тачке прекида и медијске упите на мрежу редова у Таилвинд-у, направите ХТМЛ програм. Затим дефинишите број редова за различите величине екрана користећи „ см ”, “ доктор медицине ” или “ лг ” преломне тачке са „ грид-ровс-<валуе> ” комуналне услуге. Затим обезбедите промене на веб страници прилагођавањем величине екрана.
Хајде да истражимо практичну примену:
Корак 1: Користите тачке прекида и медијске упите са мрежом редова у ХТМЛ програму
Направите ХТМЛ програм и дефинишите број редова за различите величине екрана помоћу „ грид-ровс-<валуе> ' корисност. На пример, користили смо „ доктор медицине „преломна тачка са „ грид-ровс-3 „корисност и „ лг ” преломне тачке са „ грид-ровс-5 ” услужни програми за промену броја редова на различитим величинама екрана:
< тело >
< див класа = 'грид грид-ровс-2 мд:грид-ровс-3 лг:грид-ровс-5 грид-флов-цол гап-3 м-3 тект-центер' >
< див класа = 'бг-теал-500 п-5' > 1 < / див >
< див класа = 'бг-теал-500 п-5' > 2 < / див >
< див класа = 'бг-теал-500 п-5' > 3 < / див >
< див класа = 'бг-теал-500 п-5' > 4 < / див >
< див класа = 'бг-теал-500 п-5' > 5 < / див >
< див класа = 'бг-теал-500 п-5' > 6 < / див >
< див класа = 'бг-теал-500 п-5' > 7 < / див >
< див класа = 'бг-теал-500 п-5' > 8 < / див >
< див класа = 'бг-теал-500 п-5' > 9 < / див >
< див класа = 'бг-теал-500 п-5' > 10 < / див >
< / див >
< / тело >
овде:
- “ грид ” класа се користи за креирање распореда мреже.
- “ грид-ровс-2 ” класа специфицира да мрежа треба да има 2 реда једнаке величине.
- “ мд: грид-ровс-3 ” класа мења мрежу у 3 реда једнаке величине на средњој величини екрана.
- “ лг: грид-ровс-5 ” класа мења мрежу у 5 редова једнаке величине на великом екрану.
- “ грид-флов-цол ” класа поставља ставке мреже хоризонтално у колоне.
- “ гап-3 ” класа поставља размак од 3 јединице између сваке ставке мреже.
- “ м-3 ” класа примењује маргину од 3 јединице око мрежног контејнера.
- “ текстуални центар ” класа поставља текст сваке ставке мреже у центар.
- “ бг-теал-500 ” класа поставља плаву боју на позадину ставки мреже.
- “ п-5 ” класа додаје допуну од 5 јединица садржају унутар детета
ставке.
Корак 2: Проверите излаз
Да бисте били сигурни да су тачке прекида и медијски упити примењени на мрежу редова, погледајте ХТМЛ веб страницу променом величине екрана:
У горњем излазу се може видети да се број редова мења са величином екрана. Ово указује да су тачке прекида и медијски упити успешно примењени на мрежу редова.
Закључак
Да бисте применили тачке прекида и медијске упите на мрежу редова у Таилвинд-у, дефинишите број редова за различите величине екрана користећи „ см ”, “ доктор медицине ” или “ лг „преломне тачке са „ грид-ровс-<валуе> ” комуналне услуге. Затим обезбедите промене на веб страници променом величине екрана. Овај чланак је илустровао метод за примену тачака прекида и медијских упита на мрежу редова у Таилвинд ЦСС-у.