Bootstrap响应式导航
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap响应式导航的更多相关文章
- bootstrap 响应式导航条模板(含下拉菜单,弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap之响应式导航栏
代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
- bootstrap固定响应式导航
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...
- Bootstrap学习笔记(8)--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
- 第二百五十节,Bootstrap项目实战--响应式导航
Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一.响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...
- Bootstrap历练实例:响应式导航(带有表单)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例:响应式导航
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...
- Bootstrap历练实例:响应式导航栏
响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...
随机推荐
- bzoj1218 激光炸弹
bz上难得一见的水题啊. 我们发现:这个SB居然只要枚举就行了!!! 我TM...... /****************************************************** ...
- JavaScript深入之变量对象
前言 在上篇<javascript深入之执行上下文栈>中讲到,当javascript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution ...
- 常用工具类(System,Runtime,Date,Calendar,Math)
一.System: 一个java.lang包中的静态工具类. 三大字段: static PrintStream err “标准”错误输出流. static InputStream in “标准”输入流 ...
- RabbitMQ 消费者的消息确认机制
消息确认的几点说明: 1. Basic.Ack 发回给 RabbitMQ 以告知,可以将相应 message 从 RabbitMQ 的消息缓存中移除.2. Basic.Ack 未被 consumer ...
- Luogu P1251 餐巾计划问题
题目链接 \(Click\) \(Here\) 看到其他人都是用费用流写的,我只能表示:动什么脑子?暴力就完事了! 嗯,这个题应该是一个相当显然的上下界最小费用可行流模型,所以跑就完事了. \(s - ...
- (JAVA对进制的运算)A + B Again hdu2057 要复习
(置顶,复习)A + B Again 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2057 Time Limit: 1000/1000 MS (Java/ ...
- node(基础)_node.js中的http服务以及模板引擎的渲染
一.前言 本节的内容主要涉及: 1.node.js中http服务 2.node.js中fs服务 3.node.js中模板引擎的渲染 4.利用上面几点模拟apache服务器 二.知识 1.node.js ...
- 使用docker-compose部署nginx
1.新建docker-compose.yml文件,文件的基本模板如下:(由于yml格式比较严格,注意空格缩进) version: '2.0' services: nginx: restart: a ...
- 编写Excel文件的Golang库
github:https://github.com/360EntSecGroup-Skylar/excelize 使用用例 https://dev.to/xuri/go-library-for-rea ...
- 解决phpmyadmin 遇见的问题
1.phpmyadmin4.8.3 上传到网站目录后提示解决phpmyadmin mysqli_real_connect(): (HY000/2002): No such file or direct ...