-
Foundation курс
- Foundation курс
- Foundation Начало работы
- Foundation текст
- Foundation таблица
- Foundation кнопка
- Foundation Группа кнопок
- Foundation иконка
- Foundation этикетка
- Foundation Напоминание окно
- Foundation Шкала прогресса
- Foundation панель
- Foundation изображение
- Foundation Выпадающее меню
- Foundation Складной Список
- Foundation список
- Foundation таб
- Foundation пейджинг
- Foundation Прайс-лист
- Foundation Верхней панели навигации
- Foundation Боковая панель
- Foundation Авто-навигация(Off-Canvas)
- Foundation Magellan
- Foundation форма
- Foundation Размер входного кадра
- Foundation переключатель
- Foundation ползунок
- Foundation воздушный шар
- Foundation режимное окно
- Foundation Joyride
- Foundation балансир
Foundation меш
- Foundation Grid System
- Foundation меш - Горизонтально сложены
- Foundation меш - Малое оборудование
- Foundation меш - Среднего размера оборудование
- Foundation меш - Большое оборудование
- Foundation Блок сетки
- Foundation Сетка Примеры
Foundation справочное руководство
Лучшее руководство по Фонд прогресс бар в 2024 году. В этом руководстве вы можете изучить Прогресс бар цвета,Сопряжение прогресс бар,Прогресс бар Размер,Прогресс бар этикетки,
Фонд прогресс бар
Фонд может быть использован в качестве индикатора выполнения, чтобы показать степень обработки программы:
Мы можем <div> элемента используют .progress класс для создания прогресс бар, .meter класс для дочернего элемента (<SPAN>). Мы можем установить процент прогресса в элементе <SPAN>, следующим образом:
примеров
<Span класс = "метр" стиль = "ширина: 70%"> </ SPAN>
</ Div>
Попробуйте »
Прогресс бар цвета
По умолчанию, индикатор цвет синий. Различные цвета класса: .secondary , .success или .alert :
примеров
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "прогресс вторичных" >
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "Успех прогресс" >
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "прогресс оповещения" >
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
Попробуйте »
Сопряжение прогресс бар
.radius и .round классы используются для добавления закругленных углов для индикатора выполнения:
примеров
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "Радиус прогресс" >
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "прогресс округляется" >
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
Попробуйте »
Прогресс бар Размер
Вы можете использовать .small- num или .large- num изменить ширину строки прогресса, Num представляет собой число от 1 (8,33%) и 12 ( по умолчанию (100%)) :
примеров
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "прогресс крупно- 6">
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "прогресс крупно- 9">
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<Div класс = "прогресс крупно- 11">
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
<! - Ширина по умолчанию ->
<Div класс = "прогресс крупно- 12">
<Span класс = "метр" стиль = "ширина: 50%"> </ SPAN>
</ Div>
Попробуйте »
Прогресс бар этикетки
CSS можно использовать, чтобы пометить индикатор прогресса. В следующем примере мы добавили элемент <SPAN> для отображения в процентах:
примеров
.percentage {
позицию: абсолютная;
верх: 50%;
Слева направо: 50%;
цвет: белый;
преобразования: перевод (-50%, -50%);
размер шрифта: 12px;
}
</ Style>
<Div класс = "прогресс">
<Span класс = "метр" стиль = "позиция: относительная; ширина: 75%">
<Span класс = "процент"> 75% </ SPAN>
</ Span>
</ Div>
<Div класс = "Успех прогресс" >
<Span класс = "метр" стиль = "позиция: относительная; ширина: 50%">
<Span класс = "процент"> 50% </ SPAN>
</ Span>
</ Div>
<Div класс = "прогресс оповещения" >
<Span класс = "метр" стиль = "позиция: относительная; ширина: 25%">
<Span класс = "процент"> 25% </ SPAN>
</ Span>
</ Div>
Попробуйте »