Bootstrap 3 Slide в меню / Navbar на мобільному пристрої [закрито]

119

Я будую мобільний додаток на базі браузера, і я вирішив використовувати Bootstrap 3 як css основу для проектування. Bootstrap 3 оснащений чудовою функцією "чуйності" на навігаційній панелі, де він автоматично згортається, якщо виявить конкретну "точку злому" щодо роздільної здатності браузера. Це працює в багатьох ситуаціях.

Але ви помітили останнім часом, як багато мобільних додатків на базі браузера первинну навігацію приховують зліва від екрану, і коли натискається (перемикається) значок у верхньому правому куті, первинна навігація висувається на справа приблизно на 2/3 шляху на екран? Це все більш популярне рішення для навігації через браузерні додатки на мобільних пристроях, і я думаю, що теоретично слід досить легко змінити bossstrap css / js для розміщення цієї версії функції згортання навігації.

Як можна реалізувати ці функції? Здається, він не повинен надто сильно змінюватись. Я дуже хотів би почути ваші думки / рішення з цього приводу. Крім того, я думаю, що було б чудовим довгостроковим рішенням Bootstrap реалізувати як вбудовану функцію.

На жаль, я не робив жодних спроб створити цю функцію, тому що, хоча я знайомий з цими технологіями, я переважно розробник PHP / MySQL, і я вважаю, що така функція є такою корисною, як це має бути побудовано фахівцями з розумінням, що у мене немає як передній розробник.

css  twitter-bootstrap  mobile  twitter-bootstrap-3 
— Армін
джерело
2
Включіть свою поточну розмітку CSS / HTML. Крім того, "Питання, що задають код, повинні демонструвати мінімальне розуміння проблеми, що вирішується. Включіть спроби рішення, чому вони не спрацювали, і очікувані результати".
— Dryden Long
8
Я робив це нещодавно, багато чого має відбутися, тому що має відбутися багато речей, особливо якщо навігація виправлена, вона повинна вимикатись, коли вона ковзає або ви не зможете дістатися до довших меню. Я постійно використовую Boostrap, але не їх меню, ви можете додавати слайд у меню самостійно та змінювати їх. jsbin.com/eHAfIhI/1/edit
— Крістіна
2
Якщо ви подивитесь на CSS, ви помітите, що мінімальна ширина запускається у стандартному Bootstrap, який становить 768 пікселів. Зауважте, що форму було внесено на максимальну ширину, оскільки це виглядати бідно в іншому випадку. Плюс відсотків було використано, оскільки найменший пристрій - 240 пікселів.
— Крістіна
Існує популярна вилка Bootstrap - Jasny Bootstrap. У вилки є поза різними реалізаціями поза полотна (слайд-ін, натисніть, розкрийте
— PetroCliff
1
Це зразок інтерфейсу користувача, який називається Drawer material.io/guidelines/patterns/navigation-drawer.html
— Бруно Перес

Відповіді:

138

Це було для мого власного проекту, і я ним також ділюсь.

DEMO: http://jsbin.com/OjOTIGaP/1/edit

У цього виникли проблеми після 3.2, тож наведений нижче може працювати краще для вас:

https://jsbin.com/seqola/2/edit --- КРАЩА ВЕРСІЯ, трохи

CSS

/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 70px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 10px 0 0 0;
    border: 0;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: orange
}
.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) { 
    #slide-nav .container {
        margin: 0;
        padding: 0!important;
    }
    #slide-nav .navbar-header {
        margin: 0 auto;
        padding: 0 15px;
    }
    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 80%;
        top: -1px;
        z-index: 1000;
    }
    #slide-nav #slidemenu {
        background: #f7f7f7;
        left: -100%;
        width: 80%;
        min-width: 0;
        position: absolute;
        padding-left: 0;
        z-index: 2;
        top: -8px;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav {
        min-width: 0;
        width: 100%;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
        min-width: 0;
        width: 80%;
        white-space: normal;
    }
    #slide-nav {
        border-top: 0
    }
    #slide-nav.navbar-inverse #slidemenu {
        background: #333
    }
    /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
    #slide-nav #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        width: 80%;
        left: -80%;
        background: #eee;
    }
    #slide-nav.navbar-inverse #navbar-height-col {
        background: #333;
        z-index: 1;
        border: 0;
    }
    #slide-nav .navbar-form {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        overflow: hidden;
        /*fast clearfixer*/
    }
    #slide-nav .navbar-form .form-control {
        text-align: center
    }
    #slide-nav .navbar-form .btn {
        width: 100%
    }
}
@media (min-width:768px) { 
    #page-content {
        left: 0!important
    }
    .navbar.navbar-fixed-top.slide-active {
        position: fixed
    }
    .navbar-header {
        left: 0!important
    }
}

