Thanh điều hướng bên phản hồi được xây dựng với Bootstrap 5. Thanh điều hướng bên là một thành phần điều hướng cung cấp một cách rõ ràng để điều hướng các trang web phức tạp với nhiều trang.

Bạn đang xem : khởi động thanh điều hướng bên cố định

Thanh điều hướng bên

Thành phần Bootstrap 5 Side Navbar

Thanh điều hướng bên phản hồi được xây dựng với Bootstrap 5. Thanh điều hướng bên là một thành phần điều hướng cung cấp một cách rõ ràng để điều hướng các trang web phức tạp với nhiều trang.

Nếu bạn cần một Thanh điều hướng bên nâng cao hơn và nhiều tùy chọn hơn, hãy xem chính của chúng tôi
Tài liệu SideNav .
Thành phần này đôi khi còn được gọi là
Ngăn kéo ,
Thanh bên hoặc
Điều hướng Offcanvas .

Ví dụ cơ bản

Tài liệu Bootstrap chính thức không chứa thành phần Side Navbar, nhưng có thể
để tạo điều hướng bên đầy đủ chức năng từ các thành phần hiện có và với một chút
sự giúp đỡ của
Thiết kế Material Design cho Bootstrap
– KIT UI miễn phí và mạnh mẽ.

Thanh điều hướng bên sẽ biến mất khi kích thước màn hình nhỏ hơn 992px .
Nó có thể được khởi chạy bằng cách nhấp vào biểu tượng bánh hamburger ở bên trái
bên của Thanh điều hướng.

Bản trình diễn trực tiếp


Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt;! - Điều hướng Chính - & gt;
          & lt; tiêu đề & gt;
            & lt;! - Thanh bên - & gt;
            & lt; nav id = "sidebarMenu" class = "sập d-lg-block sidebar thu gọn bg-white" & gt;
              & lt; div class = "position-stick" & gt;
                & lt; div class = "list-group list-group-flush mx-3 mt-4" & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" aria-current = "true" & gt;
                    & lt; i class = "fas fa-tachometer-alt fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Trang tổng quan chính & lt; / span & gt;
                  & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple active" & gt;
                    & lt; i class = "fas fa-chart-area fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Lưu lượng truy cập webiste & lt; / span & gt;
                  & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-lock fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Mật khẩu & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-chart-line fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Analytics & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt;
                    & lt; i class = "fas fa-chart-pie fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; SEO & lt; / span & gt;
                  & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-chart-bar fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Đơn hàng & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-global fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; International & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-building fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Đối tác & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-calendar fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Calendar & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-users fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Users & lt; / span & gt; & lt; / a & gt;
                  & lt; a href = "#" class = "list-group-item list-group-item-action py-2 ripple" & gt; & lt; i
                      class = "fas fa-money-bill fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Bán hàng & lt; / span & gt; & lt; / a & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / nav & gt;
            & lt;! - Thanh bên - & gt;

            & lt;! - Thanh điều hướng - & gt;
            & lt; nav id = "main-navbar" class = "navbar navbar-expand-lg navbar-light bg-white fixed-top" & gt;
              & lt;! - Trình bao bọc vùng chứa - & gt;
              & lt; div class = "container-chất lỏng" & gt;
                & lt;! - Nút chuyển đổi - & gt;
                & lt; button class = "navbar-toggler" type = "button" data-mdb-toggle = "sập" data-mdb-target = "# sidebarMenu"
                  aria-control = "sidebarMenu" aria-expand = "false" aria-label = "Chuyển đổi điều hướng" & gt;
                  & lt; i class = "fas fa-bar" & gt; & lt; / i & gt;
                & lt; / nút & gt;

                & lt;! - Thương hiệu - & gt;
                & lt; a class = "navbar-brand" href = "#" & gt;
                  & lt; img src = "https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height = "25" alt = "Biểu trưng MDB"
                    loading = "lazy" / & gt;
                & lt; / a & gt;
                & lt;! - Biểu mẫu tìm kiếm - & gt;
                & lt; form class = "d-none d-md-flex input-group w-auto my-auto" & gt;
                  & lt; input autocomplete = "off" type = "search" class = "form-control round"
                    placeholder = 'Tìm kiếm (ctrl + "/" to focus)' style = "min-width: 225px;" / & gt;
                  & lt; span class = "input-group-text border-0" & gt; & lt; i class = "fas fa-search" & gt; & lt; / i & gt; & lt; / span & gt;
                & lt; / form & gt;

                & lt;! - Liên kết bên phải - & gt;
                & lt; ul class = "navbar-nav ms-auto d-flex flex-row" & gt;
                  & lt;! - Thông báo thả xuống - & gt;
                  & lt; li class = "nav-item thả xuống" & gt;
                    & lt; a class = "nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href = "#" id = "navbarDropdownMenuLink"
                      role = "button" data-mdb-toggle = "dropdown" aria-expand = "false" & gt;
                      & lt; i class = "fas fa-bell" & gt; & lt; / i & gt;
                      & lt; span class = "huy hiệu round-thuốc huy hiệu-thông báo bg-nguy hiểm" & gt; 1 & lt; / span & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdownMenuLink" & gt;& lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Một số tin tức & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Một tin tức khác & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Cái gì đó khác ở đây & lt; / a & gt;
                      & lt; / li & gt;
                    & lt; / ul & gt;
                  & lt; / li & gt;

                  & lt;! - Biểu tượng - & gt;
                  & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link me-3 me-lg-0" href = "#" & gt;
                      & lt; i class = "fas fa-fill-drip" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                  & lt; / li & gt;
                  & lt;! - Biểu tượng - & gt;
                  & lt; li class = "nav-item me-3 me-lg-0" & gt;
                    & lt; a class = "nav-link" href = "#" & gt;
                      & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                  & lt; / li & gt;

                  & lt;! - Biểu tượng thả xuống - & gt;
                  & lt; li class = "nav-item thả xuống" & gt;
