1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>实战</title>
  6. 		<link rel="stylesheet" href="css/bootstrap.min.css" />
  7. 		<style>
  8. 		.jumbotron {
  9.   padding :50px 180px;
  10. }
  11. 		</style>
  12. 	</head>
  13. 	<body>
  14. 		<nav class="navbar navbar-default .navbar-fixed-top ">
  15.   <div class="container">
  16.     <!-- Brand and toggle get grouped for better mobile display -->
  17.     <div class="navbar-header">
  18.  
  19.       <a class="navbar-brand" href="#">Project name</a>
  20.     </div>
  21.  
  22.     <!-- Collect the nav links, forms, and other content for toggling -->
  23.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  24.       <ul class="nav navbar-nav">
  25.         <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
  26.         <li><a href="#">About</a></li>
  27.          <li><a href="#">Contact</a></li>
  28.         <li class="dropdown">
  29.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  30.           <ul class="dropdown-menu">
  31.             <li><a href="#">Action</a></li>
  32.             <li><a href="#">Another action</a></li>
  33.             <li><a href="#">Something else here</a></li>
  34.             <li role="separator" class="divider"></li>
  35.             <li><a href="#">Separated link</a></li>
  36.             <li role="separator" class="divider"></li>
  37.             <li><a href="#">One more separated link</a></li>
  38.           </ul>
  39.         </li>
  40.  
  41.       </ul>
  42.  
  43.       <ul class="nav navbar-nav navbar-right">
  44.         <li><a href="#">Default</a></li>
  45.         <li><a href="#">Static top</a></li>
  46.         <li><a href="#">Fixed top</a></li>
  47.       </ul>
  48.     </div><!-- /.navbar-collapse -->
  49.   </div><!-- /.container-fluid -->
  50. </nav>
  51. 		 <div class="jumbotron">
  52.         <h1>Navbar example</h1>
  53.         <p class="lead">This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
  54.  
  55. To see the difference between static and fixed top navbars, just scroll.</p>
  56.         <p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo</a></p>
  57.       </div> 
  58.  
  59. 		 <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
  60. 		 <script type="text/javascript" src="js/bootstrap.min.js" ></script>
  61. 	</body>
  62. </html>

　　

效果：

Bootstrap 网页1的更多相关文章

  1. ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化

      由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些, 今天我用bootstrap把之前做的显示表格进行了一下美 ...

  2. Bootstrap 网页乱码

    问题:今天早上在实践bootstrap的时候,用EditPlus写代码,标签中包含了中文.在浏览器解析的时候中文部分生成的乱码.但是网页部分已经声明了使用utf-8的编码方式. 解决:网页字体正常显示 ...

  3. Bootstrap 网页实例

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...

  4. Bootstrap 网页2

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  5. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  6. bootstrap首页制作

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...

  7. bootstrap导航条

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...

  8. Bootstrap 框架、插件

    Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自 ...

  9. 如何使用bootstrap框架

    Bootstrap是前端工程师比较常用的框架.插件,根据它的定义,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...

随机推荐

  1. find命令进阶用法（一）

    -cmin n: 查找 exactly n 分钟前内容或属性被最后修过的文件 -cnewer file: 查找内容或属性的最后修改时间晚于file文件的文件 -ctime n: 查找 **n*24** ...

  2. DELPHI FMX IOS模拟器调试时出现No SDKs could be found

    解决办法: 在OSX里打开XCODE,​点击XCODE菜单->​Perferences->Locations​在Commond  Line Tools选择XCODE ​

  3. EAM(Enterprise Asset Management)企业资产管理系统

    EAM (Enterprise Asset Management)的缩写,EAM系统是指企业资产管理系统. EAM系统是在资产比重较大的企业,在资产建设.维护中减少维护成本,提高资产运营效率,通过现代 ...

  4. java配置和tomcat安装

    原文: https://www.cnblogs.com/lwjboke/p/7089126.html 下载: jdk历史版本 下载地址: http://www.oracle.com/technetwo ...

  5. 31 July

    P1005 矩阵取数游戏 高精度不能更坑-- #include <cstdio> #include <cstring> struct INT { long long h, l; ...

  6. [CSP-S模拟测试]:z（模拟+map+小根堆）

    题目背景 $\frac{1}{4}$遇到了一道水题,$eooooo$完全不会做,于是去请教小$D$.结果小$D$已经去了阿塞拜疆,于是,$\frac{1}{4}$只好来问你,这道题是这样的: 题目描述 ...

  7. GIT安装包备用地址

    如果官网下载被禁止,可在下面这个地址下载,速度飞快 http://www.wmzhe.com/soft-38801.html#download

  8. Spring中Bean的作用域和生命周期

    作用域的种类 Spring 容器在初始化一个 Bean 的实例时,同时会指定该实例的作用域.Spring3 为 Bean 定义了五种作用域,具体如下. 1)singleton 单例模式,使用 sing ...

  9. 20175126《Java程序设计》第十周学习总结

    # 20175126 2016-2017-2 <Java程序设计>第十周学习总结 ## 教材学习内容总结 - 本周学习方式主要为手动敲代码并理解内容学习. -本周学习十二章,主要内容如下: ...

  10. php中class类文件引入方法汇总

    在项目中  总是会用到类文件引入的操作,在此简单总结下: 方法一: 使用  include,require,include_once,require_once. 其中:*_once  once意为曾经 ...