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 ...
随机推荐
- MariaDB数据库
MySQL作者Michael Widenius自己创办了新公司Monty Program AB,在MySQL基础上新创了MariaDB开源数据库.MariaDB带来更好的数据库管理特性,更好的自由 ...
- vue实现简易计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP5底层原理之变量
PHP5底层原理之变量 变量结构 zval 结构体 PHP 所有类型的变量在底层都会以 zval 结构体的形式实现 (源码文件Zend/zend.h) 源码根目录搜索 grep -rin --colo ...
- 惊人!Spring5 AOP 默认使用Cglib ?从现象到源码深度分析
Spring5 AOP 默认使用 Cglib 了?我第一次听到这个说法是在一个微信群里: 真的假的?查阅文档 刚看到这个说法的时候,我是保持怀疑态度的. 大家都知道 Spring5 之前的版本 AOP ...
- Redis(五)持久化
一.RDB RDB持久化是把当前进程数据生成快照保存到硬盘的过程,触发RDB持久化过程分为手动触发和自动触发. 1.触发机制 (1)手动触发:save命令和bgsave命令 save命令:阻塞当前Re ...
- 最常用 最完整 最清晰 的git使用命令大全!
Git 常用命令 初始化项目步骤 mkdir WebApp //创建文件夹 cd WebApp //进入到该文件夹 git init //初始化 touch README //生成README git ...
- Java开发中的23中设计模式详解(一)工厂方法模式和抽象工厂模式
一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接 ...
- 面向云原生的混沌工程工具-ChaosBlade
作者 | 肖长军(穹谷)阿里云智能事业群技术专家 导读:随着云原生系统的演进,如何保障系统的稳定性受到很大的挑战,混沌工程通过反脆弱思想,对系统注入故障,提前发现系统问题,提升系统的容错能力.Ch ...
- 转:PHP删除目录及目录下所有文件
PHP删除目录及目录下所有文件 <?php //循环删除目录和文件函数 function delDirAndFile( $dirName ) { if ( $handle = opendir( ...
- 操作系统实现(一):从Bootloader到ELF内核(转载)
原文链接: http://www.cppblog.com/airtrack/archive/2014/10/30/208729.html Bootloader 我们知道计算机启动是从BIOS开始,再由 ...