Bootstrap编写导航栏和登陆框
本文实例为大家分享了Bootstrap导航栏和登陆框的具体代码，供大家参考，有不足的地方请大家谅解，大家共同学习进步。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <linkrel="stylesheet"href="css/bootstrap.min.css"/> <scripttype="text/javascript"src="js/jquery.min.js"></script> <scripttype="text/javascript"src="js/bootstrap.min.js"></script> </head> <body> <navclass="navnavbar-defaultnavbar-fixed-top"role="navigation"> <divclass="container-fluid"> <divclass="navbar-header"> <buttonclass="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <ahref="#"class="navbar-brand"> <imgsrc="img/mylogo.png"style="height:50px;margin-top:-15px;"/> </a> </div> <divclass="collapsenavbar-collapse"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="#">首页</a></li> <li><ahref="#">新闻</a></li> <li><ahref="#">产品</a></li> <liclass="dropdown"> <ahref="#"class="dropdown-toggle"data-toggle="dropdown">服务<spanclass="caret"></span></a> <ulclass="dropdown-menu"> <li><ahref="#">客服在线</a></li> <liclass="divider"></li> <li><ahref="#">常见问答</a></li> <liclass="divider"></li> <li><ahref="#">地址电话</a></li> </ul> </li> <li><ahref="#">商城</a></li> </ul> <divclass="navbar-formnavbar-right"> <ahref="#"class="navbar-link">登陆</a> <ahref="#"class="navbar-link">注册</a> <inputtype="text"class="form-control"placeholder="请输入关键字"/> <buttonclass="btnbtn-primary">搜索</button> </div> </div> </div> </nav> <divstyle="height:50px;"></div> <divclass="container"> <h1class="page-header"><spanclass="glyphiconglyphicon-user"></span>用户登录</h1> <formclass="form-horizontal"> <divclass="form-group"> <divclass="col-md-5"> <inputtype="text"class="form-control"placeholder="用户名/email"/> </div> </div> <divclass="form-group"> <divclass="col-md-5"> <inputtype="password"class="form-control"placeholder="密码"/> </div> </div> <divclass="form-group"> <divclass="col-md-5"> <buttonclass="btnbtn-primary">登陆</button> </div> </div> </form> </div> <divstyle="height:1500px;"></div> </body> </html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。