Bootstrap——导航条(navbar)
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。
导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航)、表单以及表单和导航一起结合等多种形式。
在制作一个基础导航条时,主要分以下几步:
- 首先在制作导航的列表(<ul class='nav'>)上添加类名 navbar-nav;
- 在列表外部添加一个容器(nav),并且使用类名 navbar 和 navbar-default。
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
...
</ul>
</nav>如果我们希望将导航条固定在浏览器顶部或底部,Bootstrap 框架提供了两种固定导航条的方式:
- 将导航固定在顶部,下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">
- 将导航补丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">
Bootstrap——导航条(navbar)的更多相关文章
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- bootstrap导航条相关知识
在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...
- 浅谈Bootstrap——导航条起步
不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
随机推荐
- [JZOJ5185] 【NOIP2017提高组模拟6.30】tty's sequence
Description
- ArraryList源码解读
先由一道题引发思考: ArrayList list = new ArrayList(20);中的list扩充几次() A 0 B 1 C 2 D 3 答案:A 直接翻看 jd ...
- Twitter-Snowflake:自增ID算法
简介 Twitter 早期用 MySQL 存储数据,随着用户的增长,单一的 MySQL 实例没法承受海量的数据,后来团队就研究如何产生完美的自增ID,以满足两个基本的要求: 每秒能生成几十万条 ID ...
- 基础安全术语科普(三)——RAT
什么是RAT? RAT 即 Remote Access Tools (远程管理工具或远程访问工具)的缩写.通俗点说就是木马病毒. RAT 分为两部分——客户端 与 服务端. RAT的工作原理? 服务端 ...
- Leetcode(2)两数相加
Leetcode(2)两数相加 [题目表述]: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两 ...
- [正确配置]win7 PL/SQL 连接Oralce 11g 64位
PL/SQL 版本号:15.0.5.1710 32位 win7 64位系统 instantclient 12.1 32位,PL/SQL不支持64位 关键问题 1.Not logged on 2.没有c ...
- C语言算法动态规划板子题汇总
本篇博客仅为对动态规划基础问题的状态转移方程进行求解,然后给出对应的注释代码,有关题目的具体内容可在算法导论或网络上进行查看 目录 1.钢管切割(最小值) 2.两条流水线调度 3.多条流水线调度 4. ...
- Leetcode Tags(13)Tree
1.前序.中序.后序递归方式遍历二叉树 public void preOrderRecur(Node T) { if (T != null) { System.out.print(T.val + &q ...
- 设计模式C++描述----19.命令(Command)模式
一. 举例说明 我们知道,在多线程程序中,多个用户都给系统发 Read 和 Write 命令.这里有几点需要说明: 1. 首先明确一点,所有的这些 Read 和 Write 命令都是调用一个库函数. ...
- python新式类继承------C3算法
一.引入 mro即method resolution order,主要用于在多继承时判断调的属性的路径(来自于哪个类).之前查看了很多资料,说mro是基于深度优先搜索算法的.但不完全正确在Python ...