不多说,直接上代码。
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<span class="logo"></span>
</a>
<a href="#menu" class="navbar-toggle" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div id="menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">简体中文</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group has-feedback">
<label class="sr-only" for="kw">搜索关键字:</label>
<input id="kw" class="form-control" placeholder="请输入搜索关键字">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>
以上就是一个基于Bootstrap框架最简单的导航条
浅谈Bootstrap——导航条起步的更多相关文章
-
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
-
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
-
Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
-
Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
-
bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
-
Bootstrap——导航条(navbar)
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...
-
bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
-
bootstrap导航条等样例持续更新》。。
1.导航条 <!-- 导航条 --> <nav class="navbar navbar-static-top navbar-inverse"> <d ...
-
bootstrap导航条相关知识
在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...
随机推荐
-
C++ std::map::erase用法及其陷阱
1.引入: STL的map中有一个erase方法用来从一个map中删除制定的节点 eg: map<string,string> mapTest; typedef map<string ...
-
POJ 2796 Feel Good(单调栈)
传送门 Description Bill is developing a new mathematical theory for human emotions. His recent investig ...
-
Python函数系列之eval()
1.作用:将字符串str当成有效的表达式来求值并返回计算结果. 2.语法:eval(source[, globals[, locals]]) 3.说明:参数:source:一个Python表达式或函 ...
-
初见 fultter for MAC
第一步:下载flutter https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos 第二步:(development ...
-
Python字典中的值为列表或字典的构造方法
转自: https://blog.csdn.net/buside/article/details/81323871 1.值为列表的构造方法 dic = {} dic.setdefault(key,[] ...
-
从一道面试题来认识java类加载时机与过程【转】
说明:本文的内容是看了<深入理解Java虚拟机:JVM高级特性与最佳实践>后为加印象和理解,便记录了重要的内容. 1 开门见山 以前曾经看到过一个java的面试题,当时觉得此题很简单,可 ...
-
T-SQL判断是否存在表、临时表
利用SQL SERVER的系统函数 object_id() 可以判断是否存在表.临时表, object_id() 的作用是返回架构范围内对象的数据库对象标识.(即返回系统视图 sys.objects ...
-
cordova打包APK,SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode ...
javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错: let hello = 'hello worl ...
-
Web后台模拟前端post(带NTLM验证)
using System.Data; using System.Net; using System.IO; using System.Net.Http; using System.Web; using ...
-
建立Spring项目的基础
1.新建web项目 2.在lib下添加这五个包 3.新建applicationContext.xml(一定在src目录下)