Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Menu bootstrap vertical: File not found · Bootstrap v5.1

Содержание

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>

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

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

0

SoftwareDveloper

11 Авг 2020 в 18:03

2 ответа

Лучший ответ

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

0

SoftwareDveloper
12 Авг 2020 в 14:40

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

0

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’)


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


События


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


  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на той, которая вот-вот покажется)
  3. hidden.bs.tab (на предыдущей активной вкладке, как для события hide.bs.tab)
  4. 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 . Следующие примеры включают класс, главным образом, чтобы продемонстрировать, что этот конкретный класс не запускает никаких специальных стилей.

    

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

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

    , как указано выше, или сверните свой собственный, скажем, с элементом

Добавить комментарий

Ваш адрес email не будет опубликован.