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. sql中的 SET QUOTED_IDENTIFIER OFF、SET ANSI_NULLS ON

    代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...

  2. 将本地的代码上传到网上SVN库

    使用VisualSVN Server创建版本库: https://jingyan.baidu.com/article/db55b609f6aa724ba20a2f6c.html 最详细的教程: htt ...

  3. Eclipse如何新建一个tomcat_server发布web项目

    方法/步骤     通过Eclipse打开一个正在开发阶段的java的web项目,没有项目的,只是为了学习的话,可以新建一个测试的java的web项目即可.在功能窗口找到如图所示的Servers窗口, ...

  4. 服务器无法远程管理客户端”计算机配置"解决方法

    1.确认是否可ping 通 如无法ping通, 在入门规则中找到“文件和打印机共享(回显请求-ICMPv4-In)”,设定为启用(配置文件为:域) 2. 打开139端口 1.2在防火墙中设置如下:

  5. 利用Python网络爬虫抓取微信好友的签名及其可视化展示

    前几天给大家分享了如何利用Python词云和wordart可视化工具对朋友圈数据进行可视化,利用Python网络爬虫抓取微信好友数量以及微信好友的男女比例,以及利用Python网络爬虫抓取微信好友的所 ...

  6. ZOJ 3175 Number of Containers 分块

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3216 乱搞的...watashi是分块做的...但我并不知道什么是分块...大 ...

  7. gitlab-ce-11.0.1 安装及汉化

    1.添加gitlab源(我这里使用了清华大学的源)cat <<EOF> /etc/yum.repos.d/gitlab-ce.repo[gitlab-ce]name=gitlab-c ...

  8. CSUOJ 1551 Longest Increasing Subsequence Again

    1551: Longest Increasing Subsequence Again Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: 75  Solved ...

  9. u盘安装14.04ubuntu系统

    最近在安装ubuntu 14.04系统,总结了下安装的方法,记录如下 1.下载ubuntu 14.04 iso文件,下载地址 http://www.ubuntu.com/download/deskto ...

  10. 小米开源文件管理器MiCodeFileExplorer-源码研究(9)-入口分析

    AndroidManifest.xml是Android应用程序最重要的配置文件. 入口文件和intent-filter <application android:icon="@draw ...