In this example, this article shares the specific codes of the Bootstrap navigation bar and login box for your reference. Please understand if there are any shortcomings and learn and make progress together.
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> </head> <body> <nav role="navigation"> <div> <div> <button data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> <a href="#"> <img src="img/mylogo.png" style="height: 50px;margin-top: -15px;"/> </a> </div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Product</a></li> <li> <a href="#">Data-toggle="dropdown">Services<span></span></a> <ul> <li><a href="#">Customer Service Online</a></li> <li></li> <li><a href="#">FAQ</a></li> <li></li> <li><a href="#">Address Phone</a></li> </li> </li> </li> <li><a href="#">Mall</a></li> </ul> <div> <a href="#">Login</a> <a href="#">Register</a> <input type="text" placeholder="Please enter keywords"/> <button>Search</button> </div> </div> </nav> <div style="height: 50px;"></div> <div> <h1><span></span>User Login</h1> <form> <div> <div> <input type="text" placeholder="username/email"/> </div> </div> <div> <input type="password" placeholder="password"/> </div> </div> <div> <div> <button>Login</button> </div> </form> </div> <div> <div> <div> <button>Login</button> </div> </form> </div> <div> <div style="height: 1500px;"></div> </body></html>
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, and I hope it will be helpful for everyone to learn JavaScript programming.