Нужна помощь с разметкой Uikit2

Тема в разделе "Другие языки", создана пользователем Иван Кузьмич, 14 фев 2019.

Метки:
  1. Иван Кузьмич

    Иван Кузьмич Постоялец

    Регистр.:
    28 дек 2018
    Сообщения:
    53
    Симпатии:
    34
    Здравствуйте
    Подскажите пожалуйста,как мне вставить правильно перед каждым progress-bar текст?

    Код:
    <p><span style="color: #33cccc;"><strong>PHP</strong></span></p>
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 97%;">97%</div>
    </div>
    <p><strong><span style="color: #33cccc;">MySQL</span></strong></p>
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 83%;">83%</div>
    </div>
    <p><span style="color: #33cccc;"><strong>CSS</strong></span></p>
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 68%;">68%</div>
    </div>
    И надо бы каждый бар сделать разными цветами
    Спасибо
     
    Последнее редактирование: 14 фев 2019
  2. Иван Кузьмич

    Иван Кузьмич Постоялец

    Регистр.:
    28 дек 2018
    Сообщения:
    53
    Симпатии:
    34
    Нашёл самостоятельно ответ на свой же вопрос

    Код:
    <div class="uk-grid">
    <div class="uk-width-1-5"><span style="color: #33cccc;"><strong>Текст</strong></span></div>
    <div class="uk-width-4-5">
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 97%;">97%</div>
    </div>
    </div>
    <div class="uk-width-1-5"><span style="color: #ff6600;"><strong>Текст</strong></span></div>
    <div class="uk-width-4-5">
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 83%;">83%</div>
    </div>
    </div>
    <div class="uk-width-1-5"><span style="color: #3366ff;"><strong>Текст</strong></span></div>
    <div class="uk-width-4-5">
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 68%;"><span style="color: #ffffff;">68%</span></div>
    </div>
    </div>
    <div class="uk-width-1-5"><span style="color: #ff00ff;"><strong>Текст</strong></span></div>
    <div class="uk-width-4-5">
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 82%;"><span style="color: #ffffff;">82%</span></div>
    </div>
    </div>
    <div class="uk-width-1-5"><span style="color: #99cc00;"><strong>Текст</strong></span></div>
    <div class="uk-width-4-5">
    <div class="uk-progress">
    <div class="uk-progress-bar" style="width: 57%;"><span style="color: #ffffff;">57%</span></div>
    </div>
    </div>
    </div>
    А вот над цветом пока не решил вопрос
     
  3. Иван Кузьмич

    Иван Кузьмич Постоялец

    Регистр.:
    28 дек 2018
    Сообщения:
    53
    Симпатии:
    34
    Перед uk-progress ставим на выбор:
    uk-progress-success
    uk-progress-warning
    uk-progress-danger

    Результат
    [​IMG]
     
    Последнее редактирование: 16 фев 2019