<!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. 【HDOJ】4183 Pahom on Water

    就是一个网络流.red结点容量为2,查看最大流量是否大于等于2.对于条件2,把边反向加入建图.条件1,边正向加入建图. /* 4183 */ #include <iostream> #in ...

  2. 【HDOJ】2955 Robberies

    01背包.将最大金额作为容量v.概率做乘法. #include <stdio.h> #include <string.h> #define mymax(a, b) (a> ...

  3. How to hide TabPage from TabControl

    No, this doesn't exist. You have to remove the tab and re-add it when you want it. Or use a differen ...

  4. Hadoop RPC源码阅读-服务端Server

    Hadoop版本Hadoop2.6 RPC主要分为3个部分:(1)交互协议 (2)客户端(3)服务端 (3)服务端 RPC服务端的实例代码: public class Starter { public ...

  5. Java NIO原理及实例

    Java NIO是在jdk1.4开始使用的,它既可以说成“新I/O”,也可以说成非阻塞式I/O.下面是java NIO的工作原理: 1. 由一个专门的线程来处理所有的 IO 事件,并负责分发. 2. ...

  6. Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息

    跨平台这种事情不管多NB, 总要有些与原生系统交互的方法, 比如  Unity3D与iOS消息交互方法. 一: 建立一个空的Unity工程. File -->  New Project 二: 编 ...

  7. C# Protect the Password inside a TextBox ZZ

    If the Text property is called, it will send an WM_GETTEXT message, so it will surely be an internal ...

  8. 在windows下编辑shell脚本注意点

    编辑脚本是直接在windows下写的,并没有使用特定的编辑器或者其他工具,所以很有可能出现一些莫名其妙的异常,这些错误是我们眼睛看不到的,遇到这个情况,例如如下异常或者提示语法错误  Java代码  ...

  9. Eclipse SVN插件安装与使用（2014.12.27——by小赞）

    安装参考:http://www.cnblogs.com/xdp-gacl/p/3497016.html 用法参考:http://blog.sina.com.cn/s/blog_8a3d83320100 ...

  10. 转载:Java多线程中join方法的理解

    转载自:http://uule.iteye.com/blog/1101994 thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A ...