Адаптивный интерфейс (правильно ли я понимаю что это такое)

@Msrsis · Регистрация: 09.02.2021

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

Всем доброго времени суток подскажите пожалуйста, что такое адаптивный интерфейс. Я его подключила через bootstap он всё работает, но преподаватель хочет чтобы я ему пальцем тыкнула в css где находится тег адаптивного интерфейса.
Правильно ли я понимаю что тег "col-" отвечает за адаптивный интерфейс или нет?
Буду очень благодарна за ответ

CSS
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {

@NTHing · 05.10.2023, 20:50

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

в css где находится тег адаптивного интерфейса.

В css нет тегов адаптивного интерфейса.
Что касается самого адаптивного интерфейса, то это такой интерфейс, который максимально адекватно представлен пользователю при любых разрешениях, и на любых девайсах.

@Msrsis · 05.10.2023, 22:21 **[ТС]**

NTHing, Спасибо большое за подробный ответ. А как можно доказать преподавателю что подключён адаптивный интерфейс?. Можно ли с помощью что он используется в коде "col-" или что Bootstrap подключён это уже есть этот интерфейс? или в этом коде уже есть?

Code
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
36
37
38
39
40
<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("GRID-сети", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Новости", "News", "Home")</li>
                    <li>@Html.ActionLink("История", "History", "Home")</li>
                    <li>@Html.ActionLink("Теория", "Theory", "Home")</li>
                    <li>@Html.ActionLink("Примеры", "Examples", "Home")</li>
                    <li>@Html.ActionLink("Источники", "Sources", "Home")</li>
                    <li>
                        @using (Html.BeginForm("Search", "Home", FormMethod.Get, new { @class = "form-inline", @style = "margin-top: 8px;" }))
                        {
                            <div class="form-group">
                                @Html.TextBox("title", null, new { @class = "form-control", placeholder = "Поиск" })
                                <button type="submit" class="btn btn-default">Поиск</button>
                            </div>
                        }
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    @if (!User.Identity.IsAuthenticated)
                    {
                        <li>@Html.ActionLink("Вход", "Login", "Account")</li>
                    }
                    else
                    {
                        <li>@Html.ActionLink("Выход", "LogOut", "Account")</li>
                    }
                </ul>
            </div>
        </div>
    </div>

@NTHing · 06.10.2023, 00:33

Как минимум для преподавателя можете сказать, что если подключен Бутстрап и есть хоть один класс container, то уже есть адаптив. Как максимум (см. мой пред. ответ) — простор для творчества не ограничен.
Опять же, Бутстрап совсем не обязателен для адаптива. Адаптив это философия, а Бутстрап это библиотека. Можете завернуть это преподу, глянете на его выражение лица, потом расскажете. )

@Msrsis · 06.10.2023, 20:00 **[ТС]**

NTHing, обязательно расскажу)). Самой интересно .
Подскажите а что за класс container

@rr33rr · 06.10.2023, 20:23

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

Подскажите а что за класс container

Почитайте статью на тему: Верстка адаптивного макета на Bootstrap

@Msrsis · 06.10.2023, 21:47 **[ТС]**

NTHing, подскажите пожалуйста может вы знаете как добавить стили текста в css. Надо отредактировать текст <h1>Курсовая работа "GRID-сети"</h1>, хотя у меня там стоить уже стиль "jumbotron", может можно добавить стиль чтобы можно было изменять текст (отступы, центровка и тд)

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@{
    ViewBag.Title = "GRID-сети";
}
 
<div class="jumbotron">
   
    <h1>Курсовая работа "GRID-сети"</h1>
</div>
 
<div class="row">
    <div class="col-md-6">
        <h2>Немного о работе</h2>
 
        <p>Курсовая работа разработана на основе  ASP.Net MVC при помощи Visual Studio 2019 с поддержкой фреймворка Bootstrap.</p>
    </div>
        <div class="col-md-6">
            <h2>И ещё немного о приложении</h2>
 
            <p>Информация храниться в базе данных MS SQL Server. Для доступа к базе данных MS SQL Server  используется технологию ADO.Net. </p>
 
        </div>
    </div>

@Msrsis · 06.10.2023, 22:18 **[ТС]**

