最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Bootstrap导航条学习使用(二)
时间:2017-03-23 编辑:简简单单 来源:一聚教程网
navbar-header:导航的头部,一般情况下用来放置logo
navbar-brand :用来放置logo,需要配合navbar-header使用
具体代码:
代码如下 | 复制代码 |
< html > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >Bootstrap title > < link rel = "stylesheet" href = "css/bootstrap.css" rel = "external nofollow" />
head > < body >
< nav class = "navbar navbar-default" > < div class = "container" >
< div class = "navbar-header" > < a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" class = "navbar-brand" >logo a >
div > < ul class = "nav navbar-nav" > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >苹果 a > li > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >香蕉 a > li > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >橘子 a > li >
ul > < a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" class = "navbar-link navbar-text" >链接 a >
< p class = "navbar-text" >这里是一段文字 p >
< ul class = "nav navbar-nav navbar-right" >
< li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >登录 a > li > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >注册 a > li >
ul >
div >
nav >
< nav class = "navbar navbar-default" > < div class = "container" > < div class = "navbar-header" > < a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" class = "navbar-brand" >logo a >
div > < ul class = "nav navbar-nav" > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >苹果 a > li > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >香蕉 a > li > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >橘子 a > li >
ul > < button class = "btn btn-default navbar-btn navbar-left" >搜索 button > < form action = "URL" class = "navbar-form navbar-left" >
< input type = "text" class = "form-control" /> < button class = "btn btn-default" >搜索 button >
form > < ul class = "nav navbar-nav navbar-right" > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >登录 a > li > < li >< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >注册 a > li >
ul >
div >
nav > < script src = "js/jquery-2.1.0.js" > script > < script src = "js/bootstrap.js" > script >
body >
html > |
效果图:
-
上一个: jquery对象与DOM对象转化
-
下一个: Bootstrap缩略图与警告框学习使用
相关文章
- 基于bootstrap实现收缩导航条 07-04
- Bootstrap导航条学习使用(一) 03-23
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31