Bootstrap. Верстка адаптивного сайта.

12
S
На сайте с 05.01.2010
Offline
80
1268

Кто нибудь использует bootstrap для адаптивной верстки?

Можно ли на бутстрапе реализовать вот такую вещь. По макету ширина сайта, скажем 1000px, в нем один блок под вертикальное меню шириной 250px, остальное место занимает второй блок.

Хотелось бы что бы при сужении окна ширина блока с меню оставалось неизменной, а уменьшался бы второй блок. А когда ширина окна становится менее, скажем, 750px колонки располагались бы друг под другом. На bootstrap при сужении уменьшаются обе колонки.

Актуально ли сейчас по простому создавать медиа файл и и в нем изменять все нужные стили на сайте в зависимости от размера окна, без всяких фреймворков?

@media only screen and (max-width: 500px){

}
Плюсоните если помог...
web-developer
На сайте с 24.11.2014
Offline
15
#1
Актуально ли сейчас по простому создавать медиа файл и и в нем изменять все нужные стили на сайте в зависимости от размера окна, без всяких фреймворков?

Актуально.

S
На сайте с 05.01.2010
Offline
80
#2

не добиться на бутстрапе такого эффекта?

totamon
На сайте с 12.05.2007
Offline
350
#3
Soxay:
не добиться на бутстрапе такого эффекта?

добиться...

Включение адаптивных возможностей

Включите в вашем проекте адаптивный CSS, добавляя соответствующие мета теги и дополнительные таблицы стилей в <head> вашего документа. Если у вас компилированный Bootstrap, загруженный с нашей страницы, то вам всего лишь нужно добавить мета тег.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Внимание! По умолчанию в Bootstrap не включены адаптивные возможности, поскольку это не везде требуется. Вместо того, чтобы разработчики каждый раз отключали этот функционал, логичнее будет дать им возможность включать его при необходимости.
Хостинг от 90р ( https://goo.gl/h1VRkY ) и ВПС от 161р ( https://goo.gl/vw9JH7 ) 14 дней бесплатный тест! Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno а тут ВПС за 1,25$ https://8fn.ru/vps1doll Монетизация любых сайтов PUSHами ( https://8fn.ru/push ) - лучшая цена клика и показа ;)
S
На сайте с 05.01.2010
Offline
80
#4

totamon, это другое. Там стандартное описание бутстрапа.

Сразу после твоей цитаты "Изменяет ширину колонок в сетке", а часто бывает нужно иметь 1 колонку фиксированной ширины и изменять ширину второй.

totamon
На сайте с 12.05.2007
Offline
350
#5

Soxay, ну выше прокрути тогда Плавающая сетка - Демонстрация - 3 строка в примере...

Soxay:
Кто нибудь использует bootstrap для адаптивной верстки?

может лучше к специалисту обратиться?) тысячи адаптивных шаблонов на bootstrap доступны как фрии так и платных, а ты такие вопросы задаешь...

S
На сайте с 05.01.2010
Offline
80
#6

totamon, однако ты мне не можешь на такой вопрос ответить).

Адаптивные шаблоны бывают разные, но меня интересует конкретный случай. если это в бутстрапе нельзя то он бесполезен.

totamon
На сайте с 12.05.2007
Offline
350
#7

Soxay, ты меня тролишь? я тебе 2 раза ответил на вопрос, и самый ценный ответ это

totamon:
может лучше к специалисту обратиться?

bootstrap это фреймворк на котором можно любой макет реализовать, было бы желание...

PR
На сайте с 30.12.2007
Offline
93
#8
Soxay:
он бесполезен

В вашем случае скорее всего да.

Just only one question to Google: http://stackoverflow.com/a/26849081

S
На сайте с 05.01.2010
Offline
80
#9

totamon, я верстальщик и вопрос этот возник потому-что я полностью прочитал документацию бутстрапа и не увидел там той возможности о которой спрашиваю. Наверняка есть какая-то хитрость.

PROGRAMMATOR, я конечно понимаю что читать пост лень, но рас отвечаешь дочитал бы. Я спрашивал не просто как сделать блок нужной ширины, а как сделать что бы они потом вставали друг над другом.

Вот конкретный пример для тех кому лень читать, специально взял порог 750px как на bootstrap. Вот так можно сделать на bootstrap? При экране менее 750px блоки встают друг над другом.

html

<div class="obertka">
<div class="right">
<h2>300px сохраняется</h2>
</div>
<div>
<h2>размер уменьшается пока экран не станет менее 750px</h2>
</div>
</div>

css

.right{
float: right;
width: 300px;
border: 1px solid #000;
}
.obertka{
max-width:1200px;
margin: 0 auto;
border: 1px solid #000;
}

@media only screen and (max-width: 750px){
.right{
width: 100%;
float: none;
}
}
S
На сайте с 13.10.2014
Offline
149
#10

Бутстрап, как и большинство фреймворков (как, например foundation с которым я плотно работал), работают с 8-12-16 колоночными структурами фиксированной ширины, просто подгоняя ширину колонки под текущий экран. Отсюда всплывают все проблемы, как-то невозможность сделать одной колонки фикс - а остальные плавно-меняющиеся.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий