Bootstrap导航栏注释
>Bootstrap官方文档里实现了一个导航栏：
添加了注释，帮助以后理解；
<!--整体灰色横条--><!--navbar-default，默认是灰色； navbar-inverse 反色--><nav class="navbar navbar-default"><div class="container-fluid"><!--navbar-header 最左边的头和最右边合并后的块--><div class="navbar-header"><!--左边的头--><!--<a class="navbar-brand" href="#">Brand</a>--><a class="navbar-brand" href="#"><img alt="Brand" height="100%" src="img/logo.png"></a><!--右边的合并区，点击时触发collapse的js，展开的内容是bs-example-navbar-collapse-1，--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><!--右方合并按钮里三个小横条--><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!--id：bs-example-navbar-collapse-1； 这里面放的是合并区的内容 --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><!--class active激活状态--><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><!--导航条下拉菜单 dropdown-menu--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><!--导航条中的form表单;--><!--navbar-left 左对齐;--><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><!--navbar-right 右对齐;--><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>Bootstrap导航栏注释相关推荐
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- Html 5/CSS 的学习（二） —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- css设置导航栏背景颜色,更改bootstrap导航栏背景颜色和字体颜色
3 个答案: 答案 0 :(得分:46) 我使用以下CSS成功设置了Bootstrap导航栏的样式.你也没有在CSS中定义任何字体,这就是字体没有改变的原因.可以在here找到使用此CSS的网站. . ...
- Bootstrap导航栏始终固定在页面顶部
Bootstrap导航栏始终在页面顶部 引入文件,这是需要自己去官网下载的 <link rel="stylesheet" type="text/css" ...
- 修改bootstrap导航栏样式(颜色，高)
提示:记录bootstrap导航栏样式(颜色,高)的修改 文章目录 前言 一.bootstrap导航栏样式 (颜色,高) 的修改 前言 在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
最新文章
- 使Apache实现gzip压缩
- sendmail启动virtusertable.db错误解决
- 【工具】公网临时大文件传输工具
- 深度学习核心技术精讲100篇（四十四）-深度召回在招聘推荐中的挑战和实践
- python——while 语句
- spring系列-注解驱动原理及源码-bean生命周期
- mybatis:延迟加载时不要在get/set方法上面添加final关键字(原创)
- 秒杀系统 mysql_秒杀系统-介绍
- 参考文献起止页码怎么写_毕业论文文献综述不会写？快来看看这篇文章（附含通用模板）...
- 分享一位电商大佬的技术笔记
- CentOS下rsync数据同步备份
- matlab中princ,主成分分析matlab源程序代码(最新整理)
- Codeforces--676A--Nicholas and Permutation
- sql根据出生日期算年龄
- JavaScript的循环和
- OpenCV入门 图像的边缘填充与融合
- Python @property 详解
- 基于OHCI的USB主机 —— UFI数据结构2
- C# 文件的保存与读取
- 软考|中级网络工程师考过指南，详细学习笔记，考试重点