Како користити „бреак-афтер“ са тачкама прекида и медијским упитима у Таилвинд-у?

Kako Koristiti Break After Sa Tackama Prekida I Medijskim Upitima U Tailvind U



У Таилвинд ЦСС-у, „бреак-афтер“ је услужна класа која се користи за управљање где би се прелом колоне или странице требао појавити након одређеног елемента. Таилвинд дозвољава корисницима да креирају прилагодљиве изгледе без писања икаквих медијских упита. Корисници могу да користе својство „бреак-афтер“ са тачкама прекида и медијским упитима да одреде како се изглед и изглед елемената мењају у зависности од ширине уређаја и примењују различите стилове на основу тачака прекида.

Овај чланак ће демонстрирати метод за коришћење „бреак-афтер“ са тачкама прекида и медијским упитима у Таилвинд ЦСС-у.

Како користити „бреак-афтер“ са тачкама прекида и медијским упитима у Таилвинд-у?

Да бисте користили „бреак-афтер“ са тачкама прекида и медијским упитима, дефинишите различите вредности и стилове за различите величине екрана помоћу услужног програма „бреак-афтер“ у ХТМЛ програму. Затим проверите излаз тако што ћете погледати ХТМЛ веб страницу.







Хајде да истражимо практичну примену:



Корак 1: Користите тачке прекида и медијске упите са услужним програмом „бреак-афтер“.
Направите ХТМЛ програм и одредите различите вредности и стилове за различите величине екрана помоћу услужног програма „бреак-афтер“. На пример, користили смо „ доктор медицине „тачка прекида са „ прекид после колоне „корисност и „ лг „тачка прекида са „ пауза после избегавања ' корисност:



< тело >
< див класа = 'колоне-2 бг-теал-400' >
< стр класа = 'мд:бреак-афтер-цолумн лг:бреак-афтер-аоид' > Здраво... < / стр >
< стр > Добродошао овде... < / стр >
< стр > Сазнајте више о Таилвинд ЦСС-у... < / стр >
< стр > То је ЦСС оквир... < / стр >
< стр > Здраво... < / стр >
< / див >

< / тело >

овде:





  • мд: бреак-афтер-цолумн ” класа означава да би требало да дође до прекида колоне након овог специфичног <п> елемента на “ доктор медицине ” тачка прекида (средња величина екрана).
  • лг:прекид после избегавања ” класа сугерише да елемент треба да избегава прекид после на “ лг ” тачка прекида (велика величина екрана).

Корак 2: Проверите излаз
Проверите да ли су тачке прекида и медијски упити примењени тако што ћете погледати ХТМЛ веб страницу:



На горњој веб страници, дошло је до прелома колоне на наведеном елементу на средњем екрану, а прекид после је избегнут на великом екрану.

Закључак

Да бисте користили „бреак-афтер“ са тачкама прекида и медијским упитима у Таилвинд-у, прво направите ХТМЛ датотеку. Затим користите тачке прекида и медијске упите са услужним програмом „бреак-афтер“ тако што ћете навести различите вредности и стилове за различите величине екрана. За верификацију, покрените ХТМЛ програм и погледајте веб страницу. Овај чланак је демонстрирао метод за коришћење „бреак-афтер“ са тачкама прекида и медијским упитима у Таилвинд ЦСС-у.