Сделать секцию адаптивной - butstrap 3

@Konstan · Регистрация: 03.11.2015

Студворк — интернет-сервис помощи студентам

Здрасте , понемногу учусь верстке - верстая паблик макеты . В очередном макете был блок / секция / экран (хз как их там называют) и вроде как-бы сверстал как на макете вот только как заставить всё это быть адаптивным нету и малейшего понятия ... молю о помощи (желательно разжёванной чтоб я понял как это работает)

@Kifsif · 04.12.2017, 19:34

Бутстрап уже 4-й хорош, и книжки по нему есть. Бесплатно в интернете. Да и дока хороша. Зачем труп тревожить?

Далее, к вашему коду.
Задайте себе два вопроса:
1) Сколько вы сделали колонок и какой ширины?
2) Наводящий вопрос: может быть, лучше сделать хотя бы две колонки по 6 для большого экрана? Тогда при сужении экрана в определенный момент 12 колонок в один ряд не влезут - и правая колонка будет перенесена вниз.

Попробуйте, пожалуйста. Не будет получаться - пишите. Подумаем вместе.

@Freeze_Breeze · 04.12.2017, 20:05

Konstan, Для начала определитесь хотите ли вы использовать bootstrap 3 или bootstrap 4 или же на чистых flex-box`ах верстать? А то смотря на вашу верстку впадаешь в панику... Я честно говоря еще не видел, что бы bootstrap 3 (который на float) использовали вместе с flex-box`ами, это жуть скажу я вам

Еще такой вопрос: Зачем Вы подключили библиотеку jQuery и зачем вам эти строчки кода?

HTML5
1
2
3
4
5
6
7
8
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
<meta name="viewport" content="width=device-width, initial-scale=1">

Что Вы с ними будете делать?

@Freeze_Breeze · 04.12.2017, 20:08

Konstan, для начала адаптивной верстки качайте эту книгу (картинка) и заходите по этой ссылке тык

@AlexZaw · 04.12.2017, 20:15

Сообщение от Kifsif

Тогда при сужении экрана в определенный момент 12 колонок в один ряд не влезут - и правая колонка будет перенесена вниз.

Ширина элемента же в процентах задается, так что в любом случае все они влезут на экран. Ну максимум внутренние элементы выпадут

@Kifsif · 04.12.2017, 20:31

Мы про сетку бутстрапа.
Вот она https://getbootstrap.com/docs/... id-options
Пардон - тут про четвертый. Но в 3-м подобное. Кто хочет - сам посмотрит.
В пикселях она.

@AlexZaw · 04.12.2017, 21:06

Не по теме:

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

@Konstan · 04.12.2017, 21:43 **[ТС]**

Сообщение от Kifsif

Бутстрап уже 4-й хорош

Сообщение от Freeze_Breeze

хотите ли вы использовать bootstrap 3 или bootstrap 4

4 вроде ещё в альфа (или бета) Так разве там не будет куча багов ?

Сообщение от Freeze_Breeze

Зачем Вы подключили библиотеку jQuery и зачем вам эти строчки кода?

У меня что-то вроде шаблона
Там этот код дефолтный

HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template - bootstrap 3</title>
    <link rel="stylesheet" href="css/default/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    
 
<script src="js/default/jquery-3.2.1.min.js"></script>
<script src="js/default/bootstrap.min.js"></script>
<!-- Мой код JavaScript -->
<script src="js/main.js"></script>
</body>
</html>

Сообщение от Kifsif

Наводящий вопрос: может быть, лучше сделать хотя бы две колонки по 6 для большого экрана? Тогда при сужении экрана в определенный момент 12 колонок в один ряд не влезут - и правая колонка будет перенесена вниз.

Изначально так и делал но тогда что-то пошло не так ... (уже не помню) сейчас снова попробую и если снова что пойдёт не так то отпишу

@Kifsif · 04.12.2017, 21:53

Сообщение от Konstan

4 вроде ещё в альфа (или бета) Так разве там не будет куча багов ?

Пока идет учебный процесс, 4-й как раз станет мейнстримом. Посмотрев на 4-й, понимаешь, что за ним будущее. А третий - это уже день вчерашний.

@Denno · 04.12.2017, 22:59

Сообщение от Kifsif

