Блог

Главная - Вопросы по программированию - Адаптивный макет начальной загрузки: порядок изменения в узких представлениях

Адаптивный макет начальной загрузки: порядок изменения в узких представлениях

#html #css #twitter-bootstrap #responsive-design

#HTML #css #twitter-bootstrap #адаптивный дизайн

Вопрос:

У меня есть макет, настроенный для меня в Bootstrap 5, который имеет, при больших размерах, боковую панель, состоящую из двух частей (навигация по сайту и более длинная навигация по оглавлению), и основную текстовую область:

  --- ----- 
| 1 |  2  |
 ---      |
| 3 |     |
 --- -----

При узких размерах, когда все это сводится к одному столбцу, оно, конечно, сворачивается до порядка 1-3-2. Но table-of-contents навигация (# 3) отвлекает и не должна быть главным, что люди видят на мобильных устройствах, поэтому я бы хотел, чтобы основная область находилась перед навигацией по оглавлению, т. Е. В порядке нумерации выше:

  --- 
| 1 |
 --- 
| 2 |
 --- 
| 3 |
 ---

Структура страницы выглядит более или менее так, за исключением FOO BAR BAZ того, что раздел на самом деле намного длиннее, что хорошо в качестве боковой панели, но ужасно, когда это главное, что вы видите:

образец макета

Это было создано путем удаления множества более сложных элементов на странице, но сохранения фактической структуры. Все это было создано для меня кем-то другим, и я вообще не дизайнер, поэтому, если это потребует серьезного переписывания, я в конечном итоге все сломаю. Есть ли какой-нибудь простой способ заставить это свернуться в желаемом порядке в узких представлениях? (Чтобы было совершенно ясно, я бы хотел, чтобы «Заголовок / содержимое» было перед FOO BAR BAZ .)

Вот самая маленькая версия, до которой мне удобно ее сократить:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <title>TITLE</title>

  </head>

  <body class="bg-light">

    <div class="container-fluid">
      <div class="row">

        <div class="col-lg-3 col-sm-4 p-0 vh-sm-100 vh-xs-auto overflow-sm-hidden overflow-xs-visible position-sm-sticky position-xs-static top-0 start-0 sidebar-parent">

          <nav class="navbar navbar-expand-xs navbar-dark bg-dark sticky-top">
            <div class="container">

              <div class="vw-100 d-flex justify-content-between align-items-center">
                <a class="navbar-brand" href="/">MYSITE</a>
                
              </div>

              <div class="row w-100 m-0" id="">
                <form id="" class="d-inline-flex p-0" action="/">
                  <input class="form-control pe-2 me-2 typeahead tt-input" id="search" type="search" placeholder="search" aria-label="Search" style="position: relative; vertical-align: top;">
                    
                    <div role="listbox" class="tt-menu" id="search_listbox" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                     
                    </div>

                  <button class="btn btn-secondary" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>

          <div id="sidebar" class="list-group list-group-flush">

            <div class="sidebar-list" id="sidebar-list"><a href="/" aria-current="true" class="list-group-item list-group-item-action py-0 list-group-item-action">FOO</a><a href="/" aria-current="true" class="list-group-item list-group-item-action py-0">BAR</a><a href="/" aria-current="true" class="list-group-item list-group-item-action py-0">BAZ</a></div>

          </div>
        </div>
        <div id="main" class="col-lg-9 col-sm-8 col-xs-12 p-5">

          <h1 id="">HEADING
          </h1>
          <p>
          Content, content content content.
          </p>

        </div>
      </div>
    </div>

  </body>
</html>

Здесь есть отдельная скрипка с немного большим количеством кода (она включает в себя меню гамбургеров).

Ответ №1:

Для вашей ситуации и потому, что вы сказали:

если для этого потребуется какое-либо серьезное переписывание, я в конечном итоге все нарушу

Я бы посоветовал вам дублировать <div id="main"> и поместить дублированный прямо ниже <nav> , а затем переключать (показывать / скрывать) между ними.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <title>TITLE</title>

  </head>

  <body class="bg-light">

    <div class="container-fluid">
      <div class="row">

        <div class="col-lg-3 col-sm-4 p-0 vh-sm-100 vh-xs-auto overflow-sm-hidden overflow-xs-visible position-sm-sticky position-xs-static top-0 start-0 sidebar-parent">

          <nav class="navbar navbar-expand-xs navbar-dark bg-dark sticky-top">
            <div class="container">

              <div class="vw-100 d-flex justify-content-between align-items-center">
                <a class="navbar-brand" href="/">MYSITE</a>
                
              </div>

              <div class="row w-100 m-0" id="">
                <form id="" class="d-inline-flex p-0" action="/">
                  <input class="form-control pe-2 me-2 typeahead tt-input" id="search" type="search" placeholder="search" aria-label="Search" style="position: relative; vertical-align: top;">
                    
                    <div role="listbox" class="tt-menu" id="search_listbox" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                     
                    </div>

                  <button class="btn btn-secondary" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
        <div id="main" class="d-block d-sm-none p-5">

          <h1 id="">HEADING
          </h1>
          <p>
          Content, content content content.
          </p>

        </div>
          <div id="sidebar" class="list-group list-group-flush">

            <div class="sidebar-list" id="sidebar-list"><a href="/" aria-current="true" class="list-group-item list-group-item-action py-0 list-group-item-action">FOO</a><a href="/" aria-current="true" class="list-group-item list-group-item-action py-0">BAR</a><a href="/" aria-current="true" class="list-group-item list-group-item-action py-0">BAZ</a></div>

          </div>
        </div>
        <div id="main" class="col-lg-9 col-sm-8 col-xs-12 p-5 d-none d-sm-block">

          <h1 id="">HEADING
          </h1>
          <p>
          Content, content content content.
          </p>

        </div>
      </div>
    </div>

  </body>
</html>

ВАЖНО

Если это для статического веб-сайта, он будет работать отлично, но в случае, если это динамический веб-сайт (контент поступает из базы данных или используется функция id="main" ), это может привести к ошибкам, потому что у вас дублированный id's .

Комментарии:

1. Это увлекательный подход, но, к сожалению, это динамический веб-сайт, и создание двух идентичных версий main div само по себе потребует большого количества манипуляций; кроме того, основной контент может быть достаточно длинным, чтобы дублировать его полностью, было бы много места. И к этому идентификатору могут быть подключены функции JS. Существуют ли другие разумные решения?

2. Как насчет дублирования третьего столбца, если он статический?