Площадка за решетка Bootstrap
Изграждайте визуално адаптивни оформления с решетката на Bootstrap 5.3 и копирайте точните класове — row, col, отмествания, ред, отстояния и подравняване.
—
Всичко работи във вашия браузър — нищо не се качва.
Зададените класове се прилагат от тази точка на пречупване и нагоре. Превключвайте точките на пречупване, за да създавате адаптивни оформления.
За Площадка за решетка Bootstrap
Плейграундът за Bootstrap Grid изгражда отзивчиви оформления от редове и колони с реалната мрежова система на Bootstrap 5.3. Добавете до 12 колони в ред, кликнете всяка колона, за да зададете ширина, отстъп и ред, и коригирайте разстоянията и подравняването на реда — прегледът и генерираният код се обновяват на живо при всяка промяна.
Тъй като мрежите на Bootstrap са mobile-first, превключвателят на прекъснатите точки е централен: задайте колона на col-6 в базата и col-md-4 при md, и сте изградили класическия модел „подредени на мобилно, три една до друга на десктоп“ без да напишете и ред код. Отстъпите, редът и класовете за разстояние приемат същите отзивчиви суфикси.
Резултатът е чист HTML за копиране и поставяне — div за реда с неговите дъщерни колони и точно зададените от вас класове. Копирайте целия фрагмент или само класовете на реда; всичко работи локално във вашия браузър.
Как да използвате Площадка за решетка Bootstrap
- Добавете колони към реда — до 12 — и кликнете една, за да я изберете.
- Задайте обхват, отстъп и ред на избраната колона за текущата прекъсната точка.
- Превключете прекъснатите точки (от sm до xxl), за да определите как оформлението се пренарежда на по-големи екрани.
- Коригирайте разстоянията на реда и неговите помощни класове за подравняване.
- Прегледайте прегледа на живо, след което копирайте генерирания HTML или класовете на реда.