LINUX.ORG.RU

Как сверстать сайт на twitter bootstrap, не будучи дизайнером?

 , ,


1

2

Пытаюсь сверстать макеты для сайта, решил использовать bootstrap, чтобы не получилось вырвиглазное говно, а оно все равно получается именно такое. Ну конечно не просто черный текст на белом фоне как у просто html без css, но все равно плохо, и добавляются новые проблемы - этот bootstrap какой-то мудреный, непонятный. Если в обычном css мне понятно, что делать, чтобы там сайдбар сделать определенного размера, и чтобы он выглядел как сайдбар, а не как просто несколько ссылок, расположенных вертикально, то с бутстрапом ничего непонятно - там же на всё своя система. Да и в css вроде наследования нет, так что если я хочу сделать див с классом [bold]главная_кнопка[/bold], то черт его знает, как это сделать - ведь написать в css, что [bold]главная_кнопка[/bold] должна иметь те то и те то классы бутстрапа, я не могу.

И еще одна проблема - с бутстрапом все попытки разделения стиля и семантики летят к чертям, и получается, что то, как должен выглядеть сайт, прописано в самом html, а не в css. А в итоге прямо в html пишется, что этот див - 9 колонов, другой див - 3 колонки. Ужас.

А в итоге прямо в html пишется, что этот див - 9 колонов, другой див - 3 колонки. Ужас.

Они же отзывчивые!! Темнота.

anonymous ()
Ответ на: комментарий от anonymous

Что? Я говорю о таких классах, как col-md-3, которые например используются вот тут http://getbootstrap.com/components/ чтобы сделать основную часть на 9 колонок и сайдбар на 3 колонки.

hlebushek ()
Ответ на: комментарий от hlebushek

Что?

Уменьши ширину окна браузера на бутстраповской доке. Внезапно, правда?

anonymous ()

Без less и grunt, чисто в CSS на уровне «9 колонов», - никак и дикий изврат.

anonymous ()

гм

1) вбей в поисковике free bootstrap themes, прогляди темки бесплатные, подбери самую подходящую для тебя, и верстай на её основе - профит!

2) ну глупо блин не пройчитав хотя бы туториал официальный жаловаться что ты чего то не знаешь. ты ещё html/css попробуй не изучить и жаловаться что не знаешь как «жирный текст сделать». Ну смешно же ей богу!

3) да, пишешь прям там, див три колонки шириной. ничего, брат жив. более того подозреваю что это банально довольно удобный способ. то что возможности сделать по другому факически нет - это конечно наверное тормозит прогресс. наверное если бы возможность была, уже была бы куча дополнений где было бы всё реализовано «как надо». Надо предполагать это был некий компромис между простотой и гибкостью.

AndreyKl ★★★★★ ()
Ответ на: комментарий от anonymous

ну, я честно говоря не верстальщик ни разу, так, по долгу службы. не будешь же всё время верстальщика просить.. но использую col-ww-xx постоянно практически. семантически значимое что то в лесс редко описываю в смысле ширины колонок. может не так делаю, бог его знает..

AndreyKl ★★★★★ ()

с бутстрапом все попытки разделения стиля и семантики летят к чертям

Конечно. Зато есть ui.angular - ангуляр на бутстрапе. Очень упрощает жизнь.

то черт его знает, как это сделать

Дык, бутстрап очень жёстко регламентирует внешний вид всего.
Сначала сиди и кури лэйаут бутстрапа (для экранов разной ширины!!!) и кури варианты отображения кнопок, например (различные цвета).

Только после успешной вёрстки можно переходить к темам бутстрапа (я до этого пока не дошёл).

И да, внимательно изучив маны бутстрапа и почитав про его глюки на SO, не будучи дизайнером можно сверстать что-то приемлемое. Если не изучить теорию лэйаутов - всё уедет к чертям.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от Shadow

И да, внимательно изучив маны бутстрапа и почитав про его глюки на SO, не будучи дизайнером можно сверстать что-то приемлемое. Если не изучить теорию лэйаутов - всё уедет к чертям.

Теория лэйаутов это что?

Я нашел такой туториал http://www.w3schools.com/bootstrap/. Но и из него не понял, 4 разных класса для grid: xs, sm, md, lg; и зачем мне использовать что-то кроме md, если бутстрап по идее должен при маленьком экране все автоматически как-то сворачивать и подгонять.

hlebushek ()
Ответ на: комментарий от hlebushek

По контролам-компонентам туториал:
http://getbootstrap.com/components/
По гриду-лэйауту:
http://getbootstrap.com/css/#grid

