Menu bootstrap vertical: File not found · Bootstrap v5.1 — Программирование на Python и Objective-C в Mac OS

Содержание

html — Bootstrap: Navbar: nav-side-menu: свернуть на маленьких экранах

У меня есть навигационное меню на моей html-странице, которое показывает фиксированный верх и фиксированный левый. Что я пытаюсь сделать, так это заставить его свернуться в левую часть и показать кнопку с 3 полосами при просмотре на маленьких экранах (я не хочу, чтобы она исчезла). Например, способ сворачивания боковой панели при уменьшении окна: https: //pro.propeller .in / components / sidebar.php. Вот как далеко я зашел:

  .nav-side-menu {
    overflow: auto;
    font-family: verdana;
    font-size: 12px;
    font-weight: 200;
    background-color: #2e353d;
    /*position: fixed;*/
    position: fixed;
    top: 100px;
    /*width: 300px;*/
    width: 210px;
    height: 100% !important; /*this line made sure when the screen is maximized, the side menu's height is restored*/
    color: #033c73;   
    }

    .nav-side-menu .brand {
        background-color: #23282e;
        line-height: 50px;
        display: block;        
        text-align: center;
        font-size: 14px;
    }

    . nav-side-menu .toggle-btn {
        /*display: none;*/
    }

    .nav-side-menu ul,
    .nav-side-menu li {
        list-style: none;
        /*padding: 0px;*/
        margin: 0px;
        line-height: 15px;
        /*line-height: 10px;*/
        cursor: pointer;
        padding-left: 10px;
       
    }

        .nav-side-menu ul :not(collapsed) .arrow:before,
        .nav-side-menu li :not(collapsed) .arrow:before {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }

        .nav-side-menu ul .active,
        .nav-side-menu li .active {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
        }

        .nav-side-menu ul .sub-menu li.active,
        .nav-side-menu li .sub-menu li.active {
            color: #d19b3d;
        }

            .nav-side-menu ul .sub-menu li.active a,
            .nav-side-menu li .sub-menu li.active a {
                color: #d19b3d;
            }

        .nav-side-menu ul .sub-menu li,
        .nav-side-menu li .sub-menu li {
            background-color: #181c20;
            border: none;
            line-height: 28px;
            border-bottom: 1px solid #23282e;
            margin-left: 0px;
        }

            .nav-side-menu ul .sub-menu li:hover,
            .nav-side-menu li .sub-menu li:hover {
                background-color: #020203;
            }

            .nav-side-menu ul .sub-menu li:before,
            .nav-side-menu li .sub-menu li:before {
                font-family: FontAwesome;
                content: "\f105";
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: middle;
            }

    .nav-side-menu li {
        /*JS: edited*/
        /*padding-left: 0px;*/
        padding-left: 10px;
        border-left: 3px solid #2e353d;
        border-bottom: 1px solid #23282e;
    }

        .nav-side-menu li a {
            text-decoration: none;
            /*color: #e1ffff;*/
            color: white;
        }

            .nav-side-menu li a i {
                padding-left: 10px;
                width: 20px;
                padding-right: 20px;
            }

    .nav-side-menu li a:hover {
    color: red;
    }
        
        @media (max-width: 767px) {
    .nav-side-menu {
        /*position: relative;*/
        /*position: absolute;*/
        /*width: 100%;*/
        margin-bottom: 10px;
        margin-top: 100px;
        z-index: 10 !important; /* for overlay */
        display: none;  /* this hides the menu when the screen is made smaller */
    }

        .nav-side-menu .toggle-btn {
            display: block;
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10 !important;
            padding: 3px;
            background-color: #ffffff;
            color: #000;
            width: 40px;
            text-align: center;
        }

    .brand {
        text-align: left !important;
        font-size: 22px;
        padding-left: 20px;
        line-height: 50px !important;
        }
    }

    @media (min-width: 767px) {
        .nav-side-menu .menu-list .menu-content {
        display: block;
    }

<body>
    <h2>Hello, world!</h2>

<nav role="navigation">
    <div>

      

           <div>
                                   <!--<ul>-->
              <ul>
                  <li>
                                                   
                    <a href="" data-toggle="collapse">
                                                       Profile&nbsp;
                                                       <!--<span></span>-->
                     </a>
                  <!--<ul>-->
                  <ul>
                     <li>
                                                                   
                          <a href="Profile/Item1">Item 1</a>
                      </li>
                      <li>
                         <a href="Profile/Item2">Item 2</a>
                       </li>
                       <li>
                          <a href="Profile/Item3">Item 3</a>
                        </li>
                        <li>
                            <a href="Profile/Item4">Item 4</a>
                        </li>
                                                               
                        <li>
                            <a href="Profile/Item5">Item 5</a>
                        </li>
                     </ul>
                 </li>
             </ul>
             <ul>
             <li>
                 <a href="" data-toggle="collapse">
                                                       Options&nbsp;
                 </a>
            <ul>
                <li>
                    <a href="Options/Item6">Item 6</a>
                </li>
                                                                       
                <li>
                   <a href="Options/Item7">Item 7</a>
                </li>
            </ul>
          </li>
        </ul>
        <ul>
            <li>
                <a href="" data-toggle="collapse">
                                                       Reports&nbsp;
                 </a>
                 <ul>
                      <li>
                          <a href="Report/Item8">Item 8</a>
                       </li>
                       <li>
                            <a href="Report/Item9">Item 9</a>
                       </li>
                       <li>
                            <a href="Report/Item10">Item 10</a>
                        </li>
                        <li>
                            <a href="Report/Item11">Item 11</a>
                        </li>
                     </ul>
                 </li>
            </ul>
                                   
        </div>
    <div>
          <button type="button" data-toggle="collapse" data-target=".nav-side-menu">
               <span>Toggle navigation</span>
               <span></span>
               <span></span>
               <span></span>
             </button>
           </div>
   </div>
</nav>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>

Любая помощь приветствуется. Спасибо

Изменить: теперь я могу скрыть и показать боковое меню при изменении размера окна. А также показать кнопку переключения, скрыть и отобразить на меньших экранах. Но когда меню переключается (скрывается) на меньшем экране и размер окна изменяется, как мне сделать так, чтобы меню появилось снова?

SoftwareDveloper

11 Авг 2020 в 18:03

2 ответа

Лучший ответ

Настраивая стили css, я смог скрыть и показать меню на экранах меньшего размера. См. Комментарии к исходному сообщению.

SoftwareDveloper
12 Авг 2020 в 14:40

Поскольку вы уже используете Bootstrap 4, у него уже есть встроенный класс, чтобы это сделать. Посмотрите на Bootstrap Navbar Responsive
Это предпочтительнее, и он автоматически реагирует на каждый экран, от мобильных до настольных и многое другое. Так что, пожалуйста, прочтите это.

keidakida
11 Авг 2020 в 15:08

Bootstrap Navbar — examples & tutorial

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following
as needed:

.navbar-brand for your company, product, or project name.
.navbar-nav for a full-height and lightweight navigation (including support for
dropdowns).
.navbar-toggler for use with our collapse plugin and other
navigation toggling
behaviors.
Flex and spacing utilities for any form controls and actions.
.navbar-text for adding vertically centered strings of text.
.collapse.navbar-collapse for grouping and hiding navbar contents by a parent
breakpoint.

Apart from listed above, navbar supports also components like breadcrumbs, forms, buttons,
icons, flags, avatars, badges, and a few more.

Brand

The .navbar-brand can be applied to most elements, but an anchor works best, as
some elements might require utility classes or custom styles.

        
            
            <!-- As a link -->
            <nav>
              <div>
                <a href="#">Navbar</a>
              </div>
            </nav>

            <!-- As a heading -->
            <nav>
              <div>
                <span>Navbar</span>
              </div>
            </nav>

Adding images to the .navbar-brand will likely always require custom styles or
utilities to properly size. Here are some examples to demonstrate.

        
            
            <!-- Just an image -->
            <nav>
              <div>
                <a href="#">
                  <img
                    src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"
                   
                    alt=""
                    loading="lazy"
                  />
                </a>
              </div>
            </nav>

        
            
            <!-- Image and text -->
            <nav>
              <div>
                <a href="#">
                  <img
                    src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"
                   
                   
                    alt=""
                    loading="lazy"
                  />
                  <small>MDBootstrap</small>
                </a>
              </div>
            </nav>

Nav

Navbar navigation links build on our
.nav options with their own modifier class and require the use of
toggler classes for proper responsive styling.
Navigation in navbars will also grow to occupy as much horizontal space as
possible
to keep your navbar contents securely aligned.

Active states—with .active—to indicate the current page can be applied directly
to .nav-links or their immediate parent .nav-items.

Please note that you should also add the
aria-current attribute on the .nav-link itself.

        
            
            <nav>
              <div>
                <a href="#">Navbar</a>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarNav"
                  aria-controls="navbarNav"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
                <div>
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Features</a>
                    </li>
                    <li>
                      <a href="#">Pricing</a>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </nav>

And because we use classes for our navs, you can avoid the list-based approach entirely if
you like.

        
            
            <nav>
              <div>
                <a href="#">Navbar</a>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarNavAltMarkup"
                  aria-controls="navbarNavAltMarkup"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
                <div>
                  <div>
                    <a aria-current="page" href="#">Home</a>
                    <a href="#">Features</a>
                    <a href="#">Pricing</a>
                    <a href="#" tabindex="-1" aria-disabled="true"
                      >Disabled</a
                    >
                  </div>
                </div>
              </div>
            </nav>

Forms

Place various form controls and components within a navbar:

        
            
            <nav>
              <div>
                <form>
                  <input
                    type="search"
                   
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                  <span>
                    <i></i>
                  </span>
                </form>
              </div>
            </nav>

Immediate child elements of .navbar use flex layout and will default to
justify-content: space-between. Use additional
flex utilities
as needed to adjust this behavior.

        
            
            <nav>
              <div>
                <a>Navbar</a>
                <form>
                  <input
                    type="search"
                   
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                  <span>
                    <i></i>
                  </span>
                </form>
              </div>
            </nav>

White form for dark theme.

        
            
            <nav>
              <div>
                <form>
                  <input
                    type="search"
                   
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                  <span>
                    <i></i>
                  </span>
                </form>
              </div>
            </nav>

Buttons

Various buttons are supported as part of these navbar forms, too. This is also a great
reminder that vertical alignment utilities can be used to align different sized elements.

        
            
            <!-- Navbar -->
            <nav>
              <!-- Container wrapper -->
              <div>
                <!-- Navbar brand -->
                <a href="https://mdbgo.com/">
                  <img
                    src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"
                   
                    alt=""
                    loading="lazy"
                   
                  />
                </a>

                <!-- Toggle button -->
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarButtonsExample"
                  aria-controls="navbarButtonsExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>

                <!-- Collapsible wrapper -->
                <div>
                  <!-- Left links -->
                  <ul>
                    <li>
                      <a href="#">Dashboard</a>
                    </li>
                  </ul>
                  <!-- Left links -->

                  <div>
                    <button type="button">
                      Login
                    </button>
                    <button type="button">
                      Sign up for free
                    </button>
                    <a
                     
                      href="https://github.com/mdbootstrap/mdb-ui-kit"
                      role="button"
                      ><i></i
                    ></a>
                  </div>
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>
            <!-- Navbar -->

Text

Navbars may contain bits of text with the help of
.navbar-text. This class adjusts vertical alignment and horizontal spacing for
strings of text.

        
            
            <nav>
              <div>
                <span>
                  Navbar text with an inline element
                </span>
              </div>
            </nav>

Mix and match with other components and utilities as needed.

        
            
            <nav>
              <div>
                <a href="#">Navbar w/ text</a>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarText"
                  aria-controls="navbarText"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
                <div>
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Features</a>
                    </li>
                    <li>
                      <a href="#">Pricing</a>
                    </li>
                  </ul>
                  <span>
                    Navbar text with an inline element
                  </span>
                </div>
              </div>
            </nav>

Dropdown

You can also use dropdowns in your navbar nav. Dropdown menus require a wrapping element for
positioning, so be sure to use separate and nested elements for
.nav-item and .nav-link as shown below.

Learn more about dropdowns in our
dropdown docs.

        
            
            <nav>
              <div>
                <ul>
                  <!-- Dropdown -->
                  <li>
                    <a
                     
                      href="#"
                     
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Dropdown link
                    </a>
                    <ul aria-labelledby="navbarDropdownMenuLink">
                      <li>
                        <a href="#">Action</a>
                      </li>
                      <li>
                        <a href="#">Another action</a>
                      </li>
                      <li>
                        <a href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

Breadcrumb

Very common use case — breadcrumb in the navbar.

        
            
            <nav>
              <div>
                <nav aria-label="breadcrumb">
                  <ol>
                    <li>
                      <a href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Library</a>
                    </li>
                    <li aria-current="page">
                      <a href="#">Data</a>
                    </li>
                  </ol>
                </nav>
              </div>
            </nav>

Icons

Choose from hundreds of our
icons and simply add them to the navbar.

Note: We add .d-flex .flex-row classes to keep the icons
inline when the navbar is collapsed. Without this, they will stack one under another.

        
            
            <nav>
              <div>
                <ul>
                  <!-- Icons -->
                  <li>
                    <a href="#">
                      <i></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i></i>
                    </a>
                  </li>
                  <!-- Icon dropdown -->
                  <li>
                    <a
                     
                      href="#"
                     
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i></i>
                    </a>
                    <ul aria-labelledby="navbarDropdown">
                      <li>
                        <a href="#">Action</a>
                      </li>
                      <li>
                        <a href="#">Another action</a>
                      </li>
                      <li><hr /></li>
                      <li>
                        <a href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

Badges

Badges can be very useful for presenting
counters, for example in the shopping cart.

        
            
            <nav>
              <div>
                <ul>
                  <!-- Badge -->
                  <li>
                    <a href="#">
                      <span>1</span>
                      <span><i></i></span>
                    </a>
                  </li>
                </ul>
              </div>
            </nav>

Notifications

You can mix icon with dropdown and create a notification dropdown to indicate important news
for visitors. Add
.hidden-arrow class to hide a dropdown arrow.

        
            
            <nav>
              <div>
                <ul>
                  <!-- Notification dropdown -->
                  <li>
                    <a
                     
                      href="#"
                     
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i></i>
                      <span>1</span>
                    </a>
                    <ul
                     
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li>
                        <a href="#">Some news</a>
                      </li>
                      <li>
                        <a href="#">Another news</a>
                      </li>
                      <li>
                        <a href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <!-- Notification dropdown -->
                </ul>
              </div>
            </nav>

Flags

Use dropdown together with
flags to create a language switch.

        
            
            <nav>
              <div>
                <ul>
                  <!-- Icon dropdown -->
                  <li>
                    <a
                     
                      href="#"
                     
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i></i>
                    </a>
                    <ul aria-labelledby="navbarDropdown">
                      <li>
                        <a href="#"
                          ><i></i>English
                          <i></i
                        ></a>
                      </li>
                      <li><hr /></li>
                      <li>
                        <a href="#"><i></i>Polski</a>
                      </li>
                      <li>
                        <a href="#"><i></i>中文</a>
                      </li>
                      <li>
                        <a href="#"><i></i>日本語</a>
                      </li>
                      <li>
                        <a href="#"><i></i>Deutsch</a>
                      </li>
                      <li>
                        <a href="#"><i></i>Français</a>
                      </li>
                      <li>
                        <a href="#"><i></i>Español</a>
                      </li>
                      <li>
                        <a href="#"><i></i>Русский</a>
                      </li>
                      <li>
                        <a href="#"><i></i>Português</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

Avatar

By combining simple image and dropdown you can create an avatar with typical user options.

        
            
            <nav>
              <div>
                <ul>
                  <!-- Avatar -->
                  <li>
                    <a
                     
                      href="#"
                     
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <img
                        src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                       
                       
                        alt=""
                        loading="lazy"
                      />
                    </a>
                    <ul aria-labelledby="navbarDropdownMenuLink">
                      <li>
                        <a href="#">My profile</a>
                      </li>
                      <li>
                        <a href="#">Settings</a>
                      </li>
                      <li>
                        <a href="#">Logout</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

Content alignment

To align navbar content to the right or left use
me-auto or ms-auto classes. For content centering use
flexbox
utilities.

Left aligned

Add .me-auto class next to the .navbar-nav to align the content to
the left.

        
            
            <nav>
              <!-- Container wrapper -->
              <div>
                <!-- Toggle button -->
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarLeftAlignExample"
                  aria-controls="navbarLeftAlignExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>

                <!-- Collapsible wrapper -->
                <div>
                  <!-- Left links -->
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li>
                      <a
                       
                        href="#"
                       
                        role="button"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul aria-labelledby="navbarDropdown">
                        <li>
                          <a href="#">Action</a>
                        </li>
                        <li>
                          <a href="#">Another action</a>
                        </li>
                        <li><hr /></li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <!-- Left links -->
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>

Right aligned

Add .ms-auto class next to the .navbar-nav to align the content to
the right.

        
            
            <nav>
              <!-- Container wrapper -->
              <div>
                <!-- Toggle button -->
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarRightAlignExample"
                  aria-controls="navbarRightAlignExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>

                <!-- Collapsible wrapper -->
                <div>
                  <!-- Left links -->
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li>
                      <a
                       
                        href="#"
                       
                        role="button"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul aria-labelledby="navbarDropdown">
                        <li>
                          <a href="#">Action</a>
                        </li>
                        <li>
                          <a href="#">Another action</a>
                        </li>
                        <li><hr /></li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <!-- Left links -->
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>

Centered

Remove .ms-auto or .me-auto class and add
.justify-content-center next to the .navbar-collapse to center the
content.

        
            
            <nav>
              <!-- Container wrapper -->
              <div>
                <!-- Toggle button -->
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarCenteredExample"
                  aria-controls="navbarCenteredExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>

                <!-- Collapsible wrapper -->
                <div
                 
                 
                >
                  <!-- Left links -->
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li>
                      <a
                       
                        href="#"
                       
                        role="button"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul aria-labelledby="navbarDropdown">
                        <li>
                          <a href="#">Action</a>
                        </li>
                        <li>
                          <a href="#">Another action</a>
                        </li>
                        <li><hr /></li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <!-- Left links -->
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>

Responsive behaviors

Navbars can use .navbar-toggler, .navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their content
collapses behind a button. In combination with other utilities, you can easily choose when to
show or hide particular elements.

For navbars that never collapse, add the
.navbar-expand class on the navbar. For navbars that always collapse, don’t add
any .navbar-expand class.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a
.navbar-brand, they’ll automatically be aligned to the far right. Reversing
your markup will reverse the placement of the toggler. Below are examples of different
toggle styles.

With no .navbar-brand shown at the smallest breakpoint:

        
            
            <nav>
              <div>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarTogglerDemo01"
                  aria-controls="navbarTogglerDemo01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
                <div>
                  <a href="#">Hidden brand</a>
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <form>
                    <input
                      type="search"
                     
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <button
                     
                      type="button"
                      data-mdb-ripple-color="dark"
                    >
                      Search
                    </button>
                  </form>
                </div>
              </div>
            </nav>

With a brand name shown on the left and toggler on the right:

        
            
            <nav>
              <div>
                <a href="#">Navbar</a>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarTogglerDemo02"
                  aria-controls="navbarTogglerDemo02"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
                <div>
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <form>
                    <input
                      type="search"
                     
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <button
                     
                      type="button"
                      data-mdb-ripple-color="dark"
                    >
                      Search
                    </button>
                  </form>
                </div>
              </div>
            </nav>

With a toggler on the left and brand name on the right:

        
            
            <nav>
              <div>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarTogglerDemo03"
                  aria-controls="navbarTogglerDemo03"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
                <a href="#">Navbar</a>
                <div>
                  <ul>
                    <li>
                      <a aria-current="page" href="#">Home</a>
                    </li>
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <form>
                    <input
                      type="search"
                     
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <button
                     
                      type="button"
                      data-mdb-ripple-color="dark"
                    >
                      Search
                    </button>
                  </form>
                </div>
              </div>
            </nav>

External content

Sometimes you want to use the collapse plugin to trigger a container element for content
that structurally sits outside of the
.navbar. Because our plugin works on the id and
data-mdb-target matching, that’s easily done!

        
            
            <div>
              <div>
                <h5>Collapsed content</h5>
                <span>Toggleable via the navbar brand.</span>
              </div>
            </div>
            <nav>
              <div>
                <button
                 
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarToggleExternalContent"
                  aria-controls="navbarToggleExternalContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i></i>
                </button>
              </div>
            </nav>

Руководство Bootstrap NavBar

Navigation Bar (Навигационный бар) это часть пользовательского интерфейса, помогающий пользователю перескакивать на разные страницы (page) в вебсайте.

Bootstrap предоставляет вам соответствующие классы Css, которые помогают вам легко создать Navigation Bar и является подходящим все устройствам с разными размерами экрана.

Navbar

Чтобы сочетаться с устройствами с разными ширинами экрана, панель инструментов у Bootstrap может расширяться (expand) или уменьшаться (collapse) в зависимости от размера экрана. Самое простое действие этот возможность изменения из горизонтального панеля инструментов в вертикальное, когда ширина экрана малая.

Стандартные панели инструментов созданы с классом .navbar, и классом .navbar-expand-xl|lg|md|sm, чтобы ясно указать для каких экранов панель инструментов будет расширен (expand), или наоборот уменьшен (collapse).

Keyword	Description	Width
sm	Small	>= 567px
md	Medium	>= 768px
lg	Large	>= 992px
xl	Extra Large	>=1200px

Below is the illustration of structure of a simple Navbar. One «.navbar» can contain one or more «.navbar-nav»:

navbar-example1.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <h5>.navbar .navbar-expand-sm</h5>

      <!-- A horizontal navbar that becomes vertical on small screens -->
      <nav>
         <!-- Links -->
         <ul>
            <li>
               <a href="#">Javascript</a>
            </li>
            <li>
               <a href="#">Css</a>
            </li>
            <li>
               <a href="#">Bootstrap</a>
            </li>
         </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Если вы не используете класс .navbar-expand-xl|lg|md|sm, панель инструментов всегда будет вертикальным со всеми размерами экрана.


<!-- Vertical with every screen size -->
<nav>
   <!-- Links -->
   <ul>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

.justify-content-center

Класс .justify-content-center помогает .navbar-nav располагаться посередине панели инструментов.

navbar-center-example.html


<nav>
   <!-- Links -->
   <ul>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Colored Navbar

Класс Css	Описание
.navbar-dark	Используйте данный класс если вы оповещаете Bootstrap, что фон панель инструментов который вы используете темного цвета. Bootstrap автоматически настроит цвет текста для всех Nav-item белым.
.navbar-light	Используйте данный класс если вы оповещаете Bootstrap что фон панель инструментов который вы используете светлого цвета. Bootstrap автоматически настроит цвет текста для всех Nav-item черным.

.navbar-light .navbar-dark


<nav>
   <!-- Links -->
   <ul>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Класс Css	Описание
.active	Используйте данный класс если вы хотите, чтобы Bootstrap подчеркнул (highlight) определенный Nav-item. будто он выбран (или активирован).
.disabled	Используйте данный класс если вы хотите, чтобы Bootstrap отключил (disable) определенный Link, пользователь не сможет нажать на этот Link.

.active .disabled


<nav>
   <!-- Links -->
   <ul>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
      <li>
         <a href="#">AngularJS (Disabled)</a>
      </li>
   </ul>
</nav>

One of the indispensable components of a Navbar is a Brand. It is the place where you put a Logo or a name directly related to your website.

Используйте <a>, чтобы создать Brand. У вас есть два способа расположить Brand, это может быть прямой подкомпонент «.navbar» или прямой подкомпонент «.nav-item». (Как в изображении ниже).

.navbar-brand (Text)


<!-- Brand: Direct child of ".navbar" -->
<nav>
   <a href="#">o7planning</a>

   <ul>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

<!-- Brand: Direct Child of ".nav-item" -->
<nav>
   <ul>
      <li>
         <a href="#">o7planning</a>
      </li>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Пример отображения Logo на Navbar:

.navbar-brand (Logo)


<!-- Brand: Direct Child of ".navbar" -->
<nav>
   <a href="#">
   <img src="../images/logo.png">
   </a>

   <ul>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

<!-- Brand: Direct Child of ".nav-item" -->
<nav>
   <ul>
      <li>
         <a href="#">
         <img src="../images/logo.png">
         </a>
      </li>
      <li>
         <a href="#">Javascript</a>
      </li>
      <li>
         <a href="#">Css</a>
      </li>
      <li>
         <a href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Обычно на устройствах с малым экраном, вебсайты выбирают действие уменьшения навигационного бара (navigation bar) в button, когда пользователь нажимает на этот button, навигационный бар будет отображен вертикально.

Чтобы навигационный бар имел действие как выше, вам нужно использовать комбинацию следующих классов css:

collapse
navbar-collapse
navbar-toggler

navbar-collapsing-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <nav>
         <!-- Brand -->
         <a href="#">o7planning</a>

         <!-- Toggler/collapsibe Button -->
         <button type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span></span>
         </button>

         <!-- Navbar links -->
         <div>
            <ul>
               <li>
                  <a href="#">Javascript</a>
               </li>
               <li>
                  <a href="#">Css</a>
               </li>
               <li>
                  <a href="#">Bootstrap</a>
               </li>
            </ul>
         </div>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>

</html>

A Navbar can contain one or more «.navbar-nav». Below is an example, a Navbar with a Brand, and a «.navbar-nav» on the left and a «.navbar-nav» on the right.

navbar-leftright-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <nav>
         <a href="#">o7planning</a>

         <!-- Left -->
         <ul>
            <li>
               <a>Java</a>
            </li>
            <li>
               <a>C/C++</a>
            </li>
         </ul>
         <!-- Right -->
         <ul>
           <li>
              <a>Tom</a>
           </li>
           <li>
              <a>Logout</a>
           </li>
         </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

mr-auto, ml-auto (?)

navbar-dropdown-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <nav>

         <!-- Brand -->
         <a href="#">o7planning</a>

         <!-- Links -->
         <ul>
            <li>
               <a href="#">Java</a>
            </li>
            <li>
               <a href="#">C/C++</a>
            </li>
            <!-- Dropdown -->
            <li>
               <a href="#" data-toggle="dropdown">
               Front-end
               </a>
               <div>
                  <a href="#">Javascript</a>
                  <a href="#">Css</a>
                  <a href="#">Bootstrap</a>
               </div>
            </li>
         </ul>

      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Form так же может появиться на Navbar, самое распространенное это Form поиска, он позволяет пользователю вводить ключевое слово для поиска содержания в вебсайте.


<!-- Navbar-nav with FORM -->
<ul>
   <form action="/somepage">
      <input type="text" placeholder="Search">
      <button type="submit">Search</button>
   </form>
</ul>

navbar-form-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
     
      <nav>
         <a href="#">o7planning</a>
         <ul>
            <li>
               <a>Java</a>
            </li>
            <li>
               <a>C/C++</a>
            </li>
         </ul>
         <!-- Navbar-nav with FORM -->
         <ul>
            <form action="/somepage">
               <input type="text" placeholder="Search">
               <button type="submit">Search</button>
            </form>
         </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

.fixed-top это утилитарный класс в Bootstrap, он используется для фиксации элемента наверху окна просмотра (viewport) браузера. Вы можете применить данный класс для Navbar.

navbar-fixed-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <nav>
         <a href="#">o7planning</a>
         <ul>
            <li>
               <a>Java</a>
            </li>
            <li>
               <a>C/C++</a>
            </li>
         </ul>
      </nav>

      <h2>Content</h2>
      <h3>Content</h3>
      <h4>Content</h4>
      <h5>Content</h5>
      <h5>Content</h5>
      <h2>Content</h2>
      <h3>Content</h3>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Навигация. Компоненты · Bootstrap. Версия v4.0.0

Документация и примеры использования навигационных компонентов Bootstrap.

Основы

Навигация в Bootstrap имеет общую для подобного типа элементов разметку, от базового класса .nav до активных и «выключенных» состояний. Заменяйте классы-модификаторы для переключения между стилями.

Базовый компонент класса .nav создан на флексбоксе, что обеспечивает хорошую базу для создания всех типов навигационных компонентов. В него входят несколько стилей, которые «перебивают» остальные (для работы со списками), добавлены паддинги ссылок для увеличения «зоны клика», и базовые стили «выключенных» состояний.

В базовый компонент класса .nav не включено какое-либо состояние .active. Следующие примеры включают класс, главным образом для демонстрации, что данный конкретный класс не подключает какие-либо специальные стили.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Классы используются везде, так что ваша разметка может быть сверх-гибкой. Используйте <ul> как показано выше, или создайте свои; скажем, на основе элемента <nav>. Из-за того, что .nav использует display: flex, ссылки в навигационной панели ведут себя, как если бы были элементами такой же панели, но с меньшим количеством кода.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Доступные стили

Изменяйте стиль компонентов .nav классами-модификаторами и обычными классами. Смешивайте их и настраивайте как надо, или создайте свои.

Горизонтальное выравнивание

Изменяйте горизонтальное выравнивание вашего навигационного элемента с утилитами флексбокса. По умолчанию навигационные панели выровнены по левому краю, но вы можете легко это изменить на центр или правый край.

Центрировано классом .justify-content-center:

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

По правому краю классом .justify-content-end:

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Вертикально

Располагайте вашу навигацию по вертикали, изменяя направление элемента flex классом .flex-column. Надо расположить ее вертикально лишь на некоторых брейкпойнтах? Используйте отзывчивые версии (например .flex-sm-column).

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Как всегда – вертикальная навигация доступна и без <ul>.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Вкладки

«Забирает» базовый элемент навигации с верха и добавляет класс .nav-tabs для создания «вкладочного» интерфейса, Используйте их для создания зоны с поддержкой содержимого в виде вкладок с плагином JavaScript.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Подушки

На том же коде HTML, но с используйте класс .nav-pills:

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Наполняйте и выравнивайте по центру

Заставьте содержимое вашего .nav расширяться на полную доступную ширину с помощью одного-двух классов-модификаторов. Для пропорционального заполнения всего доступного пространства элементами класса .nav-item, используйте класс nav-fill. Заметьте, что всё горизонтальное место занято, но не каждый элемент навигационной панели имеет одинаковую ширину.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Longer nav link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Используя навигацию на основе <nav>, удостоверьтесь, что включаете .nav-item в ссылки.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Для создания элементов равной ширины используйте класс .nav-justified. Всё горизонтальное пространство будет занято ссылками навигационной панели, но, в отличие от примера с .nav-fill выше, каждый элемент навигационной панели будет одинаковой ширины.

<nav>
  <a href="#">Active</a>
  <a href="#">Longer nav link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

По аналогии с примером с .nav-fill, где использована навигация на основе <nav>, удостоверьтесь, что включили класс .nav-item в ссылки.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Работа с гибкими классами

Если вам нужна «отзывчивая» навигационная панель, рассмотрите использование классов флексбокса. Более подробные в спецификации, они предлагают более широкую настройку по отзывчивым брейкпойнтам. В примере ниже наша навигационная панель будет расположена по вертикали на самом маленьком брейкпойнте, затем обретет горизонтальную разметку, которая, начиная с большего брейкпойнта, займет всю доступную ширину.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Доступность

Если вы пользуетесь навигационными элементами для создания навигационной панели, добавьте role="navigation" в наиболее подходящий для этого родительский контейнер <ul>, или оберните элементом <nav> всю навигацию. Не добавляйте атрибут role в сам <ul>, т.к. это может помешать вспомогательным технологиям распознать этот элемент как список.

Заметьте, что навигационные панели, даже если они стилизованы как вкладки классами .nav-tabs, не должны содержать role="tablist", role="tab" или role="tabpanel". Это атрибуты подходят лишь для динамических интерфейсов вкладок, как описано в WAI ARIA Authoring Practices. Смотрите, например, про поведение JavaScript c динамическими интерфейсами вкладок в этой секции.

Выпадающие элементы

Добавляйте меню с выпадающими элементами, используя совсем немного HTML и плагин выпадающих элементов JavaScript.

Вкладки с выпадающими элементами

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div>
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Подушки с выпадающими элементами

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div>
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Поведение JavaScript

Используйте плагин JavaScript вкладок — подключите его индивидуально или через компилированный bootstrap.js — для расширения наших навигационных вкладок и «подушек» и создания вкладочных панелей локального содержимого, или даже выпадающие меню.

Если вы подключаете наши файлы JS, вам потребуется util.js.

Интерфейсы динамически переключаемых вкладок, как описано в WAI ARIA Authoring Practices, требуют атрибутов role="tablist", role="tab", role="tabpanel" и дополнительного атрибута aria- для возможности передачи их структуры, функциональности и текущего состояния юзерам вспомогательных технологий (таких как экранные читалки).

Заметьте, что интерфейсы динамически переключаемых вкладок не должны содержать выпадающие меню, т.к. это вызовет проблемы с usability и доступностью. С точки зрения удобства для пользователя тот факт, что триггер-элемент текущей отображаемой вкладки не виден немедленно (т.к. он находится внутри закрытого выпадающего меню), может вызвать неудобство. С точки зрения доступности пока еще не существует проверенного способа обозначить и передать такой тип элементов в паттерне стандарте WAI ARIA, что означает, что этот тип элементов нельзя сделать доступным для юзеров вспомогательных технологий.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

<ul role="tablist">
  <li>
    <a data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Если вам необходимо, то можно работать с разметкой на основе <ul>, как показано выше, или с любой произвольной «рулоной собственной» разметкой. Обратите внимание, что если вы используете <nav>, вам не следует добавлять к ней role="tablist", так как это переопределит собственную роль элемента в качестве ориентира навигации. Вместо этого переключитесь на альтернативный элемент (в приведенном ниже примере, простой <div>) и оберните вокруг него <nav>.

Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.

<nav>
  <div role="tablist">
    <a data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div>
  <div role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Плагин вкладок работает также с «подушками».

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

<ul role="tablist">
  <li>
    <a data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div>
  <div role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

И с вертикальными «подушками».

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div role="tablist" aria-orientation="vertical">
  <a data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div>
  <div role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  <div role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

Используя атрибуты

Вы можете задействовать навигацию по вкладке или «подушке» без JavaScript, а просто добавив data-toggle="tab" или data-toggle="pill" к элементу. Используйте эти атрибуты в .nav-tabs или .nav-pills.

<!-- Nav tabs -->
<ul role="tablist">
  <li>
    <a data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li>
    <a data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Через JavaScript

Задействуйте переключаемые вкладки через JavaScript (каждая вкладка задействуется индивидуально):

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Их можно активировать несколькими методами:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Эффект появления

Чтобы вкладки постепенно появлялись, добавьте класс .fade в каждый элемент класса .tab-pane. Первая вкладка .tab-pane также должна иметь класс .show, чтобы первоначальный контент был видимым.

<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию.

$().tab

Активирует вкладку и контейнер содержимого. Вкладка должна иметь data-target или href, «нацеленные» на контейнер-узел в DOM.

<ul role="tablist">
  <li>
    <a data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li>
    <a data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab(‘show’)

Выбирает данную вкладку и показывает связанную с ней «подушку». Любая другая вкладка, которая была выбрана до этого, становится «невыбранной» и ее «подушка» прячется. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как произойдет событие shown.bs.tab).

