Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <title>Ví dụ về Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,init-scale= 1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis .com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min .js"></script> <style> body { vị trí: tương đối; } .affix { top:0; chiều rộng: 100%; chỉ số z: 9999 !quan trọng; } .navbar { lề-dưới: 0px; } .affix ~ .container-fluid { vị trí: tương đối; trên cùng: 50px; } #section1 {padding-top:50px;height:500px;color: #fff; màu nền: #1E88E5;} #section2 {padding-top:50px;height:500px;color: #fff; màu nền: #673ab7;} #section3 {padding-top:50px;height:500px;color: #fff; màu nền: #ff9800;} #section41 {padding-top:50px;height:500px;color: #fff; màu nền: #00bcd4;} #section42 {padding-top:50px;height:500px;color: #fff; màu nền: #009688;} </style> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Ví dụ về Scrollspy & Affix</h1> <h3>Đã sửa lỗi thanh điều hướng khi cuộn</h3> <p>Cuộn trang này tới xem cách thanh điều hướng hoạt động với data-spy="affix" và data-spy="scrollspy".</p> <p>Thanh điều hướng được gắn vào đầu trang sau khi bạn đã cuộn một lượng pixel được chỉ định và các liên kết trong thanh điều hướng được cập nhật tự động dựa trên vị trí cuộn.</p> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar -brand" href="#">WebSiteName</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li ><a href="#section1">Phần 1</a></li> <li><a href="#section2">Phần 2</a></li> <li><a href=" #section3">Phần 3</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Phần 4 <span class= "caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Phần 4-1</a></li> <li>< a href="#section42">Phần 4-2</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="section1" class="container-fluid"> <h1>Phần 1</h1> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> </div> <div id="section2" class="container-fluid"> <h1>Phần 2</h1> <p>Hãy thử để cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> </div> <div id="section3" class="container-fluid"> <h1>Phần 3</h1> <p>Hãy thử để cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> </div> <div id="section41" class="container-fluid"> <h1>Phần 4 Menu con 1</h1> <p >Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> </div> <div id="section42" class="container-fluid"> <h1>Phần 4 Menu con 2</h1> <p >Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> <p>Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn! Hãy thử cuộn phần này và nhìn vào thanh điều hướng trong khi cuộn!</p> </div> </body> </html>