& lt; & lt; & lt; & lt; & lt; & lt; & lt; CÁI ĐẦU
                    & lt; a class = "nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href = "#" id = "navbarDropdown"
                      role = "button" data-mdb-toggle = "dropdown" aria-expand = "false" & gt;
                      & lt; i class = "cờ vương quốc thống nhất m-0" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdown" & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "United Kingdom flag" & gt; & lt; / i & gt; English
                          & lt; i class = "fa fa-check text-success ms-2" & gt; & lt; / i & gt; & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; hr class = "dropdown-divider" / & gt;
=======
                    & lt; a
                      class = "nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
                      href = "#"
                      id = "navbarDropdown"
                      role = "nút"
                      data-mdb-toggle = "thả xuống"
                      aria-expand = "false"
                    & gt;
                      & lt; i class = "flag-united-Kingdom flag m-0" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdown" & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#"
                          & gt; & lt; i class = "flag-United-Kingdom flag" & gt; & lt; / i & gt; Tiếng Anh
                          & lt; i class = "fa fa-check text-success ms-2" & gt; & lt; / i
                        & gt; & lt; / a & gt;
& gt; & gt; & gt; & gt; & gt; & gt; & gt; 3b97d278bdf4e983a24310547faa334680f356f5
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-poland flag" & gt; & lt; / i & gt; Polski & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-china flag" & gt; & lt; / i & gt; 中文 & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-japan flag" & gt; & lt; / i & gt; 日本語 & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-germany flag" & gt; & lt; / i & gt; Deutsch & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-france flag" & gt; & lt; / i & gt; Français & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-spain flag" & gt; & lt; / i & gt; Español & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-nga flag" & gt; & lt; / i & gt; Русский & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-portugal flag" & gt; & lt; / i & gt; Português & lt; / a & gt;
                      & lt; / li & gt;
                    & lt; / ul & gt;
                  & lt; / li & gt;

                  & lt;! - Hình đại diện - & gt;
                  & lt; li class = "nav-item thả xuống" & gt;
                    & lt; a class = "nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href = "#"
                      id = "navbarDropdownMenuLink" role = "button" data-mdb-toggle = "dropdown" aria-expand = "false" & gt;
                      & lt; img src = "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31) .webp" class = "làm tròn-vòng tròn"
                        height = "22" alt = "Hình đại diện" loading = "lazy" / & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdownMenuLink" & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Hồ sơ của tôi & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Cài đặt & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Đăng xuất & lt; / a & gt;
                      & lt; / li & gt;
                    & lt; / ul & gt;
                  & lt; / li & gt;
                & lt; / ul & gt;
              & lt; / div & gt;
              & lt;! - Trình bao bọc vùng chứa - & gt;
            & lt; / nav & gt;
            & lt;! - Thanh điều hướng - & gt;
          & lt; / tiêu đề & gt;
          & lt;! - Điều hướng Chính - & gt;

          & lt;! - Bố cục chính - & gt;
          & lt; main style = "margin-top: 58px;" & gt;
            & lt; div class = "container pt-4" & gt; & lt; / div & gt;
          & lt; / main & gt;
          & lt;! - Bố cục chính - & gt;
          
        
    
        
            
          thân hình {
          màu nền: #fbfbfb;
          }
          @media (chiều rộng tối thiểu: 991,98px) {
          chính {
          padding-left: 240px;
          }
          }

          / * Thanh bên * /
          .sidebar {
          vị trí: cố định;
          đầu: 0;
          đáy: 0;
          trái: 0;
          đệm: 58px 0 0; / * Chiều cao của thanh điều hướng * /
          box-shadow: 0 2px 5px 0 rgb (0 0 0/5%), 0 2px 10px 0 rgb (0 0 0/5%);
          chiều rộng: 240px;
          chỉ số z: 600;
          }

          @media (max-width: 991,98px) {
          .sidebar {
          chiều rộng: 100%;
          }
          }
          .sidebar .active {
          bán kính đường viền: 5px;
          box-shadow: 0 2px 5px 0 rgb (0 0 0/16%), 0 2px 10px 0 rgb (0 0 0/12%);
          }

          .sidebar-dính {
          chức vụ: thân nhân;
          đầu: 0;
          chiều cao: calc (100vh - 48px);
          padding-top: 0,5rem;
          tràn-x: ẩn;
          tràn-y: auto; / * Nội dung có thể cuộn được nếu khung nhìn ngắn hơn nội dung. * /
          }
          
        
    

