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. windows下运用批处理实现一键自动开启多个应用

    工作时,我每天早上到公司,打开自己的电脑,都会有几个固定的软件(myeclipse,飞信,firefox,foxmail等).文件夹和文件需要打开,每天如此,感到很烦,浪费时间做重复的工作,于是想到一 ...

  2. jquery ajax 无法跨域调用的解决办法

    今天要用到jquery ajax 跨域调用,但是ajax是禁止跨域调用的,所以只能先在php文件使用函数取得跨域的值,然后用ajax调用本地php文件.

  3. String类型的注意事项

    1.string类型是可变长字符序列,而vector是集合,存放的是某种类型的可变长序列 2.string类型对象的初始化有多种方式:string str="Hello",是将字符 ...

  4. Java中的容器和注入分析

    为什么会出现容器的注入? 容器:顾名思义,装东西的器物. 至于spring中bean,aop,ioc等一些都只是实现的方式:具体容器哪些值得我们借鉴,我个人觉得是封装的思想.将你一个独立的系统功能放到 ...

  5. 使用 Git & Repo 下载代码

    客户端安装 Git 安装 git,gitk 网络连接正常的情况下: $ sudo apt-get install git-core gitk git-gui 不能上网,有.deb安装包的,请执行: $ ...

  6. .Net EF Core数据库使用SQL server 2008 R2分页报错How to avoid the “Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement.”

    一.  问题说明 最近.Net EF core 程序部署到服务器,服务器数据库安装的是SQL server 2008 R2,我本地用的的是SQL server 2014,在用到分页查询时报错如下: H ...

  7. 当ORACLE归档日志满后如何正确删除归档日志

    当ORACLE 归档日志满了后,将无法正常登入ORACLE,需要删除一部分归档日志才能正常登入ORACLE. 一.首先删除归档日志物理文件,归档日志一般都是位于archive目录下,AIX系统下文件格 ...

  8. bind() 函数兼容

    为了搞清这个陌生又熟悉的bind,google一下,发现javascript1.8.5版本中原生实现了此方法,目前IE9+,ff4+,chrome7+支持此方法,opera和safari不支持(MDN ...

  9. HDU 5499:SDOI

    SDOI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Sub ...

  10. spring boot 热部署devtools实现

    1.devtools spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot ...