bootstrap常用组件之头部导航
来源:互联网 发布:淘宝有办假行驶证的吗 编辑:程序博客网 时间:2024/05/17 21:46
以下是头部导航的代码,我只简要的对个别常用属性进行解释
总效果如图所示:
代码如下:
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
//navbar-inverse 设置背景
//navbar-fixed-top 设置头部固定在顶部,因此需要给body设置顶部padding,一般设置为padding-top:60px
<div class="container-fluid">
//container-fluid设置导航条内容是否有一定的内间距,如果class="container-fluid"则没有内间距,内容紧贴左侧
//如果设置class="container",则内容有一定的内间距,内容对称居中
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> //这里是响应式的写法,在小屏幕上回显示三杆,无需改动
<a class="navbar-brand" href="#">某管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header" >业务功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header" >系统功能</li>
<li><a href="#">设置</a></li>
<li role="separator" class="divider"></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-left pull-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="username...">
<input type="password" class="form-control" placeholder="password...">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
1 0
- bootstrap常用组件之头部导航
- Bootstrap组件之导航
- Bootstrap组件之导航条
- Bootstrap组件之导航条
- bootstrap组件之导航条
- 3.5Bootstrap组件篇之导航条
- Bootstrap组件之导航条类名总结
- 3.4Bootstrap学习组件篇之导航、标签、面包屑导航
- Bootstrap组件学习之导航和导航条
- BootStrap的导航组件
- BootStrap 导航条组件
- BootStrap 附加导航组件
- Bootstrap导航组件
- Bootstrap-导航栏组件
- Bootstrap导航栏头部错位问题
- Bootstrap学习总结笔记(10)-- 基本组件之导航
- Bootstrap常用导航条
- bootstrap 导航条 组件排列
- Gson解析json对不确定泛型的处理
- c++作业4
- ZOJ
- 栈的压入弹出序列
- 什么是哈希表
- bootstrap常用组件之头部导航
- How to set up Hyper-V virtual machine in Windows 2012R2
- 求一百个人中有人生日相同的概率
- 2017年4月19日工作日记
- elasticsearch-logstash-kibana中文文档
- linux系统中安装软件
- 【IMWeb训练营作业】TodoList 初版
- Java 理论与实践: 正确使用 Volatile 变量
- 第一次上传代码到github (Linux)