Thu gọn

Bằng cách sử dụng
thành phần thu gọn
bạn có thể tạo menu thả xuống trong Side Navbar.

Bản trình diễn trực tiếp


Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt;! - Điều hướng Chính - & gt;
          & lt; tiêu đề & gt;
            & lt;! - Thanh bên - & gt;
            & lt; nav id = "sidebarMenu" class = "sập d-lg-block sidebar thu gọn bg-white" & gt;
              & lt; div class = "position-stick" & gt;
                & lt; div class = "list-group list-group-flush mx-3 mt-4" & gt;
                  & lt;! - Thu gọn 1 - & gt;
                  & lt; a class = "list-group-item list-group-item-action py-2 ripple" aria-current = "true"
                    data-mdb-toggle = "sập" href = "# sậpExample1" aria-expand = "true"
                    aria-control = "sậpExample1" & gt;
                    & lt; i class = "fas fa-tachometer-alt fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Menu mở rộng & lt; / span & gt;
                  & lt; / a & gt;
                  & lt;! - Nội dung được thu gọn - & gt;
                  & lt; ul id = "fallExample1" class = "sập hiển thị list-group list-group-flush" & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                  & lt; / ul & gt;
                  & lt;! - Thu gọn 1 - & gt;

                  & lt;! - Thu gọn 2 - & gt;
                  & lt; a class = "list-group-item list-group-item-action py-2 ripple" aria-current = "true"
                    data-mdb-toggle = "sập" href = "# sậpExample2" aria-expand = "true"
                    aria-control = "sậpExample2" & gt;
                    & lt; i class = "fas fa-chart-area fa-fw me-3" & gt; & lt; / i & gt; & lt; span & gt; Menu đã thu gọn & lt; / span & gt;
                  & lt; / a & gt;
                  & lt;! - Nội dung được thu gọn - & gt;
                  & lt; ul id = "sậpExample2" class = "thu gọn danh sách-nhóm danh sách-nhóm-flush" & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li class = "list-group-item py-1" & gt;
                      & lt; a href = "" class = "text-reset" & gt; Liên kết & lt; / a & gt;
                    & lt; / li & gt;
                  & lt; / ul & gt;
                  & lt;! - Thu gọn 2 - & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / nav & gt;
            & lt;! - Thanh bên - & gt;

            & lt;! - Thanh điều hướng - & gt;
            & lt; nav id = "main-navbar" class = "navbar navbar-expand-lg navbar-light bg-white fixed-top" & gt;
              & lt;! - Trình bao bọc vùng chứa - & gt;
              & lt; div class = "container-chất lỏng" & gt;
                & lt;! - Nút chuyển đổi - & gt;
                & lt; button class = "navbar-toggler" type = "button" data-mdb-toggle = "sập" data-mdb-target = "# sidebarMenu"
                  aria-control = "sidebarMenu" aria-expand = "false" aria-label = "Chuyển đổi điều hướng" & gt;
                  & lt; i class = "fas fa-bar" & gt; & lt; / i & gt;
                & lt; / nút & gt;

                & lt;! - Thương hiệu - & gt;
                & lt; a class = "navbar-brand" href = "#" & gt;
                  & lt; img src = "https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height = "25" alt = "Biểu trưng MDB"
                    loading = "lazy" / & gt;
                & lt; / a & gt;
                & lt;! - Biểu mẫu tìm kiếm - & gt;
                & lt; form class = "d-none d-md-flex input-group w-auto my-auto" & gt;
                  & lt; input autocomplete = "off" type = "search" class = "form-control round"
                    placeholder = 'Tìm kiếm (ctrl + "/" to focus)' style = "min-width: 225px;" / & gt;
                  & lt; span class = "input-group-text border-0" & gt; & lt; i class = "fas fa-search" & gt; & lt; / i & gt; & lt; / span & gt;
                & lt; / form & gt;

                & lt;! - Liên kết bên phải - & gt;
                & lt; ul class = "navbar-nav ms-auto d-flex flex-row" & gt;
                  & lt;! - Thông báo thả xuống - & gt;
                  & lt; li class = "nav-item thả xuống" & gt;
                    & lt; a class = "nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href = "#" id = "navbarDropdownMenuLink"
                      role = "button" data-mdb-toggle = "dropdown" aria-expand = "false" & gt;
                      & lt; i class = "fas fa-bell" & gt; & lt; / i & gt;
                      & lt; span class = "huy hiệu làm tròn-huy hiệu thuốc viên-thông báo bg-nguy hiểm "& gt; 1 & lt; / span & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdownMenuLink" & gt;
                      & lt; li & gt; & lt; a class = "dropdown-item" href = "#" & gt; Một số tin tức & lt; / a & gt; & lt; / li & gt;
                      & lt; li & gt; & lt; a class = "dropdown-item" href = "#" & gt; Một tin tức khác & lt; / a & gt; & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; Cái gì đó khác ở đây & lt; / a & gt;
                      & lt; / li & gt;
                    & lt; / ul & gt;
                  & lt; / li & gt;

                  & lt;! - Biểu tượng - & gt;
                  & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link me-3 me-lg-0" href = "#" & gt;
                      & lt; i class = "fas fa-fill-drip" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                  & lt; / li & gt;
                  & lt;! - Biểu tượng - & gt;
                  & lt; li class = "nav-item me-3 me-lg-0" & gt;
                    & lt; a class = "nav-link" href = "#" & gt;
                      & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                  & lt; / li & gt;

                  & lt;! - Biểu tượng thả xuống - & gt;
                  & lt; li class = "nav-item thả xuống" & gt;