$('#someTab').tab('show')

.tab(‘dispose’)

Уничтожает вкладку элемента.

События

При показе новой вкладки события запускаются в такой порядке:

hide.bs.tab (на текущей активной вкладке)

show.bs.tab (на той, которая вот-вот покажется)

hidden.bs.tab (на предыдущей активной вкладке, как для события hide.bs.tab)

shown.bs.tab (на вкладке, только что ставшей активной и только что показанной, такое же как для события show.bs.tab)

Если ни одна вкладка не была активна, события hide.bs.tab и hidden.bs.tab не произойдут.

Тип события	Описание
show.bs.tab	Это событие запускается при показе вкладки, но до того, как новая вкладка показана. Используйте `event.target` и `event.relatedTarget` для «нацеливания» на активную вкладку и предыдущую активную вкладку (если доступно) соответственно.
shown.bs.tab	Это событие запускается при показе вкладки после того, как новая вкладка показана. Используйте `event.target` и `event.relatedTarget` для «нацеливания» на активную вкладку и предыдущую активную вкладку (если доступно) соответственно.
hide.bs.tab	Это событие запускается, когда новая вкладка вот-вот покажется (и т.о. – предыдущая активная вкладка вот-вот скроется). Используйте `event.target` и `event.relatedTarget` для «нацеливания» на текущую активную вкладку и следующую активную вкладку соответственно.
hidden.bs.tab	Это событие запускается, когда новая вкладка показана (и т.о. предыдущая активная вкладка скрыта). Используйте `event.target` и `event.relatedTarget` для «нацеливания» на предыдущую активную вкладку и новую активную вкладку соответственно.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Navs · Bootstrap