Главное - поэкспериментировать и посмотреть, как это всё себя ведёт при разных размерах окна.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от AndreyKl

Он ж на less нарисован и на главной у них написано, как-где качнуть исходники и сделать себе хорошо.

Там разложено по полочкам- ребенок разберется, но нужен компилер, они советуют ноду -> grunt.

Короч ставишь в buttons.less прозрачность на элемент кнопки, автоматом получаешь единый упорядоченный .css со всеми префиксами и рядом пожатый.

Или открыть variables.less и издеваться над видом всего дефолтного простым изменением переменных- размер, цвет, та же Grid system, которая тебя смущает...

Закончил рисовать- отключить все ненужное в bootstrap.less.

И это вершки...

Но эту корзинку новых «понимашек» еще надо в башку себе впихнуть. Но это будет хорошо и возможно красиво.

А тыкаться вслепую в мурзилку «Bootstrap» и говнокодить...

-В фотожопе накидать быстрей.

anonymous ()
Ответ на: комментарий от hlebushek

4 разных класса для grid: xs, sm, md, lg; и зачем мне использовать что-то кроме md, если бутстрап по идее должен при маленьком экране все автоматически как-то сворачивать и подгонять.

Ну вот на большом экране у тебя должно быть 4 колонки, делаешь col-md-3, на планшетах будет хорошо всего две колонки: col-sm-6, а на телефонах вообще в одну: col-xs-12.

И да, если хочется нормально модифицировать бутстрап, используй less или sass-версию, компиль через grunt/gulp и будет тебе счастье. Но во-первых, придётся научиться верстать, а во-вторых, бутстрап сделан довольно коряво и многие вещи в нём захардкожены, как некоторые настройки отступов/цветов, так и последовательности тегов. И это иногда сильно раздражает.

static_lab ★★★★★ ()

у тебя есть дизайн страницы? тогда проще сверстать с нуля, не использую никакой бутстрап.

msgascii ()
Ответ на: комментарий от static_lab

Так а если я делаю 1 сайт, а не 4 разные версии, то что делать?

hlebushek ()
Ответ на: комментарий от hlebushek

тогда я бы посоветовал найти бесплатные уже сверстанные шаблоны (тысячи их!) и натянуть на свой сайт.

msgascii ()
Ответ на: комментарий от anonymous

Не путай его правкой css, он ещё то, что без правки не понял.

Shadow ★★★★★ ()
Ответ на: комментарий от Shadow

Ну я тогда не понял, bootstrap предполагает десктопным браузерам отдавать страницу с элементами md, телефонам - какие-то другие 2 буквы, и так далее?

hlebushek ()
Ответ на: комментарий от msgascii

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

hlebushek ()
Ответ на: комментарий от hlebushek

Тебе вот уже ссылку кинули.

Это ОДНА страница, но условные параметры в css. И css руками в bootstrap трогать нельзя!

Shadow ★★★★★ ()
Ответ на: комментарий от hlebushek

Ты смотри, при уменьшении ширины окна этот сайдбар может превратиться в красивое выпадающее меню.

Shadow ★★★★★ ()

А в итоге прямо в html пишется, что этот див - 9 колонов, другой див - 3 колонки. Ужас

ты сайт с идеальной вёрсткой хочешь или рабочий прототип на коленке?

вот это от меня - http://itchief.ru/lessons/bootstrap-3/?page=12

novoxudonoser ()
Ответ на: комментарий от novoxudonoser

ты сайт с идеальной вёрсткой хочешь или рабочий прототип на коленке?

Что-то среднее. Не на коленке, но и не тратить на это все мое время, учитывая, что мне не только дизайн и фронтэнд делать.

hlebushek ()
Ответ на: комментарий от hlebushek

верстай на скорую руку не страдай перфикционизмом , у тебя ограничены ресурсы и время, идеальное враг хорошего, хорошее враг рабочего, рабочее враг необходимого, кто на твой html смотреть то будет? и не стоит прерываться тем что я могу сделать через коленку но хочу по нормальному но пока ты учишься и у тебя ограниченные условия это более чем нормально, а по ссылке полазий (я смог за неделю посивного пинания при 0 начальных знаниях освоить это дело) и заглени в сорцы бутстрапа

novoxudonoser ()
Ответ на: комментарий от MrGrey

Я же написал РУКАМИ не трогать!

освоить сначала вёрстку классами, потом less/sass и параметры для css. Топикстартеру вообще не нужны ни темы, ни css - только красивые формы, что обеспечивается изучением мануала по классам бутстрапа.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 2)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.