Empty Stack Developer
0,0
рейтинг
31 января 2014 в 00:44

Разработка → Вышел Bootstrap 3.1 перевод

Сегодня мы выпустили Bootstrap версии 3.1.0. В нее добавлены несколько новых возможностей, множество фиксов и улучшений, и обновили средства для сборки проекта. Основные изменения касаются документации, поддержки Sass, и некоторые других улучшения. Подробнее под катом.


Новая документация


image

Наиболее заметным изменениям подверглась наша документация. В текущей версии мы полностью обновили справочную систему, сфокусировав внимание на документации, а не на ее обертке. Новый дизайн главной возвращает краткий обзор ключевых функций и показывает некоторые интересные примеры использования.

Официальная поддержка SASS


image

Главное нововведение версии 3.1.0 – официальная поддержка Sass. Несколько недель назад мы обратились к наиболее популярному порту на GitHub и сделали его официальным – Bootstrap теперь доступен и на Sass. Вместо того чтобы раздувать основную ветку проекта поддержкой и Less, и Sass, на данный момент мы продолжим вести их как отдельные проекты. Ссылки на обе версии есть на главной, наслаждайтесь!

Новые примеры использования


image

Мы добавили три новых примера: Блог, Обложка и Панель инструментов. Каждый пример – это отдельная страница, которая поможет вам быстрее и проще разобраться в Bootstrap. Все они адаптивные и готовы к непосредственному использованию.

Улучшения


Несколько уже имеющихся модулей Bootstrap получили обновления:

  • Модальные окна имеют настройки размеров
  • Выпадающие списки имеют собственные классы для выравнивания их содержимого по краям
  • Добавлены иконки к классам валидации для наглядности


В общем, эти изменения делают компоненты фреймворка более сфокусированными, надежными и простыми в использовании. Список всех изменений можно посмотреть в релизе на GitHub.

Remote-содержимое модальных окон


Одно из наиболее важных улучшений внесено в модальные окна. Если вы сейчас используете функцию remote на своих модальных окнах, будьте осторожны, поскольку этот релиз может их сломать. Да, это изменение ломает обратную совместимость, но нам пришлось его сделать, поскольку он исправляет еще более давнюю упущенную ошибку. Приносим свои извинения за неудобства, которые это может вам принести, но мы упустили это исправление в нескольких последних патч-релизах.

Об изменениях, которые внесены этим исправлением, можете прочитать здесь.

Новая лицензия


Мы постоянно обсуждали возможность смены лицензии с Apache License 2.0, и благодаря всем участникам этого проекта и основной команде, наконец-то мы решились! Bootstrap 3.1.0 находится под лицензией MIT, что позволит максимальному числу людей использовать Bootstrap в своих проектах. Спасибо всем, кто помог этому случиться.

Улучшенные средства сборки


Мы постоянно стараемся улучшить наши средства разработки Bootstrap, и версия 3.1.0 вносит массу обновлений в этот процесс.
  • Мы перешли от Recess (поддержка Less 1.3.x) к препроцессору LESS (1.6.x)
  • Скомпилированный CSS практически идентичен исходникам в форматировании и структуре благодаря CSScomb и некоторым другим Grunt-плагинам.
  • Тесты также выполняются немного быстрее с помощью кеширования и параллелизации.
  • Веб-конфигуратор теперь генерируется с помощью Grunt-task, поэтому вы больше никогда не упустите обновление или добавление новой переменной. Внеся изменения, просто выполните grunt.

Внимание! Если вы работаете с Bootstrap локально, не забудьте удалить каталог node_modules/ и выполнить npm install перед началом работы с 3.1.0.

Скачать Bootstrap


Ознакомиться со списком всех изменений можно внизу этой страницы.

Скачать

Репозиторий Less-версии проекта на GitHub

Репозиторий Sass-версии проекта на GitHub

Также можете воспользоваться CDN:
<!-- Последний сжатый и скомпилированный CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

<!-- Опциональная тема -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">

<!-- Последний сжатый и скомпилированный Javascript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>


Видео из оригинальной статьи:


