1.导航条

 <!-- 导航条 -->
<nav class="navbar navbar-static-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<span class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

图:

2.友情链接:

 <div class="container-fluid">
<div class="container">
<div class="row links-list">
<div class="col-lg-3">
<dt>公司</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">公司招聘</a></dd>
<dd><a href="#">公司团队</a></dd>
<dd><a href="#">版权</a></dd>
<dd><a href="#">使用条款</a></dd>
<dd><a href="#">隐私政策</a></dd>
<dd><a href="#">联系我们</a></dd>
</div>
<div class="col-lg-3">
<dt>支持</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">公司招聘</a></dd>
<dd><a href="#">公司团队</a></dd>
<dd><a href="#">版权</a></dd>
<dd><a href="#">使用条款</a></dd>
<dd><a href="#">隐私政策</a></dd>
<dd><a href="#">联系我们</a></dd>
</div>
<div class="col-lg-3">
<dt>开发者</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">公司招聘</a></dd>
<dd><a href="#">公司团队</a></dd>
<dd><a href="#">版权</a></dd>
<dd><a href="#">使用条款</a></dd>
<dd><a href="#">隐私政策</a></dd>
<dd><a href="#">联系我们</a></dd>
</div>
<div class="col-lg-3">
<dt>地址</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">公司招聘</a></dd>
<dd><a href="#">公司团队</a></dd>
<dd><a href="#">版权</a></dd>
<dd><a href="#">使用条款</a></dd>
<dd><a href="#">隐私政策</a></dd>
<dd><a href="#">联系我们</a></dd>
</div>
</div>
</div>
</div>
<style type="text/css">
.links-list .col-lg-3 dd + dd{
margin-top: 10px;
}
</style>

图:

bootstrap导航条等样例持续更新》。。的更多相关文章

  1. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  2. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  3. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  4. bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何

    bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...

  5. 浅谈Bootstrap——导航条起步

    不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...

  6. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Bootstrap——导航条(navbar)

    导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...

  8. bootstrap导航条组件

    一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...

  9. bootstrap导航条相关知识

    在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...

随机推荐

  1. flask(十)使用alembic,进行数据库结构管理,升级,加表,加项

    1.安装扩展,在虚拟环境中安装 alembic,不懂可以去看pycharm的系列文章. 2.初始化, 使用 Alembic 前需要通过 alembic init 命令创建一个 alembic 项目,该 ...

  2. 面试题2:单例模式Singleton

    首先,单例模式使类在程序生命周期的任何时刻都只有一个实例, 然后,单例的构造函数是私有的,外部程序如果想要访问这个单例类的话, 必须通过 getInstance()来请求(注意是请求)得到这个单例类的 ...

  3. jQuery一句话实现多选框全选/取消

    <!DOCTYPE Html> <html> <head> <script type="text/javascript" src=&quo ...

  4. 第一个dubbo+zookeeper项目例子

    公司项目要用这两个东西,于是打算学习它. 首先我的理解dubbo是什么?zookeeper是什么?为什要这么搞. 项目分层: 传统的,mvc -->垂直架构(将模块抽取成单独项目,项目互相调用) ...

  5. js创建表单并提交

    1.脚本 Util = { post : function(URL, PARAMS){ //虚拟表单实现post提交 var temp = document.createElement("f ...

  6. DevExpress ASPxComboBox lost selected item after postback

    <dx:ASPxComboBox ID="cbxSname" ClientInstanceName="cbxSname" Font-Names=" ...

  7. ZOJ 17届校赛 Knuth-Morris-Pratt Algorithm( 水题)

    In computer science, the Knuth-Morris-Pratt string searching algorithm (or KMP algorithm) searches f ...

  8. HDU 3829

    http://acm.hdu.edu.cn/showproblem.php?pid=2970 P个小朋友喜欢猫讨厌狗,喜欢狗讨厌猫,移除一定数量的猫狗,使开心的小朋友数量最多 二分图最大独立集=顶点数 ...

  9. X11 fluxbox窗口管理器

    /********************************************************************************* * X11 fluxbox窗口管理 ...

  10. cloneNode