bootstrap练习笔记
1.关于导航栏 官网链接:http://v3.bootcss.com/components/#nav
结构大概是这样的:
nav标签标识导航栏
class为navbar 告诉BS这是一个导航条
navbar-default 标识引入默认的导航条样式
navbar-fixed-top 标识导航条在像下拉取页面的时候始终固定在顶端
Div.container标识导航栏要存放的内容
Div.navbar-header标识导航条的头部
Div.navbar-header>a.bavbar-brand标识链接品牌 一般在下面加一个img表示LOGO
ul.nav.navbar>li标识页面的导航条内容
Ul.navbar-right表示浮动在右边
ul.nav.navbar>li.active标识激活内容,也就是说在当前页添加背景
ul.nav.navbar>li>a标识导航连接
ul.nav.navbar>li>a>span.glyphicon glyphicon-XXX 表示引用官网提供的图标,用于放在链接前面
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand" style="padding: 0;">
<img src="img/logo.png" alt="网站LOGO">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span>
首页
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-list"></span>
资讯
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-file"></span>
案例
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-question-sign"></span>
关于
</a>
</li>
</ul>
</div>
</nav>
得到的结果如下
大屏:
小屏幕:
如果想要在小屏幕下将列表收缩起来,就要如下做:
1首先在div.navbar-header下添加一个按钮
Button.navbar-toggle表示按钮用于导航条切换显示或者隐藏
data-toggle=’collapse’标识切换的类型是 collapse
data-target=’#navbar-collapse’标识作用于制定的id
button原始按钮不好看,所以可以在其中增加好看的图标
例如:span.icon-bar
2既然按钮要作用于目标,所以要在导航条的div设置一个与之对应的id
class为 collapse navbar-collapse,并且用这个div将ul包裹起来
完整代码如下:
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand" style="padding: 0;">
<img src="img/logo.png" alt="网站LOGO">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top: 0">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span>
首页
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-list"></span>
资讯
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-file"></span>
案例
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-question-sign"></span>
关于
</a>
</li>
</ul>
</div>
</div>
</nav>
结果显示如下:
大屏:
小屏幕:
点击右上方的按钮可以控制导航条的显示和隐藏
1.bootstrap练习笔记-导航条的更多相关文章
-
Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...
-
Bootstrap系列 -- 39. 导航条添加标题
在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...
-
bootstrap 组件之";导航条";
一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...
-
Bootstrap如何实现导航条?导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
-
Bootstrap系列 -- 40. 导航条二级菜单
在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...
-
bootstrap 响应式导航条模板(含下拉菜单,弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
Bootstrap 手风琴搭配导航条实现常用菜单栏
效果 HTML代码 <div class="sidebar"> <div class="mc-search"> <div clas ...
-
Bootstrap 反色导航条
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
-
bootstrap学习笔记之导航条基础
导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...
随机推荐
-
ios基础篇(十六)——UIWebView的基本使用
UIWebView是内置的浏览器控件,可以用它来浏览网页.打开文档等.UIWebView是一个混合体,具体的功能控件内置的,实现一些基本的功能.UIWebView可以查看Html网页,pdf文件,do ...
-
大型网站系统架构实践(五)深入探讨web应用高可用方案
从上篇文章到这篇文章,中间用了一段时间准备,主要是想把东西讲透,同时希望大家给与一些批评和建议,这样我才能有所进步,也希望喜欢我文章的朋友,给个赞,这样我才能更有激情,呵呵. 由于本篇要写的内容有点多 ...
-
about js
function: javascript jquery modernizr yepnope code organization requirejs backbonejs http://blog.csd ...
-
DataGridView常用功能
最近做Winform开发,DataGridView是必不可少的控件.整理了一下用到的基本功能的设置 1.情景1:当GridView的列没有自动填充,会出现一片空白的地方,特别不美观. 设置 自动填充G ...
-
jQuery事件对象的属性
注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...
-
bootsraps ch1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
-
服务器修改 ssh 22端口
我们首先修改配置文件,让ssh 通知支持2个端口访问 ,22 和 23456 端口. Port 22 Port 23456 为什么要这样: 万一我用 23456端口替换了22端口,但是 23456正好 ...
-
[ABP实战开源项目]--YoYoCms目录
ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...
-
Argparse4j
argparse4j 是 Python argparse 命令行解析器的 Java 语言移植版.这个要比spring AspectJ 更简单,更方便实现. <dependency> < ...
-
如何通过TortoiseGit(小乌龟)把本地项目上传到github上
1.第一步: 安装git for windows(链接:https://gitforwindows.org/)一路next就好了, 如果遇到什么问题可以参考我另外一篇文章~^ - ^ 2.第二步:安装 ...