<!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. webRTC脱坑笔记（四）— windows下Nginx对Node服务的反向代理

    Nginx反向代理 1.什么是反向代理 当我们有一个服务器集群,并且服务器集群中的每台服务器的内容一样的时候,同样我们要直接从个人电脑访问到服务器集群服务器的时候无法访问,必须通过第三方服务器才能访问 ...

  2. 【leetcode】1020. Number of Enclaves

    题目如下: Given a 2D array A, each cell is 0 (representing sea) or 1 (representing land) A move consists ...

  3. Bootstrap的本地引入

    今天用前端框架时选择了Bootstrap,然后东西都下好了本地就是引入不进去. 查了一下发现必须jquery要在BootStrap之前引入,然后我更改了引入顺序,发现还是不行 <script s ...

  4. favicon.ico设置

    <link rel="shortcut icon" href="media/image/favicon.ico" />

  5. 趣头条基于 Flink 的实时平台建设实践

    本文由趣头条实时平台负责人席建刚分享趣头条实时平台的建设,整理者叶里君.文章将从平台的架构.Flink 现状,Flink 应用以及未来计划四部分分享. 一．平台架构 1.Flink 应用时间线 首先是 ...

  6. IDEA不认识jstl

    解决方案:一.在pom.xml文件查看是否<packaging>的值是否是war  二:在jsp文件中加上这句话. <%@page isELIgnored="false&q ...

  7. [CF852H]Bob and stages

    题意:给出平面上\(n\)个点,要求选出\(k\)个点,使得这些点形成一个凸包,且凸包内部没有点,求最大面积.无解输出\(0\). 题解:枚举凸包最左的点\(p\),删除所有在\(p\)左边的点,然后 ...

  8. [杂题]:C/c（二分答案）

    题目传送门(内部题54) 输入格式 第一行一个整数表示$n$.第二行$n$个整数表示初始序列.(这行原题没有,是我加的)接下来$2n$行每行两个整数,分别表示$X_i,Y_i$.数据保证至少存在一种方 ...

  9. sudo su 和sudo -s的区别

    sudo su 和 sudo -s都是切换到root用户,不同的是: sudo su 环境用的是目标用户(root)的环境 sudo -s 环境用的是当前用户本身的环境

  10. java 字符串的操作方法

    方法 作用 范例   indexOf() 找到第一个字符出现的位置,()以下标来判断,返回的是字符所在的下标 int  num = String.indexOf("字符")   l ...