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 ...
 
随机推荐
- Win10系统Cortana 小娜无法搜索
			
1.在开始菜单中找“Windows PowerShell”文件夹,打开后右键单击Windows PowerShell,选择“以管理员身份运行” 2.输入命令,通过重新注册语音小娜来解决问题 Get-A ...
 - 微信小程序之页面引用utils中的js文件
			
/* 只可使用相对路径 */const utils = require('../../../utils/util.js') Page({})
 - java学习2-数据类型和运算符
			
1.数据类型分类 java是强类型语言:a.所有的变量必须先声明后使用 b.指定类型的变量只能接受类型与之匹配的值 java语言支持的类型分为两类:基本类型和引用类型. 基本类型:包括boolean类 ...
 - 03 Node.js学习笔记之根据http请求路径返回不同数据
			
在Nodejs中,当客户端请求的路径不同时,NodeJS处理返回不同的数据 步骤: //1.载入http模块 var http=require('http'); //2.创建一个http服务 var ...
 - 玩转OneNET物联网平台之MQTT服务④ —— 远程控制LED(设备自注册)+ Android App控制
			
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
 - webpack4+koa2+vue 实现服务器端渲染(详解)
			
_ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...
 - C#+Selenium抓取百度搜索结果前100网址
			
需求 爬取百度搜索某个关键字对应的前一百个网址. 实现方式 VS2017 + Chrome .NET Framework + C# + Selenium(浏览器自动化测试框架) 环境准备 创建控制台应 ...
 - java大数运算(讲解)
			
在算法竞赛或者面试中我们经常遇到大数问题,例如求一个很大的阶层,大数加法等等. 住在这种情况下我们用常规解法(使用long long或long long int)肯定是不行的, 而我们自己用c/c++ ...
 - angular7新特性
			
Angular 是最流行的 Web 应用程序开发框架之一.随着 Angular 7 的发布,它为 Web 开发人员带来了更多功能,包括核心框架.Angular Material.与主要版本保持同步的 ...
 - day21作业
			
1.定义MySQL类 1.对象有id.host.port三个属性 2.定义工具create_id,在实例化时为每个对象随机生成id,保证id唯一 3.提供两种实例化方式,方式一:用户传入host和po ...