浅谈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 ...
随机推荐
- WINFORM 打开PDF
这里使用 Adobe Read 组件 的方式 首先电脑上需要安装AdobeRead VS中添加COM引用 再在工具选项卡中添加Adobe PDF Read 组件即可 从工具箱中直接拖动组件到窗体中即可
- Kingdom of Obsession---hdu5943(二分匹配)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5943 题意:给你两个数n, s 然后让你判断是否存在(s+1, s+2, s+3, ... , s+n ...
- syslog-ng日志系统
一.基础syslog-ng作为syslog的替代工具,可以完全替代syslog的服务,并且通过定义规则,实现更好的过滤功能.系统自带版本(我的是红旗,不同系统用不同的方式查询): 引用 # rpm - ...
- Android studio VT-x is disabled
执行app run的时候,android studio提示了这个问题,导致虚拟机没法用,这是因为电脑的Virtualization(虚拟化)没有打开导致的.但是有的电脑并没有这个功能,所以先下载个se ...
- JAVA线程池原理详解二
Executor框架的两级调度模型 在HotSpot VM的模型中,JAVA线程被一对一映射为本地操作系统线程.JAVA线程启动时会创建一个本地操作系统线程,当JAVA线程终止时,对应的操作系统线程也 ...
- Mysql----------的一些常用命令
1.查询一张表中某个字段重复值的记录 select id,cert_number from (select id,cert_number,count(*)as n from 表明 group by c ...
- 原生的on事件代理
<script> // jQuery $('.el').on('event', function() { }); // 原生方法 [].forEach.call(document.quer ...
- 使用 Redis 实现排行榜功能 (转载 https://segmentfault.com/a/1190000002694239)
排行榜功能是一个很普遍的需求.使用 Redis 中有序集合的特性来实现排行榜是又好又快的选择. 一般排行榜都是有实效性的,比如"用户积分榜".如果没有实效性一直按照总榜来排,可能榜 ...
- Linux入门:运行级别解析
Linux入门:运行级别解析 一.查看当前运行级别 Ubuntu中,runlevel命令 可以查看当前运行级别: CentOS中,who -r 命令查看当前运行级别: www.2cto.com ...
- paper 100:何恺明经典去雾算法
一:由简至美的最佳论文(作者:何恺明 视觉计算组) [视觉机器人:个人感觉学习他的经典算法固然很重要,但是他的解决问题的思路也是非常值得我们学习的] 那是2009年4月24日的早上,我收到了一封不同 ...