В этой статье я собираюсь взглянуть на это глазами разработчика бэкэнда: я один из тех, кому Bootstrap должен помочь, я думаю, так как у меня нет отличных дизайнерских навыков или времени, чтобы тратить на графику подстройка.
Погрузись в пример
Вот урезанная версия примера Bootstrap, который не включает виджеты JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap, from Twitter</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
</body>
</html>
Только две таблицы стилей включены. Результатом является полностью изменяемый размер макета, как в расположении блоков, так и в их собственной ширине; Я никогда не смог бы создать горизонтальную панель навигации ни при каких условиях:
существуют также графические настройки по умолчанию, такие как цвета, которые можно переопределить Я думаю, что целью также является быстрая разработка прототипа, даже если вы такой разработчик, как я, который не хочет тратить весь день на CSS-твики, чтобы сделать что-то презентабельное. Вы не будете представлять белый фон и div с черными рамками снова.
Причины использования инструмента CSS
… на самом деле похожи на причины для JavaScript-фреймворка: CSS сам по себе не является мощным языком, и есть проблемы с поддержкой разных браузеров, которые фреймворк обычно решает за вас. Последняя проблема еще более распространена сегодня с каждым новым телефоном с включенным браузером. На самом деле, вы, вероятно, уже используете какой-то внешний ресурс CSS, например, Yahoo! CSS сброс.
Не ясно, будет ли стандартная предварительная обработка для CSS, чтобы помочь с удалением дублирования. LESS — это только один из языков, но он становится все более популярным; кстати, когда вы вступаете в брак с фреймворком, вам приходится иметь дело с его особенностями.
Разметка / разделение презентации
Разделение полной разметки (HTML) и представления (CSS) всегда было ложью, по крайней мере, реализовано в CSS 2.1. Например, порядок элементов HTML имеет большое значение: свойства с плавающей точкой изменят поведение и потребуют переупорядочения столбцов всякий раз, когда вы хотите изменить некоторые ширины в дизайне. Также обычно вставляют множество вложенных элементов div для применения магии CSS или для совместимости со старыми браузерами.
Многие из доступных классов на самом деле разделяют проблемы представления с такими именами, как .container и .navbar. Но есть много обидных, таких как .span4, .grid_row.
Есть способы, такие как использование препроцессора LESS CSS, чтобы скрыть эти классы за вашими собственными , которые наверняка будут иметь специфичные для дизайна имена. Конечно, вам нужно будет перекомпилировать CSS для развертывания, хотя это может быть сделано автоматически во время разработки.
Как обычно, вы можете увидеть проблему фреймворков, которые будут сравниваться с их мощностью и скоростью:
- блокировка: ваш дизайн не будет работать без всех ресурсов Bootstrap, и его будет нелегко перенести в будущем.
- больше технологий, чем то, что вам строго нужно (готовы перейти в LESS?).
- кривая обучения: вместо того, чтобы быть в курсе только селекторов и свойств CSS, теперь у вас есть новый целый набор базовых классов для изучения.
Биты JavaScript
Виджеты Bootstrap основаны на jQuery и представлены в виде пользовательских плагинов, которые можно отдельно загружать в виде отдельных файлов .js.
Честно говоря, список плагинов, собранных под единым дизайном, впечатляет:
- модалы (наложения диалогов), всплывающие подсказки и всплывающие окна для размещения в определенных точках текста.
- инструменты навигации, такие как выпадающие меню, scrollspy обновляется в зависимости от положения на странице.
- организационные инструменты, такие как вкладки и складные элементы (например, аккордеоны).
Нетрудно найти эти плагины в другом месте; но есть ценность в одном месте, где они предоставляются вместе и имеют общий общий стиль.
Опять же, мы находим проблемы всех фреймворков снова, если мы задаем эти вопросы:
- Как я могу расширить один из этих плагинов? Для этого была бы кривая обучения, если это вообще возможно.
- Как я могу создать новый плагин, который имеет такой же стиль, как эти? Я уверен, что мне нужно будет; будет еще одна кривая обучения «percorrere».
- Что произойдет, если мне понадобится еще одна интегрированная среда по функциональности и внешнему виду, например Dojo Toolkit?
Выводы
Bootstrap — это отличный интерфейс с открытым исходным кодом, и он, вероятно, будет полезен для приложений с пользовательским интерфейсом небольшого или среднего размера. Если у вас есть больше времени и денег для инвестирования, существующие фреймворки JavaScript и веб-дизайнер вам пригодятся; Bootstrap — это попытка снизить стоимость создания интерфейса пользователя, состоящего из стандартных элементов, таких как дизайн на основе сетки и навигационные виджеты.