ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap. Нужен совет как правильно это сделать
20 сообщений из 20, страница 1 из 1
bootstrap. Нужен совет как правильно это сделать
    #39641282
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Код: 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.
    <header>
        <div class="header__top">  - верхняя полоса с меню
            <div class="container">   
                <div class="row">
                    <div class="col-xl-2">
                        <img src="img/logo.png" alt="">
                    </div>
                    <div class="col-xl-7">
                        <nav>...</nav>
                    </div>
                    <div class="col-xl-3">
                        <div class="contacts">...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>...</h1>
                    </div>
                    <div class="header__arrow">стрелка на расст. 5% от нижней границы экрана</div>
                </div>
            </div>
        </div> 
        </div>  
    </header>


Чтобы не путать вас, я лишние свойства (шрифты, цвет и т.д. - удалил отсюда)
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
header { 
    background: url(../img/bg.jpg) no-repeat center top / cover; 
    height: 100vh;
    position: relative;
}
.header__top { 
    height: 58px;
}
далее блок с заголовком и стрелкой. Тянем его до конца экрана. 
.a { 
   height: 93vh; 
   position: relative;  - чтобы стрелку сделать по низу.
}
.header__title {  margin-top: 20%; }   - почему чтобы заголовок был по центру пришлось отступить всего 20%, вместо предполагаемых 50% ?
.header__arrow {
    position: absolute;  
    bottom: 5%;    - почему отсчет идет от заголовка h1? Почему row не растягивается на весь экран, а заканчивается сразу после заголовка? Как мне прижать стрелку к нижней части экрана???
    display: inline-block;
    margin: 0 auto 5% auto; 
}
...
Рейтинг: 0 / 0
07.05.2018, 11:22
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641293
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
dik_kпочему чтобы заголовок был по центру пришлось отступить всего 20%, вместо предполагаемых 50% ?
Если хочешь отступать 50% - придется "возвращаться" на половину его высоты вверх.
Т.к. это отступ для "начала" элемента, а не для его "середины".

Вот тебе статейка по "вертикальному центрированию"...
https://ruseller.com/lessons.php?id=1248
...
Рейтинг: 0 / 0
07.05.2018, 11:36
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641295
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
а как в данном случае прижать стрелку к низу?
я уже абсолютом пытаюсь прижать, но row заканчивается там, где заканчивается заголовок
...
Рейтинг: 0 / 0
07.05.2018, 11:37
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641296
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
dik_kЧтобы не путать вас, я лишние свойства (шрифты, цвет и т.д. - удалил отсюда)
Если ты действительно не хочешь нас путать - нужно делать полные тестовые примеры.
Показывать огрызки плохо. Кто их потом будет собирать в один файл?
Если тебе самому это уже делать лень.
...
Рейтинг: 0 / 0
07.05.2018, 11:39
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641299
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
dik_kа как в данном случае прижать стрелку к низу?
Сделай нормальный тестовый пример. На нем и покажут...
А ты потом встроишь решение в свой bootstrap.
...
Рейтинг: 0 / 0
07.05.2018, 11:40
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641303
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
dik_k , вот смотри что вижу я

Код: 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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
<!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'>
header { 
    background: url(../img/bg.jpg) no-repeat center top / cover; 
    height: 100vh;
    position: relative;
}
.header__top { 
    height: 58px;
}
.a { 
   height: 93vh; 
   position: relative;
}
.header__title {  
	margin-top: 20%; 
} 
.header__arrow {
    position: absolute;  
    bottom: 5%;  
    display: inline-block;
    margin: 0 auto 5% auto; 
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
    <header>
        <div class="header__top">  - верхняя полоса с меню
            <div class="container">   
                <div class="row">
                    <div class="col-xl-2">
                        <img src="img/logo.png" alt="">
                    </div>
                    <div class="col-xl-7">
                        <nav>...</nav>
                    </div>
                    <div class="col-xl-3">
                        <div class="contacts">...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>...</h1>
                    </div>
                    <div class="header__arrow">стрелка на расст. 5% от нижней границы экрана</div>
                </div>
            </div>
        </div> 
        </div>  
    </header>
</body>
</html>


Какие уж тут стрелки...
...
Рейтинг: 0 / 0
07.05.2018, 11:45
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641312
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Код: 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.
<body>
    <header>
        <div class="header__top">
            <div class="container">   
                <div class="row">
                    <div class="col-xl-12">
                        <img src="img/logo.png" alt="" class="header__logo">
                    </div>
                </div>
            </div>
        </div>
        <!-- первый экран -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>Заголовок</h1>
                    </div>
                    <div class="header__arrow"></div>
                </div>
            </div>
        </div> 
        </div>  
    </header>
</body>


Код: 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.
* { padding: 0;  margin: 0; }
body { 
    font-family: 'museo', serif;
    font-size: 17px;
    font-weight: 100;
    color: #000;
}
header { 
    background: url(../img/bg.jpg) no-repeat center top / cover; 
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    height: 100vh;
    position: relative;
}
.header__top { 
    background: rgb(0,0,0,0.25); 
    height: 58px;
}
.a {height: 93vh; position: relative;}
.header__title {  margin-top: 20%; }
h1 { color: #fff; font-size: 90px; }
.header__arrow {
    border: 1px solid #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 5%;
    display: inline-block;
    margin: 0 auto 5% auto; 
}
...
Рейтинг: 0 / 0
07.05.2018, 11:55
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641333
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Смешно сказать. Открыл новый файл. Стал делать тестовый пример. Убрал оттуда всё лишнее, оставил только все самое необходимое, запустил - всё работает... Сейчас буду к своему тестовому примеру по строчке добавлять то что убрал... Надо же отловить ошибку!
Спасибо )
...
Рейтинг: 0 / 0
07.05.2018, 12:18
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641340
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
АГА!!!
Я понял! Приколы начанаются сразу после подключения файла bootstrap!!!!
без него всё прекрасно работает!!!
Вот тестовый пример:
Код: 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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<link rel="stylesheet" href="bootstrap-grid.min.css">
<style type='text/css'>
* { padding: 0;  margin: 0; }
header { 
    background: green center top / cover; 
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    height: 100vh;
    position: relative;
}
.header__top { 
    background: rgb(0,0,0,0.25); 
    height: 58px;
}
.a {height: 93vh; border: 2px solid #0f0f0f; position: relative;}
.header__title {  margin-top: 20%; }
h1 { font-family: arial; color: #fff; font-size: 100px; }
.header__arrow {
    border: 1px solid #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 5%;
    display: inline-block;
    margin: 0 auto 5% auto; 
}
</style>

</head>
<body>
    <header>
        <div class="header__top"> 
            <div class="container">   
                <div class="row">
                    <div class="col-xl-12">
                        logo
                    </div>
                </div>
            </div>
        </div>
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>Заголовок</h1>
                    </div>
                    <div class="header__arrow"></div>
                </div>
            </div>
        </div> 
        </div>  
    </header>
</body>
</html>
...
Рейтинг: 0 / 0
07.05.2018, 12:26
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641342
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
это всё положите в одну папку! без бутстрапа работает, с ним - нет
...
Рейтинг: 0 / 0
07.05.2018, 12:27
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641345
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
стрелка короче, это в данном случае кружок. Если убрать бутстрап, то кружок будет внизу, если вернуть - то вверху, вместе с заголовком
...
Рейтинг: 0 / 0
07.05.2018, 12:28
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641369
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Правильно я понимаю, что никто не знает как прижать в данном случае стрелку книзу?
...
Рейтинг: 0 / 0
07.05.2018, 13:14
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641371
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
dik_kСмешно сказать. Открыл новый файл. Стал делать тестовый пример. Убрал оттуда всё лишнее, оставил только все самое необходимое, запустил - всё работает...
Вот для этого и делаются тестовые примеры.

dik_kЕсли убрать бутстрап, то кружок будет внизу, если вернуть - то вверху, вместе с заголовком
Значит смотри кто и какие селекторы тебе "сбивают" установки по ЦСС.

Либо сам усиливай свои селекторы, дабы они "перебивали" другие установки...
...
Рейтинг: 0 / 0
07.05.2018, 13:17
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641456
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
dik_kэто всё положите в одну папку! без бутстрапа работает, с ним - нет
Нажмите в браузере F12, воспользуйтесь инструментами разработчика, и Вы поймёте, что происходит.
...
Рейтинг: 0 / 0
07.05.2018, 15:00
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641541
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Я скинул который можно запустить сохранив под любым именем и приложил бутстраповскую сетку. Если интересно, можете посмотьреть чем отличается работа с сеткой от работы без неё.
Теперь по поводу F12 - естественно я смотрел что происходит.
Вот в этом куске:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>Заголовок</h1>
                    </div>
                    <div class="header__arrow"></div>
                </div>
            </div>
        </div> 
        </div>


специально добавил div с классом "a", ему присвоил позишен релатив и его же тяну на весь экран. По моим расчетам от него и должна отталкиваться стрелка, но она отталкивается от низа ROW. А ROW (написан через строку от дива с классом "а") имеет высоту до конца моего заголовка, то есть примерно до середины экрана.
Поэтому кружок (ну в будущем стрелка), отсчитывается от середины экрана.
Как этот ROW сделать до низа? Я не умею бутстраповский ROW переназначать...
...
Рейтинг: 0 / 0
07.05.2018, 16:16
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641543
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
dik_kТеперь по поводу F12 - естественно я смотрел что происходит.
И что происходит на закладке Styles? Какие селекторы перекрываются бутстрапом?
...
Рейтинг: 0 / 0
07.05.2018, 16:19
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641548
Фотография Konst_One
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Konst_One
Участник
Код: sql
1.
class="row"



вам он точно нужен? если без него всё как вам надо, то добавляйте этот класс
...
Рейтинг: 0 / 0
07.05.2018, 16:24
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641549
Фотография Konst_One
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Konst_One
Участник
то НЕ добавляйте ...
...
Рейтинг: 0 / 0
07.05.2018, 16:24
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641575
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
хм... оказалось причина в COL. он же у меня = 12 колонок, вот и сливался со строкой.
В сетке бутстрап по умолчанию для всех COL стоит позишен релатив. Вот относительно его и отсчитывается стрелка. А как переопределить COL?
...
Рейтинг: 0 / 0
07.05.2018, 16:52
| Ответить | Цитировать | Написать  
bootstrap. Нужен совет как правильно это сделать
    #39641783
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
dik_kА как переопределить COL?
Подключить свой ЦСС ниже библиотечного. Тогда твой "кол" перебьет библиотечный.
Посмотреть какой селектор "библиотечный" и сделать свой селектор более приоритетный.
...
Рейтинг: 0 / 0
08.05.2018, 08:32
| Ответить | Цитировать | Написать  
20 сообщений из 20, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap. Нужен совет как правильно это сделать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39641549&tid=1444193]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 164ms
get topic data:
 13ms
get forum data:
 2ms
get page messages:
 54ms
get tp. blocked users:
 1ms
others: 232ms
total:  499ms
созд. / загр.: 499ms
x
x
Закрыть


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