用bootstrap实现导航栏的基本代码框架
来源:互联网 发布:python三元表达式 编辑:程序博客网 时间:2024/05/16 15:29
仅仅显示标题,导航菜单:
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav>
网页上的显示效果:
手机端的显示效果:
将
<div class="container-fluid">
换成
<div class="container">
得到下面的效果:
即将导航条居中。
将
<nav class="navbar navbar-default" role="navigation">
换成
<nav class="navbar navbar-default navbar-inverse" role="navigation">
得到下面效果:
即以黑色背景显示。内容自己改,不解释。
将
<nav class="navbar navbar-default navbar-inverse" role="navigation">
换成
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">使导航条一直位于顶部。
添加
<style> body{ padding-top: 70px; } </style>
使导航条不遮挡下面正文的内容。具体可以自己试一下。
</pre><br /><br />
0 0
- 用bootstrap实现导航栏的基本代码框架
- Bootstrap多级导航栏(级联导航)的实现代码
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- Bootstrap实例2---导航栏的实现
- bootstrap自定义样式-bootstrap侧边导航栏的实现
- bootstrap的导航栏
- bootstrap 基本例子,导航栏和container的使用
- ace bootstrap后台框架-导航栏api
- Bootstrap实现导航栏的两种方式
- Bootstrap常用的导航栏
- Bootstrap实现响应式导航栏效果
- bootstrap实现导航等
- bootstrap前端框架的简单基本使用
- Bootstrap基本框架搭建
- Bootstrap基本框架
- 实现导航功能的代码
- ZOJ-3212-K-Nice【6th浙江省赛】【构造】
- 跳转语句
- 排序算法
- IQ测试
- 自己录的一些 Laravel 视频,欢迎观看。
- 用bootstrap实现导航栏的基本代码框架
- Java web gis google地图自定义城市
- 面向对象 程序题
- STM32-点亮一个LED灯-流水灯
- java读取邮件
- Servlet的多线程机制
- android真机测试之offline或unauthorized错误
- 1029. Median (25)
- 图表控件TeeChart安装使用