Документация и примеры использования включенных навигационных компонентов Bootstrap.

Базовая навигация

Навигация, доступная в Bootstrap, имеет общую разметку и стили, от базового класса .nav до активного и отключенного состояний. Поменяйте местами классы модификаторов для переключения между стилями.

Базовый компонент .nav построен на основе Flexbox и обеспечивает прочную основу для создания всех типов компонентов навигации.Он включает в себя некоторые переопределения стилей (для работы со списками), некоторые отступы для ссылок для больших областей попадания и базовый отключенный стиль.

Базовый компонент .nav не включает никаких состояний .active . Следующие примеры включают класс, главным образом, чтобы продемонстрировать, что этот конкретный класс не запускает никаких специальных стилей.

  
  
     Активно 
  
  
     Ссылка 
  
  
     Ссылка 
  
  
     Отключено

Повсюду используются классы

, поэтому ваша разметка может быть очень гибкой.Используйте

. Поскольку .nav использует display: flex , навигационные ссылки ведут себя так же, как элементы навигации, но без дополнительной разметки.

  
   Активно 
   Ссылка 
   Ссылка 
   Отключено

Доступные стили

Измените стиль .компонент nav s с модификаторами и утилитами. Смешивайте и сочетайте по мере необходимости или создавайте свои собственные.

