Аннотация В этой статье я попытаюсь рассказать о том, как на основе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс для небольшого (одностраничного) веб-приложения, имея лишь базовые знания HTML. Сразу предупреждаю, специалистам это будет не интересно, речь пойдет о базовом стандартном функционале.
Вводный В свободное время в качестве хобби разрабатываю одностраничный агрегатор интересных заголовков новостной ленты.
В какой-то момент базовый функционал прототипа был готов, не хватало только галочки возле задачи «Проектирование».
Постановка задачи Получите красивый пользовательский интерфейс, не овладевая магией дизайнера (у вас есть только базовые знания Paint) и программиста (у вас есть только базовые знания html и css).
Страница состоит из следующих элементов
- Имя
- Форма для отправки ссылки на новость
- Форма для отправки уникального кода считывателя на электронную почту
- Форма ввода уникального кода считывателя
- Список новостей, сгруппированный по дате (дата, время, заголовок-ссылка, количество кликов, новость можно прочитать или новая)
- Ссылка на рсс
- Ссылка на расширение Chrome
- идентификатор выпуска
- электронная почта обратной связи
все, что прошло эстетический фильтр, застряло в техническом фильтре ( см.
постановку задачи, я просто не смог адаптировать сложный код под свои нужды).
И вот, почти случайно, я оказался в рай .
Я не буду подробно описывать Bootstrap, подробности вы можете посмотреть перейдя по ссылке, я перечислю основные элементы, для которых есть готовые стили (иногда несколько):
- Стандартные элементы форматирования HTML
- Списки
- Фрагменты кода
- Таблицы
- Формы
- Кнопки
- Ээлементы навигации
- Вкладки
- Пагинация
- Миниатюры
- Информационные сообщения
- Индикаторы выполнения
Все, что вам нужно для разработки прототипа.
Далее я расскажу вам, как я использовал элементы 1,4,5 и 7 из списка.
Итак, шаг 1. Подключаем Bootstrap
Скачайте и распакуйте архив с Bootstrap в корневую папку нашего сайта, подключите css:Вторая строка нужна для автоматической адаптации интерфейса к устройствам, поддерживающим Bootstrap.<head> .<link href="/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> .
</head>
Шаг 2. Украшаем «мясо».
Под «мясом» я подразумеваю список новостей.
Самый простой способ сделать это — использовать таблицу с отключенными фреймами.
Первый столбец — дата (только один раз на группу), второй столбец — время, третий — заголовок и количество переходов.
Все это по правилам Bootstrap нужно упаковать в контейнер: <body>
<div class="container">
<table class="table">
<tbody>
<tr>
Теги: #веб-дизайн #Bootstrap
-
Фонд Знаний И Кубики Навыков
19 Oct, 24 -
Анонимные Комментарии (Плюсы И Минусы)
19 Oct, 24
