Как настроить twitter/bootstrap более глубоко?

Question

Я недавно нашел твиттер/бутстрап и почувствовал это как удобное и простое решение для таких людей, как я, которые плохо работают в дизайне и продолжают бороться с необработанными html/css-кодами. Специально для отдельных проектов бутстрап экономит массу скучных работ. (фиксированные полосы, выравнивающий центр, paddings, поля и т. д.) Однако я замечаю, что загрузочный блок поддерживает только очень ограниченную настройку, например цвета, размер, шрифты и т. д. Кто-нибудь знает, как шаг за шагом настраивать bootstrap лучше для конкретных целей. В моем сценарии у меня возникли следующие проблемы:

1. Как удалить тисненый/проецируемый эффект всех кнопок. Этот узор кажется чрезмерно использованным в Интернете, я предпочитаю простой цвет (с некоторым белым светом) без этих эффектов.

2. Кажется, что bootstrap не предоставляет решение для всплывающего меню, и мой старый скрипт зависит от загрузочного устройства, а не от . Неужели я ошибаюсь? Кто-нибудь знает такое решение . Я имею в виду решение, подобное тому, как StackExchange выпадающее меню в верхней части этой страницы.

3. Есть ли способ добавить некоторый самоопределяемый новый класс? Как добавить еще один тип кнопки, такого рода вещи?

4. Также я очень рад услышать хорошие предложения о том, как использовать преимущества бутстрапа.

Также эти вопросы выходят из-за того, что я нахожу, что исходные коды css и js довольно неприятны, не уверен, что было бы неплохо начать переписывать коды, не зная направления.

Answer 1

Существует два основных способа сделать это.

1. Скачайте безлимитные фишки Github, внесите изменения в свои пожелания и скомпилируйте свою собственную версию Bootsrap. В конце концов, это Open Source. Файлы хорошо структурированы и документированы. И хотя это может показаться сложным, если вы не знакомы с меньшими затратами, на самом деле это не так сложно, и есть тонны преимуществ использования прекомпилятора, как меньше, вместо стандартного css. Это мой метод выбора! Подробнее здесь: http://lesscss.org/

2. Создайте свой собственный стиль, и импортировать его после bootsrap CSS. Этот способ может перезаписать стили bootsrap со своими стилями и добавить совершенно новые стили.

Чтобы ответить на ваши вопросы в индивидуальном порядке:

1. Если следовать технику 1, вы могли бы пойти следующим образом:
   • редактировать свою версию buttons.less https://github.com/twitter/bootstrap/blob/master/less/buttons.less
   • на линии 146 и ниже, замените .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); чем-то вроде background-color: @btnPrimaryBackground и т. д.
   • перекомпилируйте bootstrap.less, et voila!
2. Как насчет попутчика: http://twitter.github.io/bootstrap/javascript.html#popovers Вы можете разместить свое собственное меню внутри него.
3. Конечно, как я описал в первой части своего ответа. Лучше всего было бы использовать вариант 1 для этого, но должен быть возможен в обоих направлениях.
4. Опять же, часть 1 ответа, вариант 1 ... (я пятнистость образца здесь)

Надеется, что это поможет вам на пути. Наслаждайтесь бутстрапом и не забывайте проверять отзывчивые возможности, потому что на мой взгляд, на самом деле бутстрап превосходит!