Горизонтальное выравнивание

Измените горизонтальное выравнивание вашего навигатора с помощью утилит flexbox. По умолчанию элементы навигации выровнены по левому краю, но вы можете легко изменить их на выравнивание по центру или по правому краю.

По центру .justify-content-center :

  
  
     Активно 
  
  
     Ссылка 
  
  
     Ссылка 
  
  
     Отключено

Выровнен по правому краю с .justify-content-end :

  
  
     Активно 
  
  
     Ссылка 
  
  
     Ссылка 
  
  
     Отключено

Вертикальный

Сгруппируйте навигацию, изменив направление гибкого элемента с помощью утилиты .flex-column . Нужно наложить их на одни окна просмотра, а на другие нет? Используйте адаптивные версии (например,г., .flex-sm-столбец ).

  
  
     Активно 
  
  
     Ссылка 
  
  
     Ссылка 
  
  
     Отключено

Как всегда, вертикальная навигация возможна и без

  
   Активно 
   Ссылка 
   Ссылка 
   Отключено

Вкладки

Берет базовую навигацию сверху и добавляет .nav-tabs для создания интерфейса с вкладками. Используйте их для создания областей с вкладками с помощью нашего плагина JavaScript вкладок.

  
  
     Активно 
  
  
     Ссылка 
  
  
     Ссылка 
  
  
     Отключено

