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. codeforces 710D Two Arithmetic Progressions(线性同余方程)

    题目链接: http://codeforces.com/problemset/problem/710/D 分析:给你两个方程 a1k + b1 and a2l + b2,求在一个闭区间[L,R]中有多 ...

  2. 昼猫笔记 从此告别复杂代码--JavaScript

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...

  3. Ubuntu 16.04安装mysql （连接）

    1.安装mysql sudo apt-get install mysql-server 注:若出现依赖问题安装失败,先执行以下命令sudo apt-get install -f 2.安装过程中会输入密 ...

  4. 洛谷——P1027 Car的旅行路线

    https://www.luogu.org/problem/show?pid=1027#sub 题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于 ...

  5. Dojo Chart之经常使用统计图

    非常多做web的都知道,在非常多web系统中会涉及到一些统计图.比如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都非常熟悉的,jquery的highcharts就能搞定全部的涉及到统计图 ...

  6. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  7. ios代理的使用，正向传值，逆向传值

    #import <UIKit/UIKit.h> #import "SubViewController.h" @interface ViewController : UI ...

  8. uva725（除法）

    Description Write a program that finds and displays all pairs of 5-digit numbers that between them u ...

  9. 如何动态改变audio的播放的src

    如何动态改变audio的播放的src 一.总结 一句话总结:js方式在请求外部网站的时候行,php方式在请求内外部资源都行.因为php走在js前面,所以问题可以从php方面想办法. 1.如何使用js控 ...

  10. Java 关于运算结果

    今天发现一个自己的一个知识误区 原来有些自己以为会发生异常的运算,并没有异常发生,只要运算符两端存在至少一个浮点数 比如: public class Demo { /** * @param args ...