BootStrap2学习日记14----导航
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Logo</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">标题1</a></li>
<li><a href="#">标题2</a></li>
<li><a href="#">标题3</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li class="divider"></li><!--分割线-->
<li class="nav-header">选项4</li>
<li><a href="#">选项5</a></li>
<li><a href="#">选项6</a></li>
</ul>
</li>
</ul><!--结束nav-->
<!--搜索-->
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="搜索">
</form>
<!--靠右浮动的nav-->
<ul class="nav pull-right">
<li><a href="#">标题1</a></li>
<li class="divider-vertical"></li><!--分割线-->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">选项</a></li>
<li><a href="#">选项</a></li>
<li><a href="#">选项</a></li>
<li class="divider"></li>
<li><a href="#">选项</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
上述代码的效果如下:
去掉<div class="navbar navbar-inverse navbar-fixed-top">中的“ navbar-fixed-top”效果如下:
若要将导航变成响应式的导航直接在代码
<div class="container">与<a class="brand" href="#">Logo</a>之间 下面加上如下代码
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
效果如图:
BootStrap2学习日记14----导航的更多相关文章
- BootStrap2学习日记17---导航路径和分页
导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...
- BootStrap2学习日记15----选项卡
导航格式1: <ul class="nav nav-tabs"> <li class="active"><a href=" ...
- BootStrap2学习日记3--响应式布局实用类
BootStrap2中常用的响应式布局类如: visible-phone 仅在 手机平台显示 visible-tablet 仅在 平板电脑显示 visible-desktop 仅 ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- BootStrap2学习日记23---图片轮播
<div id="carousel1" class="carousel slide"> <div class="carousel-i ...
- BootStrap2学习日记22---点击展开
先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...
- BootStrap2学习日记21---消息提示
<p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...
- BootStrap2学习日记20---定制缩略图
先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...
- BootStrap2学习日记19---缩略图
缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...
随机推荐
- [翻译]创建ASP.NET WebApi RESTful 服务(8)
本章讨论创建安全的WebApi服务,到目前为止,我们实现的API都是基于未加密的HTTP协议,大家都知道在Web中传递身份信息必须通过HTTPS,接下来我们来实现这一过程. 使用HTTPS 其实可以通 ...
- C# 获取某月的第一天和最后一天
/// <summary> /// 取得某月的第一天 /// </summary> /// <param name=" ...
- 存量数据处理结果查询.txt
请求报文:<?xml version="1.0" encoding="UTF-8"?><PDL><PDL-Head>< ...
- B. Rebranding
http://codeforces.com/problemset/problem/591/B B. Rebranding time limit per test 2 seconds memory ...
- CodeForces 7C Line
ax+by+c=0可以转化为ax+by=-c: 可以用扩展欧几里德算法来求ax1+by1=gcd(a,b)来求出x1,y1 此时gcd(a,b)不一定等于-c,假设-c=gcd(a,b)*z,可得z= ...
- LightOJ 1112 Curious Robin Hood (单点更新+区间求和)
http://lightoj.com/volume_showproblem.php?problem=1112 题目大意: 1 i 将第i个数值输出,并将第i个值清0 2 i v ...
- P67、H67、H61、P55、H57、H55 区别
Intel平台上我们现在已经有了LGA775.LGA1366.LGA1156三种封装接口,SNB还会带来两种,包括今天要看到的LGA1155(取代LGA1156),以及明年下半年的高端LGA2011, ...
- 查询processlist具体信息
SELECT * FROM information_schema.PROCESSLIST WHERE HOST LIKE '%172.16.10.22%' AND COMMAND <> ' ...
- 进入GRUB改root用户密码
开机读取倒计时时按任意键----e---->选择第二行 kernel ---->按e, 再按空格 >输入1----回车--->选择kernel输入b----> passw ...
- 巧解Tomcat中JVM内存溢出问题
你对Tomcat 的JVM内存溢出问题的解决方法是否了解,这里和大家分享一下,相信本文介绍一定会让你有所收获. tomcat 的JVM内存溢出问题的解决 最近在熟悉一个开发了有几年的项目,需要把数据库 ...