bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何（多去看参考手册）

一、总结

一句话总结：在手机端或者平板端或者显示不够的话就缩起来了。（多去看参考手册）

二、bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何

1、相关知识

导航条:
.navbar
.navbar-default
.navbar-inverse
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-header
.navbar-brand
.navbar-nav
.navbar-form
.navbar-btn
.navbar-text
.navbar-link
.navbar-left
.navbar-right

 

2、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class="page-header">Bootstrap框架</h1>

         <nav class='navbar navbar-inverse'>

             <div class="navbar-header">

                 <a href="" class='navbar-brand'>

                     <img src="logo.png" height='100%'>

                 </a>

                 <button class='navbar-toggle collapsed' data-toggle='collapse' data-target='#mynavbar'>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                 </button>

             </div>    

             <div id="mynavbar" class='collapse navbar-collapse'>

                 <ul class='nav navbar-nav'>

                     <li class='active'><a href="">起步</a></li>

                     <li><a href="">全局CSS样式</a></li>

                     <li><a href="">组件</a></li>

                     <li><a href="">Javascript插件</a></li>

                     <li><a href="">定制</a></li>

                     <li class='dropdown'>

                         <a href="" class='dropdown-toggle' data-toggle='dropdown'>

                             <span>网站实例 <span class='caret'></span></span>

                         </a>

                         <ul class='dropdown-menu'>

                             <li><a href="">linux</a></li>

                             <li><a href="">linux</a></li>

                             <li><a href="">linux</a></li>

                             <li><a href="">linux</a></li>

                         </ul>

                     </li>

                 </ul>

                 <ul class='nav navbar-nav navbar-right'>

                     <li><a href="">Bootstrap中文网</a></li>

                 </ul>

             </div>

         </nav>

     </div>

 </body>

 </html>
 

bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何的更多相关文章

  1. bootstrap课程9 bootstrap如何实现动画加载进度条的效果

    bootstrap课程9 bootstrap如何实现动画加载进度条的效果 一.总结 一句话总结:在bootstrap进度条的基础上添加js(定时器),动态的改变进度条即可.很简单的. 1.路径导航是什 ...

  2. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  4. bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug，如何解决这个问题

    bootstrap课程13  bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题 一.总结 一句话总结:因为演示是正常的,所以检查演示效果的代码,把那一段相关的都弄过来就可以了 ...

  5. bootstrap课程6 bootstrap的表单注意事项有哪些

    bootstrap课程6 bootstrap的表单注意事项有哪些 一.总结 一句话总结: 1.bootstrap中的表单中的每一项是什么样的形式? div.form-group>label +i ...

  6. bootstrap课程4 bootstrap的css样式有哪些内容需要注意

    bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...

  7. bootstrap课程3 bootstrap中常用的排版样式有哪些

    bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...

  8. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...

  9. bootstrap课程1 bootstrap为什么这么火

    bootstrap课程1 bootstrap为什么这么火 一.总结 一句话总结:响应式,样式多,功能多. 1.bootstrap通过什么药实现响应式? 响应式web布局是让用户通过不同尺寸的浏览器都可 ...

随机推荐

  1. Linux 下实现虚拟光驱功能，查看iso文件内容

    1,创建挂载点(也可以不创建,直接用现有的目录) openSUSE:~ # mkdir /mnt/iso 2,挂载ISO文件至创建的挂载点 openSUSE:~ # mount -t iso9660 ...

  2. Juniper Alarms 灯红色报警处理

    1.2.5.1告警查看 root# run show system alarms 2 alarms currently active Alarm time Class Description 2015 ...

  3. How Javascript works (Javascript工作原理) (十一) 渲染引擎及性能优化小技巧

    个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制. DOMtree       ----|   |---->  RenderTree CSSOMtree  ----| ...

  4. express随笔

    Express 是node 第三方框架,框架的意义就在于能大大简化程序地开发.看一下Express是怎么简化node程序开发的. 1,用Express写一个hello world 程序,我们来体验一下 ...

  5. PHP获取上周五时间简单写法

    1.echo date('Y-m-d',strtotime('last friday')); 2.echo date("Y-m-d H:i:s",mktime(0, 0 , 0,d ...

  6. 开创学习的四核时代-iTOP-4412开发板开源硬件平台

    iTOP-4412开发板如今比較热门的开发板.笔者最近入了一套. 也推荐给初学ARM的朋友学习,4412开发板搭载三星Exynos四核处理器,配备1GB内存,4GB固态硬盘EMMC存储,兼具高速读取与 ...

  7. Cocos2d-x怎样控制动作速度

    基本动作和组合动作实现了针对精灵的各种运动和动画效果的改变.但这种改变速度匀速的.线性的.通过ActionEase及其的派生类和Speed 类我们能够使精灵以非匀速或非线性速度运动,这样看起了效果更加 ...

  8. ip6tables： ipv6-icmp vs icmp

    ip6tables: ipv6-icmp vs icmp资料来源 https://www.jethrocarr.com/2013/02/09/ip6tables-ipv6-icmp-vs-icmp/I ...

  9. Mysql主从级联复制

    场景1 如果主节点已经运行了一段时间,且有大量数据时,如何配置并启动slave节点 通过备份恢复数据至从服务器· 复制起始位置为备份时,二进制日志文件及其POS: Mater 设置 1) 修改配置文件 ...

  10. Windows共享上网的详细设置

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在Windows环境下在A和B在同一个局域网上,A机子可以上网,B机子可以通过A机子可以通过设置的网络共享来上网.其中 ...