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. Web测试要点 做移动端的测试，也做web端的测试，甚至后面桌面端的测试和后台的测试也做了，基本上把我们产品各个端都玩了一轮

    Web测试要点 一.功能测试 1.链接测试 (1).测试所有链接是否按指示的那样确实链接到了该链接的页面:  (2).测试所链接的页面是否存在:  (3).保证Web应用系统上没有孤立的页面(所谓孤立 ...

  2. Swift学习笔记(1)--基本语法

    1.分号; 1>Swift不要求每个语句后面跟一个分号作为语句结束的标识,如果加上也可以,看个人喜好 2>在一行中写了两句执行语句,需要用分号隔开,比如 let x = 0; printl ...

  3. ArcGIS engine中Display类库 （局部刷新）

    转自原文 ArcGIS engine中Display类库 (局部刷新) Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这个类库 ...

  4. 整合struts2+spring+hibernate

     一.准备struts2+spring+hibernate所须要的jar包:        新建web项目并将jar包引入到project项目中. 二.搭建struts2环境        a.在 ...

  5. Android插件化（二）：使用DexClassLoader动态载入assets中的apk

    Android插件化(二):使用DexClassLoader动态载入assets中的apk 简单介绍 上一篇博客讲到.我们能够使用MultiDex.java载入离线的apk文件.须要注意的是,apk中 ...

  6. SQL查询表中的用那些索引

    方法1. 使用系统表   -- 查询一个表中的索引及索引列 USE AdventureWorks2008 GO SELECT indexname = a.name , tablename = c. n ...

  7. js -- fileData 实现文件断点续传

    前端实现文件的断点续传 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用sl ...

  8. 基于Linux平台Softimage XSI 演示

     2009年底上映的<阿凡达>是电影特效的巅峰之作,就在本月初上映的变形金刚3每次观看之后看得眼花缭乱总能让我热血沸腾,要是自己能做出那样的特效该多好,Linux下研究Maya已经有一段日 ...

  9. DG archive gap

    什么是archive gap Archive Gap就是standby端日志应用的过程中丢失的一段范围的redo.典型的发生在standby端不能接收primary的redo信息或者接收后不能应用这些 ...

  10. 从excel 获取内容 模块：xlrd

    import xlrd # 获取表的对象 excel = xlrd.open_workbook(‘a.excel’) # 获取所有excel里的所有表 table_list = excel.sheet ...