& lt; & lt; & lt; & lt; & lt; & lt; & lt; CÁI ĐẦU
                    & lt; a class = "nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href = "#" id = "navbarDropdown"
                      role = "button" data-mdb-toggle = "dropdown" aria-expand = "false" & gt;
                      & lt; i class = "cờ vương quốc thống nhất m-0" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdown" & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "United Kingdom flag" & gt; & lt; / i & gt; English
                          & lt; i class = "fa fa-check text-success ms-2" & gt; & lt; / i & gt; & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; hr class = "dropdown-divider" / & gt;
=======
                    & lt; a
                      class = "nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
                      href = "#"
                      id = "navbarDropdown"
                      role = "nút"
                      data-mdb-toggle = "thả xuống"
                      aria-expand = "false"
                    & gt;
                      & lt; i class = "flag-united-Kingdom flag m-0" & gt; & lt; / i & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdown" & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#"
                          & gt; & lt; i class = "flag-United-Kingdom flag" & gt; & lt; / i & gt; Tiếng Anh
                          & lt; i class = "fa fa-check text-success ms-2" & gt; & lt; / i
                        & gt; & lt; / a & gt;
& gt; & gt; & gt; & gt; & gt; & gt; & gt; 3b97d278bdf4e983a24310547faa334680f356f5
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-poland flag" & gt; & lt; / i & gt; Polski & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-china flag" & gt; & lt; / i & gt; 中文 & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-japan flag" & gt; & lt; / i & gt; 日本語 & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-germany flag" & gt; & lt; / i & gt; Deutsch & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-france flag" & gt; & lt; / i & gt; Français & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-spain flag" & gt; & lt; / i & gt; Español & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-nga flag" & gt; & lt; / i & gt; Русский & lt; / a & gt;
                      & lt; / li & gt;
                      & lt; li & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; & lt; i class = "flag-portugal flag" & gt; & lt; / i & gt; Português & lt; / a & gt;
                      & lt; / li & gt;
                    & lt; / ul & gt;
                  & lt; / li & gt;

                  & lt;! - Hình đại diện - & gt;
                  & lt; li class = "nav-item thả xuống" & gt;
                    & lt; a class = "nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href = "#"
                      id = "navbarDropdownMenuLink" role = "button" data-mdb-toggle = "dropdown" aria-expand = "false" & gt;& lt; img src = "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31) .webp" class = "round-circle"
                        height = "22" alt = "Hình đại diện" loading = "lazy" / & gt;
                    & lt; / a & gt;
                    & lt; ul class = "dropdown-menu dropdown-menu-end" aria-labellingby = "navbarDropdownMenuLink" & gt;
                      & lt; li & gt; & lt; a class = "dropdown-item" href = "#" & gt; Hồ sơ của tôi & lt; / a & gt; & lt; / li & gt;
                      & lt; li & gt; & lt; a class = "dropdown-item" href = "#" & gt; Cài đặt & lt; / a & gt; & lt; / li & gt;
                      & lt; li & gt; & lt; a class = "dropdown-item" href = "#" & gt; Đăng xuất & lt; / a & gt; & lt; / li & gt;
                    & lt; / ul & gt;
                  & lt; / li & gt;
                & lt; / ul & gt;
              & lt; / div & gt;
              & lt;! - Trình bao bọc vùng chứa - & gt;
            & lt; / nav & gt;
            & lt;! - Thanh điều hướng - & gt;
          & lt; / tiêu đề & gt;
          & lt;! - Điều hướng Chính - & gt;

          & lt;! - Bố cục chính - & gt;
          & lt; main style = "margin-top: 58px;" & gt;
            & lt; div class = "container pt-4" & gt; & lt; / div & gt;
          & lt; / main & gt;
          & lt;! - Bố cục chính - & gt;
          
        
    
        
            
          thân hình {
          màu nền: #fbfbfb;
          }
          @media (chiều rộng tối thiểu: 991,98px) {
          chính {
          padding-left: 240px;
          }
          }

          / * Thanh bên * /
          .sidebar {
          vị trí: cố định;
          đầu: 0;
          đáy: 0;
          trái: 0;
          đệm: 58px 0 0; / * Chiều cao của thanh điều hướng * /
          box-shadow: 0 2px 5px 0 rgb (0 0 0/5%), 0 2px 10px 0 rgb (0 0 0/5%);
          chiều rộng: 240px;
          chỉ số z: 600;
          }

          @media (max-width: 991,98px) {
          .sidebar {
          chiều rộng: 100%;
          }
          }
          .sidebar .active {
          bán kính đường viền: 5px;
          box-shadow: 0 2px 5px 0 rgb (0 0 0/16%), 0 2px 10px 0 rgb (0 0 0/12%);
          }

          .sidebar-dính {
          chức vụ: thân nhân;
          đầu: 0;
          chiều cao: calc (100vh - 48px);
          padding-top: 0,5rem;
          tràn-x: ẩn;
          tràn-y: auto; / * Nội dung có thể cuộn được nếu khung nhìn ngắn hơn nội dung. * /
          }
          
        
    

