bootstrap基础学习【导航条、分页导航】（五）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap基础学习【导航条、分页导航】（五）</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style="padding-left: 20px;">
<h3><strong>1.导航条基础、二级菜单、状态、带表单（搜索功能）</strong></h3>
使用方法：<br />
在制作一个基础导航条时，主要分以下几步：<br />
第一步：首先在制作导航的列表(ul class=”nav”)基础上添加类名“navbar-nav”<br />
第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”<br />
<!--基本导航条-->
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
菜单前面都会有一个标题（文字字号比其它文字稍大一些），通过“navbar-header”和“navbar-brand”来实现<br />
此功能主要起一个提醒功能，当然改良一下可以当作是logo<br />
导航条状态及二级菜单<br />
“navbar-left”让表单左浮动，“navbar-right”表单右浮动、只有当浏览器视窗宽度大于768px生效。
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">文字logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div> <h3><strong>2.导航条中的按钮、文本和链接</strong></h3>
1、导航条中的按钮navbar-btn<br />
2、导航条中的文本navbar-text<br />
3、导航条中的普通链接navbar-link<br />
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。<br />
而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。<br />
可将ul换成div标签 解决问题
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">标题</a>
</div>
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
</div>
</div> <h3><strong>3.固定导航条</strong></h3>
☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部<br />
☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部<br />
使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可<br />
body {<br />
padding-top: 70px;/*有顶部固定导航条时设置*/<br />
padding-bottom: 70px;/*有底部固定导航条时设置*/<br />
}<br />
<style>
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
</style>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
<strong>或者将固定导航条放到页面内容前面并给 内容div设置padding值</strong><br />
div class="navbar navbar-default navbar-fixed-top" role="navigation"><br />
…<br />
/div><br />
div class="navbar navbar-default navbar-fixed-bottom" role="navigation"><br />
…<br />
/div><br />
div class="content">我是内容/div><br /> <h3><strong>4.响应式导航条</strong></h3>
<!--
使用方法：
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式（固定写法）：
<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如：
需要折叠的div代码段：
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">
…
</ul>
</div>
窄屏时显示的图标代码段：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
...
</button>
也可以这么写，需要折叠的div代码段：
<div class="collapse navbar-collapse example" >
<ul class="nav navbar-nav">
…
</ul>
</div>
窄屏时要显示的图标：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
...
</button>
-->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
<a href="##" class="navbar-brand">标题</a>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div> <h3><strong>5.反色导航条</strong></h3>
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">标题</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">首页</a></li>
<li><a href="">教程</a></li>
<li><a href="">关于我们</a></li>
</ul>
</div> <h3><strong>6.分页导航（带页码的分页导航）</strong></h3>
<ul class="pagination pagination-lg">
<li><a href="#">«第一页</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一页»</a></li>
</ul> <ul class="pagination pagination">
<li><a href="#">«第一页</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一页»</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">«第一页</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一页»</a></li>
</ul> <h3><strong>7.分页导航（翻页分页导航）</strong></h3>
状态样式设置：<br />
在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，<br />
但同样不能禁止其点击功能。可以通过js来处理，或将a标签换成span标签。<br />
<ul class="pager">
<li><a href="#">«上一页</a></li>
<li><a href="#">下一页»</a></li>
</ul>
<!--左右对齐-->
<ul class="pager">
<li class="previous"><a href="#">«上一页</a></li>
<li class="next"><a href="#">下一页»</a></li>
</ul>
<!--禁止状态-->
<ul class="pager">
<li class="disabled"><span>«上一页</span></li>
<li><a href="#">下一页»</a></li>
</ul> <h3><strong>8.标签</strong></h3>
有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：<br />
.label:empty {<br />
display: none;<br />
}<br />
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span> <h3><strong>9.徽章</strong></h3>
<a href="#">Inbox <span class="badge">42</span></a>
<!--navbar-default导航条勋章-->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">导航标题</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例<span class="badge">23</span></a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
<!--nav-pills导航条勋章-->
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
<li><a href="#">Profile</a></li>
<li>
<a href="#">
<span class="badge pull-right">3</span>
Messages
</a>
</li>
</ul>
<br />
<!--按钮勋章-->
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
</body>
</html>
bootstrap基础学习【导航条、分页导航】（五）的更多相关文章
- Bootstrap学习-导航条-分页导航
1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...
- bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Bootstrap <基础十八>面包屑导航（Breadcrumbs）
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- Bootstrap如何实现导航条？导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- bootstrap基础学习【网格系统】（三）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【排版】（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML&CSS基础学习笔记1.11—导航栏
上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...
随机推荐
- 洛谷 P2119 魔法阵 题解
Analysis 这道题也是考试题,我也依然打了个n三次方暴力.正解是先枚举差,再枚举c和d,a和b用乘法原理优化,这样就能大大减少时间. #include<iostream> #incl ...
- Elasticsearch 调优之 写入速度优化到极限
基于版本: 2.x – 5.x 在 es 的默认设置,是综合考虑数据可靠性,搜索实时性,写入速度等因素的,当你离开默认设置,追求极致的写入速度时,很多是以牺牲可靠性和搜索实时性为代价的.有时候,业 ...
- P3038 [USACO11DEC]牧草种植Grass Planting
题目描述 Farmer John has N barren pastures (2 <= N <= 100,000) connected by N-1 bidirectional road ...
- 使用开源软件 jumpserver 搭造自己的堡垒机
使用开源软件 jumpserver 搭造自己的堡垒机 开软地址:https://github.com/jumpserver/jumpserver 目前版本:1.5.2 测试的时候有少许BUG,但功能却 ...
- ACwing_789. 数的范围
算法竞赛进阶指南上说据说只有10%的程序员能写对二分,而我这种蒟蒻..所以虽然这是一道非常基础的二分,但我觉得对我来说还是有必要写一篇博客来总结一下,也在写的过程中检验一下自己. 一开始看到这道题我还 ...
- Linux中查看某个端口占用情况
譬如在linux中排查某个端口是否被占用,可以通过如下命令进行排查,排查方法如下: 1: 排查 : 应用是否被人debug. 8787 为端口号 netstat -anp |grep 8787 图中 ...
- PHP + CI框架 + AdminLITE权限管理系统
源码地址:https://github.com/yangsphp/rbac-master
- Selenium 常用JS
滑动scroll: window.scrollTo(0,document.body.scrollHeight);
- Hibernate 基本使用
Hibernate框架概述 一.什么是框架 软件的一个半成品,已经帮你完成了部分功能. 把一些不确定的东西,按照框架要求,达到相应的功能 Hibernate是JavaEE技术三层架构所用到的技术 二. ...
- sqlserver 触发器实例
实例1:update USE [数据库名称]GO/****** Object: Trigger [dbo].[触发器名称] Script Date: 05/08/2014 12:40:25 ***** ...