HTML

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
  <div class="container">
   <div class="navbar-header">
    <a class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </a>
    <a class="navbar-brand" href="#">Project name</a>
   </div>
   <div id="slidemenu">
     
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="search" placeholder="search" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
          </form>
     
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link test long title goes here</a></li>
       <li><a href="#">One more separated link</a></li>
      </ul>
     </li>
    </ul>
          
   </div>
  </div>
 </div>

jQuery

$(document).ready(function () {


    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));

    // Enter your ids or classes
    var toggler = '.navbar-toggle';
    var pagewrapper = '#page-content';
    var navigationwrapper = '.navbar-header';
    var menuwidth = '100%'; // the menu inside the slide menu itself
    var slidewidth = '80%';
    var menuneg = '-100%';
    var slideneg = '-80%';


    $("#slide-nav").on("click", toggler, function (e) {

        var selected = $(this).hasClass('slide-active');

        $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
        });

        $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
        });

        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });


        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');


        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


    });


    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';


    $(window).on("resize", function () {

        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
            $(selected).removeClass('slide-active');
        }


    });

});
— Христина
джерело
Будь-який спосіб зробити це чуйним, щоб на робочому столі навібар відображався під графікою сплеску, але на мобільному пристрої навігація виглядала як ця бічна панель?
— kenyee
1
Так. ви б спроектували в межах мінімальної ширини
— Крістіна
9
Це було для мого власного проекту, і я цим ділюсь. Будь-яка підтримка, подальша допомога тощо залежить від кожної людини.
— Крістіна
Кабіна, велике спасибі, це справді неймовірний внесок !! З того часу я провів ще кілька досліджень і виявив особливості в рамках сенчі, які набагато ближчі (але все ще не зовсім ідеальні) до особливостей, які я мав на увазі. Зокрема, програма facebook на android, sencha називає анімацію «розкрити» / «обкладинку». Я помітив декілька відмінностей між поточною версією вашого прикладу та анімаціями в рамках sencha (або програми facebook). Зокрема, ліве меню, коли воно відкрите, а основний вміст праворуч прокручується разом у тандемі. (1)
— Армін
1
Це прекрасно працює, дякую! Я включив css та js як окремі файли в свій код і навіть зателефонував через через Requjs. Мені довелося лише внести мінімальні зміни в існуючу навігаційну розмітку завантажувального пристрою. Ви зробили надзвичайно складне тривіальне завдання, і це вражає. Ви повинні зробити це доступним як плагін для завантаження. Ви відкриваєте пошук цього? Гітуб?
— Мануель Ернандес
67

Завантаження 4

Створити "шухляду" бокової панелі, що реагує, у Bootstrap 4?
Горизонтальне меню завантажувальної програми згортається на sidemenu

Завантаження 3

Я думаю, що те, що ти шукаєш, загалом відоме як макет "без полотна". Ось стандартний приклад оф-полотна з офіційних документів Bootstrap: http://getbootstrap.com/examples/offcanvas/

"Офіційний" приклад використовує праву бічну панель, щоб вимкнути та увімкнути окремо від верхнього меню навігації. Я також виявив ці різновиди, які просуваються зліва та можуть бути ближче до того, що ви шукаєте ..

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook

