Как да изградите отзивчиви оформления с Bootstrap 4 и Ъглов 6

Да, да ... уеб е мобилен първо от векове ... Но Bootstrap 4 е нов и страхотен, както и Angular 6!
Всяко уеб приложение се приема за отзивчив, период.

Да, дори сложните корпоративни приложения се разрастват с големи таблици с данни и диаграми. Дори и да не е най-подходящото, всеки тип съдържание трябва да е достъпно от всякакъв вид устройство ...

Чувствителният уеб дизайн (RWD) е подход към уеб дизайна, благодарение на който уеб страниците се представят добре на различни устройства и размери на прозореца или екрана - Wikipedia

или за по-визуалните хора ...

Пример за отзивчиво уеб приложение, обърнете допълнително внимание на долния колонтитул

ОК Томаш, ние създаваме отзивчиви уеб приложения отвинаги, така че каква е голямата работа ?!

Е, след много години чакане, Bootstrap 4 най-накрая беше пуснат на пазара през януари 2018 г. Bootstrap беше първата широко популярна css рамка, която съдържаше отзивчива css мрежа като такава, ако това е нейната основна характеристика. Новата версия, изградена върху тази успешна основа и носи много подобрения, което прави работата с отзивчивите мрежи още по-лесна.

Bootstrap е ОГ на отзивчивите оформления

Angular 6 беше публикуван през май 2018 г. Той донесе унифициране на версиите в Angular екосистемата. Това означава, че всички проекти на Angular вече са пуснати заедно.

Angular CLI 6 се промени доста в сравнение с предишните версии. Новият конфигурационен файл angular.json има напълно различна структура от оригиналния angular -js.json. Това има някои последици за това как ние подхождаме към Bootstrap / Angular интеграция в нашите проекти.

Има много подходи за изграждане на отзивчиви приложения с Angular. Чувствайте се свободни да използвате една от многото налични css рамки или да използвате ъглова полуофициална библиотека с гъвкаво оформление. Лично аз предпочитам Bootstrap поради прост декларативен подход, който е отделен от логиката на приложението. Както винаги, използвайте най-доброто за вашия конкретен случай.

В този пост ще интегрираме Bootstrap 4 в нов проект Angular 6, генериран с помощта на Angular CLI. Чувствайте се свободни да разгледате Angular Ngrx Material Starter, ако се интересувате от по-пълен пример (GitHub repo).

Следвайте ме в Twitter, за да получавате известия за най-новите публикации в блога и интересни неща във фронта
Ще се съсредоточим върху използването на Bootstrap grid за създаване на отзивчиви оформления в ъгловите приложения, следователно ще използваме само пакети bootstrap-grid и bootstrap-reboot. НЯМА да използваме Bootstrap стайлинг или компоненти като падащи или формуляри ...

Да го направим ! Ъглова 6 Обувка 4

Първо, ние създаваме нов Angular проект, използвайки новата команда на Angular CLI ...

ng new angular-bootstrap example --style scss --prefix abe

В горната команда настройваме поддръжка за стилове Sass с .scss файлови разширения и префикс за нашите компоненти като първоначална буква на проекта, оттук и abe.

След това трябва да инсталираме Bootstrap с помощта на npm i -S bootstrap.

Нека разгледаме основния ни файл style.scss, разположен в папка src, и добавете следните два реда ...

Друг начин да направите това би било добавянето на минифицирана дистрибуция на Bootstrap направо във файл angular.json, като в следния силно опростен пример ...

Импортирането на Bootstrap решетката във файла main.scss има едно основно предимство пред импортирането във файла angular.json. Позволява ни да отменим всяка променлива Sass, използвана от определенията на стилите Bootstrap.

На практика може да бъде полезно да се създаде файл стил-променливи.scss до нашия styles.scss в папката src с отзивчиви точки на прекъсване на оформлението (както е дефинирано в Bootstrap по подразбиране).

По този начин можем да го импортираме на първия ред от нашите styles.scss, който да се използва с Bootstrap, но също така и във всеки друг файл на стилови компоненти, за да реализираме последователно персонализирана отзивчивост.

PRO СЪВЕТ: Стилове, реализирани във файла styles.scss, се прилагат само след като приложението вече се стартира. Може да искате да покажете индикатор за зареждане, преди това да се случи, за да постигнете по-добро потребителско изживяване в по-бавни мрежи на много нововъзникващи пазари. В този случай ще трябва да добавите някои стилове вграждане директно в index.html
Научете как да го направите, като проверите един от предишните ми публикации ...

Изграждане на отзивчиво оформление

Добавянето на Bootstrap рестартиране и мрежа ни позволява лесно да изградим отзивчиви оформления. Нека да видим как работи, като изградим минимален пример.

Нашата подредба ще има заглавие, съдържание и долен колонтитул. Съдържанието ще съдържа два основни раздела. Искаме да ги показваме един до друг на големите екрани. На по-малките екрани искаме те да се показват като една колона, една под друга.

