浅谈Bootstrap——导航条起步
不多说,直接上代码。
<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 ...
随机推荐
- Bomb---hdu5934(连通图 缩点)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5934 题意:有n个炸弹,每个炸弹放在(x, y)这个位置,它能炸的范围是以 r 为半径的圆,手动引爆这 ...
- .dmp文件导入个别表
imp bizinfo_qy/bizinfo_qy@orcl161 file=D:\收付费核算系统\分线\bizinfo_qy.dmp log=bizinfo_qy.log TABLES=(al_i ...
- 画廊插件baguetteBox
HTML <link rel="stylesheet" href="css/baguetteBox.css"> <div class='bag ...
- Advanced REST client
好用的测试工具,老是忘记名字chrome插件 Advanced REST client
- Inside Flask - 配置的实现
Inside Flask - 配置的实现 flask 的配置对象 app.config 本身使用很简单,无非就是以字典的形式使用,而它的实现,本身就是以字典的形式的. 在 flask/config.p ...
- CoreAnimation--CALayer的动画
CoreAnimation--CALayer的动画 核心动画中所有类都遵守CAMediaTiming CAAnaimation和CAPropertyAnimation都是抽象类,本身不具备动画效果,必 ...
- Python2.7的安装
>登录python官网下载python2.7的相关版本 python官网链接 >根据平台选择相应的版本 >下载完毕后点击安装即可 >配置环境变量 >安装成功
- 循环调用MAIN
--单位转移录入declare oi_errcode integer; oc_errtext varchar2(100);begin for p in (select * from ssunitinf ...
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- sql server 中删除表中数据truncate和delete的区别(转载自.net学习网)
我们都知道truncate table可以用来删除整个表的内容,它与delete后面不跟where条件的效果是一样.但除此之外,我们还清楚它们之间有其它的区别吗?本章我们将一起讨论truncate与d ...