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 ...
随机推荐
- .NET Core3.0创建Worker Services
.NET CORE 3.0新增了Worker Services的新项目模板,可以编写长时间运行的后台服务,并且能轻松的部署成windows服务或linux守护程序.如果安装的vs2019是中文版本,W ...
- python-利用freeze生成requirements文件
使用场景:本地电脑开发完成的python自动化项目,需要导出python相关的依赖包以便后续迁移项目使用. C:\Users\acer>e: E:\>pip freeze >requ ...
- GO实现简单(命令行)工具:sftp,文檔压解,RDS备份,RDS备份下载
GO实现简单(命令行)工具:sftp,文檔压解,RDS备份,RDS备份下载 轉載請註明出處:https://www.cnblogs.com/funnyzpc/p/11721978.html 内容提要: ...
- 徐明星系列之徐明星创办的OK资本成为RnF金融有限公司的锚定投资者
12月17日,由区块链专家徐明星创办的OK集团的投资部门OK资本宣布,它将成为RnF金融有限公司的锚定投资者.OK集团成立于2012年,创始人徐明星是前豆丁网CTO,从豆丁网离职后,徐明星创办了OK集 ...
- Java Web 学习(1) —— Servlet
Java Web 学习(1) —— Servlet 一. 什么是 Servlet Java Servlet 技术是Java体系中用于开发 Web 应用的底层技术. Servlet 是运行在 Servl ...
- 百万年薪python之路 -- 面向对象之所有属性及方法
1.私有成员公有成员 1.1 类的私有属性 # class A: # # name = '周道镕' # __name = 'zdr' # 私有类的属性 # # def func(self): # pr ...
- unity text实现鼠标光标
由于项目需求,需要在text上实现鼠标的cursor,并且随着点击位置cursor移动.实现方法: 1)新建一个光标的prefab(简单为之,直接在image中添加一个竖线spirte),增加脚本控制 ...
- day3-02 python入门之基本的数据类型
目录 一.整型(int) 二.浮点型(float) 三.字符串类型(str) 字符串在python2和python3中的细微区别 四.复数 五.列表(list) 六.数据字典(dict) 定义方式 七 ...
- C#开发命令执行驱动程序 之 读入命令行参数
/// <summary> /// 在cmd窗体内执行如下: /// OrderDriverApp.exe Order Driver App /// 返回: /// The args ar ...
- windows 10 环境下 使用Anaconda搭建 TensorFlow 环境
##大致步骤 1 安装Anaconda 2 在Anaconda中建立虚拟TensorFlow的虚拟环境 建立虚拟环境的命令是 conda create -n tensorflow python=3. ...