Посмотрев на 4-й, понимаешь, что за ним будущее. А третий - это уже день вчерашний.

Серьёзно?))) Тут один персонаж недавно писал, что флекс боксы еще 5 лет не надо использовать.

@Konstan · 04.12.2017, 23:21 **[ТС]**

Сообщение от Kifsif

Подумаем вместе

Ну вроде как-бы получилось но мне почему-то кажется вот это не очень надёжно как-то ...

CSS
1
2
3
.img-button{
    padding-top: 2em;
}

@Kifsif · 04.12.2017, 23:28

Мы все делаем выбор самостоятельно.

Вот https://caniuse.com/#search=flex

Судя по диаграмме, уже можно вполне себе использовать. Это первое.
Второе: никто же не заставляет.
Третье: есть еще и интранеты, так что вести речь о повальном выжидании - ну, это не наш метод.

Рациональное зерно в выжидании есть всегда, но вот есть у нас кумиры среди сайтов.
Можно на них ориентироваться - как перейдут, отчего же и нам не перейти. Да что далеко ходить - вон гугль можно открыть и поискать на их странице display:flex. А дальше выводы делаем самостоятельно. А вот NY Times что-то не использует пока. BBC тоже не использует. Американский Белый дом - не использует. Наша Дума не использует.

Ну, логично бы и еще подождать. Но при чем тут Бутстрап 4?

Добавлено через 5 минут

Сообщение от Konstan

Ну вроде как-бы получилось но мне почему-то кажется вот это не очень надёжно как-то ..

Тут все с технической точки зрения железобетонно. А вот соответствует ли макету - вопрос открытый.

@Konstan · 04.12.2017, 23:44 **[ТС]**

Сообщение от Kifsif

соответствует ли макету

Скрин макета приложил

Сообщение от Kifsif

железобетонно

радует

@Fourd · 05.12.2017, 12:42

Не по теме:

вставлю и я 5 копеек
вышла, более полугода назад (а по факту еще раньше), замечательная вещь под название CSS Grid, советую хотя бы ознакомится (на ютубе есть доклад от Rachel Andrew, около часа, но если жалко времени можете поискать русскоязычные пояснения за 20-30мин)
и поднимая вопрос об актуальности версий, ИМХО бутстрап 3/4 уйдет на задний фон после окончательного перехода браузерами на CCS Grid (в смысле эта спецификация уже является нативной разработкой, конечно за исключением старых версий IE)

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	04.12.2017, 19:34
	Бутстрап уже 4-й хорош, и книжки по нему есть. Бесплатно в интернете. Да и дока хороша. Зачем труп тревожить? Далее, к вашему коду. Задайте себе два вопроса: 1) Сколько вы сделали колонок и какой ширины? 2) Наводящий вопрос: может быть, лучше сделать хотя бы две колонки по 6 для большого экрана? Тогда при сужении экрана в определенный момент 12 колонок в один ряд не влезут - и правая колонка будет перенесена вниз. Попробуйте, пожалуйста. Не будет получаться - пишите. Подумаем вместе. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	04.12.2017, 20:08
	Konstan, для начала адаптивной верстки качайте эту книгу (картинка) и заходите по этой ссылке тык Миниатюры 1

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	04.12.2017, 20:31
	Мы про сетку бутстрапа. Вот она https://getbootstrap.com/docs/... id-options Пардон - тут про четвертый. Но в 3-м подобное. Кто хочет - сам посмотрит. В пикселях она. 0

@AlexZaw
	04.12.2017, 21:06
	Не по теме: В пикселях вы задаете брейкпоинты, а размер колонок задан в процентах, иначе вам бы пришлось чуть ли не на каждый пиксель писать запросы. Кто хочет посмотрит в bootstrap.css 0

@Fourd
	05.12.2017, 12:42
	Не по теме: вставлю и я 5 копеек вышла, более полугода назад (а по факту еще раньше), замечательная вещь под название CSS Grid, советую хотя бы ознакомится (на ютубе есть доклад от Rachel Andrew, около часа, но если жалко времени можете поискать русскоязычные пояснения за 20-30мин) и поднимая вопрос об актуальности версий, ИМХО бутстрап 3/4 уйдет на задний фон после окончательного перехода браузерами на CCS Grid (в смысле эта спецификация уже является нативной разработкой, конечно за исключением старых версий IE) 0