Таблетки

Возьмите тот же HTML, но используйте .nav-pills вместо:

  
  
     Активно 
  
  
     Ссылка 
  
  
     Ссылка 
  
  
     Отключено

Заполнить и выровнять

Заставьте содержимое вашего .nav расширить всю доступную ширину до одного из двух классов модификаторов. Чтобы пропорционально заполнить все доступное пространство устройством .nav-item s, используйте .nav-fill . Обратите внимание, что все пространство по горизонтали занято, но не все элементы навигации имеют одинаковую ширину.

  
  
     Активно 
  
  
     Более длинная навигационная ссылка 
  
  
     Ссылка 
  
  
     Отключено

При использовании навигации на основе

обязательно укажите .nav-item на якоря.

  
   Активно 
   Ссылка 
   Ссылка 
   Отключено

Для элементов одинаковой ширины используйте с выравниванием по ширине . Все горизонтальное пространство будет занято навигационными ссылками, но в отличие от .nav-fill выше, все элементы навигации будут одинаковой ширины.

  
   Активно 
   Более длинная навигационная ссылка 
   Ссылка 
   Отключено

Аналогично .Пример nav-fill с использованием навигации на основе

, обязательно включите .nav-item в якоря.

  
   Активно 
   Ссылка 
   Ссылка 
   Отключено

