joomlaКак украсить текст или меню в Joomla 3 используя только внутренние возможности стандартного шаблона joomla-compat

 

 

Строчные этикетки и бейджи

Строчные этикетки

По умолчанию <span>По умолчанию</span>
Успех <span>Успех</span>
Предупреждение <span>Предупреждение</span>
Важно <span>Важно</span>
Информация <span>Информация</span>
Темно-серый <span>Темно-серый</span>

 

 Бейджи

1 <span>1</span>
2 <span>2</span>
4 <span>4</span>
6 <span>6</span>
8 <span>8</span>
10 <span>10</span>

 

 Кнопки - данные стили могут применяться к любому элементу, если используется класс .btn

Кнопка это стандартный стил btn добавляем впереди btn, получается кнопка
Основная btn btn-primary
Информационная btn btn-info
Зеленая btn btn-success
Предупреждаю btn btn-warning
Внимание btn btn-danger
Обратная btn btn-inverse
Ссылка btn btn-link

 

Картинки

Если к картинке в класс добавить img-rounded - будет с закругленными краями; img-circle - круглая; img-polaroid - с рамочкой <imgsrc="..."class="img-rounded"> <imgsrc="..."class="img-circle"> <imgsrc="..."class="img-polaroid">

Иконки

Пример: <iclass="icon-search"></i> в белом виде:  <iclass="icon-search icon-white"></i>

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Источники: fontawesome.veliovgroup.com и bootstrap-ru.com/base_css.php


Поделиться:

У вас нет прав для отправки комментариев. Войти используя свою социальную сеть