Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать бутстрапом блоки адаптивно под такую хотелку ? / 18 сообщений из 18, страница 1 из 1
31.05.2017, 21:50
    #39463373
IApple
IApple
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
На широком девайсе блоки должны располагаться так:
------ ----------
| || |
| A || B |
| || |
| ||---------|
| || |
| || C |
| || |
------ ----------

В мобильном блок А должен встать между В и С так:
-------
| B |
-------
| A |
-------
| C |
-------
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2017, 21:57
    #39463374
IApple
IApple
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
Сори, с пробелами оказия вышла...
На широком девайсе блоки должны располагаться так:
---- ----
|***||***|
|*A*||*B*|
|***||***|
|***||----|
|***||***|
|***||*C*|
|***||***|
---- ----
В мобильном блок А должен встать между В и С так:
----
|*B*|
----
|*A*|
----
|*C*|
----
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2017, 22:14
    #39463380
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
IAppleНа широком девайсе блоки должны располагаться так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
 ------  ----------
|        ||             |
|   A   ||      B     |
|        ||             |
|        ||---------|
|        ||             |
|        ||      C     |
|        ||             |
 ------  ----------

В мобильном блок А должен встать между В и С так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
 -------
|    B    |
 -------
|    A    |
 -------
|    C    |
 -------
тег FIXED спасает. но считать пробелы таки уметь нужно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2017, 22:25
    #39463383
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
Так с бутстрапом не выйдет, во втором варианте B не может быть выше A, потому что для реализации первого варианта блоки должны идти в таком порядке:

<div>a</div>
<div>b</div>
<div>c</div>

Нужно будет лепить собственный стилевой костыль.

Для понимания: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2017, 22:27
    #39463387
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
А лучше сверстать такую хотелку вообще без бутстрапа, чтобы не вылезали внезапно бутсраповские правила, конфликтующие с костылем.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 08:34
    #39463512
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
AntonariyТак с бутстрапом не выйдет, во втором варианте B не может быть выше A, потому что для реализации первого варианта блоки должны идти в таком порядке:
Код: html
1.
2.
3.
<div>a</div>
<div>b</div>
<div>c</div>



Я с бутстрапом дело не имел... Но таки блоки можно менять местами используя новомодний ЦСС.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#box {
	display: flex;
	flex-direction: column;
}
#a {
	order: 1;
}
#b {
	order: 0;
}
#c {
	order: 2;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='box'>
	<div id='a'>a</div>
	<div id='b'>b</div>
	<div id='c'>c</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 09:17
    #39463535
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
krvsaAntonariyТак с бутстрапом не выйдет, во втором варианте B не может быть выше A, потому что для реализации первого варианта блоки должны идти в таком порядке:
Код: html
1.
2.
3.
<div>a</div>
<div>b</div>
<div>c</div>



Я с бутстрапом дело не имел... Но таки блоки можно менять местами используя новомодний ЦСС. я об этом и говорю, проще сделать без бутстрапа.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 10:25
    #39463589
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
Antonariyя об этом и говорю, проще сделать без бутстрапа.

На бутстрапе для этой задачи вообще CSS писать не надо, всё там решается, при чём примеры есть в доке, просто кому-то лень их читать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 11:56
    #39463709
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
hVosttAntonariyя об этом и говорю, проще сделать без бутстрапа.

На бутстрапе для этой задачи вообще CSS писать не надо, всё там решается, при чём примеры есть в доке, просто кому-то лень их читать.Да ладно? И как ты бутстрапом превратишь
abс в bac?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 12:02
    #39463718
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
AntonariyДа ладно? И как ты бутстрапом превратишь
abс в bac?

http://getbootstrap.com/css/#grid-column-ordering

Читай раздел Column Ordering. Если всё равно непонятно, поясняю, ты можешь сделать BAC для мобильных и расположить как ABC для монитора. В итоге задача решится без единой строчки кода на CSS.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 12:19
    #39463737
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
hVosttВ итоге задача решится без единой строчки кода на CSS.
ага, только эти строчки появятся в браузере
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 12:42
    #39463750
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
вадяага, только эти строчки появятся в браузере

Ты о чём? Какие строчки?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 13:02
    #39463767
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
hVosttAntonariyДа ладно? И как ты бутстрапом превратишь
abс в bac?

http://getbootstrap.com/css/#grid-column-ordering

Читай раздел Column Ordering. Если всё равно непонятно, поясняю, ты можешь сделать BAC для мобильных и расположить как ABC для монитора. В итоге задача решится без единой строчки кода на CSS.Ясно, я по привычке документацию по третьему бутстрапу читал, там нет col-push/pull
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 13:03
    #39463769
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
На tutorialrepublic клевые доки, но пятого бутстрапа там нет :(
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 13:28
    #39463797
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
AntonariyЯсно, я по привычке документацию по третьему бутстрапу читал, там нет col-push/pull

Вообще-то это и есть документация по 3-му бутстрапу

Дока по 4-му находится здесь: https://v4-alpha.getbootstrap.com/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 13:29
    #39463798
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
Antonariyпятого бутстрапа там нет

А где он есть?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2017, 13:59
    #39463820
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
hVosttAntonariyЯсно, я по привычке документацию по третьему бутстрапу читал, там нет col-push/pull

Вообще-то это и есть документация по 3-му бутстрапу

Дока по 4-му находится здесь: https://v4-alpha.getbootstrap.com/ значит просто там нет инфы про push/pull

hVosttА где он есть?ээээ... не знаю с какого потолка я пятую версию срисовал :)
наверное перепутал с пятой версией чего-то другого, что скрещивал с бутстрапом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.06.2017, 11:30
    #39466552
IApple
IApple
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать бутстрапом блоки адаптивно под такую хотелку ?
hVostt, спасибо, нашел тынц
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать бутстрапом блоки адаптивно под такую хотелку ? / 18 сообщений из 18, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]