bootstrap-导航总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 处理低版本IE 4.0不考虑IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script> <style>
#login{
width:400px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</nav>
</div>
<!-- 不建议以上两种 -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav> <nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
</body>
<script>
/*
导航条
navbar
navbar-default 浅色色调
nav navbar-nav
navbar-inverse 深色色调
navbar-static-top 直角
navbar-fixed-top 固定到顶部
navbar-fixed-bottom 固定到底部
遮挡内容的问题 body margin 解决
*/
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 处理低版本IE 4.0不考虑IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script> <style>
body{
position: relative;
}
.pos{
margin-bottom: 500px;
padding-top: 50px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrool" data-offset="200">
<!-- <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
<a href="#" class="navbar-link">链接</a>
<p class="navbar-left navbar-text">你好吗顶顶顶顶</p>
<button class="btn btn-default navbar-btn">搜索</button>
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="提示信息">
<input type="submit" value="搜索" class="btn btn-primary">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</nav> --> <!-- <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">three<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">child1</a></li>
<li><a href="#">child2</a></li>
</ul>
</li>
</ul>
</div>
</nav> -->
<!-- 响应式 -->
<!-- <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#myId">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">logo</a>
</div>
<div class="collapse navbar-collapse" id="myId">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">three<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">child1</a></li>
<li><a href="#">child2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> -->
<nav id="myScrool" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#a">one</a></li>
<li><a href="#b">two</a></li>
<li><a href="#c">three</a></li>
</ul>
</div>
</nav>
<div id="a" class="pos">AAA</div>
<div id="b" class="pos">BBB</div>
<div id="c" class="pos">CCC</div> </body>
<script>
/*
导航条
navbar-header logo父级
navbar-brand logo
navbar-left 左浮动
navbar-right 右浮动
navbar-btn 按钮
navbar-link 链接
navbar-text 文本
navbar-form
下拉菜单
响应式导航条
navbar-toggle
collapse 折叠
navbar-collapse
滚动监听
data-spy
data-target
data-offset
*/
</script>
bootstrap-导航总结的更多相关文章
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- Bootstrap 导航 标题栏
Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- Bootstrap导航
前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...
- Bootstrap 导航元素（标签页）
[Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...
- Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
随机推荐
- phpmyadmin数据库导入大小限制的修改
1.遇到导入过大文件时,首先检查php.ini 配置文件中的以下三个地方,upload_max_filesize, memory_limit 和post_max_size,并且推荐修改的值要稍大于导入 ...
- NSDate详解及获取当前时间等常用操作
NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...
- WINDOWS下搭建SVN服务器端的步骤分享(Subversion)
1.获取svn程序 2.安装 Subversion(以下简称SVN)的服务器端和客户端.下载下来的服务器端是个 zip压缩包,直接解压缩即可,比如我解压到 E:\subversion .客户端安装文件 ...
- UVA - 129 Krypton Factor （困难的串）（回溯法）
题意:求由字母表前L个字母组成的字典序第n小的困难串.(如果一个字符串包含两个相邻的重复子串,则称它是"容易的串",其他串称为"困难的串".) 分析:回溯时,检 ...
- MAC中使用Vim和GCC编译C程序
1.打开终端 2.输入以下命令进入vim编辑器: vim a.c 3.进入编辑器后按i进入insert模式,然后键入以下代码: #include<stdio.h> int main(){ ...
- IOS开发中UIAlertController（警告框）的使用
步骤一.初始化: UIAlertController * inputname = [UIAlertController alertControllerWithTitle:@"未输入账户&qu ...
- Practice Round China New Grad Test 2014 报告
今天有Google of Greater China Test for New Grads of 2014的练习赛,主要是为了过几天的校园招聘测试做练习用的,帮助熟悉平台,题目嘛,个人觉得除了A题外, ...
- UVa 11450 - Wedding shopping
题目大意:我们的朋友Bob要结婚了,所以要为他买一些衣服.有m的资金预算,要买c种类型的衣服(衬衫.裤子等),而每种类型的衣服有k个选择(只能做出一个选择),每个选择的衣服都有一个价格,问如何选择才能 ...
- UVa 594 - One Little, Two Little, Three Little Endians
题目大意:大小端模式的转换.所谓的小端模式,是指数据的高位保存在内存的高地址中,而数据的低位保存在内存的低地址中.与此相对,所谓的大端模式,是指数据的高位,保存在内存的低地址中,而数据的低位,保存在内 ...
- window下Git和github入门
tip:使用简单的例子来制作一个使用指南过程,默认文件夹为demo.看了3个早晨,写一下留个记录,可能有些不成熟,如有错误欢迎指正. 参考一:http://www.liaoxuefeng.com/wi ...