<!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. hdu 3183 rmq+鸽巢原理

    题目大意: 给你一个数字字符串序列,给你要求删掉的数字个数m,删掉m个数使的剩下的数字字符串的之最小.并输出这个数字: 基本思路; 这题解法有很多,贪心,rmq都可以,这里选择rmq,因为很久没有写r ...

  2. mssql 动态表名，游标

    ALTER PROCEDURE [dbo].[ken_overtime_check](@p_use_code nvarchar(100),@p_table_name nvarchar(1000)) A ...

  3. springmvc中拦截器配置格式

    对于springmvc,有两种方式配置拦截器. 一是实现HandlerInterceptor接口,如 public class MyInterceptor1 implements HandlerInt ...

  4. This MySqlConnection is already in use

    项目中类似于以下的代码,实际的代码要更复杂,DbContext是依赖注入的: 报错如下: This MySqlConnection is already in use. See https://fl. ...

  5. 如何设置Fiddler来拦截Java代码发送的HTTP请求，进行各种问题排查

    我们使用Java的RestTemplate或者Apache的HTTPClient编程的时候,经常遇到需要跟踪Java 代码发送的HTTP请求明细的情况.和javascript代码在浏览器里发送请求可以 ...

  6. SpringMvc处理模型数据（也就是从数据库中查询出来的数据放到请求域中）

    这讲的是从数据库中查询到的数据,存放到请求域中.然后页面上直接可以从请求域中获取值. 有4种方式: 1):ModelAndView   是作为一个对象. /** * 目标方法的返回值可以是 Model ...

  7. 查看SQL Server被锁的表以及如何解锁【转】

    锁定数据库的一个表的区别  SELECT * FROM table WITH (HOLDLOCK) 其他事务可以读取表,但不能更新删除  SELECT * FROM table WITH (TABLO ...

  8. Linux:主设备号和次设备号

    http://www.linuxidc.com/Linux/2011-03/33863.htm     Linux的设备管理是和文件系统紧密结合的,各种设备都以文件的形式存放在/dev目录下,称为设备 ...

  9. Tomcat安装后修改路径方法

    tomcat+mysql+jdk 本地已经安装tomcat.mysql.jdk服务,需要更改安装目录由D盘改为C盘,方法如下 一.停止tomcat.mysql服务 二.安装文件由D盘拷贝到C盘,原D盘 ...

  10. mockito测试入门学习

    一.什么是mock测试,什么是mock对象? 先来看看下面这个示例: 从上图可以看出如果我们要对A进行测试,那么就要先把整个依赖树构建出来,也就是BCDE的实例. 一种替代方案就是使用mocks 从图 ...