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》反射、内置方法(__str__,__repr__)
一.反射 通过字符串的形式操作对象相关的属性.(使用字符串数据类型的变量名来获取这个变量的值) Python中的一切事物都是对象(都可以使用反射) 反射类中的变量 反射对象中的变量 反射模板中的变量 ...
- GetTickCount()函数
GetTickCount(),这个函数,在此做下整理和总结.1.定义For Release configurations, this function returns the number of mi ...
- L1-013 计算阶乘和
对于给定的正整数N,需要你计算 S=1!+2!+3!+...+N!. 输入格式: 输入在一行中给出一个不超过10的正整数N. 输出格式: 在一行中输出S的值. 输入样例: 3 输出样例: 9 #i ...
- PlistBuddy
最近由于工作需要,发现了这么一个小工具. PlistBuddy是一个Mac里的命令行下读写plist文件的工具. 位于/usr/libexec/下,由于这个路径不在默认的PATH里,需要通过绝对路径/ ...
- CentOS7安装OpenStack(Rocky版)-07.安装horizon服务组件(控制节点dashboard)
在上一篇文章分享了neutron网络服务的安装配置,本文分享openstack的horizon(dashboard)web界面管理服务,方便在浏览器操作 ---------------------- ...
- 配置阿里云ECS支持IPv6,解决苹果app审核失败问题
前几天iOS的App提交给苹果审核没通过,给出的原因是:该应用在 IPv6 的环境下无法使用.检查发现:阿里云优化过的系统没有启用IPv6协议,需要配置启用一下,但是只单独启用IPv6也是无法直接提供 ...
- 在VM上安装centOS后的网络配置
花了点时间,研究了下VM上的linux虚拟机的网络配置问题.1.环境主机:winXP SP2,家庭宽带,局域网连到路由器,ip地址为192.168.1.101. 虚拟机:centOS(redhat l ...
- python--selenium多线程执行用例实例/执行多个用例
python--selenium多线程执行用例实例/执行多个用例 我们在做selenium测试的时候呢,经常会碰到一些需要执行多个用例的情况,也就是多线 程执行py程序,我们前面讲过单个的py用例怎么 ...
- android 自动拨打电话 挂断电话代码
页面布局文件代码 ( res下面的layout下面的activity_main.xml代码 ) <RelativeLayout xmlns:android="http://sche ...
- 【洛谷P1338】末日的传说
https://www.luogu.org/problemnew/show/P1338 [题目大意:从1到n的连续自然数,求其逆序对数为m的一个字母序最小的排列.] 最开始的思路是想从逆序对数入手,然 ...