Раздели, WebReference

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

Кодът на разделите се състои от две части - това е показването на самите раздели, както и информация, свързана с тях.

Дори и с този оскъден код, разделите вече трябва да работят и да се превключват визуално.

Да преминем към изходния текст. Обвийте всичко с елемент

Свързваме два фрагмента заедно и получаваме крайния код за създаване на раздели.

Пример 1: Създаване на раздели

Резултатът от този пример е показан на фиг. 1.

Ориз. 1. Изглед на раздели

Плавен преход

Преходът между разделите е мигновен, но можете да го направите с малък ефект, като добавите избледняващ клас към текстовия блок. След това текстът ще изчезва плавно. За активния раздел трябва да включите друг клас в , без него ще възникнат грешки.

Раздели с пълна ширина

Размерът на раздела зависи от дължината на текста в него, но можете принудително да промените ширината им, така че разделите да заемат цялата налична ширина. Просто добавете nav-justified класа към елемента

Ето как изглеждат тези раздели (Фигура 2).

Ориз. 2. Езичета с пълна ширина

Когато размерът на прозореца се намали, такива раздели променят външния си вид и се подреждат не хоризонтално, а един под друг (фиг. 3).

Ориз. 3. Изглед на раздели при намаляване на размера на прозореца

Изглед с раздели

Традиционно разделите изглеждат таканаследени от живота - парчета картон, стърчащи от папката с надпис. Заменяйки класа nav-tabs с nav-pills, получаваме раздели под формата на хапчета (фиг. 4).

Ориз. 4. Промяна на външния вид на разделите

Кодът ще бъде така.

Разделите също могат да бъдат подредени вертикално с помощта на класа nav-stacked.

Появата на такива раздели е показана на фиг. 5.