Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Списки. Основы bootstrap 3 для начинающих. Урок №8

09.06.2016


16:35


5639


пока нет


Списки. Основы bootstrap 3 для начинающих. Урок №8

Списки. Основы bootstrap 3 для начинающих. Урок №8

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь работать со списками.
Увидите, как стандартные HTML списки можно легко и быстро оформить или изменить, используя  классы bootstrap3.

Если вы проходили уроки по HTML, то знаете, какие есть основные типы списков. Коротко вспомним о них:

  •  Маркированный список – это список, в котором вместо нумерации используется небольшой маркер в виде закрашенного кружочка.
  • Нумерованный список – это список, в котором используется нумерация в виде цифр или букв.
  • Список определений – это особый тип структуризации информации, идеально подходящий для отображения справочников.

Создание стандартного маркированного списка

Здесь ничего сложно нет. Маркированные списки создаются стандартным путем, путем использования HTML тегов  <ul><li>……</li></ul>:

<ul>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
</ul>

Результат:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка

Маркированный список с двойным уровнем:

<ul>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка
<ul>
<li>Элемент 2 уровня</li>
<li>Элемент 2 уровня</li>
<li>Элемент 2 уровня</li>
</ul>
</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
</ul>

Результат:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
    • Элемент 2 уровня
    • Элемент 2 уровня
    • Элемент 2 уровня
  • Элемент маркированного списка
  • Элемент маркированного списка

Создание стандартного нумерованного списка

Нумерованные списки создаются стандартным путем, путем использования HTML тегов  <ol><li>……</li></ol>:

<ol>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
</ol>

Результат:

  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка

Создание списка определений

Списки определений создаются стандартным путем, путем использования HTML тегов  <dl><dt><dd>……</dd></dt></dl>:

<dl>
<dt>1. HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>2. CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

Результат:

Списки. Основы bootstrap 3 для начинающих. Урок №8

Убираем нумерацию и маркирование с нумерованных и маркированных списков
Чтобы убрать нумерацию и маркировку со списков, в bootstrap3 необходимо применить класс «list-unstyled» к тегам <ul> или <ol>.

для маркированных:

<ul class="list-unstyled">
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
</ul>

для нумерованных:

<ol class="list-unstyled">
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
</ol>

Результат для маркированных и нумерованных списков будет одинаковым:

  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка

Размещение нумерованных и маркированных списков в одну строку

Если вам нужно разместить нумерованные или маркированные списки в одну строку, то нужно применить класс «list-inline» к тегам <ul> или <ol>:

<ul class="list-inline">
<li>Главная</li>
<li>Портфолио</li>
<li>Автор</li>
<li>Контакты</li>
</ul>

Результат:

  • Главная
  • Портфолио
  • Автор
  • Контакты

Создание групповых списков
На мой взгляд, создание групповых списков – хорошая возможность создать красивое вертикальное меню.  В bootstrap3 необходимо применить класс «list-group» к тегам <ul> или <ol> и класс «list-group-item» к тегу <li>:

<ul class="list-group">
<li class="list-group-item">Главная</li>
<li class="list-group-item">Портфолио</li>
<li class="list-group-item">Автор</li>
<li class="list-group-item">Контакты</li>
</ul>

Результат:

  • Главная
  • Портфолио
  • Автор
  • Контакты

Естественно, чтобы получилось красивое меню, нужно добавить еще ссылки и тогда пропишем класс  «list-group-item» к тегу <a> вместо тега <li> и добавим дополнительный класс «list-unstyled» к тегу <ul> или <ol>:

<ul class="list-group list-unstyled">
<a href="#" class="list-group-item">
<li>Главная</li>
</a>
<a href="#" class="list-group-item">
<li>Портфолио</li>
</a>
<a href="#" class="list-group-item">
<li>Автор</li>
</a>
<a href="#" class="list-group-item">
<li>Контакты</li>
</a>
</ul>

При наведении на разделы меню, целый блок будет выделяться.

 

К спискам можно добавить стандартные bootstrap3 иконки.

<ul class="list-group list-unstyled">
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-star"></span> Главная</li></a>
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-th-list"></span> Портфолио</li></a>
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-user"></span> Автор</li></a>
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-envelope"></span> Контакты</li></a>
</ul>

Результат:

Списки. Основы bootstrap 3 для начинающих. Урок №8

Создание выпадающего списка
О, это очень интересный материал! Думаю, этой теме стоит уделить не один абзац, а сделать отдельную тему. Пожалуй, я так и сделаю, и следующая моя статья будет именно о том, как сделать выпадающий список. Расскажу и научу даже больше: как с помощью выпадающего списка создать отличное выпадающее меню для сайта.



Случайные записи:

  1. Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
  2. Итог работы за 2016 год!
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Подключение. Основы bootstrap 3 для начинающих. Урок №2
  5. Сворачивание (аккордеон). Основы bootstrap 3 для начинающих. Урок №22

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245