Работа с гибкими утилитами

Если вам нужны гибкие варианты навигации, рассмотрите возможность использования ряда утилит flexbox. Несмотря на то, что эти утилиты более подробны, они предлагают большую настройку для реагирующих точек останова.В приведенном ниже примере наша навигация будет размещена на самой низкой точке останова, а затем адаптирована к горизонтальной компоновке, которая заполняет доступную ширину, начиная с небольшой точки останова.

  
   Активно 
   Ссылка 
   Ссылка 
   Отключено

Относительно доступности

Если вы используете навигацию для предоставления панели навигации, обязательно добавьте role = "navigation" в наиболее логичный родительский контейнер

вокруг вся навигация.Не добавляйте роль к самому

Обратите внимание, что панели навигации, даже если они визуально оформлены как вкладки с классом .nav-tabs , должны быть присвоены , а не role = "tablist" , role = "tab" или role = "tabpanel" атрибутов. Они подходят только для интерфейсов с динамическими вкладками, как описано в WAI ARIA Authoring Practices.См. В этом разделе пример поведения JavaScript для интерфейсов с динамическими вкладками.

Использование раскрывающихся списков

Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript.

Вкладки с раскрывающимися списками

  
  
     Активно 
  
  
     Раскрывающийся список 
    
       Действие 
       Другое действие 
       Здесь что-то еще 
       
       Отдельная ссылка 
    
  
  
     Ссылка 
  
  
     Отключено

Таблетки с выпадающими меню

  
  
     Активно 
  
  
     Раскрывающийся список 
    
       Действие 
       Другое действие 
       Здесь что-то еще 
       
       Отдельная ссылка 
    
  
  
     Ссылка 
  
  
     Отключено

Поведение JavaScript

Используйте подключаемый модуль JavaScript вкладки — включите его индивидуально или через скомпилированный загрузчик .js — чтобы расширить наши навигационные вкладки и таблетки для создания вкладок локального контента, даже через раскрывающиеся меню.

Если вы создаете наш JavaScript из исходного кода, для него требуется util.js .

Динамические интерфейсы с вкладками, как описано в WAI ARIA Authoring Practices, требуют role = "tablist" , role = "tab" , role = "tabpanel" и дополнительных атрибутов aria- . чтобы донести их структуру, функциональность и текущее состояние до пользователей вспомогательных технологий (например, программ чтения с экрана).

Обратите внимание, что интерфейсы с динамическими вкладками , а не должны содержать раскрывающиеся меню, поскольку это вызывает проблемы как с удобством использования, так и с доступностью. С точки зрения удобства использования тот факт, что триггерный элемент текущей отображаемой вкладки не виден сразу (поскольку он находится внутри закрытого раскрывающегося меню), может вызвать путаницу. С точки зрения доступности в настоящее время нет разумного способа сопоставить этот вид конструкции со стандартным шаблоном WAI ARIA, а это означает, что ее нелегко сделать понятной для пользователей вспомогательных технологий.

Необработанный деним Вы наверняка не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очистки ретро-синтезатора. Усы cliche tempor, williamsburg carles vegan helvetica. Репрезендерит мясник ретро кефиех ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure terry richardson ex squid. Аликвип плац для шалфея cillum iphone. Кардиган Seitan aliquip quis американская одежда, мясник сладострастный nisi qui.

Food truck fixie locavore, кофейный кальмар одного происхождения accusamus mcsweeney’s marfa nulla.Exercitation +1 labore velit, блог портняжные леггинсы PBR следующего уровня wes anderson artisan four loko-farm to table craft beer twee. Qui photo booth высокой печати, коммодо enim craft пиво млкшк аликвип джинсовые шорты ullamco ad винил cillum PBR. Homo nostrud organic, предположительно, работает эстетическая magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-битные экологически чистые джинсовые шорты с бородами, этическая вина Терри Ричардсон, биодизель, сделанная своими руками.Art party sceneter stumptown, tumblr butcher vero sint qui sapiente accusamus татуированный эхо-парк.

  
  
     Главная страница 
  
  
     Профиль 
  
  
     Связаться 
  


  ... 
   ... 
   ...

Чтобы соответствовать вашим потребностям, это работает с разметкой на основе

, вам не следует добавлять role = "tablist" непосредственно к нему, поскольку это переопределит собственную роль элемента как ориентира навигации.Вместо этого переключитесь на альтернативный элемент (в примере ниже простой

) и оберните вокруг него

Et et Conctetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse conctetur nostrud minim non minim occaecat.Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Упражнение mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim REPREHENDERIT. Magna duis labore cillum sint adipisicing ipsum. Nostrud ut anim без упражнений velit labouris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consquat voluptate minim amet aliquip ipsum aute labouris nisi.Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore Commodo nulla Minim Amet ipsum officia Conctetur Amet Ullamco Voluptate Nisi Commodo ea sit eu.

  
  
     Главная страница 
     Профиль 
     Связаться 
  


  ... 
   ... 
   ...

Плагин вкладок также работает с таблетками.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud working proident est nisi. Irure Magna Elit Commodo Anim Ex Veniam Culpa Eiusmod id nostrud sit cupidatat in veniam ad.Eiusmod conquat eu adipisicing Minimal anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu fitness irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur ex. Aute sunt incididunt amet Commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod сладострастные упражнения cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet упражнения duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

  
  
     Главная страница 
  
  
     Профиль 
  
  
     Связаться 
  


  ... 
   ... 
   ...

И с вертикальными таблетками.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur Laborum qui. Идентификатор репрезендерит ситэст еу аликва оккэкат кис и velit excepteur labourum mollit dolore eiusmod.Ipsum dolor в Occaecat Commodo et Voluptate Minim PRESHENDERIT MOLIT PARATUR. Deserunt non labourum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do Laboris Laboris irure PRESSENDERIT ID incididunt duis pariatur mollit aute magna pariatur conctetur. Eu veniam duis non ut dolor deseruntmodo et minim in quis labouris ipsum velit id veniam. Quis utconctetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu.Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint Minimum Conctetur Qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident labouris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magnamodo est ea veniam conctetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur correhenderit consctetur elit id dolor proident in cupidatat officia.Voluptate excepteur Commodo labore nisi cillum duis aliqua do. Aliqua amet Qui Mollit Concectetur NULL Mollit Velit Aliqua Veniam Nisi id do Lorem deserunt amet. Culpa ullamco сидят и занимаются производством работы magna elit nisi in aute tempor Commodo eiusmod.

  
   Главная страница 
   Профиль 
   Сообщения 
   Настройки 


  ... 
   ... 
   ... 
   ...

Использование атрибутов данных

Вы можете активировать навигацию по вкладкам или таблеткам без написания кода JavaScript, просто указав data-toggle = "tab" или data-toggle = "pill" для элемента.Используйте эти атрибуты данных на .nav-tabs или .nav-pills .

  

  
     Главная страница 
  
  
     Профиль 
  
  
     Сообщения 
  
  
     Настройки 
  




  ... 
   ... 
   ... 
   ...

Через JavaScript

Включить вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно):

  $ ('# myTab a'). On ('щелчок', функция (e) {
  e.preventDefault ()
  $ (это) .tab ('показать')
})

Активировать отдельные вкладки можно несколькими способами:

  $ ('# myTab a [href = "# profile"]').tab ('show') // Выбираем вкладку по имени
$ ('# myTab li: first-child a'). tab ('show') // Выбрать первую вкладку
$ ('# myTab li: last-child a'). tab ('show') // Выбрать последнюю вкладку
$ ('# myTab li: nth-child (3) a'). tab ('show') // Выбрать третью вкладку

