<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>登录界面</title>

    <!--01.引入需要的css样式文件-->

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

    <!--02.引入我们的jQuery库-->

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

    <!--03.引入bootstrap的js库-->

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

</head>

<body>

<!--导航菜单 默认的高度是50px navbar-fixed-top 始终位于网页的头部-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <!--设置文字不显示时候的标签-->

    <div class="navbar-header">

        <!--这里网页中也可以设置成一个图片  但是 需要设置图片的大小-->

        <a class="navbar-brand">请选择姓名</a>

        <button class="navbar-toggle" type="button" data-toggle="collapse"

                data-target=".navbar-collapse">

            <!--书写 横线-->

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

    </div>

    <div class="collapse navbar-collapse">

        <!-- navbar-nav  这是我们的li左浮动-->

        <ul class="nav navbar-nav">

            <li><a href="#">小强</a></li>

            <li><a href="#">小红</a></li>

            <li><a href="#">小白</a></li>

        </ul>

        <!--书写登录  注册  搜索框-->

        <div class="navbar-form navbar-right">

            <a href="#">登录</a>

            <a href="#">注册</a>

            <input type="text" class="form-control" placeholder="请输入关键字">

            <button class="btn btn-primary">搜索</button>

        </div>

    </div>

</nav>

<!--为了不遮盖后面的内容  设置一个div高度为50px-->

<div  style="height: 50px"></div>

<!--container:我们的代码写在这个容器中   就会具有一些样式-->

<div class="container">

    <!--设置字体图标 class="glyphicon glyphicon-user"-->

     <h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1>

    <form class="form-horizontal">

         <div  class="form-group">

             <div class="col-md-5">

             <input type="text" class="form-control" placeholder="请输入用户名/email">

             </div>

         </div>

        <div  class="form-group">

            <div class="col-md-5">

                <input type="text" class="form-control" placeholder="请输入密码">

            </div>

        </div>

        <div  class="form-group">

            <div class="col-md-5">

                <input type="button" class="btn btn-primary" value="登录">

            </div>

        </div>

    </form>

    <!--验证能固定在网页的顶部-->

    <div  style="height: 1000px"></div>

</div>

</body>

</html>

效果图

bootstrap02导航菜单的更多相关文章

  1. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  2. php后管理分类导航菜单

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content=&quo ...

  3. HTML+CSS代码橙色导航菜单

    效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...

  4. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  5. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  6. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  7. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  8. 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  9. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

随机推荐

  1. SPRING IN ACTION 第4版笔记-第二章-002-@ComponentScan、@Autowired的用法

    一.@ComponentScan 1. @Configuration //说明此类是配置文件 @ComponentScan //开启扫描,会扫描当前类的包及其子包 public class CDPla ...

  2. Hibernate：1对1关系总结。

    QQ和QQ空间是1对1关系:配置如下 一.主键关联,双方共同维护表关系,以主键关联 public class QQ { private Long id; private QQZone zone; } ...

  3. maven 搭建企业级web项目

    就看这篇文章了:http://www.cnblogs.com/quanyongan/archive/2013/05/28/3103243.html

  4. ICMP 实现

    以下代码取自 kernel- . [数据结构] struct icmp_control { void (*handler)(struct sk_buff *skb); //icmp处理函数,根据icm ...

  5. 【HDOJ】2844 Coins

    完全背包. #include <stdio.h> #include <string.h> ], c[]; int n, m; ]; int mymax(int a, int b ...

  6. Three ways to do WCF instance management

    Three ways to do WCF instance management (Per call, Per session, and Single). IntroductionVery often ...

  7. 【Node】package.json

    npm的package.json中文文档https://github.com/ericdum/mujiang.info/issues/6

  8. CentOS升级内核的方法

    升级前的内核版本为:2.6.32-431.el6.x86_64 升级后的内核版本为:3.10.101-1.el6.elrepo.x86_64 升级方法: 1.导入key rpm --import ht ...

  9. 最佳化常用测试函数 Optimization Test functions

    http://www.sfu.ca/~ssurjano/optimization.html The functions listed below are some of the common func ...

  10. FZU 2212 Super Mobile Charger 第六届福建省赛

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=2212 题目大意: 现在有n个手机,一个电量为m%(百分之m)的万能充电宝 然后输入n个手机的现有电量(百分之a ...