P.S.: Просьба об ошибках перевода и опечатках сообщать в ЛС, чтобы не засорять комментарии.
Перевод: @twbootstrap
Феликс @Any1
карма
15,7
рейтинг 0,0
Empty Stack Developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (46)

  • +1
    В последнее время очень стал бесить бутстрап. Когда его используют где надо, а где нет. Часто приходиться допиливать шаблоны, править отступы, править адаптивную вёрстку, а зачастую просто перевёрстывать сайт кусками. Чуть кто-то что-то добавит из девелоперпов, всё сразу же сыпется, и как правило этот кусок тоже приходится избавлять от бустрапной структуры. Вывод для себя сделал, что он хороший для быстрого накидывания админок, но бога ради перестаньте его использовать в шаблонах. В своих проектах полностью от него отказались, в пользу своих стилей и компонентов.
    • +8
      Чуть кто-то что-то добавит из девелоперпов, всё сразу же сыпется, и как правило этот кусок тоже приходится избавлять от бустрапной структуры.

      А можно парочку примеров?
      • –1
        Уже точно не помню всего. Сейчас ради сохранения нервных клеток и времени просто перевёрстываю проблемные блоки если есть в этом нужда.

        Например, есть у сайта топпер с классом row. В классе span2 три социальные иконки. Всё хорошо пока сайт влезает в размер экрана. При уменьшении экрана, сайт уменьшается по ширине, в какой-то момент span2 становится уже чем нужно, и одна из иконок падает вниз (в случае с фтоат) или налезает к примеру на меню (в случае с инлайн блоками). А потом клиент захотел ещё одну соц. иконку добавить или увеличить их размер. Девелопер добавил иконку, она не влезла в span2, тогда он переименовал блок в span3. Теперь у нас завалилось меню, нужно и блок меню переименовать. Переименовал блок меню, но не учёл, что при авторизации юзера, добавляются ещё пункты меню, и снова что-то упало. И лучше такую вёрстку не открывать на мобильном устройстве человеку с ярко выраженным перфекционизмом, да и шефу лучше не показывать. Приходится кучу стилей прописывать и переопределять, чтобы привести в нормальный вид. Быстрее выходит просто переверстать топпер, это займёт 15 минут.

        Другой пример, когда три колонки виджетов делают с помощью row-fluid. Видимо маржины, которые были указаны в бустрап не подходили под дизайн, и в темплейте внутренние блоки в колонках были шире чем сами колонки. Но это ещё ладно, другое дело когда эти маржины начинают переопределять. Понадобилось из 3 колонок сделать 2, девелопер убрал одну, переименовал спан, и у него всё посыпалось, хотя по логике колонок всё правильно. Не говоря уже, если и внутри блоков в колонках нужно использовать тоже row-fluid. Так же любят на первую колонку не ставить класс left-column, то tcnm не убирать левый маржин, а добавляют правый маржин на контейнер. Понадобилось контейнер окружить рамкой (ЕМНИП класс well), и выходит, что у левого края есть большой паддинг от колонок, и у правого совсем маленький.

        Я не знаю, правильное ли это использования бутстрапа (версии 2?), но это не единичные случаи, очень многие студии, создающие темплейты для Joomla / Wordpress и тд, делают вот такие сюрпризы.
        • +25
          span2 — это старая ветка 2.8, сейчас многое поменялось.
          Если использовать бутстрап из исходников, грамотно, то там все очень хорошо и понятно организовано и все очень легко менять.
          Все цвета, стили, например, лежат в variables.less, настройки адаптивности — в своем файле и т.д.

          Проблема не в бутстрапе, а в тех, кто неправильно его использует.
          • –27
            Бутстрап используют или те, кто не сильно разбирается в вёрстке, или ленивые люди.
            • +22
              Вы, наверное, из тех людей, кто пишет сайты на ассемблере. :-)
        • +4
          Вы описали проблемы 2-й версии. В третьей версии span2 заменятся например на «col-md-2 col-xs-6» то есть при разном размере экрана он занимает разное количество процентов ширины.
          • –2
            Пока ещё не приходили шаблоны на 3 бустрапе. Но как выше написали, если люди и его будут не правильно использовать, ничего толком не измениться, будь-то 2, будь-то 3. И всё же, пусть он будет для админок, ему там самое место.
            • +10
              Можно хоть чистые HTML и CSS неправильно использовать. Это не значит, что эти инструменты плохие.
              • +5
                Как раз без сахара фрэймворков разметку со стилями очень просто использовать неправильно. Так хоть залезут в документацию и посмотрят примеры, да скачают шаблоны. Примеры есть, после непродолжительного изучения БС нравится даже тем, кто фронтэнд терпеть не мог. Все ручками — не всегда рационально.
                А так да, по дурной голове можно что угодно сломать.
            • 0
              Для админок его тоже приходится сильно допиливать. А вообще, само название намекает, что фреймворк нужен для быстрого старта, чтобы не выводить каждый отступ. В продакшне часто уже мало чего от бутстрапа остается. Насколько я понял, вы занимаетесь созданием типовых сайтов по шаблонам. Согласен, тут обычно полет фантазии дизайнера и полный кастом по стилям. А для веб-приложений — бутстрап самое то.
              • 0
                Типовые это половина моей работы, треть из неё это присланные шаблоны, которые нужно переработать под требования клиента. В остальное время пилим свою коммерческую cms, и клиентские сайты на ней. Отказались от бустрапа на ранней стадии, зная какие изворотливые дизайны присылают клиенты, и одним из требований была брендируемая админка. На прошлой работе работал над веб-почтой.
            • 0
              У веб-проекта могут быть разные цели и задачи. Но если можно выполнить задачу при использовании Bootstrap, то стараюсь так и делать. Так как мне приятно с ним работать. Большое спасибо людям, которые его делают и поддерживают.

              Но, опять же, это лично моё мнение.
    • –15
      Хорошо так минусов схватил в карму от фанатиков. ) Хотелось бы посмотреть на проекты минусующих.
      • +3
        По делу отхватили, я считаю.
        Про неправильное использование вам выше указали.
        А из своих «плюсов» использования bootstrap-a могу добавить то, что мне не надо помнить как верстальщик назвал свои классы и подгонять css, а в любом месте я могу добавить условные «row» и «col-md-6» и быть на 95% уверенным как оно отобразится.
        • +1
          Ммм. По-моему вы не внимательно читали что я писал. Я не писал, что он плох, я написал, что большинство платных темплейтов под joomla \ wordpress, которые присылают на адаптацию под требования, очень плохо тот самым бутстрап используют. Когда попросили указать моменты, я указал. Я ведь не писал про сами проблемы бустрапа, а то как его используют не к месту. Что не так?
          • +5
            Вы написали, что вас «бесит бутстрап», а не компетенция верстальщиков.
            Да, приходится точить напильником, но в целом профит, на мой взгляд есть.
            • 0
              > В последнее время очень стал бесить бутстрап. Когда его используют где надо, а где нет.
              Возможно перед «Когда», мне нужно было запятую поставить. Соглашусь, не верно составил предложение.
              Возможно лично для меня такого профита нет, так свои велосипеды написаны. Но речь не о нём, а о том, что низкий порог вхождения порождает сюрпризы, которых казалось бы, в платных шаблонах быть не должно.
              • +1
                «В последнее время стало очень бесить использование бутстрапа где не надо». К такой формулировке никто бы не придрался. Использование. Вас же бесит сам TB. Не чувствуете разницу?

                Это всё равно что ненавидеть собак без намордников за то, что некоторые из них на людей бросаются. Проблема-то в безответственности хозяев.

                Так же некоторые люди ненавидят других людей по половым, возрастным, расовым признаком. И такой подход считается поверхностным. Указывает на низкий уровень развития его использующего.

                Мы же люди, как-никак. Отличаемся от животных, которые просто реагируют на знакомые раздражители, не вдаваясь в размышления о сути вещей. Не понимая, что одновременность события и раздражителя не означает их связь. Люди способны это понять при достаточном развитии. И докопаться до сути вещей.

                Не мне вам объяснять, каков средний уровень развития читателей ваших комментариев. Они отреагировали именно на демонстрацию узости мышления, сопоставимую с расизмом, сексизмом и кучей других -измов.

                Это подтвердилось ещё и отсутствием актуальных знаний. Twitter Bootstrap 3 специально сделали более кастомизируемым. Имею в виду, что это процесс легче. Проблемы есть, но подобные проблемы появились даже не в момент перехода от программирования на двоичных кодах к ассемблеру.

                Вас заминусовали, как твиттер-бутстраписта. Смиритесь. Можете потренироваться формулировать и снизить вероятность повторения.
  • 0
    не туда ответил… deleted
  • –4
    перевод адский
  • 0
    Мы постоянно обсуждали возможность смены лицензии с Apache License 2.0, и благодаря всем участникам этого проекта и основной команде, наконец-то мы решились! Bootstrap 3.1.0 находится под лицензией MIT, что позволит максимальному числу людей использовать Bootstrap в своих проектах. Спасибо всем, кто помог этому случиться.
    А в чем заключается трудность и опасность перехода с одной лицензии на другую?
    • 0
      Вкратце, помимо юридических вопросов трудность заключается в том, что нужно получить согласие каждого участника проекта (их 369) для перехода на новую лицензию. Обсуждение этого перехода можно почитать здесь.
      • 0
        А вдруг кто-то парился и собирал. И уже как бы набрал 368 разрешений… а тут ннна тебе :-)

        Конечно, маловероятно. Но представляется весело :-)
        • 0
          Их таки собирали, поэтому он так радуется. С середины страницы по ссылке выше идут периодические отчеты. Если кто-то отказал (такие были) — смотрели сколько кода он написал, к примеру некоторые голосовали, не написав ни одной строчки в текущей версии. Код остальных, возможно, переписывали. Есть полный список подписавшихся.
  • 0
    Так и не решили проблему с Checkbox. Если вешать change на кнопки и пытаться получить текущее состояние, то получаешь предыдущее.
    Из-за этого, к примеру, не корректно работает Scheduler.js. Если выбрать Repeat:Weekly, выбирать дни недели и смотреть в консоль — показывает в Object.Value.ReccurencePattern.BYDAY значения, не соответствующие текущему состоянию формы.
    Не могу только понять, это баг или фича?)
    • 0
      Отпишитесь, пожалуйста, как решили этот вопрос?
      • 0
        Это проблема самого Bootstrap видимо, в качестве временного решения я просто в функции, ответственной за переключение чекбоксов, сделал this.triiger('change') после изменения состояния.
        То есть вначале срабатывает this.change(function () {…, используемый в коде, потом bootstrap изменяет состояние и опять вызывает событие change для кнопок. Не элегантно, но работает =)
      • +2
        Посмотрел сейчас, ошибка scheduler.js в том, что они видимо по классу .active выбирают, а не по состоянию чекбоксов.
        Если действовать следующим образом:
         $('.btn-group').change(function(){
             var data = new Array();
        	 $('.btn-group input:checked').each(function(){
        		data.push($(this).val());
        	 });    
          });
        

        Все нормально в итоге. Видимое состояние соответствует data.
        • 0
          Спасибо!
  • –2
    Документация! Ну офигеть
    Лучше бы они сделали возможность отключения адаптивного интерфейса без необходимости проходить для этого через 10 кругов ада.
    • –3
      Для этого все еще есть БС2, пользуйтесь.
    • +2
      Non-responsive Bootstrap — Easily disable the responsiveness of Bootstrap.
      • 0
        сам то ссылку открывал?
        • 0
          Угу, но может я не так понял, что ты имеешь ввиду под «адаптивным интерфейсом»…
  • +4
    Non-responsive Bootstrap — Easily disable the responsiveness of Bootstrap.
    • +2
      oops
  • +1
    Осенью вышла новая 5-я версия Foundation, папы сабжа.
    Увидел его и влюбился. Хорошо, что бутстрап тоже не отстаёт и развитие идёт очень быстро. Жаль только, что он попсовый стал и его часто внедряют там где ни попадя.
    А в общем, инструменты просто отличные.
    • +1
      папы?
  • +6
    хехе, в прошлой теме про бутстрап меня заминусовали за вопрос «почему не sass и когда будет»

    получите распишитесь )
  • +1
    Когда они уже встроят стандартную валидацию форм. Пусть не в основной JS файл, а как дополнение. Мне очень нравится, как реализовано это в Foundation фреймворке. Это одна из причин, почему я использую Foundation.
    • 0
      В прошлом проекте, где требовалась валидация формы — применил jqueryvalidation.org
      Классы настраиваются и в целом для предупреждений и ошибок использовалось оформление из bootstrap.
      • 0
        Я понимаю, но вы поймите меня, что можно написать и самому. А в Foundation это как-то просто и прозрачно, на html-атрибутах построено.
      • 0
        Как это делается в Foundation, можете в моем блоге почитать. Думаю, понятней чем с jqueryvalidation.
  • 0
    У меня до сих пор меню в документации не влезает по высоте в экран макбука 13' (даже если не открывать дебагер). Нижние пункты становятся недоступны и нужно листать вручную. Я фанат бутстрапа, но fixed-меню определенно надо допиливать.
  • +1
    Наконец-то Sass в Bootstrap! *happy*

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.