<!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. Vue中 let 关键字

    let es6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 不存在变量提升 var命令会发生”变量提升“现象,即变量可以在声明之前使用,值 ...

  2. 4412 Linux设备总线

    总线_设备_驱动注册流程详解 注册流程图 • 设备一般都需要先注册,才能注册驱动– 现在越来越多的热拔插设备,反过来了.先注册驱动,设备来了再注册 设备 • 本节使用的命令– 查看总线的命令#ls / ...

  3. JAVA(JDK,JRE)更改目录安装及环境变量配置

    重温一下 JAVA(JDK,JRE)更改目录安装及环境变量配置 https://jingyan.baidu.com/article/e2284b2b5b7ae5e2e7118d11.html 备注:随 ...

  4. python中join（）函数的用法

    join()函数 语法:  'sep'.join(s) 参数说明 sep:分隔符.可以为空 s:要连接的元素序列.字符串.元组.字典 上面的语法即:以sep作为分隔符,将s所有的元素合并成一个新的字符 ...

  5. wndr4300刷任意系统及刷回官方原厂系统

    4300是目前性价比比较高的可玩路由器了,如果要买的话要买v1版本的,目前卖的都是v2,v2刷不了第三方系统. 注意:如果带宽低于50M,可以随便刷第三方系统玩,如果高于50M的带宽或者想组建千兆局域 ...

  6. Maven之自定义pom类型的基础项目

    摘要:在当前的软件开发场景中,大都是通过maven管理项目,而如果使用maven的话,其实也会有很多问题,比如项目中依赖的版本管理就是一个很头疼的事,如果一个项目中有很多人同时开发那么这就很可能造成大 ...

  7. 回复git@vger.kernel.org的注意事项

    比如回复这封邮件 https://public-inbox.org/git/db2dcf54-8b1c-39b1-579c-425ef158c6a1@kdbg.org/ Reply instructi ...

  8. 信息安全-攻击-XSRF：XSRF/CSRF 攻击

    ylbtech-信息安全-攻击-XSRF:XSRF/CSRF 攻击 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Ses ...

  9. feignClient传参（参数为对象类型）的一个坑

    客户端 @RequestMapping(value = "/friendCircleComment/comment",method = RequestMethod.POST) R ...

  10. 用 Flask 来写个轻博客 (19) — 以 Bcrypt 密文存储账户信息与实现用户登陆表单

    目录 目录 前文列表 修改 User Model Flask Bcrypt 将 Bcrypt 应用到 User Model 中 创建登陆表单 前文列表 用 Flask 来写个轻博客 (1) - 创建项 ...