Пользователь
0,1
рейтинг
16 сентября 2012 в 15:07

Разработка → Сниппеты для Twitter Bootstrap

HTML*, CSS*
Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail




Футер блогозаписи



Календарь на месяц



Лайк и компания



Интерфейс плеера



Боковое меню админа



Форматируем диск С



Форма входа(по всей ширине)



Панель текстового редактора



Панель навигации



Разноцветные заголовки



Форма регистрации



Простая форма входа



Разметка для блога



Кнопки



Такая табличка тоже полезна



Статистика например



Тарифные планы



Форма сообщения как у Твиттера



Простой профиль пользователя


Сашка @neuotq
карма
21,8
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

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

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

  • +6
    Недавно попался на глаза неплохой на мой взгляд date range picker.
    • +1
      Неплохо кстати будет если и другие пользователи накидают подобного. Как минимум в админке пригодятся подобные штуки. Ну и конечно для прототипа продукта с рабочими элементами.
    • +2
      Мой товарищ по команде запилил даже extension для Yii этого RangePicker'а — дюже симпатичным и удобным оказался.
      bitbucket.org/dmyuzhakov/daterangepicker
    • +2
  • +3
    Может не совсем в тему, сниппеты для Sublime Text 2, использую, очень удобно:
    github.com/devtellect/sublime-twitter-bootstrap-snippets
    • 0
      Доступно, кстати, через Package Control
  • –5
    Я прошу прощения, но это совсем для простаков. Примеры из документации — и те посложнее.
    • +6
      Это не примеры, это сниппеты.
      Дальше копировать-вставить. И пользуешься.
      В целом бывает полезны для всякой рутины. Не стоит столь категорично к ним подходить :-)
      • +1
        Ну «навигацию», форму входа и «статистику например» можно выкинуть. «Тарифные планы» и «Форма как у Твиттера» тоже улыбнуло :-) В общем, видно, руки чешутся, а применить негде ;-)

        Проверить на ошибки и отрезать края скринам.
  • +3
    Вся прелесть этих сниппетов в том, что они только в HTML, и не требуется подсовывать к стилям бутстрапа еще какие то сомнительные модификации. Очень подходит для прототипов и сайтов, не нуждающихся в дизайне.

    Им пора задуматься о создании каталога и над организацией правильной структуры разделов, а то как снипетов станет больше, будет уже тяжело во всём этом ориентироватся.
  • +1
    Спасибо, снипет по ссылке bootsnipp.com/snipps/full-width-login-form сейчас использовал в своем проекте.
  • +7
    jQuery UI Bootstrap
    addyosmani.github.com/jquery-ui-bootstrap/

    Bootstrap Image Gallery
    blueimp.github.com/Bootstrap-Image-Gallery/

    jQuery Mobile Bootstrap темы
    github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

    Colorpicker и Datepicker
    www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm

    Стилизация (кастомизация) Bootstrap
    stylebootstrap.info/

    Кнопки стилизация
    charliepark.org/bootstrap_buttons/

    Темы Bootstrap
    bootswatch.com/

    facebook Bootstrap тема
    ckrack.github.com/fbootstrapp/

    Django Bootstrap
    github.com/dyve/django-bootstrap-toolkit

    WordPress Bootstrap
    bootstrapwp.rachelbaker.me/
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Кто-нибудь знает, а есть что-нибудь вроде date picker'а, только не с датой, а с выбором значений «от и до» из определенного промежутка? Как это сделано на я.маркете для цен, например.
    • +1
      Это слайдер что ли?
      Можно отсюда взять addyosmani.github.com/jquery-ui-bootstrap/
      • 0
        Спасибо, не догадался его так обозвать. Всё гуглил range picker'ы какие-то.
  • +2
    Меня очень порадовали инлайн редакторы на базе popover: vitalets.github.com/bootstrap-editable/
    • +1
      да, отличная штука!
    • 0
      Приятно слышать!
      Скоро выйдет Yii-extension под него ;)
  • 0
    Отличная подборка!

    Добавлю от себя:
    Самый активный форк для datepicker: github.com/eternicode/bootstrap-datepicker
    WISYWIG редактор: jhollingworth.github.com/bootstrap-wysihtml5/
    • 0
      html-код не посмотреть.
      попробовал добавить левый отступ, глянул firebug-ом как он формируется, понял почему html не посмотреть :)
  • 0
    Есть сайт на русском, где есть спнипеты на Bootstrap переведенные с этого сайта + еще пару ресурсов по бутстрапу на русском — www.bootstrap-ninja.ru/

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