rr33rr, NTHing, вот так вот будет правильно ? и добавил div.text_1 в css
<div class="jumbotron">
<h1 style="div.text_1">Курсовая работа "GRID-сети"</h1>
</div>

@rr33rr · 07.10.2023, 04:26

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

добавить стиль чтобы можно было изменять текст (отступы, центровка и тд)

Если средствами Bootstrap (5 версия) (может отличатся от версии), то центровка и отступы регулируются так:

* Bootstrap - Выравнивание текста (документация)
Пример:

PHP/HTML
1
2
3
4
5
6
7
8
9
<h1 class="text-start">
  Выравнивание влево
</h1>
<h1 class="text-end">
  Выравнивание вправо
</h1>
<h1 class="text-center">
  Выравнивание по центру
</h1>

* Bootstrap - Отступы (документация)
Пример:

PHP/HTML
1
2
3
<h1 class="text-center px-2 m-3">
  Выравнивание по центру; padding по горизонтали - 0.5rem (px-2 = 2*0.25rem); margin со всех сторон - 0.75rem (m-3 = 3*0.25rem)
</h1>

* Всякое "и тд" зависит от того, что внутри "тд" )

Если же через инлайновые стили (тег style), то как-то так:
Пример:

PHP/HTML
1
2
3
<h1 style="text-align: center; padding: 50px; margin-top: 1.5em; background: #ccc; color: red; border: 5px dotted #999;">
  Выравнивание по центру; padding со всех сторон - 50px; margin сверху - 1.5em; серый фон; красный цвет; рамка из точек
</h1>

См в песочнице

@Msrsis · 07.10.2023, 09:36 **[ТС]**

NTHing, rr33rr, а можно ли как то, поместить этот стили текста в css.
А написать только например вверху текста сам сам стиль, а параметры стиля будут находится в самом файле css

@rr33rr · 07.10.2023, 09:58

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

а можно ли как то, поместить этот стили текста в css

Можно.
Вместо инлайновых стилей задать class (или id), прописать свойства этого класса в css-файле, а сам css-файл указать в разделе head с помощью тега link:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="heading">
    Выравнивание по центру; padding со всех сторон - 50px; margin сверху - 1.5em; серый фон; красный цвет; рамка из точек
</h1>
</body>
</html>

style.css

CSS
1
2
3
4
5
6
7
8
.heading {
    text-align: center;
    padding: 50px;
    margin-top: 1.5em;
    background: #ccc;
    color: red;
    border: 5px dotted #999;
}

@NTHing · 07.10.2023, 13:29

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

но преподаватель хочет чтобы я ему пальцем тыкнула в css где находится тег адаптивного интерфейса.

Помимо всего сказанного, я вам больше скажу (преподу только не говорите, а то он в обморок упадёт). Адаптивный интерфейс идёт в браузере "из коробки".

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@NTHing 1818 / 962 / 388 Регистрация: 26.11.2014 Сообщений: 1,962 Записей в блоге: 1
	06.10.2023, 00:33
	Как минимум для преподавателя можете сказать, что если подключен Бутстрап и есть хоть один класс `container`, то уже есть адаптив. Как максимум (см. мой пред. ответ) — простор для творчества не ограничен. Опять же, Бутстрап совсем не обязателен для адаптива. Адаптив это философия, а Бутстрап это библиотека. Можете завернуть это преподу, глянете на его выражение лица, потом расскажете. ) 0

@Msrsis 0 / 0 / 0 Регистрация: 09.02.2021 Сообщений: 203
	06.10.2023, 20:00 [ТС]
	NTHing, обязательно расскажу)). Самой интересно . Подскажите а что за класс container 0

@Msrsis 0 / 0 / 0 Регистрация: 09.02.2021 Сообщений: 203
	06.10.2023, 22:18 [ТС]
	rr33rr, NTHing, вот так вот будет правильно ? и добавил div.text_1 в css <div class="jumbotron"> <h1 style="div.text_1">Курсовая работа "GRID-сети"</h1> </div> Миниатюры 0

@Msrsis 0 / 0 / 0 Регистрация: 09.02.2021 Сообщений: 203
	07.10.2023, 09:36 [ТС]
	NTHing, rr33rr, а можно ли как то, поместить этот стили текста в css. А написать только например вверху текста сам сам стиль, а параметры стиля будут находится в самом файле css 0