Учебное пособие СанктПетербург 2015 министерство образования и науки российской федерации университет итмо
 Скачать 0.7 Mb.
|
Заголовок 1 Уменьшенный на 15% текст заголовкаили так:Заголовок 1 Уменьшенный на 15% текст заголовкаРабота со строчными элементами рассмотрена в практическом задании 3.1. Заголовки Тема 3. Текст, код, таблица 26 Bootstrap поддерживает заголовки 6 уровней, как и стандартный html, но так же позволяет имитировать их, используя одноименные классы. Например, код: Заголовок 1 .h1 даст такой же заголовок первого уровня равный 36px, как и такой код: Заголовок 1 Полужирный 36pxДля внесения дополнительного текста меньшего размера используется тег , как показано в следующем примере: Заголовок 1 Полужирный 36pxРабота с заголовками рассмотрена в практическом задании 3.2. Выравнивание текста Для выравнивания текста можно использовать классы text‐left, text‐right, text‐ center и text‐jastify. Для запрета переноса текста на новую строку используется класс text‐nowrap. Трансформация текста Для трансформации текста из прописного в строчный и обратно используются классы: text‐lowercase – преобразование в строчные; text‐uppercase – преобразование в прописные; text‐capitalize – преобразование, как в предложении, первая буква прописная. Аббревиатура и акроним Аббревиатура создается с помощью тега abbr, который выделяется подчёркиванием из точек, а атрибут title позволяет задать расшифровку аббревиатуры, появляющуюся при наведении мыши. Курсор при попадании на текст аббревиатуры приобретает состояние help Для создания акронима, также используется тег abbr, но применяется класс initialism, что приводит к незначительному уменьшению размера шрифта. HTML Адреса Для подачи контактной информации используется тег HTML5 address. Например: Университет ИТМО Санкт‐Петербург Кронверкский просп., 49 Эффективная разработка веб‐сайтов. Bootstrap 27 Тел: (123) 456‐7890 Цитаты Для определения цитат Bootstrap использует тег blockquote, cite, а для указания источника используется тег footer, как показано в следующем примере.
При добавлении к тегу blockquote класса .blockquote‐reverse цитата будет выровнена по правому краю. Результат использования тегу blockquote показан на рисунке 3.2: Рисунок 3.2. Цитаты Списки Помимо стандартных списков, маркированных и нумерованных, Bootstrap поддерживает списки без стиля. Списки без стиля не имеют ни нумерации, ни маркеров и для их создания следует добавить класс list‐unstyled к тегу ul. Для создания встроенного, то есть расположенного на одной строке списка, следует использовать класс list‐inline. Так же в Bootstrap можно использовать списки определений, но выглядеть они будут немного по‐другому, нежели стандартные, как на рисунке ниже.
Тема 3. Текст, код, таблица 28 Рисунок 3.3 Списки определений Списки определений можно располагать горизонтально, для этого нужно применить класс dl‐horizontal для тега dl. В результате получится список, как на рисунке 3.4. Рисунок 3.4 Горизонтальные списки определений Оформление кода в тексте Для встраивания кода в текст используется тег . Например: Эффективная разработка веб‐сайтов. Bootstrap 29 Таблицы Таблицы в Bootstrap создаются так же, как и в классическом HTML, но при добавлении определённых классов они меняют свой внешний вид и становятся более привлекательными и удобными для прочтения. Базовая таблица Для создания базовой таблицы к тегу table добавляется класс .table. В результате мы получаем лёгкую, разделённую по строкам таблицу, как на рисунке 3.8. Рисунок 3.8 Базовая таблица К базовой таблице можно подключать дополнительные классы. Таблица с выделенными строками Для выделения каждой второй строки цветом используется класс .table‐striped. Класс .table‐striped основывается на селекторе :nth‐child, который не поддерживает Internet Explorer и поэтому этот класс так же не работает в этом браузере. При использовании класса .table‐striped таблица выглядит, как на рисунке 3.9 Рисунок 3.9 Базовая таблица с классом .table‐striped Таблица с границами Для отображения всех границ таблицы используется класс .table‐bordered. При использовании класса .table‐bordered будет выглядеть, как н арисунке 3.10. Рисунок 3.10 Базовая таблица с классом .table‐bordered. Динамическое выделение строк Для создания таблицы с выделяющимися при наведении курсора мыши строками используется класс .table‐hover, такая таблица будет выглядеть, как на Тема 3. Текст, код, таблица 30 рисунке 3.11. Рисунок 3.11 Базовая таблица с классом .table‐hover. Оформление строк таблиц В Bootstrap существуют 5 классов для оформления строк таблиц, их описание можно посмотреть в таблице 3.1. Классы можно применять, как к строкам (tr), так и ячейкам (td). Таблица 3.1 Классы столбцов Класс Описание .active Изменяет цвет строки или ячейки на серый .success Показывает успешное или позитивное действие, выделяя строку светло‐зелёным цветом .info Показывает нейтральное информативное изменение или действие, выделяя строку светло‐синим цветом .warning Показывает предупреждения, которым нужно уделить внимание, выделяя строку светло‐желтым цветом .danger Показывает опасное или потенциально негативное действие, выделяя строку светло‐красным цветом Результат действия этих классов на таблицу показан на рисунке 3.12. Рисунок 3.12 Использование классов оформления. Адаптивная таблица. Для создания адаптивной таблицы её следует поместить в контейнер с классом .table‐responsive, что приведет к появлению горизонтальной прокрутки на экранах меньше 768px. Прокрутка таблицы показана на рисунке 3.13. Эффективная разработка веб‐сайтов. Bootstrap 31 Рисунок 3.13 Адаптивная таблица. Тема 3. Текст, код, таблица 32 Практические задания к теме 3 Практическое задание 3.1 Работа со строчными элементами В этой практической работе рассматривается работа со строчными элементами. Создайте файл «practiceBootstrap3_1.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб‐приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб‐форм, кнопок, меток, блоков навигации и прочих компонентов веб‐интерфейсов, включая JavaScript расширения. Bootstrap использует самые современные наработки в области CSS и HTML, Практическое задание 3.2 Работа с заголовками В этой практической работе рассматривается использование классов заголовков и использование тега small для дополнительного текста. Создайте файл «practiceBootstrap3_2.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Заголовки, заданные через тег |