— Зім
джерело
2
Цей приклад без полотна теж справді чудовий! Це ближче до того, що я шукав, але кілька пунктів, які я висловив у своїх коментарях до посади кабіни, все ще переважають. Бічне меню та основна область вмісту не прокручуються самостійно. Крім того, це скоріше слайд ліворуч / праворуч, ніж анімація обкладинки / виявлення. Дайте мені знати, що ви думаєте! :) Дякую ще раз за ваш внесок Skelly! Ця нитка була неймовірно прониклива і корисна!
— Армін
EDIT: Я щойно бачив, що версія для фейсбуку, яку ви створювали, прокручується незалежно від області основного вмісту! Крім того, мені було цікаво, чи може вона бути абсолютно невидимою за замовчуванням, незалежно від поточної роздільної здатності веб-переглядача, і чи може вона перемикатися на ту піктограму, яка знаходиться вгорі праворуч у цьому прикладі. І що кнопка перемикання перемістилася вгорі ліворуч? Чи можливо це? Це було б точно саме те, що мені потрібно було б рухатися вперед з цим проектом. Єдина проблема, яку я бачив, - горизонтальна смуга прокрутки відображається при перемиканні меню. Має бути спосіб запобігти і цьому.
— Армін
1
Радий, що це допомогло. Я впевнений, що можна досягти того, що ви хочете, але це потребує певного налаштування. Я б рекомендував грати з Bootply ( bootply.com/96266 ). Ви повинні мати можливість налаштувати точку розриву для бічної панелі, регулюючи медіа-запит @media screen and (max-width: 768px) {.. у CSS.
— Зім
0

Без плагіна ми можемо це зробити; багаторівневе чуйне меню, що реагує на мобільний телефон, з перемикачем перемикача для мобільних пристроїв:

$('[data-toggle="slide-collapse"]').on('click', function() {
  $navMenuCont = $($(this).data('target'));
  $navMenuCont.animate({
    'width': 'toggle'
  }, 350);
  $(".menu-overlay").fadeIn(500);
});

$(".menu-overlay").click(function(event) {
  $(".navbar-toggle").trigger("click");
  $(".menu-overlay").fadeOut(500);
});

// if ($(window).width() >= 767) {
//     $('ul.nav li.dropdown').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });

//     $('ul.nav li.dropdown-submenu').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });


//     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//         event.preventDefault();
//         event.stopPropagation();
//         $(this).parent().siblings().removeClass('open');
//         $(this).parent().toggleClass('open');
//         $('b', this).toggleClass("caret caret-up");
//     });
// }

// $(window).resize(function() {
//     if( $(this).width() >= 767) {
//         $('ul.nav li.dropdown').hover(function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//         }, function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//         });
//     }
// });

var windowWidth = $(window).width();
if (windowWidth > 767) {
  // $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  //     event.preventDefault();
  //     event.stopPropagation();
  //     $(this).parent().siblings().removeClass('open');
  //     $(this).parent().toggleClass('open');
  //     $('b', this).toggleClass("caret caret-up");
  // });

  $('ul.nav li.dropdown').hover(function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });

  $('ul.nav li.dropdown-submenu').hover(function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });


  $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
    // $('b', this).toggleClass("caret caret-up");
  });
}
if (windowWidth < 767) {
  $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
    // $('b', this).toggleClass("caret caret-up");
  });
}

// $('.dropdown a').append('Some text');
@media only screen and (max-width: 767px) {
  #slide-navbar-collapse {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 999999;
    width: 280px;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;
  }
  .menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
  .navbar-fixed-top {
    position: initial !important;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #ffffff;
  }
  ul.nav.navbar-nav li {
    border-bottom: 1px solid #eee;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header,
  .navbar-nav .open .dropdown-menu>li>a {
    padding: 10px 20px 10px 15px;
  }
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

li.dropdown a {
  display: block;
  position: relative;
}

li.dropdown>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 15px;
}

li.dropdown-submenu>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 15px;
}

ul.dropdown-menu li {
  border-bottom: 1px solid #eee;
}

.dropdown-menu {
  padding: 0px;
  margin: 0px;
  border: none !important;
}

li.dropdown.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu>a {
  font-weight: bold !important;
}

li.dropdown>a {
  font-weight: bold !important;
}

.navbar-default .navbar-nav>li>a {
  font-weight: bold !important;
  padding: 10px 20px 10px 15px;
}

li.dropdown>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 9px;
  font-size: 15px;
}

@media (min-width: 767px) {
  li.dropdown-submenu>a {
    padding: 10px 20px 10px 15px;
  }
  li.dropdown>a:before {
    content: "\f107";
    font-family: FontAwesome;
    position: absolute;
    right: 3px;
    top: 12px;
    font-size: 15px;
  }
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="slide-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
                <li class="dropdown-submenu">
                  <a href="#" data-toggle="dropdown">SubMenu 1</span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li class="dropdown-submenu">
                      <a href="#" data-toggle="dropdown">SubMenu 2</span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <div class="menu-overlay"></div>
    <div class="col-md-12">
      <h1>Resize the window to see the result</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
    </div>

  </body>

</html>
Розгорніть фрагмент

Довідкова скрипка JS

— Syam S
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.