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. Windows8连接网络后自动弹出Bing解决方法

    Windows8 网络连接速度很快( ADSL ),但是连接之后总是会打开 Bing,这是很烦人的一件事,因为你连接网络可能并不想打开浏览器,甚至,你讨厌 Bing. 我也一直被这个问题困扰了很久,用 ...

  2. Python bool值

    a = 10 print(type(a)) #<class 'int'> d = str(a) #把数字转换成str print(type(d)) #<class 'str'> ...

  3. Windows下使用Nexus搭建pypi私服

    Nexus之前一直作为maven的私服而被大家所熟知,但是其实nexus可以做很多种仓库的私服,官网的说明就揭示了一切,真是又方便又强大的开源工具. 首先下载安装nexus,地址: https://w ...

  4. PAT  说反话-加强版   (20分)

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过500 000的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母 ...

  5. SVM的新理解

    svm导出的原始问题然后利用KKT条件,为何还需要对偶空间? 一方面,实际上KKT条件怎么得到的?KKT条件的推导是:svm原始问题->极大极小问题(先算极小这步,但极小这步中α是有约束的,不好 ...

  6. Samsung_tiny4412(驱动笔记09)----alloc_pages,kmalloc,vmalloc,kmem_cache,class

    /*********************************************************************************** * * alloc_pages ...

  7. 王垠:完全用Linux工作 - imsoft.cnblogs

    完全用Linux工作,抛弃windows 我已经半年没有使用 Windows 的方式工作了.Linux 高效的完成了我所有的工作. GNU/Linux 不是每个人都想用的.如果你只需要处理一般的事务, ...

  8. Android Studio - 安卓开发工具 打开后报错集合、修复指南

    安卓开发工具错误修复 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创新 ...

  9. CodeForces - 1093D:Beautiful Graph(二分图判定+方案数)

    题意:给定无向图,让你给点加权(1,2,3),使得每条边是两端点点权和维奇数. 思路:一个连通块是个二分图,判定二分图可以dfs,并查集,2-sat染色. 这里用的并查集(还可以带权并查集优化一下,或 ...

  10. 使用migration创建表时,出错的解决方法

    Laravel 5.4 migrate时报错: Specified key was too long error 解决问题升级MySql版本到5.5.3以上. 手动配置迁移命令migrate生成的默认 ...