Эффект затухания

Чтобы вкладки постепенно появлялись, добавьте .fade к каждой .tab-pane . На первой панели вкладок также должно быть указано .show , чтобы исходное содержимое было видимым.

  
  ... 
   ... 
   ... 
   ...

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения .Кроме того, вызов метода для переходного компонента будет проигнорирован .

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Вкладка

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо data-target , либо href , нацеленный на узел контейнера в DOM.

  
  
     Главная страница 
  
  
     Профиль 
  
  
     Сообщения 
  
  
     Настройки 
  



  ... 
   ... 
   ... 
   ... 


<сценарий>
  $ (function () {
    $ ('# myTab li: last-child a'). tab ('показать')
  })

.tab («показать»)

Выбирает данную вкладку и показывает связанную с ней панель. Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанная с ней панель скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (т. Е. До того, как произойдет событие shown.bs.tab ).

  $ ('# someTab'). Tab ('показать')

.tab (‘dispose’)

Уничтожает вкладку элемента.

События

При отображении новой вкладки события запускаются в следующем порядке:

hide.bs.tab (на текущей активной вкладке)
show.bs.tab (на вкладке для показа)
скрыто.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab )
показано.bs.tab (на недавно активированной только что показанной вкладке та же, что и для события show.bs.tab )

Если ни одна вкладка еще не была активной, то события hide.bs.tab и hidden.bs.tab запускаться не будут.

Показано

Тип события	Описание
показать.bs.tab	Это событие запускается при отображении вкладки, но до отображения новой вкладки. Используйте `event.target` и `event.relatedTarget` для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
.bs.tab	Это событие запускается при отображении вкладок после того, как вкладка была показана. Используйте `event.target` и `event.relatedTarget` для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
hide.bs.tab	Это событие возникает, когда должна быть показана новая вкладка (и, таким образом, предыдущая активная вкладка должна быть скрыта). Используйте `event.target` и `event.relatedTarget` для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
hidden.bs.tab	Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте `event.target` и `event.relatedTarget` , чтобы настроить таргетинг на предыдущую активную вкладку и новую активную вкладку соответственно.

  $ ('a [data-toggle = "tab"]'). On ('shown.bs.tab', function (e) {
  e.target // недавно активированная вкладка
  e.relatedTarget // предыдущая активная вкладка
})

Вертикальное меню Bootstrap 4 — Джонатан Бриль

15 декабря 2015 г. •
Комментарии

Обновлено: Более ранний черновик сообщения был для v4.0,0-альфа 4. Читатель указал, что демо нет
дольше работал с последним обновлением. В следующем примере используется текущая альфа-версия, и он на самом деле проще.
и использует больше собственных компонентов Bootstrap. *

Я знаю, что Bootstrap 4.0 — это только альфа-версия, но поскольку вертикальное меню для Bootstrap 3 довольно часто
посетил, я подумал, что начну с версии Bootstrap 4.

В этом примере я использую Bootstrap v4.0.0-alpha.6. Если вы заметили, что что-то не работает,
пожалуйста, прокомментируйте и дайте мне знать, и я постараюсь не отставать от выпусков Bootstrap.

Для демонстрации я попытаюсь сохранить исходный html как можно ближе к примерам Bootstrap, перечисленным в
их страница документации. Для основного макета страницы я использовал стартовый шаблон, найденный на вводной странице. Из
там я создаю базовый макет из двух столбцов и добавляю пример html для вертикальной навигации. Это дает нам очень
базовая схема стартера.

А теперь пара небольших изменений:

Я добавил обтекание
вокруг всей навигации.Обертка
имеет класс
bootstrap-vertical-nav .
В шапку добавлена ссылка на файл bootstrap-vertical-menu.css .
Добавлена кнопка для переключения сворачиваемого объекта.
был размещен вокруг вертикальной навигации с классом collapse .
Наконец, я добавил немного дополнительного CSS, чтобы он выглядел красиво, но не для функциональности.

Итак, вот базовая схема для примера.

  


    
    
    
    

     Bootstrap 4 - Пример вертикального меню 

    
    

    
    

    




    
        

            

                

                
                    
                        
                             Активно 
                        
                        
                             Ссылка 
                        
                        
                             Ссылка 
                        
                        
                             Отключено 
                        
                    
                

            

        
        
             Загрузочный файл 4.0 Пример вертикальной навигации 

            <час />

            
                 Использование адаптивной навигационной панели 4.0 
                 Простой пример использования адаптивной навигационной панели 4.0 для создания вертикального меню, которое будет переключаться на мобильное складное меню. 
                  Статью в блоге для этого примера можно найти здесь < / а>.

            


            <час />

             Nullam congue, dui luctus aliquam maximus, erat magna posuere purus, posuere elementum urna nisi vitae dolor. Целое число tristique non velit ut suscipit. Vestibulum quam eros, blandit dapibus iaculis nec, volutpat vel purus. Quisque communo euismod ipsum, quis pulvinar augue. Cras non fermentum velit. Proin tincidunt lectus diam, at ornare augue interdum eget. Vivamus porttitor iaculis urna в porttitor. Maecenas auctor ac augue convallis eleifend.Praesent lacus odio, placerat sed felis ac, vulputate auctor quam. Cras in nulla eu libero cursus cursus ut a enim. Praesent varius viverra maximus. Morbi accumsan, orci quis semper tempus, leo ipsum efficitur ipsum, eu fermentum ipsum est ac nibh. Ut ut venenatis eros. Duis neque nulla, malesuada non ultrices non, laoreet nec enim. Mauris congue, ipsum non ultrices congue, leo eros tristique urna, bibendum accumsan ligula sem in justo.

Содержимое файла bootstrap-vertical-menu.css :

  / * Создает вертикальную навигацию, начиная с 768 пикселей (см) * /
@media (min-width: 768 пикселей) {
    .bootstrap-vertical-nav .collapse {
        дисплей: блок;
    }
}

Вот и все. Я знаю, что это некрасиво и не касается раскрывающихся списков, но они появятся в будущих обновлениях.А пока дайте мне знать, если у вас есть какие-либо улучшения или вопросы.

Просмотр примера вертикального меню Bootstrap 4

Пожалуйста, включите JavaScript для просмотра комментариев.
пользователя Disqus.

Bootstrap Navbar вертикальный разделитель строк

Навигационная панель

Bootstrap очень помогает, когда дело доходит до адаптивной веб-разработки. Вы можете создать множество вариантов навигационной панели Bootstrap. Вот как создать панель навигации Bootstrap с вертикальным разделителем строк.Я использовал border-right, чтобы создать разделитель вертикальных линий и выровнять все ссылки на панели навигации по правому краю.

Вот пошаговое руководство для панели навигации Bootstrap с вертикальным разделителем строк.

Конечный результат:

1. Если вы следуете документации Bootstrap, это основная панель навигации с выравниванием по левому краю:

  
   Navbar 
  
  
    
      
         Главная  (текущая)  
      
      
         Возможности 
      
      
         Цены 
      
      
         Отключено

Выход:

2. Чтобы ссылки были правильными, добавьте class ml-auto в

  .navbar .navbar-nav .nav-link {
    цвет: # 000000;
    размер шрифта: 1.1em;
}
.navbar .navbar-nav .nav-link: hover {
    цвет: # 808080;
}

Выход:

3. Чтобы добавить вертикальный разделитель строк, добавьте этот код CSS.Я использовал border-right, чтобы создать разделитель вертикальных линий. Также использовал медиа-запрос, чтобы добавить его только на большой экран.

  @media only screen and (min-width: 960px) {
  .navbar .navbar-nav .nav-item .nav-link {
    отступ: 0 0,5 м;
  }
  .navbar .navbar-nav .nav-item: not (: last-child) .nav-link {
    граница справа: 2px solid # 000000;
  }
}

Выход:

Окончательный выходной код для Bootstrap Navbar с вертикальным разделителем строк:

HTML

  
     Кодирование Yaar 
    

    
        
            
                 На главную 
            
            
                 О программе 
            
            
                 Услуги 
            
            
                 Связаться

CSS

 .navbar .navbar-nav .nav-link {
    цвет: # 000000;
    размер шрифта: 1.1em;
}
.navbar .navbar-nav .nav-link: hover {
    цвет: # 808080;
}
@media only screen и (min-width: 960px) {
  .navbar .navbar-nav .nav-item .nav-link {
    отступ: 0 0,5 м;
  }
  .navbar .navbar-nav .nav-item: not (: last-child) .nav-link {
    граница справа: 2px solid # 000000;
  }
}

Вы можете ознакомиться с другими шаблонами навигационной панели Bootstrap здесь.

html — Вертикальная панель навигации Bootstrap 3

html — Вертикальная панель навигации Bootstrap 3 — qaru

Спросил
7 лет, 7 месяцев назад

Просмотрено
99к раз

Я хочу создать панель навигации [по вертикали] с начальной загрузкой 3.Я пробовал это, но это не сработало.

  
      джедан 
      два 
      три 
      четрири 
      домашнее животное

Я пробовал много примеров, но все это со старым бутстрапом. Как создать эту навигацию с новым бутстрапом?

Сандро Мейер

3,0642 золотых знака3030 серебряных знаков4646 бронзовых знаков

Создан 03 апр.

SmackSmack

18922 золотых знака22 серебряных знака77 бронзовых знаков

nav-pills class нужно два л :

  
    джедан 
    два 
    три 
    четрири 
    домашнее животное

http: // getbootstrap.ru / components / # nav-pills

Создан 03 апр.

Самуэль Де Бэкер

3,23611 золотых знаков2222 серебряных знака3636 бронзовых знаков

Похоже, вам не хватает л в nav-pills (у вас он указан как nav-pils )

  
    джедан 
    два 
    три 
    четрири 
    домашнее животное

http: // getbootstrap.ru / components / # nav-pills

Создан 03 апр.

Мэттью ДарнеллМэттью Дарнелл

4,41022 золотых знака1717 серебряных знаков2929 бронзовых знаков

, вы можете использовать таблетки или просто написать это:

ваш html:

  

   ЛОГОТИП 
  
         Link1   
        Link2   
        Link3   
        Link4   
        Link5   
  





 
    Ссылка 1 
 


  
 
    Ссылка 2 
 

    
    
 
    Ссылка 3 
 

    
    
 
    Ссылка 4 
 

    
    
 
    Ссылка 5

ваш css:

  / * Используемый здесь CSS будет применен после начальной загрузки.css * /
.navbar-fixed-left {
  ширина: 140 пикселей;
  положение: фиксированное;
  радиус границы: 0;
  высота: 100%;
}

.navbar-fixed-left .navbar-nav> li {
  float: нет; / * Отмена по умолчанию li float: left * /
  ширина: 139 пикселей;
}

.navbar-fixed-left + .container {
  отступ слева: 160 пикселей;
}

.container {
  высота: 1000 пикселей;
}

.wrapper {
  маржа слева: 140 пикселей;
}

рабочий пример здесь: bootply

Создан 30 июн.

ArcsnArcsn

22122 серебряных знака1010 бронзовых знаков

Я опоздал на вечеринку, но на случай, если вы только что приехали и хотите добавить переключатель в свою вертикальную навигацию:

Пол Руб

35.4k2727 золотых знаков7676 серебряных знаков8787 бронзовых знаков

Создан 12 окт.

Сегун КессСегун Кесс

16422 серебряных знака66 бронзовых знаков

Используйте navbar-pills.Это будет работать.

Создан 12 июн.

Анчит

3511 бронзовый знак

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Сворачиваемая навигация — Надежность — Адаптивный шаблон панели администратора Bootstrap 4 для веб-приложения

Этот раздел содержит разметку HTML для создания вертикальной сворачиваемой навигации.Он определяет, где добавить классы css, чтобы сделать вертикальную сворачиваемую навигацию.

Строка № 12: Содержит .menu-collapsible класс для установки сворачиваемой вертикальной навигации.

                   
                      
                        
                           
                          

                            
                            
                                ...
                            

                            
                            
                                ...
                            
                            

                            
                            
                                
                                    
                                    
                                        ...
                                    
                                    

                                    
                                    
                                        ...
                                    
                                    

                                
                            
                            

                            
                            <нижний колонтитул>
                                ...

Bootstrap 4 Вертикальное боковое меню

Базовое вертикальное меню

Использовать навигацию — вертикально.

  
  
     Элемент 1 
  
  
     Пункт 2 
  
  
     Пункт 3 
  
  
     Пункт 4

Выделить активную позицию

Используйте nav-pills.

  
  
     Элемент 1 
  
  
     Пункт 2 
  
  
     Пункт 3 
  
  
     Пункт 4

Вложенное вертикальное меню

Используйте интервал для левого поля.

Вложенное меню Accordian (раскрывающееся и сворачиваемое)

Использовать свернуть.

В любой момент отображается / раскрывается только 1 подменю

Используйте атрибут data-parent для свертывания.

❤️ Эта статья полезна?

Купите мне кофе☕ или поддержите мою работу, чтобы это место 🖖 оставалось без рекламы.
Если вы не можете, отправьте 💖 на @d_luaz или помогите поделиться этой статьей.

Вертикальное меню (боковая навигация) в Bootstrap

Как создать вертикальное меню с помощью шпиона прокрутки и аффикса в Bootstrap?

Вертикальное меню

Мы можем создать вертикальное меню, используя scrollspy и affix в Bootstrap.

 <стиль>
        тело {
            положение: относительное;
        }

        .affix {
            верх: 20 пикселей;
        }

        div.col-sm-9 div {
            высота: 250 пикселей;
            размер шрифта: 28 пикселей;
        }

        #dnf {
            цвет белый;
            цвет фона: красный;
        }

        #tec {
            цвет: #fff;
            цвет фона: # 673ab7;
        }

        #ребенок {
            цвет: #fff;
            цвет фона: # ff9800;
        }

        #на {
            цвет: #fff;
            цвет фона: # 00bcd4;
        }

        #выключенный{
            цвет: #fff;
            цвет фона: # 009688;
        }

        @media screen и (max-width: 810px) {
            #dnf, #tec, #child, #on, #off {
                маржа слева: 150 пикселей;
            }
        }
    


    
         Прокрутка с привязкой 
         вертикальная навигационная панель с использованием прокрутки и аффикса 
    
    

    
        
            
                
                      DotNetFunda  
                      TechFunda  
                      KidsFunda  
                    
                         ITFunda   
                        
                              Онлайн-обучение  
                              Автономное обучение  
                        
                    
                
            
            
                
                     DotNetFunda 
                     DotNetFunda.Com - это популярные онлайн-уроки, и мы надеемся, что вы скоро станете одним из «самых ценных» профессионалов и начнете блистать в своей карьере. 
                
                
                     TechFunda 
                     TechFunda - это бесплатный веб-сайт с обучающими материалами по веб-технологиям. Наслаждайтесь обучением в манере How to, основанной на решениях проблем в реальном времени. Если у вас есть проблема, спросите здесь 
                
                
                     KidsFunda 
                     KidsFunda - это онлайн-сайт для развлечений, просмотра видео, игр, картин и т. д. 
                
                
                     Онлайн-обучение 
                     ITFunda проводит онлайн-обучение 
                
                
                     Офлайн-обучение 
                     ITFunda проводит офлайн-обучение

В приведенном выше фрагменте кода мы определили вертикальное меню с помощью scrollspy и affix
В элементе body мы взяли data-spy как scrollspy , data-target как #myscrollspy , значение data-offset как 15
В следующей строке у нас есть элемент div со значением класса container-fluid , и мы дали style для определения стиля для элемента div
В следующей строке у нас есть элемент div со значением класса , контейнер , и у нас есть div со строкой значения класса, у нас есть элемент nav со значением класса как col-sm-3 с идентификатором как mynavbar , который вызывает функцию прокрутки кузовного элемента
В следующей строке у нас есть элемент
- В следующей строке у нас есть div со значением класса col-sm-9 и создан элемент div с идентификатором значения списка для определения описания значения списка
- В следующей строке элемента html мы создали стиль в разделе заголовка, чтобы определить стиль значения списка с цветом и цветом фона
выход
Когда мы сворачиваем экран, вывод выглядит как
Просмотров: 4378 | Почтовый заказ: 62
.