<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>实战</title>

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

		<style>

		.jumbotron {

  padding :50px 180px;

}

		</style>

	</head>

	<body>

		<nav class="navbar navbar-default .navbar-fixed-top ">

  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <a class="navbar-brand" href="#">Project name</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>

        <li><a href="#">About</a></li>

         <li><a href="#">Contact</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

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

        <li><a href="#">Default</a></li>

        <li><a href="#">Static top</a></li>

        <li><a href="#">Fixed top</a></li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

		 <div class="jumbotron">

        <h1>Navbar example</h1>

        <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.

To see the difference between static and fixed top navbars, just scroll.</p>

        <p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo</a></p>

      </div> 

		 <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>

		 <script type="text/javascript" src="js/bootstrap.min.js" ></script>

	</body>

</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. poj 2505 乘法博弈论

    转自:http://hzwer.com/1921.html 题目大意: 题意:Stan从1开始,可以乘上2~9中任何一个数,Ollie也如此操作,只到某个人本回合的操作超过N为之..1<N< ...

  2. Matlab中利用null函数解齐次线性方程组

    摘自:http://blog.csdn.net/masibuaa/article/details/8119032 有齐次线性方程AX=0,且rank(A)=r<n时,该方程有无穷多个解, 可以用 ...

  3. ROS环境下使用Wireshark抓包(网桥)

    在ROS的管理工具>数据包探测设置里>常规接口选为LAN,数据流>数据流启用>服务器:Wireshark电脑的IP,筛选> IP选要抓包的IP地址 然后在Wireshar ...

  4. DM9000网卡驱动深度分析

    一.dm9000_porbe函数分析 不同于u-boot代码,tq2440中的DM9000更加复杂,需要分析的点也很多: /* * Search DM9000 board, allocate spac ...

  5. 超全Altium Designer16 总结--Altium Designer

    原址:http://blog.csdn.net/qq_29350001/article/details/52199356 以前是使用DXP2004来画图的,后来转行.想来已经有一年半的时间没有画过了. ...

  6. 多任务Multitask Learning

    一次只学习一个任务,大部分机器学习都属于单任务学习. 多任务学习:把多个相关的任务放在一起学习,同时学习多个任务. 对于复杂的问题,可以分解为简单的相互独立的子问题来解决,然后再合并结果,得到最初复杂 ...

  7. txt操作

    C#解决读写包含汉字的txt文件时乱码的问题 C#解决读写包含汉字的txt文件时乱码的问题 当我们用System.IO.StreamReader读取包含汉字的txt文件时,经常会读出乱码(Stream ...

  8. C# 后台报错输出到日志

    1.C# 方法 /// <summary> /// 异常处理 /// </summary> /// <returns></returns> public ...

  9. 信息安全-威胁防御系统-Fortinet：Fortinet

    ylbtech-信息安全-威胁防御系统-Fortinet:Fortinet Fortinet 是多层威胁防御系统的创新者和先锋.该系统能够为业务通信提供最佳安全.优秀性能和低总体占用成本. Forti ...

  10. (67) c# 序列化

    二进制序列化器 xml序列化器 数据契约序列化器