Tài nguyên liên quan


Thanh bên


Ngăn kéo


Offcanvas


Sidenav


Thu gọn


Tìm kiếm


Biểu tượng / a & gt;


Hướng dẫn về Bootstrap Sidenav

Ngoài ra, nếu bạn muốn hỗ trợ bạn bè của chúng tôi từ Tailwind Elements, bạn cũng có thể xem
Sidenav
tài liệu.


Xem thêm những thông tin liên quan đến chủ đề cố định bên navbar bootstrap

Navbar Bootstrap 5 | Bootstrap Navbar Tutorial

  • Tác giả: Adrian Twarog
  • Ngày đăng: 2021-04-03
  • Đánh giá: 4 ⭐ ( 1396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Navbar Bootstrap 5 | Bootstrap Navbar Tutorial

    This tutorial navbar bootstrap 5 will cover how to make a navbar from scratch using the latest bootstrap 2021. This includes getting navbar logo and buttons up and running, ensure the navbar responsive design is working properly and different viewports and the responsive navbar also has things like a navbar dropdown with dropdown menu items and a navbar button.

    This is essentially a bootstrap menu that you can use on the header of pages. the dropdown menu navigation is core to all websites and worth learning!

    navbar bootstrap tutorial

    Learn Design for Developers!
    A book I’ve created to help you improve the look of your apps and websites.
    📘 Enhance UI: https://www.enhanceui.com/

    Feel free to follow me on:
    🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog
    💬 Discord: https://discord.gg/wyDVPDY
    💸 Patreon: https://www.patreon.com/adriantwarog

Cố định Navbar trên buttom

  • Tác giả: hiepsiit.com
  • Đánh giá: 3 ⭐ ( 2399 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap 3 Flush footer xuống dưới cùng. không cố định

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 9439 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Xem ví dụ dưới đây. Điều này sẽ định vị Footer của bạn ở dưới cùng…

Hướng dẫn và ví dụ Bootstrap NavBar

  • Tác giả: openplanning.net
  • Đánh giá: 3 ⭐ ( 7009 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách tạo thanh điều hướng trong Bootstrap

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 5057 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tao thanh dieu huong trong bootstrap, Cách tạo thanh điều hướng trong Bootstrap

Navigation bar (Thanh điều hướng) trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 4 ⭐ ( 2188 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta cùng bắt đầu bài học để xem cách dùng thanh điều hướng (Navigation bar) trong Bootstrap 4 có ưu điểm gì hơn danh sách điều hướng nhé các bạn!

Bootstrap Navbar

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 4209 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo menu điều hướng tĩnh hoặc cố định bằng cách sử dụng thành phần thanh điều hướng Bootstrap Navbar.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  - HTML: Ngôn ngữ đánh dấu siêu văn bản - id email trong html

By ads_php