首页 > 代码库 > bootstrap
bootstrap
1、导航
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.mamicode.com/#">Project name</a> </div> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </div>
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.mamicode.com/#">W3Cschool</a> </div> <div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div></nav>
3、默认的导航栏
- 向 <nav> 标签添加 class .navbar、.navbar-default。
- 向上面的元素添加 role="navigation",有助于增加可访问性。
- 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
- 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.mamicode.com/#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="http://www.mamicode.com/#">iOS</a></li> <li><a href="http://www.mamicode.com/#">SVN</a></li> <li class="dropdown"> <a href="http://www.mamicode.com/#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="http://www.mamicode.com/#">jmeter</a></li> <li><a href="http://www.mamicode.com/#">EJB</a></li> <li><a href="http://www.mamicode.com/#">Jasper Report</a></li> <li class="divider"></li> <li><a href="http://www.mamicode.com/#">分离的链接</a></li> <li class="divider"></li> <li><a href="http://www.mamicode.com/#">另一个分离的链接</a></li> </ul> </li> </ul> </div></nav>
bootstrap
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。