1.bootstrap练习笔记-导航条
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)中有一个背 ...
随机推荐
- 【Python大系】Python快速教程
感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容很多,加上各种标准库.拓展库, ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- link与@import的区别
我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: <link rel="st ...
- javascript随笔20160808
var jsondata=$.parseJSON(@ViewBag.x); //转换为Json数据 var fruits = ["Banana", "Orange&quo ...
- angularjs+微信,解决chooseImage不能预览的问题
在wx.chooseImage的success回调中直接进行数据绑定,却在ng-repeat时发现ng-src不加载微信localId的问题,类似wxLocalResource://imageid98 ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十二)水情雨情模块
config.xml文件的配置如下: <widget label="水情" icon="assets/images/water.png" config=& ...
- 将oracle冷备份恢复到另外一个数据库实例中
因更换服务器需要将Oracle数据库转移到另外台Oracle中.说明: 1.测试环境为:windows server2003 和 oracle 10g. 2.2台服务器安装的程序目录一样,数据目录不一 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q124-Q127)
Question 124 You are designing a SharePoint 2010 application. You need to design a single feature t ...
- GCD封装的个人理解和应用
GCD封装的个人理解和应用 特点 >>将GCD封装,使我们从繁琐的方法记忆中解脱出来,能够直接快速的应用. 使用方法 1.将工程中的GCD文件中的9个文件拖入自己的工程中(你自己最好建一个 ...
- AndRodi Strudio中的按钮时件
AndRodi Studio中的按钮时件注册一定要写在onCraete中 @Override protected void onCreate(Bundle savedInstanceState) { ...