Моля, обърнете внимание, че в нашия пример всички части на оформлението ще бъдат реализирани вътре в AppComponent. В приложението в реалния свят, всички части вероятно биха се реализирали като самостоятелни компоненти като HeaderComponent, FooterComponent и съдържанието вероятно ще бъде попълнено с помощта на рутера въз основа на текущия URL адрес ... За да видите това в действие, проверете още това сложен проект ...

Основни отзивчиви класове на мрежата

Да започнем с бърза рекапитулация как да изградим отзивчиви оформления с Bootstrap. Не се колебайте да пропуснете този раздел, ако имате предишен опит с Bootstrap ...

Оформлението обикновено е обвито в елемента с .container клас, за да бъде малко по-тясно и центрирано върху много големите екрани. Може да искате да пропуснете .container, когато изграждате табла за управление. Следващият елемент за обвиване използва .row клас за означаване на отзивчив ред. Всеки ред има 12 колони по подразбиране.

Колоните могат да бъдат зададени с .col клас, който се прилага за допълнителните малки екрани. Можем да добавим допълнителен модификатор като -sm -md -lg -xl, за да ограничим ефекта му до определен размер на екрана. Колоните заемат подходящо количество пространство въз основа на броя им. На практика често посочваме изрично размера на колоната. Например, можем да имаме ред с .col-md-4 и .col-md-8, който добавя до 12 колони. Вижте официалната документация за повече подробности ...

Мислите ли, че NgRx или Redux са излишни за вашите нужди? Търсите нещо по-просто? Вижте @ angular-extensions / model library!
Изпробвайте @ angular-extensions / model library! Вижте документи и Github

Чувствителни помощни класове

Изграждането на адаптивно оформление на високо ниво е само половината от историята. Често трябва да отговаря и съдържанието на конкретния елемент.

Представете си, че имате лента с инструменти на заглавието с лого, име на фирма и меню за навигация. На по-малък екран количеството пространство става много ограничено, така че може да искаме да скрием името на компанията и да показваме само логото.

Classes Чувствителните помощни класове работят по различен начин в Bootstrap 4

Предишните версии на Bootstrap използваха отзивчиви помощни класове като .hidden-xs или .visible-sm-inline. Това се промени. Настоящите отзивчиви помощници са в съответствие с самия css, като следват неговото свойство на дисплея.

Това означава, че за да постигнем

, сега трябва да използваме
.

Както можем да видим, класовете за помощници вече са „подредени“ отляво надясно. Започваме с настройка на никой за допълнителните малки екрани и го отменяме, като го настройваме да блокира на малки екрани и по-големи ...

По същия начин, ако искахме да скрием елемент само на най-големите екрани, бихме използвали

. Забележете, че можем да използваме всяка валидна стойност на дисплея на css като модификатор (например блок, вграден блок, флекс, ...).

Отнема известно време, за да свикнете с новия стил, но в крайна сметка той е много по-интуитивен

Използване на Bootstrap 4 с ъглов материал

Изграждането на всичко от нулата може да бъде забавно, но често постигането на резултати е много по-предпочитан начин за правене на бизнес ...

Можем да добавим Angular Material, като пуснем npm i -S @ angular / material @ angular / cdk @ angular / анимации и импортираме някои от наличните модули в нашия AppModule файл. Да речем, че се интересуваме от MatToolbarModule и MatCardModule ...

След това шаблонът може да бъде коригиран до…

И последно липсващо парче е да импортирате една от темите за предварително изграждане на Angular Material във файл styles.scss и е добре да продължим!

Вижте и се поиграйте с този минималистичен работен пример на tackStackBlitz!

БОНУС: Допълнителни нули

Дори и минималното ни включване на Bootstrap добавя няколко стила, които не играят толкова добре с ъгловите материали извън кутията. Нека създадем нов стил-reset.scss файл със следното съдържание и да го импортираме след първоначалния импортиране на Bootstrap в основния файл styles.scss.

Bootstrap също задава цвят на връзката и използва подчертаване на декорацията на текста върху задържаните връзки. Можем да премахнем тези стилове, като коригираме съдържанието на файла стил-variables.scss като този ..

Искате ли да научите повече за това как да създадете свои собствени теми за ъглови материали, вместо да използвате такава за предварително изграждане? Вижте една от старите ми статии ...

Ура!

Направихме го докрай! Надявам се, че сте намерили тази статия за полезна!

Моля, помогнете да разпространите тези съвети за по-широка аудитория с вашите и ме последвайте в Twitter, за да получавате известия за най-новите публикации в блога

И никога не забравяйте, бъдещето е светло
Очевидно светлото бъдеще ( от Янко Ферлич)
Стартиране на проект Angular? Вижте ъглов стартер NgRx за материали!
Ъглов стартиращ материал за NgRx с вградени най-добри практики, тематизиране и много повече!

Чувствайте се свободни да проверите някои други интересни публикации за Typescript, RxJS & Angular ...