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,initial-scale= 1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <SCRIPT_PLACEHOLDER_8/> <SCRIPT_PLACEHOLDER_9/> <STYLE_PLACEHOLDER_2/> </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 để xem thanh điều hướng hoạt động như thế nào 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 đến số 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>