bootstrap导航条等样例持续更新》。。
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导航条等样例持续更新》。。的更多相关文章
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
- 浅谈Bootstrap——导航条起步
不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap——导航条(navbar)
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...
- bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
- bootstrap导航条相关知识
在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...
随机推荐
- Python 数据类型--集合(set)
一.集合(set) 集合也是一种数据类型,一个类似列表的,无序的,不重复的.它主要有两大作用 1.把一个列表变为集合,就自动去重了,不需要写额外的代码 2.关系测试,测试两组数据之间的交际.差集.并集 ...
- Java——IO类 字符流概述
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
- vue-router配置之通用路径
目的:浏览器地址栏输入了未匹配的地址时,前端控制跳转到首页index页面: 项目入口js:(一般根据项目结构不同,这个js一般取名为:app.js或者main.js) import Router fr ...
- BitDefender(比特梵德)特惠活动 免费获取9个月激活码
Bitdefender为了庆祝自己获得2014年最佳杀毒软件,送出9个月的Internet security免费激活码.
- get_class
<?phpclass foo { function foo() { // implements some logic } function name() { ...
- kindle看扫描版pdf的解决办法
(1)先把PDF crop (2)转JPEG (3)JPEG根据kindle的屏幕的分辨率,调整JPEG图像大小,kindle whater paper 大小为1448*1072 (4) 最后把j ...
- Xcode C++ and Objective-C refactoring
Is there a way to refactor mixed C++/Objective-C code in Xcode ?? I am writing a game using Cocos2D ...
- Linux shell —— 数组与关联数组
使用 declare -A(declare 的用法请使用 help 进行查看,help declare) 进行声明关联数组变量: $ declare -A fruits_price $ fruits_ ...
- [LeetCode&Python] Problem 669. Trim a Binary Search Tree
Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so that a ...
- HDU 4619 Warm up 2 贪心或者二分图匹配
给同一张横着的牌的所在的格子编同一样的号,这些格子对应x集合,给同一张竖着的牌所在的格子编同一样的号,对应y集合,同一个格子上既有横着的牌又有竖着的牌,那么就建一条边,有冲突就要拿走一张,结果是总的牌 ...