-
Similar Content
-
-
By Ilya983
Помогите сделать минимальную макет с header, footer, LeftMenu, Content, RightMenu на Bootstrap 4-5.
Ширина LeftMenu + Content + RightMenu аналогична ширине основного блока текущего сайта(htmlforum.io).
Другими словами не на всю ширину браузера, а по центру. Может для ширины таких элементов имеется какая-то практика?
LeftMenu - привязано к левому краю контейнера.
RightMenu - привязано к правому краю контейнера.
Для примера...
Пробую, всё скачет...
https://jsfiddle.net/User65659/0jxt7qLg/45/
Аналог на картинке
-
By Pekod
Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать?
main.html
<!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.0"> <title>Document</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="wrapper"> <header>Номер и почта</header> <main> <nav> <ul class="topmenu"> <li><a href="" class="active">Главная</a> </li> <li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">Блог<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Блог</a></li> <li><a href="">О нас</a></li> </ul> </nav> <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> <img src="image/australia.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="image/parks.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> <img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </main> <content class="tab"> <div class="container-prim"> <div class="element-1">Пункт 1</div> <div class="element-2">Пункт 2</div> <div class="element-3">Пункт 3</div> <div class="element-4">Пункт 4</div> </div> <!-- <ul class="zebra"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 3</li> </ul> --> </content> <content class="zero"> <div class="row slider"> <div class="col-md-2"> <div class="details"> <h2>Заголовок 1</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 2</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 3</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 4</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 5</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 6</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 7</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> </div> </content> <footer>Адреса и контактсы</footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="main.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <script> $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> main.css
.wrapper { height: 100%; display: flex; flex-direction: column; } header { height: 30px; width:1200px; margin: 0 auto; padding: 1px; } footer { height: 300px; width:1200px; margin: 0 auto; padding:10px; } main { } body { margin: 0; } header { background-color: #daf0b3f6; } main { background-color:#ecf0f1; height: 600px; width: 1200px; margin: 0 auto; } content.tab { background-color:#66c3ee; height: 300px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } content.zero { background-color:#b7e9b5; height: 350px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } footer { background-color:#000000; color:white; box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596); } @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic); *{box-sizing: border-box;} body { margin: 0; font-family: 'Open Sans', sans-serif; } nav {background: #2fa4e7 ;} nav ul { margin: 0; padding: 0; list-style: none; } nav ul:after { content: ""; display: table; clear: both; } nav a { text-decoration: none; display: block; transition: .3s linear; } .topmenu > li { float: left; position: relative; border-left: 1px solid black; } .topmenu > li:first-child {border-left: 0;} .topmenu > li > a { padding: 7px 30px; font-size: 14px; text-transform: uppercase; color: #FEFDFD; letter-spacing: 2px; } .topmenu > li > a.active { color: rgb(0, 0, 0); } .submenu a:hover {color: #0037cf;} .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .container-prim { font-size: 0; padding: 10px 50px 15px; text-align: center; } .element-1, .element-2, .element-3, .element-4 { display: inline-block; width: 250px; height: 265px; font-size: 20px; font-weight: 500; text-align: center; padding-top: 10px; vertical-align: bottom; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); border-radius: 8px; } .element-1 { background-color: #fbfdfd; } .element-2 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-3 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-4 { color: #000000; background-color: #fbfdfd; margin-left: 20px; } .element-relative { position: relative; top: -20px; left: -20px; } /* .zebra { font: 14px Verdana, Geneva, sans-serif; text-align: center; } .zebra li { display : inline-block; width : 250px; height: 280px; margin-bottom: 10px; background: #ffffff; vertical-align: top; text-align: center; line-height: normal; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); /* эмуляция inline-block для IE6-7*/ /* //display : inline; //zoom : 1; } */ .carousel-caption { transform: translateY(-50%); bottom: initial; top: 50%; } .details { margin: 20px 20px; background-color: #fff; padding: 30px 20px; position: relative; z-index: 1; height: 260px; } .details h2 { font-size: 22px; text-transform: uppercase; transition: 0.6s all; } .details p { font-size: 14px; transition: 0.6s all; } .details a { text-decoration: none; text-transform: capitalize; color: #fff; background-color: #2c3e50; padding: 6px 12px; display: inline-block; font-size: 14px; border: 1px solid #2c3e50; transition: 0.6s all; } .details::before { content: ""; width: 5px; height: 100%; background-color: #ff5722; position: absolute; left: 0; top: 0; z-index: -1; transition: 0.6s all; } .details:hover::before { width: 100%; } .details:hover h2,.details:hover p { color: #fff; } .details:hover a { background-color: transparent; border: 1px solid #fff; }
-
By Владимир Горинов
Добрый день всем, возникла проблема с адаптивностью меню, реализовал выпадающее меню, Но оно сдвигает нижний блок "Услуги мастерской". Теперь сам вопрос, как реализовать меню, что бы оно не сдвигало блок услуг, а легло поверх, т.е перекрывало его.
-
By Владимир Горинов
Не знаю ли на тот раздел обратился, купил хостинг и домен, перенес туда сайт - но после переноса не работают скрипты(а именно скрипт плавной прокрутки сайта по якорям), может кто сталкивался с решением данной проблемы? Спасибо
PS: на локальном компе через Денвер все работает как часы
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
markevil
При верстке сайта на Bootstrap 4.3.1 хотел сделать прелоадер на основе стандартного элемента Bootstrap - спиннера, который бы закрывался после загрузки страницы. Проблема в том, что спиннер не закрывается после загрузки страницы, очевидно заданные в скрипте стили к нему не применяются. Подскажите, пожалуйста, в каком месте я ошибся?
Ссылка на ошибку (Гитхаб)
Link to comment
Share on other sites
4 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.