Оформление списков и таблиц при помощи CSS.
учебно-методический материал
научиться осуществлять оформление списков и таблиц при помощи css и фреймворка Bootstrap.
Скачать:
Вложение | Размер |
---|---|
![]() | 34.53 КБ |
Предварительный просмотр:
Инструкционно-технологическая карта №9
Тема: Оформление списков и таблиц при помощи CSS.
Цель: научиться осуществлять оформление списков и таблиц при помощи css и фреймворка Bootstrap.
Оборудование: персональный компьютер с выходом в Интернет, MS Word, Блокнот, инструкционно-технологическая карта №9.
Время выполнения: 2 часа.
Теоретическая часть к практической работе
Оформление таблиц с помощью CSS классов Bootstrap
Базовое оформление таблиц
Для придания таблицы базового оформления необходимо добавить класс .table к элементу table:
...
Например:
№ п/п | Имя | Фамилия | |
---|---|---|---|
1 | Иван | Чмель | ivan@mail.ru |
2 | Петр | Щербаков | petr@mail.ru |
3 | Юрий | Голов | yuri@mail.ru |
Bootstrap 3 - оформление таблицы с помощью класса table
Оформление таблиц по типу полос "зебры"
Для выделения нечётных строк основной части таблицы (...) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table.
...
Внимание: Для оформления таблиц по типу полос "зебры" в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.
Например:
№ п/п | Имя | Фамилия | |
---|---|---|---|
1 | Иван | Чмель | ivan@mail.ru |
2 | Петр | Щербаков | petr@mail.ru |
3 | Юрий | Голов | yuri@mail.ru |
Bootstrap 3 - оформление таблицы с помощью класса table-striped
Создание таблицы с границами
Также вы можете добавлять границы для всех ячеек таблицы, просто добавив дополнительный класс Bootstrap .table-bordered к базовому классу .table.
№ п/п | Имя | Фамилия | |
---|---|---|---|
1 | Иван | Чмель | ivan@mail.ru |
2 | Петр | Щербаков | petr@mail.ru |
3 | Юрий | Голов | yuri@mail.ru |
Выше приведенный пример будет выглядеть примерно так:
№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru
Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)
Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента
.
№ п/п | Имя | Фамилия | |
---|---|---|---|
1 | Иван | Чмель | ivan@mail.ru |
2 | Петр | Щербаков | petr@mail.ru |
3 | Юрий | Голов | yuri@mail.ru |
Выше приведенный пример будет выглядеть примерно так:
№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru
Создание сжатой или компактной таблицы
Вы можете также сделать свои таблицы более компактными посредством добавления дополнительного класса .table-condensed к базовому классу .table. Класс .table-condensed делает таблицу компактной за счет уменьшения отступов в ячейках наполовину.
№ п/п | Имя | Фамилия | |
---|---|---|---|
1 | Иван | Чмель | ivan@mail.ru |
2 | Петр | Щербаков | petr@mail.ru |
3 | Юрий | Голов | yuri@mail.ru |
Выше приведенный пример будет выглядеть примерно так:
Bootstrap 3 - Создание сжатой или компактной таблицы
Дополнительные акцентные классы для строк таблицы
Существуют вспомогательные классы, которые позволяют выделить строку или отдельные ячейки различным цветом посредством окраски их фона.
№ чека | Способ платежа | Дата платежа | Сумма |
---|---|---|---|
2803 | Наличные | 04.08.2014 | 2005.00 |
2804 | Карта VISA | 04.08.2014 | 1270.00 |
2805 | Наличные | 05.08.2014 | 1356.50 |
2806 | Наличные | 05.08.2014 | 5200.05 |
2807 | Карта VISA | 06.08.2014 | 315.70 |
Вышеприведенный пример будет выглядеть примерно так:
Bootstrap 3 - Дополнительные акцентные классы для строк таблицы
Создание адаптивной таблицы с помощью Bootstrap
С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.
№ п/п | Имя | Фамилия | Увлечения | |
---|---|---|---|---|
1 | Иван | Чмель | ivan@mail.ru | Плавание, бодибилдинг, боевые искусства |
2 | Петр | Щербаков | petr@mail.ru | Европейские танцы, Стрип-денс, Ролики |
3 | Юрий | Голов | yuri@mail.ru | Горный велосипед, скейтборд, катание на квадрацикле |
Табличные теги, поддерживаемые Twitter Bootstrap 3
В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.
Тег Описание
Контейнер для элементов, определяющих содержимое таблицы
Контейнер для элементов, формирующих «шапку» таблицы
Контейнер для элементов, формирующих основную часть таблицы
Контейнер для ячеек, являющихся элементами одной строки
Специальная табличная ячейка для заголовков столбцов | Табличная ячейка, предназначенная для размещения основных табличных данных Практическая часть Задание 1. Оформить таблицу с помощью CSS классов Bootstrap. (предварительно загрузив архив Bootstrap из приложения к практической работе, так же ознакомиться со ссылками-примерами работы с Bootstrap). Задание 2. Оформить список с помощью CSS классов Bootstrap. Контрольные вопросы
По теме: методические разработки, презентации и конспекты![]() Методическая разработка мастер - класса Тема: Оформление текстового документа со вставкой таблицы.данная методическая разработка может быть использована в качестве работы с таблицами в текстовом редакторе WORD... ![]() Конспект урока по Информатике и ИКТ "Вставка и оформление таблиц"Данный материал может быть использован в преподавании Информатики как в школе, так и учреждениях СПО.... Открытый урок по информатике: «Форматирование ячеек, оформление таблиц».Открытый урок по информатике: «Форматирование ячеек, оформление таблиц». Педагогическая тема: «Использование технологий проблемного обучения на уроках информатики». Адаптирован... ![]() Методическая разработка урока "Решение задач с помощью электронных таблиц"Методическая разработка урока по информатике «Решение задач с помощью электронных таблиц»... ![]() Инструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS ExcelИнструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS Excel... ![]() Практическое занятие 4. Составить прогноз товарооборота торгового предприятия на основе данных таблицы с помощью линии тренда, инструмента экспоненциальное сглаживание и т.д.Составить прогноз товарооборота торгового предприятия на основе данных таблицы с помощью линии тренда, инструмента экспоненциальное сглаживание и т.д.... ![]() Практическое занятие 5. Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д.Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д.... |
---|